Blacklist Whitelist Google Tag Manager luciamarin.es

Probando Whitelists & Blacklists en Tag Manager

Posted by Lucía Marín on Jul 18, 2016

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:

– ¿Qué son los ID o identificadores?

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

– ¿Qué son las clases?

Por lo que parece la propiedad Classes se refiere al tipo de etiqueta de GTM:
google, nongooglescriptnonGooglePixelscustomScriptscustomPixels.

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.

– ¿Qué es «Name in Tag Manager UI»?

«Name in Tag Manager UI» se refiere al tipo de etiqueta creada, cuando seleccionas aquí:

Name Tag Manager UI - Whitelist Blacklist GTM

 

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:

Eetiqueta HTM en Tag Manager - Lucía Marín
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 :)

Consola depuracion Tag Manager - Lucía Marín

 

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:
Whitelist y Blacklist en Google TagManager - Lucía Marín

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

  1. 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).
  2. 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).
  3. 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.
  4. 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, blocking nonGooglePixels 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.

Si necesitas aprender Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta de material PDF actualizado constantemente. Un sitio para hacer tus prácticas. Y está tutorizado por foro/email durante 2 meses (más opción a clases particulares).

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
contacta con nosotros, seguro que podemos ayudarte :)

Sobre mí