893 anunciantes en línea
893 anunciantes en línea
Aquí encontraras toda la información necesaria sobre la implementación de tus códigos de seguimiento en Google Analytics. ¡Pregunta a nuestros expertos todas tus dudas!
Guiame
favorite_border
Responder

Trackear video, sera error en el datalayer ???

Estudiante ✭
# 1
Estudiante ✭

buenas noches a todos

 

Tengo un video, al cual le quiero medir la cantidad de veces que fue reproducido, he procedido a implementar, lo requerido para poder seguirlo, a traves de eventos con tag manager.

Y tambien tengo implementado el evento de esta manera, siguendo de un ejemplo encontrado en la internet,

 

img1.png

 

etiqueta 1

 

 

img2.png

 

 

 

etiqueta 2   

 

 

 

 

 

 

 

img3.png

 

 

Activador

 

 

 

 

 

img4.png

 

y este ultimo, son las variables

 

 

 

 

 

 

*   El  vídeo tiene implementado el plugin de video.js,

También  he incorporado, los eventos  ( Datalayer)como creo, se deben llamar  arriba del contenedor de tag manager.

 

 


datalayer.png

en que estoy fallando, sera en el datalayer??

 

gracias...

 

saludos

Re: Trackear video, sera error en el datalayer ???

[ Editado ]
Profesional ✭ ✭ ✭
# 2
Profesional ✭ ✭ ✭

Hola @jhonny p,

 

Entiendo que ¿Es un vídeo de YouTube, verdad?

Te facilito este código que ademas de hacer el segumiento de play, pause mide el % de visualización del vídeo. 0, 25, 50, 75 y 100%.  

 

En ese caso tienes que añadir está etiqueta personalizada para generar el Datalayer

<script type="text/javascript">
// OPTIONAL: Enable JSAPI if it's not already on the URL
// note: this will cause the Youtube player to "flash" on the page when reloading to enable the JS API
for (var e = document.getElementsByTagName("iframe"), x = e.length; x--Guiño
  if (/youtube.com\/embed/.test(e[x].src))
     if(e[x].src.indexOf('enablejsapi=') === -1)
        e[x].src += (e[x].src.indexOf('?') ===-1 ? '?':'&') + 'enablejsapi=1';

var gtmYTListeners = []; // support multiple players on the same page
// attach our YT listener once the API is loaded
function onYouTubeIframeAPIReady() {
    for (var e = document.getElementsByTagName("iframe"), x = e.length; x--Guiño {
        if (/youtube.com\/embed/.test(e[x].src)) {
            gtmYTListeners.push(new YT.Player(e[x], {
                events: {
                    onStateChange: onPlayerStateChange,
                    onError: onPlayerError
                }
            }));
            YT.gtmLastAction = "p";
        }
    }
}

// listen for play/pause, other states such as rewind and end could also be added
// also report % played every second
function onPlayerStateChange(e) {
    e["data"] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e["target"]);
    var video_data = e.target["getVideoData"](),
        label = video_data.video_id+':'+video_data.title;
    if (e["data"] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {
        dataLayer.push({
            event: "youtube",
            action: "play",
            label: label
        });
        YT.gtmLastAction = "";
    }
    if (e["data"] == YT.PlayerState.PAUSED) {
        dataLayer.push({
            event: "youtube",
            action: "pause",
            label: label
        });
        YT.gtmLastAction = "p";
    }
}

// catch all to report errors through the GTM data layer
// once the error is exposed to GTM, it can be tracked in UA as an event!
// refer to https://developers.google.com/youtube/js_api_reference#Events onError
function onPlayerError(e) {
    dataLayer.push({
        event: "error",
        action: "GTM",
        label: "youtube:" + e
    })
}

// report the % played if it matches 0%, 25%, 50%, 75% or completed
function onPlayerPercent(e) {
    if (e["getPlayerState"]() == YT.PlayerState.PLAYING) {
        var t = e["getDuration"]() - e["getCurrentTime"]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).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({
                event: "youtube",
                action: t * 100 + "%",
                label: label
            })
        }
        e["lastP"] != 1 && setTimeout(onPlayerPercent, 1000, e);
    }
}


// Crossbrowser onbeforeunload hack/proxy
// https://developer.mozilla.org/en-US/docs/WindowEventHandlers.onbeforeunload
window.onbeforeunload = function (e) {
 var e = e || window.event;
 // For IE and Firefox prior to version 4
 if(e)
 e.returnValue = 'na';
 // For Safari
 return 'na';
};
window.onbeforeunload = trackYTUnload;
 
function trackYTUnload() {
 for (var i = 0; i < gtmYTplayers.length; i++)
 if (gtmYTlisteners[i].getPlayerState() === 1) { // playing
 var video_data = gtmYTlisteners[i]['getVideoData'](),
 label = video_data.video_id+':'+video_data.title;
 dataLayer.push({
 event: 'youtube',
 action: 'exit',
 label: label
 });
 }
}
// load the Youtube JS api and get going
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>

 

 Tienes que añadir en la url del Youtube antes de la "

?enablejsapi=1

 ejemplo

<iframe width="420" height="315" src="//www.youtube.com/embed/aabbbccc?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

 

Categoría : {{evento}}

action :  {{dataLayer Action}}

Label:      {{dataLayer label}}

 

Activador del Evento: youtube

 

 

Saludos

Trackear video, sera error en el datalayer ???

Estudiante ✭
# 3
Estudiante ✭

@J Carlos Díaz

muchas gracias por responder.

 

El video que tengo implementado esta sobre la api de html5 video, ( youtobe,  no)

y su posterior  plugin video.js

 

tengo 2 preguntas:

 

el codigo que tu me facilistastes, en caso tal se puede modificar para lo anterior mencionado??

 

 el datalayer si esta bien implementado??. esta es la ruta de mi video

 

http://estrategiasrelacionales.com/colombiano/cumple_agosto/?[param]

 

muchas gracias por tu ayuda, estare  atento a tu respuesta

 

saludos

 

Trackear video, sera error en el datalayer ???

[ Editado ]
Profesional ✭ ✭ ✭
# 4
Profesional ✭ ✭ ✭

Hola @jhonny p,

 

Los vídeos que he traqueado siempre han sido de YouTube o Vimeo. 

Yo subiría el Vídeo a YouTube, además puedes ganar alguna visita orgánica.

 

 

Puedes comprobar si está bien trakeado con debug de GTM. Veras si dispara las etiquetas.

 

Saludos

 

Trackear video, sera error en el datalayer ???

Estudiante ✭
# 5
Estudiante ✭

@J Carlos Díaz

agradezco tu intención de ayudarme, pero lastimosamente  no se puede cambiar el tipo de vídeo, ya que el usuario final es quien desea que sea con el api html5 video

 

no acepta youtobe, ni tampoco vimeo

 

gracias...

saludos.......

Trackear video, sera error en el datalayer ???

Profesional ✭ ✭ ✭
# 6
Profesional ✭ ✭ ✭

Trackear video, sera error en el datalayer ???

Estudiante ✭
# 7
Estudiante ✭

hola de nuevo @J Carlos Díaz

 

muchas gracias por la informacion que me pasaste, me ha sido me gran ayuda,  con toda esta informacion encontrada, y otorgada de tu parte, he notado que a mi sitio web no tiene incorporada esta etiqueta,

<script>
    var myPlayer = videojs("example_video_1");
    var videoTitle = "Fishing in The Ocean";
</script>

justo debajo de la etiqueta <video></video>

 

 

podra ser este el motivo por el cual no muestra resultados en analytics??

ya intentare y te contare, nuevamente agradecido por tu gran ayuda

Trackear video, sera error en el datalayer ???

Estudiante ✭
# 8
Estudiante ✭

hola @J Carlos Díaz

 

he seguido cada uno de los pasos del articulo de este link:

 

http://lametrica.com/como-analizar-videos-con-google-analytics-tag-manager-y-video-js/

 

 

para su implementacion y rastreo,pero aun sigo sin ver metricas en analytics???

que puede ser ??

 

este es el link de mi sitio web:

 

http://estrategiasrelacionales.com/colombiano/cumple_agosto/?[param]

 

gracias .....

saludos