javascript - tracker - google tag manager

La carga de Google Analytics después de cargar la página agregando el script en la cabecera no siempre funciona

Question

En la UE, existe una ley de cookies que requiere que cargue scripts de terceros después de que el usuario exprese su consentimiento, haciendo clic, desplazándose o navegando, por ejemplo. Entonces, cargo 3 scripts ejecutando una función que se llama después de cargar el documento. Este es el código:

El problema es que no siempre funciona, ni siempre falla. Veo sesiones y actividad, pero también sé a ciencia cierta que hay visitas que no activan los scripts porque cuando lo probé yo mismo en otras computadoras, no toda la actividad se guardó en análisis.

¿Qué debo solucionar en la función para que funcione todo el tiempo?

Answer 1

¿Podría intentar agregar lo siguiente en lugar de una llamada a .innerHTML()

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

Por favor, avísame si eso funciona.

Answer 2

Aquí está mi elección sobre el problema. La solución simplemente corrige los scripts predeterminados para devolver la función, que luego agrega la etiqueta del script solo después de que se haya otorgado el consentimiento. Echar un vistazo:

// 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...

Cada uno de los cargadores puede estar en su propia etiqueta de script pero asegúrese de ordenar esas etiquetas.

Answer 3

En lugar de agregar la secuencia de comandos analítica completa, puede incluirla siempre pero eliminar la siguiente línea:

ga("send", "pageview");

Luego, cuando el usuario acepta las cookies ... active la función de análisis que envía la baliza usando la misma línea de arriba. Analytics no envía ningún dato a menos que se le indique específicamente. Esa sería la forma más lógica de hacer lo que está intentando.

Answer 4

Otra respuesta parece estar apuntando a ga.js, que es legado, mientras que su pregunta parece estar orientada a analytics.js (actual).

Estudiando un poco el fragmento de analytics.js puede encontrar fácilmente una respuesta (a continuación, con el formato más bonito):

(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");

El truco es fácil: Google crea una var global GoogleAnalyticsObject que es una cadena que representa el nombre de la GoogleAnalytics global. Puedes ver que por defecto es "ga" .

Por lo tanto, al cargar debe crear dos vars globales: GoogleAnalyticsObject, que es una cadena y una ventana [GoogleAnalyticsObject] que es la función (que solo acumula eventos, esta función se reemplaza cuando se carga la biblioteca), supongo. Luego, cuando su usuario acepte las cookies, puede cargar la biblioteca y listo :)

Answer 5

Pensando en lo que hace tu código, esta función:

1. Crea un elemento <script> lleno de cadenas
2. Se agrega al <head>

Tenga en cuenta que <head> se supone que afaik debe cargarse solo en la carga inicial. Dependiendo de la implementación del navegador, etc., puede darse el caso de que algunos de los navegadores de sus visitantes ignoren la etiqueta <script> que agrega una vez que se completa la carga de la página.

Si entiendo cuándo quieres hacer lo correcto quieres:

1. Para cargar la página sin los scripts de seguimiento.
2. Mostrar un consentimiento modal / emergente
3. En "Aceptar", haga clic en activar esta función sin recargar la página.

nota: muchos sitios web de la UE vuelven a cargar la página después del consentimiento de la cookie porque agregan las etiquetas <script> con seguimiento a la página mediante la representación de backend. A menudo, al hacer clic en "Estoy de acuerdo con las cookies" almacenan una cookie de tipo agreed: true que cambia lo que la página web envía a su servidor.

Si no te importa recargar:

1. Establecer una cookie cuando el usuario esté de acuerdo.
2. Recargar la pagina
3. Haga que su backend (php / node / ruby ​​/ whatever) agregue una etiqueta de script basada en esta cookie

Si te importa

Cambie su función para ejecutar los códigos de seguimiento en lugar de agregarlos al DOM.

Solo mire los códigos de seguimiento y divídalos en un código fácil de leer. Por ejemplo, el código Ga es en realidad simplemente:

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);

Y entonces

function addTrackers() {

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

}

Answer 6

Puedes intentar usar esta función que me funciona bien:

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;
            }

Answer 7

Si echa un vistazo a this publicación, puede modificarla ligeramente para lograr lo que desea:

<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>

Luego simplemente llame a loadGoogleAnalytics() cuando el usuario esté de acuerdo con la pantalla de Uso de cookies

Answer 8

$(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);
        }
    });