Загрузка Google Analytics после загрузки страницы путем добавления script в голову не всегда работает

В ЕС существует закон cookie, который требует, чтобы вы загружали сторонние скрипты после того, как пользователь выражает согласие, например, щелкая, прокручивая или перемещаясь. Поэтому я загружаю 3 скрипта, выполняя функцию, вызываемую после загрузки документа. Это код:

Проблема в том, что она не всегда работает и не всегда терпит неудачу. Я вижу сеансы и активность, но я также знаю, что есть посещения, которые не запускают сценарии, потому что, когда я сам тестировал их на нескольких других компьютерах, не вся активность была сохранена в аналитике.

Что мне следует исправить в функции, чтобы она работала все время?

Ответ 1

$(document).ajaxComplete(function() {
        var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXXXX-X']);
      _gaq.push(['_trackPageview']);

       var loadGoogleAnalytics = function(){
         var ga = document.createElement('script');
           ga.type = 'text/javascript';
           ga.async = true;
           ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

           var s = document.getElementsByTagName('script')[0];
           s.parentNode.insertBefore(ga, s);
        }
    });

Ответ 2

Вы можете попробовать использовать эту функцию, которая отлично работает для меня:

function loadGoogleAnalytics(trackingId) {
                var deferred = $q.defer();

                function loadScript() {
                    var scriptId = 'google-analytics';

                    if (document.getElementById(scriptId)) {
                        deferred.resolve();
                        return;
                    }

                    var s = document.createElement('script');
                    s.id = scriptId;
                    s.innerText = "(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', '" + trackingId + "', 'auto');";

                    // most browsers
                    s.onload = initGA();
                    // IE 6 & 7
                    s.onreadystatechange = function () {
                        if (this.readyState == 'complete') {
                            initGA();
                        }
                    }

                    document.getElementsByTagName('head')[0].appendChild(s);
                }

                $window.initGA = function () {
                    deferred.resolve();
                }

                loadScript();

                return deferred.promise;
            }

Ответ 3

Если вы посмотрите этот пост, вы можете немного изменить его, чтобы добиться того, чего вы хотите:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

   var loadGoogleAnalytics = function(){
     var ga = document.createElement('script');
       ga.type = 'text/javascript';
       ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(ga, s);
    }
</script>

Затем просто вызовите loadGoogleAnalytics() всякий раз, когда пользователь соглашается с отображением использования Cookie

Ответ 4

Другой ответ, похоже, нацелен на ga.js, который является наследием, тогда как ваш вопрос, похоже, ориентирован на analytics.js(текущий).

Изучая фрагмент analytics.js, вы можете легко найти ответ (ниже, отформатирован с более красивым):

(function(i, s, o, g, r, a, m) {
  i["GoogleAnalyticsObject"] = r;
  (i[r] =
    i[r] ||
    function() {
      (i[r].q = i[r].q || []).push(arguments);
    }), (i[r].l = 1 * new Date());
  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m);
})(
  window,
  document,
  "script",
  "https://www.google-analytics.com/analytics.js",
  "ga"
);

ga("create", "UA-XXXXX-Y", "auto");
ga("send", "pageview");

Трюк прост: Google создает глобальный var GoogleAnalyticsObject, который представляет собой строку, представляющую имя глобальной GoogleAnalytics. Вы можете видеть, что по умолчанию это "ga".

Итак, при загрузке вам нужно создать два глобальных vars: GoogleAnalyticsObject, который является строкой и окном [GoogleAnalyticsObject], который является функцией (которая просто накапливает события, эта функция заменяется при загрузке библиотеки, я думаю). Затем, когда ваш пользователь принимает файлы cookie, вы можете загрузить lib, и все готово:)

Ответ 5

Не могли бы вы попытаться добавить следующее вместо вызова .innerHTML()

//...text above...
TheAnalyticsScript.text = ['ga-script-string', 'fb-script.string','hotjar.string'].join('\n');
$('body').append(TheAnalyticsScript);

Пожалуйста, дайте мне знать, если это сработает.

Ответ 6

Вот мой выбор проблемы. Решение просто исправляет сценарии по умолчанию для возврата функции, которая затем добавляет тег script только после получения согласия. Посмотрите:

// for GoogleAnalytics
var loadGA = (function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  i[r] = i[r] || function() {
      (i[r].q = i[r].q || []).push(arguments)
    },
    i[r].l = 1 * new Date();

  // call this function after receiving consent
  return function loadGA() {
    a = s.createElement(o),
      m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
  }
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

// for Facebook
window.fbAsyncInit = function() {
  FB.init({
    appId: 'your-app-id',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.10'
  });
  FB.AppEvents.logPageView();
};

var loadFB = (function(d, s, id) {
  //- call this function after receiving consent
  return function loadFB() {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }
}(document, 'script', 'facebook-jssdk'));

// for HotJar
var loadHJ = (function(h, o, t, j, a, r) {
  h.hj = h.hj || function() {
    (h.hj.q = h.hj.q || []).push(arguments)
  };
  h._hjSettings = {
    hjid: 1,
    hjsv: 5
  };

  return function loadHJ() {
    a = o.getElementsByTagName('head')[0];
    r = o.createElement('script');
    r.async = 1;
    r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
    a.appendChild(r);
  }
})(window, document, '//static.hotjar.com/c/hotjar-', '.js?sv=');

// finally when you receive the consent
function onConsentReceived() {
  loadGA();
  loadFB();
  loadHJ();
}

//- meanwhile you can continue using ga(), hj() whatever here...

Каждый из загрузчиков может быть в своем теге script, но убедитесь в упорядоченности этих тегов.

Ответ 7

Размышляя о том, что делает ваш код, эта функция:

Создает элемент <script>, заполненный строками
Добавляет его в <head>

Обратите внимание, что <head> - это афайк, который должен быть загружен только при начальной загрузке. В зависимости от реализации браузера и т.д. Может быть, что некоторые из ваших браузеров посетителей игнорируют тег <script>, который вы добавляете после завершения загрузки страницы.

Если я понимаю, что вы хотите сделать правильно, вы хотите:

Загрузка страницы без скриптов отслеживания
Показать согласие мода/всплывающее окно
В режиме "согласен" нажмите эту функцию без, чтобы перезагрузить страницу

Примечание: многие веб-сайты ЕС перезагружают страницу после согласования cookie, потому что они добавляют теги <script> с отслеживанием на страницу с использованием бэкэнд-рендеринга. Часто нажав "Я согласен с файлами cookie", они хранят cookie типа agreed: true, который изменяет веб-страницу, отправленную сервером.

Если вам не нужны перезагрузки:

Установить cookie, когда пользователь согласен
Обновить страницу
Добавьте ваш backend (php/ node/ruby /whatever) добавить тег script на основе этого файла cookie

Если вы заботитесь

Измените свою функцию для запуска кодов отслеживания вместо их добавления в DOM.

Просто посмотрите коды отслеживания и разделите их на легко читаемый код. Например, код Ga фактически просто:

var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.async = true
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

И затем

function addTrackers() {

// Execute the tracking things instead of adding them to the DOM

}

Ответ 8

Вместо добавления всей аналитики script вы можете включить ее всегда, но удалить следующую строку:

ga("send", "pageview");

Затем, когда пользователь принимает файлы cookie, запустите функцию аналитики, которая отправляет маяк, используя ту же строку выше. Аналитики фактически не отправляют какие-либо данные, за исключением случаев, когда им конкретно сообщается. Это был бы самый логичный способ сделать то, что вы пытаетесь сделать.