En el curso de Tag Manager en que participo se reciben muchas preguntas interesantes de alumnos, ello nos hace aprender más.
Vamos a hacer una pequeña prueba con Whitelists & Blacklists en GTM, que es como mejor se aprende :)
Las listas blancas y listas negras de Tag Manager se usan para poder permitir o restringir el uso de ciertas etiquetas y variables en un contenedor.
Para crearlas, solo tenemos que mandar esta dataLayer siguiendo las especificaciones de Google Tag Manager:
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'gtm.whitelist': ['//lo que permito'], 'gtm.blacklist': ['//lo que bloqueo'] }); </script>
Empezando a usar Whitelists & Blacklists en GTM
Lo primero que nos encontramos es que son necesarios IDs y/o Classes para generar listas blancas y listas de negras de etiqueta en Google Tag Manager.
Veamos qué es cada uno:
Los IDs que se deben utilizar para whitelists y blacklists en Tag Manager son unos IDs predefinidos/estándar, que nos define la propia documentación de Google. Para que GTM así los pueda entender y bloquear/permitir las tags según el caso. Los veremos un poco más abajo.
Antes vamos a ver los elementos de la tabla de abajo, donde se verá cómo generar Blacklist y Whitelist utilizando unos IDs y Classes específicas para identificar etiquetas (y variables).
Por lo que parece la propiedad Classes se refiere al tipo de etiqueta de GTM:
google, nongooglescript, nonGooglePixels, customScripts, customPixels.
No es recomendable restringir por clase de etiqueta, mira este post (especialmente las notas). Hay veces que las clases no parecen tener mucho sentido: Fijaos por ej. en DoubleClick – al que no le asigna clase Google -, ni a los eventos Link Click y Form Submit – cuando el resto sí están en el saco -.
En todo caso las clases las usamos para Whitelist.
Un consejo: Mejor restringir en Blacklist por ID, es más concreto, como ocurre con los IDs y Classes en HTML. Los IDs identifican de manera única, inequívoca; pero las clases no, y aquí menos. Las clases se reutilizan y comparten entre elementos, sirven para «agrupar» y crear unas características compartidas.
«Name in Tag Manager UI» se refiere al tipo de etiqueta creada, cuando seleccionas aquí:
WHITELIST / BLACKLIST EN GTM
Veamos por fin las indicaciones de Google para crear Blacklist y Whitelist de etiquetas en Tag Manager.
IDs, Classes y Name in Tag Manager UI para crear Blacklists y Whitelists en Tag Manager
Name in Tag Manager UI | ID |
Classes |
---|---|---|
AdWords Conversion Tracking Tag | awct |
google |
AdWords Remarketing Tag | sp |
google |
Custom HTML Tag | html |
customScripts |
Custom Image Tag | img |
customPixels |
DoubleClick Floodlight Counter Tag | flc |
|
DoubleClick Floodlight Sales Tag | fls |
|
Universal Analytics Tag | ua |
google |
Click Listener/Trigger | cl |
google |
Link Click Listener/Trigger | lcl |
|
Form Submit Listener/Trigger | fsl |
|
Timer Listener/Trigger | tl |
google |
JavaScript Error Listener/Trigger | jel |
google |
History Listener/Trigger | hl |
google |
1st Party Cookie | k |
|
Auto-Event Variable | v |
google |
Constant | c |
google |
Container Version Number | ctv |
google |
Custom Event | e |
google |
Custom JavaScript Variable | jsm |
customScripts |
Data Layer Variable | v |
google |
Debug Mode | dbg |
google |
DOM Element | d |
google |
HTTP Referrer | f |
google |
JavaScript Variable | j |
google |
Lookup Table | smm |
google |
Random Number | r |
google |
URL | u |
google |
Fuente y más: developers.google.com/tag-manager/devguide?hl=es#restricting-tag-deployment
Hemos dejado las etiquetas principales y toda la lista de variables. Fijaos en que también podemos permitir o bloquear variables en un contenedor.
Además todas las variables son de la clase google, salvo algunas donde no pone clase.
Y en la etiqueta DoubleClick tampoco pone nada en clase.
Classes para crear Blacklist y Whitelist de etiquetas en Tag Manager
Todo ordenado por Classes:
Class | Description | Whitelisted Automatically | Blacklisted Automatically |
---|---|---|---|
customPixels |
Capable of sending pixels to URLs defined by the user. | nonGooglePixels |
customScripts html |
customScripts |
Capable of running JavaScript code provided by the user. | html customPixels nonGooglePixels nonGoogleScripts nonGoogleIframes |
html |
google |
Only capable of running Google hosted scripts and sending pixels to Google. | ||
html |
Alias for customScripts . Note that this is also the ID for the Custom HTML tag. This ensures that legacy users also get the benefits of the customScripts class. |
customScripts customPixels nonGooglePixels nonGoogleScripts nonGoogleIframes |
customScripts |
nonGooglePixels |
Capable of sending pixels to non-Google domains. | customPixels customScripts html nonGoogleScripts nonGoogleIframes |
|
nonGoogleScripts |
Capable of running scripts not provided by Google. | nonGooglePixels |
customScripts html |
nonGoogleIframes |
Capable of injecting iframes from non-Google domains. | nonGooglePixels |
customScripts html nonGoogleScripts |
Fuente: developers.google.com/tag-manager/devguide?hl=es#restricting-tag-deployment
Ejemplo de dataLayer con whitelist y blacklist:
Hagamos un ejemplo sencillo (ojo que en la docu falta la coma al final de la whitelist):
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push({ </script> 'gtm.whitelist': ['ua'], 'gtm.blacklist': ['html'] }); </script>
– solo permitimos por ID la etiqueta de Universal Analytics (ua).
– bloqueamos las etiquetas de HMTL personalizadas por su clase (html).
Probamos a crear esta tag HTML:
Y creamos una etiqueta de GA.
Luego damos a vista previa.
Al depurar, en GTM no lanza ninguna etiqueta. Para nuestra sorpresa, no es suficiente con lo puesto. Debemos autorizar algo más en la lista blanca.
WhiteList: Class Google
En cambio, si en whitelist añado la class ‘google’, se obtiene el resultado deseado…
<script type="text/javascript"> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'gtm.whitelist': ['google', 'ua'], 'gtm.blacklist': ['html'] }); </script>
La clase Google es la que incluye Google Analytics, AdWords y los principales eventos de Tag Manager.
Así que ahora sí funcionan OK las listas blanca y negra de GTM, se bloquea la etiqueta HTML y se activa la de Universal :)
Si se usan whitelists, la clase ‘google’ parece que casi siempre habrá que permitirla, pues gran parte de la lógica de GTM parte de ella:
Fuente: developers.google.com/tag-manager/devguide?hl=es#restricting-tag-deployment
PRIORIDADES Y MÁS ENTRE LISTAS NEGRAS Y BLANCAS DE ETIQUETAS
Lo que se indique en Blacklist tiene prioridad sobre lo que se indique en Whitelist, en caso de duda. Por ej. podemos permitir una clase y registrir un ID concreto asociado la misma. El resultado será el bloqueo.
Y más cosas a tener en cuenta, más adelante lo vemos directamente como lo cuenta Google, creo que es difícil explicarlo mejor :)
Cuando se crea una lista blanca, todo lo que queramos poder usar deberá estar incluido explícitamente (por ID) o implícitamente por clase (con todas sus clases en la lista).
Cuando se crea una lista negra, todo lo que queramos poder usar NO deberá estar incluido explícitamente en blacklist (por ID), ni tampoco implícitamente (por una de sus clases).
Hablamos de clases en plural todo el rato porque estas tienen dependencias entre sí todo el rato. Por ejemplo, la clase non-Google scripts incluye la clase non-Google pixels, y si bloqueamos/permitimos una bloqueamos/permitimos la otra. Igualmente, si bloqueamos las etiquetas de clase html estaremos bloqueando las clases customScripts y customPixels, y quizá alguna más.
Por todo ello, ciñámonos más a usar IDs. Las clases, prueba y error :)
NOTAS DE GOOGLE SOBRE WHITELISTS Y BLACKLISTS
It’s important to understand the rules that govern whitelists and blacklists:
- Whitelists
When a whitelist has been set, relevant tags, triggers, and variables will only execute if they are in the whitelist, either explicitly (by type ID), or implicitly (by having all of their classes in the list).- Blacklists
When a blacklist has been set, tags, triggers, and variables will only execute if they are not in the blacklist, either explicitly (by type ID), or implicitly (by having any of their classes in the list).- Blacklists Override Whitelists
When both have been set, blacklists take precedence. You can whitelist a class of tags and blacklist a specific tag in that class, but the reverse is not true. You cannot blacklist a class of tags and whitelist a specific tag in that class.- Classes Have Relationships
Some classes have relationships with other classes. For example, tags that can run non-Google scripts can (by definition) send non-Google pixels. For this reason, blockingnonGooglePixels
will also automatically blocknonGoogleScripts
. All tags, triggers, and variables that belong to either group will be blocked.
Fuente: developers.google.com/tag-manager/devguide?hl=es#restricting-tag-deployment.
O si prefieres una formación in company, en tu empresa, sobre:
- Tag Manager y Píxeles de Conversión
- Google Analytics básico o avanzado
- Data Studio
- Supermetrics Functions
- SEO
- Google Ads