javascript - site - google tag manager

Explicación del código de Google Analytics

Question

¿Alguien puede explicar este código ''paso a paso'', ''línea por línea''? Me gustaría obtener más información sobre el código Asynch y cómo carga Google su script, cómo "ocultar" javascrippt de los usuarios (sé que no puedo ocultarlo, pero al menos hacer que sea algo así como Google, no mostrar todo el código en un archivo)

<script>
  (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'', ''UA-xxxxxxxx-x'', ''xxxxxx.com'');
  ga(''send'', ''pageview'');
</script>

Answer 1

El código está minificado. Usando http://jsbeautifier.org/ puedes revertir eso (ordenar) y hacerlo un poco más legible. Básicamente es una función pequeña que agrega otro javascript (www.google-analytics.com/analytics.js) a la dom usando el mismo protocolo, http o https.

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

Answer 2

El código se ha ejecutado a través de un minificador, y se ve así cuando está bastante impreso:

(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'', ''UA-xxxxxxxx-x'', ''xxxxxx.com'');
ga(''send'', ''pageview'');

Para saber exactamente qué es lo que hace, probablemente tengas que echar un vistazo a su archivo analytics.js, pero como es muy probable que también se lo minimice, no obtendrás mucho de él.

Si quieres hacer lo mismo, puedes usar un minificador de código como JSMin. Reemplaza cualquier espacio en blanco no escaneado y caracteres de nueva línea, entre otras cosas, para ayudar a reducir el ancho de banda.

Answer 3

En primer lugar, pasaría esto a través de un embellecimiento, por ejemplo, http://jsbeautifier.org/

 (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'', ''UA-xxxxxxxx-x'', ''xxxxxx.com'');
 ga(''send'', ''pageview'');

Después de eso vamos a evaluar el cierre

(function (i, s, o, g, r, a, m) {
...
 })(window, document, ''script'', ''//www.google-analytics.com/analytics.js'', ''ga'');

reemplazando cada uno de los parámetros nombrados: i, s, o, g, r con su window, document, ''script'', ''//www.google-analytics.com/analytics.js'', ''ga'' valores correspondientes window, document, ''script'', ''//www.google-analytics.com/analytics.js'', ''ga''

Tenga en cuenta que los parámetros a y m no tienen valores de entrada y son más parecidos a las variables de resultado.

Esto sería aproximadamente (sin preocuparse por el alcance variable, etc.) equivalente a

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

 ga(''create'', ''UA-xxxxxxxx-x'', ''xxxxxx.com'');
 ga(''send'', ''pageview'');

En resumen, lo que hace este código en esencia es que crea una nueva etiqueta de script con la línea:

a = document.createElement(''script''),

Luego encuentra la primera etiqueta de script

m = document.getElementsByTagName(''script'')[0];

Luego establece la etiqueta de script recién creada en la ejecución asincrónica (se puede obtener más información sobre la ejecución asincrónica en Descripción del código asíncrono en términos de Layman si lo necesita)

a.async = 1;

1 en la línea de arriba es equivalente a true , se usa 1 solo porque es más corto.

Después de eso, se establece el src de esta etiqueta de script

 a.src = ''//www.google-analytics.com/analytics.js'';

Tenga en cuenta que arriba no se especifica ningún protocolo (http o https) en la URL. Esto permitiría cargar el script en el protocolo actual del navegador.

Y, finalmente, se inserta antes de la primera etiqueta de secuencia de comandos, por lo que el navegador podría comenzar a cargarlo.

 m.parentNode.insertBefore(a, m)

Entonces para resumir :

1. Creamos una etiqueta de script
2. Lo configuramos para que cargue asincrónicamente async=true
3. Insertamos esta etiqueta de script, antes de la primera etiqueta de script en el documento

Detalles relacionados con Google Analytics.

 window[''ga''] = window[''ga''] || function () {
     (window[''ga''].q = window[''ga''].q || []).push(arguments)
 }, window[''ga''].l = 1 * new Date();

define la función global llamada ga que empuja sus argumentos en una matriz de cola (llamada q )

Luego con las líneas

 ga(''create'', ''UA-xxxxxxxx-x'', ''xxxxxx.com'');
 ga(''send'', ''pageview'');

empuja estos "eventos" en la matriz de la cola.

Cuando se carga la secuencia de comandos, se comprueba el valor de GoogleAnalyticsObject , que anteriormente se configuró para señalar el nombre de ga con la línea

 window[''GoogleAnalyticsObject''] = ''ga'';

Espero que esto ayude

Answer 4

Google ha publicado la versión no minificada de este código:

<!-- Google Analytics -->
<script>
/**
 * Creates a temporary global ga object and loads analytics.js.
 * Parameters o, a, and m are all used internally. They could have been
 * declared using ''var'', instead they are declared as parameters to save
 * 4 bytes (''var '').
 *
 * @param {Window}        i The global context object.
 * @param {HTMLDocument}  s The DOM document object.
 * @param {string}        o Must be ''script''.
 * @param {string}        g Protocol relative URL of the analytics.js script.
 * @param {string}        r Global name of analytics object. Defaults to ''ga''.
 * @param {HTMLElement}   a Async script tag.
 * @param {HTMLElement}   m First script tag in document.
 */
(function(i, s, o, g, r, a, m){
  i[''GoogleAnalyticsObject''] = r; // Acts as a pointer to support renaming.

  // Creates an initial ga() function.
  // The queued commands will be executed once analytics.js loads.
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  },

  // Sets the time (as an integer) this tag was executed.
  // Used for timing hits.
  i[r].l = 1 * new Date();

  // Insert the script tag asynchronously.
  // Inserts above current tag to prevent blocking in addition to using the
  // async attribute.
  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'');

// Creates a default tracker with automatic cookie domain configuration.
ga(''create'', ''UA-XXXXX-Y'', ''auto'');

// Sends a pageview hit from the tracker just created.
ga(''send'', ''pageview'');
</script>
<!-- End Google Analytics -->

https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

La explicación línea por línea de Zlatin sigue siendo válida.

Answer 5

i[''GoogleAnalyticsObject'']=r; Esto está asignando ''ga'' a la propiedad ''GoogleAnalyticsObject'' de ''window''

window[''ga''] = window[''ga''] || function(){
        (window[''ga''].q = window[''ga''].q || []).push(arguments)
    }, window[''ga''].l = 1 * new Date();

Esta parte asigna la propiedad ''ga'' de la ventana como una función (o ella misma si ya existe). La función luego asigna la propiedad q como una matriz vacía y le agrega todos los argumentos de funciones. A continuación, asigna a la propiedad l la marca de tiempo actual (se multiplica por 1 para forzarlo como un número entero).

Las siguientes líneas solo hacen una etiqueta de script y le asignan algunos atributos como source y async = true y luego agrega esta etiqueta de script al documento.