15 Jan 2015
Lectura: 11 mins.
|
Dificultad:

Seguimiento de videos YouTube en Analytics con Google Tag Manager

ACTUALIZACIÓN (2017-10): Google Tag Manager ahora incluye seguimiento integrado de videos Youtube: Ver artículo actualizado.
El método aquí descrito sigue siendo válido, pero no será necesario para la mayoría de casos.

seguimiento de vídeos en youtube Así que quieres medir interacciones con videos de Youtube incrustados en tu sitio web y recopilar esta información en Google Analytics. Probablemente, y tras unos intentos iniciales en los que has descubierto que es más complicado de lo que parece, te has puesto a buscar información o tutoriales.

Tarde o temprano habrás acabado en este post de Lunametrics, principal referencia sobre el tema, o en alguno similar. Tal vez has probado la solución propuesta y no ha funcionado, o quieres implementarla en Google Tag Manager. Puede que hayas encontrado otras guías y te hayan resultado de ayuda, pero aún no consigues que funcione al 100%. ¿Qué puede ocurrir?

1. El problema

El principal problema que tenemos a la hora de medir videos y otros contenidos incrustados es que, normalmente, estos no cuentan como parte de la página en la que están integrados, sino que se comportan como páginas/objetos completamente independientes, y cualquier sistema de seguimiento que tenga instalado no tiene forma de acceder a ellos. Si el objeto incrustado es un <iframe>, cualquier script o pixel de seguimiento que necesitemos debe ser instalado también dentro de la página contenida, cosa que no podremos hacer si, como es habitual, está en un sitio externo al que no tenemos acceso. Y si es Flash o cosas aún más terroríficas… peor todavía.

En el caso concreto de Youtube, nos proporciona un API a través del cual podemos comunicarnos con Google Analytics, pero no es automático: Necesitaremos crear scripts que se encarguen de todo el proceso. Vale, se los pedimos prestados a alguien que haya tenido la amabilidad de solucionar esto antes que nosotros y publicar sus resultados, pero a su vez nos podemos encontrar con un problema adicional…

Hay dos formas de incrustar un video de Youtube en una página:

  • La actualmente recomendada, mediante una etiqueta <iframe>. Utilizada por ser más compatible, entre otras cosas, con dispositivos móviles.
  • La “clásica”, mediante etiquetas <object> y <embed>. Ya en desuso (Youtube ya la ha ocultado de las opciones de incrustado en las páginas de videos) pero aún presente en muchos sitios web.

…y cada una, además de generar distinto código, utiliza su propia API separada con distinta forma de recopilar y enviar información!

Así que necesitaremos, o bien implementar una solución separada para cada caso (muy engorroso e ineficiente), o centrarnos únicamente en el primer caso y olvidarnos de cualquier contenido “antiguo”… o buscarlo y convertirlo a mano si es que podemos, algo que tampoco va a ser siempre viable 🙁

Si tuviéramos una alternativa…

2. La alternativa

Pero por supuesto que la tenemos, no? Para qué íbamos a estar escribiendo este post entonces 😛

La solución que proponemos aquí, realmente no es más que una versión ligeramente modificada de los scripts de Lunametrics, CardinalPath y -especialmente- OptimizeSmart, retocados para asegurarnos de tener una solución definitiva, documentada, válida en todos los casos e implementada en Google Tag Manager para que los eventos generados estén disponibles para otros servicios además de Analytics.

Este script, una vez integrado en un contenedor de GTM como etiqueta HTML personalizada, hace lo siguiente:

  1. Busca todos videos de Youtube incrustados en la página actual
  2. Convierte todos los de código <embed> a <iframe>. Esto, además de permitir el correcto seguimiento, tiene la ventaja añadida de actualizar automáticamente los embeds “antiguos”, con todo lo que ello implica (mayor compatibilidad con algunos dispositivos y navegadores, protección frente a potencial fin de soporte)
  3. Añade, si fuera necesario, el parámetro enablejsapi=1 (necesario para activar el API)
  4. Detecta y procesa eventos de interacción con cada video
  5. Genera eventos “youtube” de Google Tag Manager de reproducción, pausa, finalización y % visualizado (0%, 25%, 50%, 75% y fin)
  6. Opcionalmente, también genera eventos con nombre separado en caso de error, por si también nos interesara medirlos

Una vez generados, estos eventos pueden a su vez ser enviados a Google Analytics como etiquetas de evento, o utilizados como trigger de activación de cualquier otro tipo de etiqueta.

De paso hemos traducido o añadido comentarios en el código, para que sea más facil entender su funcionamiento y/o modificarlo para que se ajuste exactamente a vuestras necesidades. Por supuesto, si necesitas algo más específico y no tienes el tiempo o los medios técnicos necesarios, no dudes en contactar con nosotros, en Aukera podemos ayudarte 😉

3. Las instrucciones

Presuponemos que partimos de un contenedor de Google Tag Manager ya instalado en nuestro sitio web junto con la etiqueta o etiquetas necesarias para el seguimiento de Google Analytics.

Las instrucciones y capturas de pantalla corresponden a la versión 2 de Google Tag Manager; si tu contenedor aún mantiene el interfaz de la versión 1 (2014) el código sigue siendo válido, simplemente recuerda que regla = trigger y macro = variable.

1) Variables

Para no afectar negativamente al rendimiento de nuestro sitio, lo ideal es que el script de seguimiento únicamente se cargue en las páginas que lo necesiten – esto es, en las que contengan videos de Youtube incrustados. Para ello, usaremos una variable que detecta automáticamente si la página actual contiene videos incrustados.

Creamos una variable {{Page Has Youtube}}, de tipo JavaScript personalizado, que contenga el siguiente código:

function () {
  for (var e = document.getElementsByTagName('iframe'), x = e.length; x--;)
    if (/youtube.com/embed/.test(e[x].src)) return true;
  for (var e = document.getElementsByTagName('embed'), x = e.length; x--;)
    if (/youtube.com/.test(e[x].src)) return true;
  return false;
}

variable-page-youtube

Adicionalmente, necesitaremos variables de DataLayer genéricas para los datos asociados a cada evento (Categoría, Acción, Etiqueta) a recopilar y enviar posteriormente a Analytics. Dado que se utilizan con frecuencia en seguimiento de eventos es muy probable que las tengas ya creadas -estas u otras equivalentes-; de lo contrario, crea lo siguiente:

  • Variable {{Event Category}}, de tipo Data Layer, nombre de variable de dataLayer eventCategory
  • Variable {{Event Action}}, de tipo Data Layer, nombre de variable de dataLayer eventAction
  • Variable {{Event Label}}, de tipo Data Layer, nombre de variable de dataLayer eventLabel

variable-event-category

variable-event-actionvariable-event-label

2) Triggers

Antes de crear la etiqueta procesador, dejaremos ya creado el trigger o regla de activación que tendrá asociado. Las condiciones en las que debera activarse serán:

  • En todas las páginas que contengan videos
  • Al cargar la página, pero esperando primero a que los elementos de la misma -videos incluidos- estén disponibles. Por lo tanto, evento gtm.dom (DOM Ready) en lugar de gtm.js (inicio de carga de página).

Por tanto, creamos el trigger con estas características: Tipo Evento Personalizado o Custom Event, nombre de evento gtm.dom, condición adicional {{Page Has Youtube}} igual a true:

trigger-dom-youtube

Y ya que estamos con los triggers, dejamos creado uno para los eventos personalizados youtube que vamos a generar:

trigger-youtube

3) Etiqueta procesador Youtube

Y ahora que ya tenemos los datos auxiliares necesarios, ahora sí, creamos la etiqueta para el script procesador de eventos:

  • Seleccionamos tipo HTML Personalizado (Custom HTML)
  • Seleccionamos como trigger el que hemos creado previamente “DOM Paginas Youtube
  • Descargamos el script y pegamos todo el código del mismo en el campo HTML, incluidas etiquetas <script>

tag-youtube

4) Etiqueta Google Analytics

Ya tenemos activo el seguimiento de videos. Ahora, para que las interacciones se registren como eventos de Analytics, creamos la etiqueta de Google Analytics correspondiente para recopilar y enviar los datos de cada evento.

Creamos una etiqueta de tipo Google Analytics, del mismo tipo (Universal o Classic) y con el mismo código de seguimiento (preferiblemente, una variable de tipo Constant que ya hemos rellenado con el código UA-XXXXXXXX-Y de nuestra propiedad de Analytics) que la instalación de Google Analytics que ya tenemos activa. Lo más práctico es entrar a editar la etiqueta Google Analytics que ya tendremos creada para el seguimiento general de vistas de página y duplicarla (botón Copy) para utilizarla como plantilla; así no cometemos errores y nos aseguramos de que si tenemos configuraciones adicionales definidas (parámetros o dimensiones personalizadas, etc) se duplican correctamente.

Los parámetros a cambiar serán:

  • Trigger: el que hemos creado para el evento personalizado “youtube
  • Tipo de seguimiento: Evento (Event)
  • Como Categoría, Acción y Etiqueta (Category, Action, Label) introducimos las variables de dataLayer que hemos creado: {{Event Category}}, {{Event Action}}, {{Event Label}} respectivamente
  • Non-Interaction Hit lo dejamos en false, para que cualquier interacción con un video cuente como interacción con la página y por tanto no cuente para la tasa de rebote, salvo que tengamos videos con reproducción automática (¿por qué tanto odio? 🙁 ) en cuyo caso lo tendremos que poner a true para que no falsee las estadísticas de rebote.

tag-ga-youtube

5) Guardar y publicar

Y listo!
Por supuesto, antes de publicar la nueva versión del contenedor (Publish) de forma definitiva, primero usa la vista previa y depuración (Preview and Debug) para comprobar que funciona correctamente y no hemos roto nada! 😉

4. El resultado

Suponiendo que todo funciona correctamente, a partir de este momento en tu propiedad y vistas de Analytics se generarán los siguientes eventos:

Reproducción (incluidas reproducción automática y reanudación después de pausa)

  • Nombre evento: youtube
  • Categoría: Youtube Videos
  • Acción: URL actual
  • Etiqueta: Play – TITULO_VIDEO : ID_VIDEO
Pausa/Detención (incluida detención por finalización)
  • Nombre evento: youtube
  • Categoría: Youtube Videos
  • Acción: URL actual
  • Etiqueta: Pause – TITULO_VIDEO : ID_VIDEO

% Reproducido alcanzado (0%, 25%, 50%, 75% y 100%)

  • Nombre evento: youtube
  • Categoría: Youtube Videos
  • Acción: URL actual
  • Etiqueta: Played X% – TITULO_VIDEO : ID_VIDEO

Errores

  • Nombre evento: error
  • Categoría: Youtube Videos
  • Acción: URL actual
  • Etiqueta: Error Youtube: URL_VIDEO – ESTADO

Si quieres que los eventos generados tengan otro formato que te pueda resultar más útil o informativo para tu caso concreto (por ejemplo, usar títulos en lugar de IDs/URLs o viceversa, identificar la acción realizada o el video en eventAction, etc), bastará con modificar el código de la etiqueta procesador, más concretamente las llamadas dataLayer.push, el valor de sus propiedades (eventCategory, eventAction, eventLabel) y/o el de las variables auxiliares que utilizan (evAction, evLabel). Aun sin conocimientos avanzados de programación son relativamente fáciles de ver y editar…

Esperamos que os resulte útil!

5. Bonus Tracks

Seguimiento de errores

Aunque ya se generan eventos GTM en caso de error, por defecto los hemos clasificado con diferente nombre de evento para facilitar que su seguimiento sea opcional y, posiblemente, independiente. Si queremos que los errores también se registren en Analytics, bastará con hacer una de estas dos modificaciones:

  • Modificar el trigger de la etiqueta de Analytics creada para que acepte ambos tipos de evento: En “event name to match”, activar la casilla “Use regex matching” y cambiar “youtube” por “^youtube|error$
  • Modificar el propio código del procesador: Buscar la linea 'event': 'error', y cambiarla por 'event': 'youtube',

Seguimiento SIN Google Tag Manager

¿No utilizas Tag Manager? Pues deberías 😛 Pero si tienes Analytics instalado de forma independiente en tu sitio web, puedes adaptar la solución para hacer el seguimiento directamente en código sin pasar por GTM. Bastará con editar el script y buscar todos los bloques de código similares a este:

dataLayer.push({
	'event': 'youtube',
	'eventCategory': 'Youtube Videos',
	'eventAction': XXXX,
	'eventLabel': YYYY
});

Y modificarlos por algo como lo siguiente (suponiendo que la instalación sea de Universal Analytics o analytics.js):

ga('send', 'event', 'Youtube Videos', XXXX, YYYY);

O, si lo que usas es Classic Analytics o ga.js (está visto que hoy no vamos a llevarnos bien, eh?), por:

_gaq.push(['_trackEvent', 'Youtube Videos', XXXX, YYYY]);

Aparte de esto y de, por supuesto, asegurarte de incluir el script resultante -preferiblemente al final de la página, justo antes del cierre de </body>– en todas las páginas relevantes.
Adaptar la detección automática de videos para evitar ejecuciones innecesarias queda como ejercicio para el lector 😉

Referencias