Tracking Video Youtube con Google Tag Manager y Analytics

En este post trataremos de explicar paso a paso cómo hacer un tracking video YouTube con Google Tag Manager y Universal Analytics.

En primer lugar debemos identificar en qué páginas de nuestra web tenemos colgados los vídeos de YouTube. A continuación, inspeccionaremos el código fuente de la página y buscaremos el enlace a YouTube.

En segundo lugar es necesario que embebamos nuestros vídeos utilizando el API Javascript de Youtube. Esto es tan simple como añadir el parámetro enablejsapi=1 justo después del parámetro “?”.

Por ejemplo:

<iframe src=»https://www.youtube.com/embed/8YkhXQaiT6o?enablejsapi=1rel=0″ data-lazy-src=»https://www.youtube.com/embed/8YkhXQaiT6o?enablejsapi=1rel=0″ width=»853″ height=»480″ frameborder=»0″ allowfullscreen=»allowfullscreen» </iframe>

 

VARIABLES PARA TRACKING VIDEO YOUTUBE

En los siguientes pasos crearemos 5 VARIABLES en Google Tag Manager:

a) Variable Propiedad Web ID – UA Analytics de tipo Constante: esta variable contiene el valor de la ID de nuestra propiedad de Google Analytics (UA) a la que se enviarán los datos recogidos.

• Nombre: UA
• Tipo: Constante
• Configuración: Valor = UA-XXXXXX-Y (usaremos nuestro ID de Google Analytics)

 

b) Variable “YouTube is Present” de tipo JavaScript Personalizada: el objetivo de esta variable es comprobar si en la página existe algún video de YouTube incrustado. Si lo hay, se devuelve «true», en caso contrario se devuelve «false».

• Nombre: YouTube is present
• Tipo: JavaScript Personalizada
• Configuración: La función personalizada es la siguiente:

Os podéis descargar el código aquí.

 

c) Variable dataLayer category de tipo Capa de Datos: definimos una macro que contenga el valor del nombre de la categoría del evento.

• Nombre: dataLayer category
• Tipo: Variable de Capa de Datos
• Configuración:
  • Data Layer Variable Name: category
  • Data Layer Version: Version 2

 

d) Variable dataLayer action de tipo Capa de Datos: definimos una macro que contenga el valor del nombre de acción del evento.

• Nombre: dataLayer action
• Tipo: Variable de Capa de Datos
• Configuración:
  • Data Layer Variable Name: action
  • Data Layer Version: Version 2

 

e) Variable dataLayer Label de tipo Capa de Datos: definimos una macro que contenga el valor del nombre de la etiqueta del evento.

• Nombre: dataLayer label
• Tipo: Variable de Capa de Datos
• Configuración:
  • Data Layer Variable Name: label
  • Data Layer Version: Version 2

 

ACTIVADORES PARA TRACKING VIDEO YOUTUBE

En este paso debemos crear 2 ACTIVADORES:

a) Activador “YouTube Present”. Este activador se ejecuta cuando el valor devuelto por la variable “YouTube is Present” (creada anteriormente), es verdadero y cuando el evento es “gtm.dom”.

• Nombre: YouTube present
• Tipo: Evento Personalizado
• Condición del activador:
  • Nombre del evento: gtm.dom
  • “YouTube is present” es igual a “true”

 

b) Activador “YouTube Event”. El activador se ejecuta cuando el nombre del evento de dataLayer es “youtube”.

• Nombre: YouTube event
• Tipo: Evento Personalizado
• Condición del activador:
  • Nombre del evento: youtube

 

ETIQUETAS PARA TRACKING VIDEO YOUTUBE

Ha llegado el momento de crear nuestras 2 ETIQUETAS.

a) Etiqueta “YouTube Listener”. Esta etiqueta detecta si hay videos de YouTube  incrustados en la página web.

• Nombre: YouTube Listener
• Tipo: HTML Personalizado
• Activador: Activador “YouTube present” (creado anteriormente).

• Configuración:

Aquí os dejo el código HTML de YouTube Listener para descargar.

 

b) Etiqueta “YouTube Event”. Creamos el evento para trackear la interacción con nuestros vídeos de Youtube.

• Nombre: YouTube Event
• Tipo: Universal Analytics
• Configuración:
  • Tracking ID: {{UA}} à UA-XXXXXXXX-Y
  • Tipo de Seguimiento: Event

• Parámetros:
  • Category: {{dataLayer category}}
  • Action: {{dataLayer action}}
  • Label: {{dataLayer label}}
  • Campos para Configurar: Nombre del campo = “useBeacon”, Valor = “true”

• Regla de Activación:
  • Etiqueta activada por el activador “YouTube event”.

 

NOTA: Es importante realizar siempre una Vista Previa antes de publicar el contenedor para evitar posibles errores o un mal funcionamiento.

 

Si tienes cualquier sugerencia de mejora de esta implementación o necesitas ayuda con Google Tag Manager, no dudes en contactar con nosotros.