Al obtener una vista previa Etiquetas HTML personalizadas en Administrador de etiquetas de Google Es casi seguro que te has encontrado con una situación en la que… Variable GTM Aparece como un método JavaScript extraño que se parece a algo como esto:
google_tag_manager("GTM-ABCD123").macro(15)
¡Y esto es cuando esperabas que mostrara el valor actual resuelto!
No ayuda que de vez en cuando el modo de vista previa se muestre en correcto valor en el modo de vista previa.
¿Qué pasa con eso? Bueno, hay una explicación bastante lógica para esto. ¡Sigue leyendo!
X
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
Empecemos con las buenas noticias.
Su etiqueta y el variables son más possible trabajando como deberían.
Cuando creas un Etiqueta HTML personalizada En Google Tag Supervisor, en realidad estás creando elementos HTML que se agregan al ultimate de la elemento cuando se activa la etiqueta.
Esto significa que si el elemento HTML que estás inyectando es un block, i.e. a JavaScript execution context, the code isn’t run until 1) the HTML element is appended to the end of , and 2) the browser has rendered the element and is ready to execute the JavaScript within the block.
Now, when you add a Google Tag Manager variable to a Custom HTML tag, you use the {{variableName}} syntax.
google_tag_manager('GTM-ABCD123').macro(n)!
Every single Google Tag Manager used in a Custom HTML tag will receive its own, unique value for n, which will then be passed to the .macro() method when the tag code is executed.
Note! This is not a deterministic value. Thencan change from container version to another, so you should NOT build any sort of logic around having some specific variable always assigned some specific value forn.
So why doesn’t it resolve in Preview mode?
First of all, this is a good question. Google Tag Manager shows you what the call tomacro() looks like and doesn’t actually replace the call with the value of the variable at the time of inspecting the tag.
The most likely reason why GTM doesn’t resolve the macro() call is because it would have to resolve the entire Custom HTML tag content to be able to adjust the value returned by macro() depending on context.
And this makes no sense – GTM can’t start resolving Custom HTML tags within the Preview mode window – how would it render things like HTML elements? How would it resolve things like document.getElementById() when the iframe has no access to the actual page itself?
So GTM can’t resolve the Custom HTML tag while in Preview mode, which is why it shows you the pre-injection status of the Custom HTML tag, together with the .macro() calls and all.
It’s only after the Custom HTML tag is added to the page that the .macro() calls are executed. This bears repeating since it’s an important point.
But why do SOME variables resolve in Preview mode?
Hahaa! You found the exception. Take a look at this Custom HTML tag:<script>
(function() {
console.log({{Container ID}});
console.log("{{Container ID}}");
})();
script>
.macro() Llamada. La segunda línea quedaría así:
console.log("google_tag_manager('GTM-ABCD123').macro(15)");
En otras palabras, toda la llamada a la función se convertiría en una cadena, que terminaría escribiendo google_tag_manager('GTM-ABCD123').macro(15) en la consola del navegador en lugar de GTM-ABCD123!
Entonces, cuando conviertes la variable en una cadena, GTM lo resolveré preinyección.
¿Cómo sé que está funcionando?
Porque Google Tag Manager muestra las variables comomacro() Llamadas, es realmente difícil comprobar rápidamente si la etiqueta HTML personalizada funciona de todos modos. Sin embargo, aquí hay algunos consejos:
1. Verifique el valor de la variable en la pestaña Variables
Esta es una manera fácil de obtener una buena idea de si la variable funciona o no. Sabes cuál debería ser la variable (por ejemplo, “ID del contenedor” en mi caso), así que todo lo que tienes que hacer es Seleccione el evento desencadenador que activa la etiqueta HTML personalizadaabre el Variables pestaña en modo Vista previa y verifique el valor de la variable.
2. Agrega algo console.log() llamadas
Otra forma un poco extraña de depurar es agregar console.log() Llamadas a la etiqueta HTML personalizada. Haga que el valor de la variable se registre en la consola justo antes de usarla para verificar que realmente tenga el valor correcto.
En el ejemplo de código anterior, hay un método world window.someFunction a la que queremos pasar la variable {{Some Variable}}Sin embargo, no estamos seguros de cuál es su valor actual, ya que el modo de vista previa no es muy útil.
Por este motivo, registramos el valor de {{Some Variable}} en el consola de JavaScript del navegador.
Además, he creado una función auxiliar llamada log() que solo registra el valor en la consola si GTM está en modo de vista previa. De esta manera, evita que sus etiquetas escriban mensajes de registro arbitrarios en la consola del navegador en vivo.
3. Depurar la etiqueta resultado
Esta es la forma más difícil de comprobar si la variable funcionó o no. Lamentablemente, también es la mejor forma de hacerlo.
Cuando agrega JavaScript a una etiqueta HTML personalizada, debe hacer algoTal vez agregue algún texto a un elemento HTML, tal vez cree un nuevo píxel o una llamada Ajax, o tal vez envíe algo a dataLayer.
En cualquier caso, la mejor manera de asegurarse de si el .macro() La llamada resuelta a su valor correcto es para comprobar el producción o resultado de la etiqueta en sí para ver si el valor que la variable debía pasar se hizo correctamente.
Por ejemplo, digamos que su etiqueta crea una solicitud de píxel como esta:
<script>
(perform() {
var imgId = '?id=' + {{Container ID}};
var imgUrl = 'https://www.somedomain.com/img' + imgId;
var el = doc.createElement('img');
el.src = imgUrl;
doc.physique.appendChild(el);
})();
script>Es un ejemplo easy, casi sin sentido, pero debería servir para resaltar claramente el proceso de depuración.
La etiqueta crea un nuevo elemento de imagen cuya URL es https://www.somedomain.com/img más la cuerda ?id= concatenado con lo que sea devuelto por el {{Container ID}} variable.
Así es como se ve en el modo de vista previa:
Esto es lo que parece después Inyección en el panel Inspeccionar elementos:
¡Nota! Como puede ver, en Inspeccionar elementos, el elemento de script aún tiene el
.macro()Llamada. Así es como funciona el navegador. GTM inyectó un elemento con la.macro()Llamada y esto es lo que se agregó a la página. Si recuerdas, el script no se ejecuta hasta DESPUÉS de la inyección.
Por último, puedes inspeccionar el Solicitudes de crimson para encontrar la solicitud de imagen con el ID en su lugar.
Además, porque la etiqueta hizo su propia pequeña inyección con doc.physique.appendChild(el)puedes encontrar el elemento de imagen al ultimate de by inspecting the weather on the web page.
Abstract
I hope this text has alleviated your issues. When you see a name to .macro() en el modo de vista previa de Google Tag Supervisor, no te preocupesEs lo que eres supuesto para ver.
GTM no resolverá las variables hasta que se haya inyectado la etiqueta HTML personalizada al ultimate de and the browser has begun to render any JavaScript between y inside the Customized HTML tag.
The principle exception is variables solid into strings, which Google Tag Supervisor will have to resolve earlier than injection or else it’ll find yourself casting the perform expression itself right into a string which isn’t useful.
Hopefully this text is useful in providing you quite a few methods you’ll be able to debug these pesky .macro() llama solo para asegurarse de que las cosas funcionan como deberían.
Avísame si te has encontrado con casos extremos en los que aún no funciona, o si tienes otros ejemplos además de cadenas de conversión donde GTM resuelve la variable en modo de vista previa.