Guía: Realizar seguimiento de videos Youtube con Tag Manager para quienes trabajan como analista digital

Existen varias técnicas para realizar seguimiento de videos de Youtube que insertamos en el html en sitios webs, este post es un mini manual muy detallado de como realizarlo. Después de varios conflictos y varias horas de pruebas lo conseguí gracias a este artículo – después de leer y aplicar varios – , si laburas como analista digital te podrá servir para analizar datos, proponer mejoras y añadir a tus reportes de métricas.

Antes de comenzar con lo complicado, se requiere de los siguientes puntos:

  1. Cuenta en Google Analytics (se utilizará ID y el panel para testear los eventos lugo de la configuración).
  2. Cuenta en Google Tag Manager (se requiere de tiempo y orden para realizar las configuraciones).
  3. Un sitio web para realizar las pruebas (sólo se debe insertar el código que ofrece Youtube y Tag Manager vinculado a GA).

¿Para qué sirve?

Medir la cantidad de eventos de las interacciones realizadas por los usuarios al utilizar el reproductor de Youtube insertado en páginas html. Luego de implementar podrás visualizar datos en Comportamiento > Eventos de Google Analytics como: play, pause y (%) porcentaje visto. de los videos de todo el sitio. Eventos youtube para analista digital

Una vez que la implementación comience a lanzar todos los eventos, se puede realizar las segmentaciones especificas como por ejemplo:

Eventos + usuarios que han convertido. eventos a youtube analytics tag manager segmentación

Seguimiento para todos los videos del sitio. seguimiento youtube 3

¡A la acción analista digital!

Crearemos en Tag Manager:

(5) Variables:

1- variable de identificación WebProperty

  • Nombre: WebProperty ID
  • Tipo: Constant
  • Value: UA-XXXXXX-Y (ID de analytics)

YouTube variable 1 2- variable de YouTube está presente

  • Nombre: YouTube is present
  • Tipo: Custom JavaScript
  • Valor:
// Devuelve "true" si hay al menos un vídeo de YouTube en la función de la página () {for (var e = document.getElementsByTagName ( 'iframe'), x = e.length; x--;) si (/ youtube .com \ /embed/.test (e [x] .src)) {return true; } falso retorno; }

YouTube presente 2 3- categoría capa de datos variables

  • Nombre: dataLayer category
  • Tipo: Data Layer Variable
  • Valor: Capa de datos Nombre de la variable: eventCategory capa de datos Versión: Versión 2

3 categorías de YouTube4- variable de acción dataLayer

  • Nombre: dataLayer action
  • Tipo: Data Layer Variable
  • Valor: Capa de datos Nombre de la variable: eventAction capa de datos Versión: Versión 2

YouTube variable de acción 4Variable Etiqueta de 5- dataLayer

  • Nombre: dataLayer label
  • Tipo: Data Layer Variable
  • Valor: Capa de datos Nombre de la variable: eventLabel capa de datos Versión: Versión 2

YouTube variable de etiqueta 5

(2) Los disparadores:

Los disparadores de eventos 1- YouTube

  • Nombre: YouTube event
  • Tipo evento: Custom Event
  • Nombre evento: youtube

evento de YouTube TRIGGER- 62- desencadena YouTube presente

  • Nombre: YouTube present
  • Tipo evento: Custom Event
  • Fuego: Nombre del evento: gtm.dom “YouTube está presente” es igual a verdadera

YouTube presente gatillo 7

(2) Etiquetas:

Etiquetas 1- YouTube Evento

  • Nombre: YouTube Event
  • Tag Producto: Google Analytics
  • Tipo Tag: Universal Analytics
  • Configuration: Tipo de etiqueta: Universal Seguimiento de análisis Identificación: {{WebProperty ID}} Tipo de pista: Evento Categoría: {{categoría} dataLayer} Acción: {{acción} dataLayer} Etiqueta: {{dataLayer etiqueta}} Campos para configurar: Nombre del campo = “useBeacon”, valor de campo = “true”
  • Regla: Tag triggered by “YouTube event” trigger

YouTube event tag 8 copia

Etiquetas 2- YouTube Oyente

  • Nombre: YouTube Event
  • Tag Producto: Custom HTML Tag
  • Configuración: Tag type: Custom HTML HTML: (còdigo mas abajo)
  • Regla: Tag triggered by “YouTube present” trigger

listener9 YouTube

<! -
Google Analytics Administrador de etiquetas (V2) de encargo etiqueta HTML para el seguimiento de vídeo de YouTube

Derechos de autor 2015, el cardenal Path, Inc.

Autor original: Stéphane Hamel <shamel@cardinalpath.com>
Revisado por: Nicky Yuen <nyuen@cardinalpath.com>

versión 1.0
->
<Script type = "text / javascript">
  // Apoyo a varios jugadores en la misma página
  era gtmYTPlayers = [];
  
    // OPCIONAL: Habilitar JSAPI si no está ya en la URL
    // Nota: esto hará que el reproductor de YouTube de "flash" en la página cuando vuelva a cargar para que la API de JS
    for (var e = document.getElementsByTagName ( "iframe"), x = e.length; x--;)
        si (/youtube.com\/embed/.test(e[x].src))
            si (E [x] .src.indexOf ( 'enablejsapi =') === -1)
                E [x] .src + = (E [x] .src.indexOf () === -1: '&' '?'? '?') + 'enablejsapi = 1';
    
  /**
   * Se conecta oyente una vez que la API de YouTube es cargada	
  **/
    onYouTubeIframeAPIReady funcionar () {
        for (var e = document.getElementsByTagName ( "iframe"), x = e.length; x--;) {
            si (/youtube.com\/embed/.test(e[x].src)) {
                gtmYTPlayers.push (nueva YT.Player (E [x], {
                    eventos: {
                        onStateChange: onPlayerStateChange,
                        onError: onPlayerError
                    }
                }));
                YT.gtmLastAction = "p";
            }
        }
    }

  /**
   * Escucha de reproducción / pausa. También se podrían añadir otros estados como rebobinado y fin
     * También reporte% juega cada segundo
   * @param E - evento
  **/
    función onPlayerStateChange (e) {
        e [ "datos"] == YT.PlayerState.PLAYING && setTimeout (onPlayerPercent, 1000, e [ "blanco"]);
        var = video_data e.target [ "getVideoData"] (),
            label = video_data.video_id + ':' + video_data.title;
        si (e [ "datos"] == == YT.PlayerState.PLAYING && YT.gtmLastAction "p") {
            dataLayer.push ({
                Evento: 'youtube',
                eventCategory: 'youtube',
        eventAction: 'play',
                eventLabel: etiqueta
            });
            YT.gtmLastAction = "";
        }
        si (e [ "datos"] == YT.PlayerState.PAUSED) {
            dataLayer.push ({
                Evento: 'youtube',
                eventCategory: 'youtube',
        eventAction: "pausa",
                eventLabel: etiqueta
            });
            YT.gtmLastAction = "p";
        }
    }

  /**
   * No se pierda toda reportar errores a través de la capa de datos GTM. Una vez que el error se expone a GTM, que puede ser seguido en UA como un evento!
   * Consulte https://developers.google.com/youtube/js_api_reference#Events onError
   * @ Param: e (evento)
  **/
    
    función onPlayerError (e) {
        dataLayer.push ({
            Evento: 'error',
      eventCategory: 'youtube',
      eventAction: 'play',
            eventLabel: 'youtube:' + e
        })
    }

  /**
   * Informe el jugado% si coincide con 0%, 25%, 50%, 75%, 90% o completada
   * @ Param: e (evento)
  **/
    función onPlayerPercent (e) {
        si (e [ "getPlayerState"] () == YT.PlayerState.PLAYING) {
            // Var t = e [ "getDuration"] () - e [ "getCurrentTime"] () <= 1,5? 1: (Math.floor (e [ "getCurrentTime"] () / e [ "getDuration"] () * 4) / 4) .toFixed (2);
            
            // Establecer la duración jugado a uno de cada diez, porque tendremos que capturar también jugó el 90%.
            var t = e [ "getDuration"] () - e [ "getCurrentTime"] () <= 1,5? 1: (Math.floor (e [ "getCurrentTime"] () / e [ "getDuration"] () * 10) / 10) .toFixed (2);
            
            si (parseFloat (t) <0,25) {
                t = 0,00;
            }
            else if (parseFloat (t) <0,5) {
                t = 0,25;
            }
            else if (parseFloat (t) <0,75) {
                t = 0,50;
            }
            else if (parseFloat (t) <0,9) {
                t = 0,75;
            }
            else if (parseFloat (t) <1) {
                t = 0,90;
            }
            // Duración t tiene que ser fijo a 2 decimales
            t = t.toFixed(2);
            
            if (! e [ "lastP"] || t> e [ "lastP"]) {
                var video_data = e [ "getVideoData"] (),
                    label = video_data.video_id + ':' + video_data.title;
                e["lastP"] = t;
                dataLayer.push ({
                    evento: "youtube",
                    eventCategory: 'youtube',
                    eventAction: t * 100 + "%",
                    eventLabel: etiqueta
                })
            }
            e [ "lastP"] = 1 && setTimeout (onPlayerPercent, 1000, e!);
        }
    }
  
  /**
   * Añadir de descarga de detector de eventos
  **/
  window.addEventListener ( 'beforeunload', function (e) {
    for (var i = 0; i <gtmYTPlayers.length; i ++) {
      si (gtmYTPlayers [i] .getPlayerState () === 1) {// juego
        var = video_data gtmYTPlayers [i] [ 'getVideoData'] (),
        label = video_data.video_id + ':' + video_data.title;
        
        dataLayer.push ({
          Evento: 'youtube',
          eventCategory: 'youtube',
          eventAction: "salida",
          eventLabel: etiqueta
        });
      }
    }
  })
    
  // Cargar la API de YouTube JS y ponerse en marcha
    var j = document.createElement ( "script"),
        f = document.getElementsByTagName ( "script") [0];
    j.src = "//www.youtube.com/iframe_api";
    j.async = true;
    f.parentNode.insertBefore (j, f);
</ Script>

Y listo!

Importante: recuerde que debe finalizar versión comercial creada en el Administrador de etiquetas e insertar el código de seguimiento es la misma después de la primera <body> pegar aquí

Fuentes, recursos y artículos de utilidad:

Seguimiento por vídeo de YouTube con Google Administrador de etiquetas (V2)

YouTube Google Analytics y GTM Plugin

seguimiento de vídeo de YouTube a través de Google Administrador de etiquetas

Seguimiento de YouTube en Google Analytics y etiquetas de Google

Web Analytics Receta del libro: Cómo realizar el seguimiento Embedded vídeos de YouTube con Google Administrador de etiquetas

Consultor de Marketing Digital (Analítica, CRO, SEO, UI/UX). Diseñador de profesión, Diplomado en Arquitectura de Información y Experiencia de Usuarios, Certificado en Google Analytics IQ y Mobile.

Dudas y consultas al email msalazar@aiux.cl o twitter @misalazarv

2 Comments Guía: Realizar seguimiento de videos Youtube con Tag Manager para quienes trabajan como analista digital

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *