El fragmento del contenedor: secretos de GTM revelados

pero no lo he probado y ciertamente no lo recomiendo.

La segunda razón es easy: para maximizar la recopilación de datos, el fragmento debe ser lo primero que se carga cuando se representa el cuerpo de la página. Debido a que la biblioteca se carga de forma asincrónica, no hay ningún motivo para retrasarla. Por lo tanto, haga que se cargue como lo primero cuando se renderice el cuerpo, para que no corra el riesgo de perder ningún dato debido a elementos DOM lentos que retrasan la carga de la página.

Líneas 2 y 15

Podemos omitir las líneas 1 y 16, ya que son solo la etiqueta HTML SCRIPT, que envuelve el bloque de JavaScript.

(operate (w, d, s, l, i) {
...
})(window, doc, 'script', 'dataLayer', 'GTM-P8XR');

Para entender la primera línea, debemos mirar también la última línea. Este es un ejemplo de un función anónima autoinvocadora / autoejecutableo expresión de función inmediatamente invocada. hay algún debate sobre la semántica de qué término debes elegir, pero para este propósito es solo eso: semántica.

Básicamente, la línea 2 del fragmento declara una función anónima (no tiene nombre) con cinco parámetros. Estos parámetros se sirven a través de la llamada de función al last del bloque de funciones, que tiene, como debería, cinco argumentos.

La thought detrás de una expresión de función inmediatamente invocada es llamar a la función tan pronto como haya sido declarada. De eso tratan las líneas 2 y 15 del fragmento. La línea 2 declara una función que se llama en la línea 15, tan pronto como su navegador haya analizado el código de la función.

Los argumentos que se envían con la llamada a la función y se convierten en parámetros en la declaración (los parámetros están entre paréntesis) son los siguientes:

• ventana (w) – el ventana El objeto representa la ventana abierta en el navegador del usuario y todo lo que contiene (el modelo de objeto del documento, o DOM, por ejemplo).

• documento (d) – el documento el objeto es el nodo superior del árbol DOM; contiene todo el documento HTML

• ‘guión’ (s) – esta cadena se utiliza para cargar el gtm.js biblioteca (más sobre esto más adelante)

• ‘capa de datos’ (l) – esta cadena se utiliza para dar un nombre al objeto dataLayer; puede cambiar el nombre del objeto utilizado por GTM cambiando este valor

• ‘GTM-P8XR’ (yo) – este es el ID de su contenedor, que obtendrá del Administrador de etiquetas de Google

Línea 3

Si recuerda cuáles eran los parámetros y argumentos, esta línea se traduce como:

window('dataLayer') = window('dataLayer') || ();

Aquí, la función busca un objeto llamado capa de datos (o algo más si le cambió el nombre en los argumentos de la función) en el objeto de la ventana, que contiene todos los objetos de la página. Si encuentra uno, lo deja en paz. Si no encuentra uno, lo declara vacío. formación.

Esto es importante, porque a veces verás esto. declaración explícita del objeto dataLayer en la plantilla de página antes del fragmento del contenedor:

<script kind="textual content/javascript">
    dataLayer = ();
script>

La declaración explícita de dataLayer es útil si necesita que algunas variables de dataLayer estén disponibles lo antes posible en sus etiquetas GTM. Por ejemplo, si la etiqueta de vista de página requiere que exista alguna variable dataLayer (tal vez para una dimensión personalizada), es mejor declararla en la plantilla de página. antes el fragmento del contenedor:

<script>
    dataLayer = ({'writer': 'Simo Ahava'});
script>

Esta declaración explícita es lo que busca el código en la línea 3 del fragmento del contenedor. Si se encuentra la declaración explícita, se deja como está. Si no ha sido declarado, el El fragmento de contenedor crea el objeto dataLayer por usted..

Esto me lleva a un punto importante.

Si no declara explícitamente el objeto dataLayer, hágalo NO declaralo en tus etiquetas GTM o después del fragmento del contenedor. El contenedor crea la matriz dataLayer por usted y, si intenta declararla más adelante, terminará borrando la capa de datos unique, creada y utilizada por GTM. Después de que se haya creado dataLayer, su única interacción con él debe ser mediante el uso del empujar() método de la matriz (dataLayer.push({‘propiedad’: ‘valor’});).

Líneas 4 a 7

w(l).push({
    'gtm.begin': new Date().getTime(),
    occasion: 'gtm.js'
});

Esta es una parte muy importante de la funcionalidad del fragmento de contenedor.

Cuando el código llega a este punto, un capa de datos.push() La llamada está hecha. Dentro de las llaves hay un objeto literal. Los literales de objetos son objetos JavaScript, que contienen cualquier número de pares clave-valor (o propiedad-valor o valor-variable), a menudo en JSON (notación de objetos JavaScript). Estos objetos están entre llaves y empujados al last de la matriz dataLayer.

Si la mayor parte del párrafo anterior es una tontería para ti, no te culpo.

En pocas palabras, con un capa de datos.push()estás emprendedor un objeto con propiedades al last de la cola de dataLayer. Luego se puede acceder a estas propiedades en GTM.

Esta primera inserción, en las líneas 4 a 7 del fragmento del contenedor, contiene un objeto con las siguientes propiedades:

Entonces si alguna vez te has preguntado cuando etiquetas con {{evento}} es igual a gtm.js o {{url}} coincide con expresiones regulares.* que te despidan, es en este punto.

El gtm.inicio La propiedad recibe la hora precise (en milisegundos desde el 1 de enero de 1970) como valor. Brian Kuhn de Google explicó que esto se utiliza para calcular el tiempo de carga de gtm.js y la tasa de aciertos de caché de la solicitud, así que no se preocupe por eso.

Líneas 8 a ten

var f = d.getElementsByTagName(s)(0),
    j = d.createElement(s),
    dl = l != 'dataLayer' ? '&ampamp;l=' + l : '';

Abramos esto nuevamente, usando los parámetros y argumentos con los que ya estamos familiarizados:

var f = doc.getElementsByTagName('script')(0),
    j = doc.createElement('script'),
    dl = 'dataLayer' != 'dataLayer' ? '&ampamp;l=' + 'newDataLayer' : '';

La primera línea almacena el primer elemento SCRIPT de la página en variable F.

La segunda línea crea un nuevo elemento SCRIPT y lo almacena en la variable j.

La tercera línea hace una de dos cosas posibles. Si no ha tocado el nombre predeterminado del objeto dataLayer (es decir, ‘dataLayer’), solo se almacena una cadena vacía en la variable dl. Sin embargo, si ha elegido cambiar el nombre de la capa de datos (por ejemplo, ‘newDataLayer’), la cadena ‘&l=newDataLayer’ se almacena en la variable dl. & Es lo mismo que el signo comercial (&), pero se ha codificado porque algunas plataformas no pueden procesar caracteres ASCII no codificados.

Estas variables se utilizarán en las siguientes líneas.

Líneas 11 a 13

j.async = true;
j.src =
    '//www.googletagmanager.com/gtm.js?id=' + i + dl;

Y embellezcamos este también:

j.async = true;
j.src = '//www.googletagmanager.com/gtm.js?id=GTM-P8XR';

Recuerde, en el último capítulo acaba de crear un nuevo elemento SCRIPT y lo almacenó en la variable j? En estas líneas le añades algunos atributos. El ID del contenedor se recupera del parámetro de función. iy originalmente se pasó como argumento en la llamada de función autoinvocada (¡recuerdas esto!). Vayan a ver si no me creen.

Tenga en cuenta que la última línea puede verse diferente si elige cambiar el nombre de su capa de datos. En ese caso, en realidad sería el equivalente a esto:

j.src = '//www.googletagmanager.com/gtm.js?id=GTM-P8XR&l=newDataLayer';

Esto significa que si cambió el nombre de su objeto dataLayer, este nuevo nombre se pasa como valor del parámetro de consulta. yo con la solicitud para cargar la biblioteca gtm.js desde los servidores GTM.

De todos modos, el objetivo de estas líneas es hacer que el elemento SCRIPT que almacenó en variable j lucir algo como esto:

<script kind="textual content/javascript" async src="//www.googletagmanager.com/gtm.js?id=GTM-P8XR">script>

Básicamente, acabas de crear una etiqueta SCRIPT que carga el contenido externo. gtm.js biblioteca con su ID de contenedor (y su capa de datos renombrada, si lo hizo) como parámetros de consulta.

Línea 14

f.parentNode.insertBefore(j, f);

Recuerda algunos capítulos atrás cuando period variable. F ¿Se definió como la primera etiqueta SCRIPT del documento? Esta línea hace lo siguiente:

• Busque la primera etiqueta SCRIPT en la página.

• Justo antes de eso, inserte la nueva etiqueta SCRIPT que se carga gtm.js (del capítulo anterior)

Entonces, el código en la línea 14 del fragmento del contenedor asegura que el cargador GTM sea la primera etiqueta SCRIPT en la página.

¡Y ahí lo tienes! Siga leyendo para obtener un breve resumen de lo que acaba de suceder.

Conclusiones

Aquí hay un breve resumen de lo que hace el fragmento de contenedor:

1. Declara una función anónima con cinco parámetros (el nombre del objeto dataLayer y su ID de contenedor, entre otros)

2. Crea la matriz dataLayer, si no lo hizo explícitamente antes del fragmento del contenedor.

3. Empuja el primer evento, gtm.jsen dataLayer, junto con la hora en que se realizó el envío

4. Crea una nueva etiqueta SCRIPT, que carga el contenido externo. gtm.js Biblioteca de JavaScript con su ID de contenedor (y nombre de objeto de capa de datos personalizado) como parámetros

5. Agrega este nuevo SCRIPT a la plantilla de página, de modo que sea la primera etiqueta SCRIPT en la página.

6. Una vez declarada la función, la función se ejecuta automáticamente.

Al last, es un código bastante easy. Todo lo que realmente hace es crear (o verificar) el objeto dataLayer, enviar el primer evento (llamado ‘gtm.js’) a dataLayer y cargar la biblioteca externa gtm.js que procesa su contenedor.

Y esa es la historia del fragmento del contenedor.

A continuación: realice ingeniería inversa en toda la biblioteca gtm.js (¡SOLO ES BROMA!).