Google Optimize – la nueva herramienta para crear a/b testing

Google liberó la versión beta de la nueva herramienta de personalización y testing llamada Google Optimize, hace aproximadamente 2 semanas me llego la notificación a mi correo personal y sin dudarlo comencé a realizar mis primeras pruebas A/B y así probar las ventajas de crear un AB testing con Google Optimize, felizmente algo sabia de lo que se podría llevar a cabo con esta nueva herramienta, ya que este tipo de experimentos los realizo principalmente con optimizely.

Para empezar, es muy importante destacar de que trata.

Google Optimize es la nueva herramienta de personalización y testing de Google, tanto en su versión de pago (optimize 360) como en su versión gratuita, permite probar cambios en los contenidos de nuestro sitio para identificar cuáles son los que funcionan mejor a nuestros usuarios. – metriplica

Preparé mi caballito de batalla y decidí compartir mi experiencia, antes de comentar algunas funcionalidades interesantes, dejaré un par de menciones que las fui anotando mientras realizaba las configuraciones.

Es fácil darse cuenta que que el editor de diseño es muy similar a optimizely en cuando a las principales tareas que se puede realizar: hacer clic en los elementos dentro de la página y cambiar su estilo, ocultar o moverlos y en cuando a su uso optimizely se lleva los puntos ya que es mas fluido, pero esto no es una comparación, así que quieren usen optimizely se les facilitará mucho la tarea.

Ventajas de crear un AB testing con Google Optimize

El salto al desarrollador es una ventaja muy importante, creo que este punto es lo que no puede faltar en este tipo de herramientas de prueba, ya que son tareas que se realizan de forma frecuente y requiere inmediatez, prueba tras pruebas, ERRORES, realizar ajustes, volver atrás, publicar, etc…

Otro punto destacado de Google Optimize es en base a la información ya capturada en Google Analytics. No hay que realizar una configuración técnica más allá de lo que ya se está midiendo Analytics.

Creación de segmentación para filtrar en ab testing con Google Optimize

En Google Analytics podemos crear segmento. Esto significa que cualquier información capturada la podremos filtrar de acuerdo al segmento creado: orgánico, móvil, ubicación, etc…

Un producto de Google, Google Optimize se implementa muy bien con otros producto de Google como: Administrador de etiquetas Tag Manager, Google Analytics, etc …

Configuración de tag manager con google optimize

Si bien la herramienta ofrece 3 alternativas para experimentar, comentaré algunas características que destaco al momento de la creación e informe del experimento A/B testing.

Experimentos que ofrece google optimize

Que es A/B Testing?

El funcionamiento y objetivo de está técnica de marketing es mostrar a los usuarios alternativas de diseño, sección, etiquetado y/o funcionalidad de productos digitales (sitios web, landing page, mailing, etc…) para evaluar el desempeño de estas con datos estadísticos significativos e identificar que diseño o funcionalidad tiene más éxito entre los usuarios.

Lo necesario para comenzar:

Comencemos…

La principal ventaja -mi opinión- es tener todo en un servicio, si bien existen un par de herramientas para realizar este tipo de pruebas, debemos realizar varias configuraciones con respecto a la creación de códigos, implementación a páginas, seguimiento de objetivos y/o micro objetivos, etc… y tener toda esta información capturada en Analytics que es la principal herramienta que utilizo para realizar seguimientos, análisis y reportes es de gran ayuda.

Rendimiento de las pruebas en Analytics

Google Optimize tiene un buen panel de control que muestra el rendimiento de los experimentos.

Panel de experimentos ab test en google optimize

 

Todos los experimentos están en Analytics 😀 En Comportamiento> Experimentos, se pueden ver los experimentos que se están ejecutando y los que ya han finalizado.

Panel de Experimentos a/b testing en google analytics


Configuración de objetivos a medir en el test

Los objetivos van muy de la mano con la información capturada, estos se deben configurar previamente antes de crear un experimento.

Configuración de eventos en experimento ab test

La creación de las alternativas de diseño que se crean para competir junto a la propuesta original, no necesariamente necesitan de conocimientos de código, gran parte de las tareas se pueden realizar utilizando el complemento Google Optimize para Chrome.

Edición de Etiquetas

Mover elementos mediante Drag and Drop

Herramientas de estilo para textos

Herramienta para edición de imágenes y control de cambios realizados

Edición de HTML

 

Probar como se ve en distintos dispositivos.

 

¡Y bueno!

Todos los cambios son buenos, personalmente ya tengo muy en consideración utilizar Google Optimize por un buen tiempo.

Conclusión: Eficaz, fácil y rápido de usar, Optimizely debe o debería estar temblando.

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