FAI DECOLLARE LA TUA WEB ANALYTICS. CON GOOGLE TAG MANAGER.

Le guide e i video tutorial gratuiti di Matteo Zambon, autore del libro "GTM per chi inizia"

Come tracciare la visualizzazione di video con Google Tag Manager

come-tracciare-la-visualizzazione-di-video-con-google-tag-manager

Hai inserito dei video di YouTube nel tuo sito? Ti interesserebbe avere informazioni sull’interazione degli utenti con questi video?

Grazie a questa guida potrai capire come fare, con Google Tag Manager, ad avere informazioni sulla visualizzazione dei video da parte degli utenti del tuo sito, capire quindi se hanno cliccato “play”, “pausa” o se hanno visionato il video, ad esempio, fino a metà, fino al 75% oppure interamente.

Prerequisito

Per fare questo utilizzeremo la JavaScript API di YouTube, che consente di controllare tramite JavaScript i video incorporati di YouTube per avere informazioni sulla loro riproduzione.

Ad esempio:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/MR5Uq1AMyk4″ frameborder=”0″ allowfullscreen></iframe>

Bene, in questo modo sarà possibile inviare i dati relativi alla visualizzazione del video a Google Tag Manager e quindi, successivamente, a Google Analytics.

Step 1 – Crea l’Attivatore

Per prima cosa crea l’Attivatore. Entra quindi nel tuo account di Google Tag Manager, nella sezione Attivatori > Nuovo.

Scegli evento: “Visualizzazione di pagina”;
Configura attivatore: “Pronto per DOM“;
Attiva su: attivalo sulle pagine che contengono i video che vuoi tracciare. Nel mio esempio ho impostato: “Page URL contiene Prova” in quanto ho creato una pagina di prova denominata appunto “Prova Video”.

Salva l’Attivatore nominandolo “PaginaVideoYoutube”.

tracciare-visualizzazione-video-1

Step 2 – Crea il Tag

Crea quindi un nuovo Tag, clicca su Tag > Nuovo.

Scegli il prodotto: “Tag HTML personalizzato”;
In Configura Tag, a questo punto, incolla il seguente codice:

<script type="text/javascript">

for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;)
 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 = []; 

function onYouTubeIframeAPIReady() {
 for (var e = document.getElementsByTagName("iframe"), x = e.length; x--;) {
 if (/youtube.com\/embed/.test(e[x].src)) {
 gtmYTListeners.push(new YT.Player(e[x], {
 events: {
 onStateChange: onPlayerStateChange,
 onError: onPlayerError
 }
 }));
 YT.gtmLastAction = "p";
 }
 }
}

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";
 }
}

function onPlayerError(e) {
 dataLayer.push({
 event: "error",
 action: "GTM",
 label: "youtube:" + e
 })
}

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);
 }
}
window.onbeforeunload = function (e) {
 var e = e || window.event;
 if(e)
 e.returnValue = 'na';
 return 'na';
};
window.onbeforeunload = trackYTUnload;

function trackYTUnload() {
 for (var i = 0; i < gtmYTplayers.length; i++)
 if (gtmYTlisteners[i].getPlayerState() === 1) {
 var video_data = gtmYTlisteners[i]['getVideoData'](),
 label = video_data.video_id+':'+video_data.title;
 dataLayer.push({
 event: 'youtube',
 action: 'exit',
 label: label
 });
 }
}
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>

Clicca ContinuaAttiva su: “Altro” e seleziona l’Attivatore appena creato, cioè “PaginaVideoYoutube”

Salva il Tag e rinominalo propriamente, ad esempio “Video YouTube – Prova Video”.

UPDATE 20/02/2017

Se hai problemi prova con la libreria minificata: che trovi a questo link

 

tracciare-visualizzazione-video-2

Step 3 – Visualizza in Anteprima

Attiva ora la modalità Visualizzazione in Anteprima di Google Tag Manager, vai nella pagina che contiene il video ed avvialo.

Nel box in basso vedrai comparire diversi eventi. Dalla scheda Data Layer puoi vedere che l’elemento action può avere il valore:”play”, “pause”, “0%”, “25%”, “50%”, “75%”, “100%” (rispettivamente quando il video inizia ad essere riprodotto, viene messo in pausa, arriva al 25%, al 50%, al 75% e viene completato) e label che corrisponde al codice e al titolo del video riprodotto.

tracciare-visualizzazione-video-3

Per passare i dati degli elementi action e label a Google Analytics dovrai creare delle Variabili.

Step 4 – Crea le Variabili

Vai quindi in Variabili > Nuova.

Scegli tipo: “Variabile di livello dati”;
Nome variabile livello dati: “action”;

Salva la Variabile nominandola, appunto, “Action”.

Allo stesso modo, crea la Variabile “Label”.

tracciare-visualizzazione-video-4

Step 5 – Crea il secondo Tag

L’ultimo step è creare un Tag per passare queste Variabili appena create a Google Analytics.

Tag > Nuovo.

Scegli prodotto: “Google Analytics”;
Scegli un tipo di tag: “Universal Analytics”;
ID di monitoraggio: “gaID” (la Costante personalizzata che corrisponde al tuo codice di monitoraggio Analytics);
Tipo di monitoraggio: “Evento”;
Categoria: “Video”;
Azione: {{Action}};
Etichetta: {{Label}}

Continua ed Attiva su: “Altro”. A questo punto ti comparirà una finestra con tutti gli Attivatori già creati, clicca su “Nuovo” per creare un nuovo Attivatore.

Per il nuovo Attivatore Scegli evento: “Evento personalizzato”. Nome evento: “youtube”.

Salva l’Attivatore e nominalo anch’esso “youtube”.

tracciare-visualizzazione-video-5

Clicca, infine, “Crea Tag”, io l’ho nominato in questo modo “GA – Event – Video Youtube”. Ora hai fatto tutto il necessario per trasferire queste informazioni a Google Analytics.

tracciare-visualizzazione-video-6

Potrai quindi visualizzare tra gli eventi di Google Analytics (Comportamento > Eventi) tutti gli eventi relativi alla visualizzazione dei video da parte degli utenti. Puoi notare quindi se gli utenti tendono a vedere interamente i tuoi video, oppure arrivano la maggior parte delle volte al 25%, ad esempio.

Nota

Nel video tutorial ho utilizzato l’ultima versione degli script che ha dei nomi leggermente diversi rispetto alla guida scritta. Gli script e le informazioni su come implementare questa funzionalità di tracciamento sono stati presi da un post di Lunametrics: http://www.lunametrics.com/blog/2015/05/11/updated-youtube-tracking-google-analytics-gtm/

Prova ad implementare questa funzionalità, se dovessi riscontrare problemi, non esitare a scrivermi!

Buon Tag!

 

9 commenti su “Come tracciare la visualizzazione di video con Google Tag Manager

  1. Ciao Matteo,
    Complimenti per le guide, sono molto semplici ed efficaci! Sto avendo problemi ad implementare questo script, nonostante abbia seguito la guida e preso il codice per “VIMEO” dal link che hai postato su, continua a non funzionare (mentre se uso il codice di youtube funziona alla grande), dici che per il tracking dei video vimeo, ci sia bisogno di eseguire dei passaggi differenti?
    Grazie

  2. Buongiorno,
    ma se il video non fosse di youtube, bensì avesse una fonte differente?
    Grazie

  3. Grazie per la risposta!
    Proverò a fare come consigli.

  4. Ciao,
    ho cominciato ad usare TagManager da pochissimo tempo e sto imparando tanto grazie alle vostre guide.

    Vorrei sapere se è possibile tracciare in modo separato le singole visualizzazioni a diversi video presenti in un’unica pagina.

    Grazie mille!

    • Ciao Sara,
      in realtà nella variabile {{Label}} hai il valore del titolo e url del video quindi potresti usare quello come discriminatore e magari farti dei report personalizzati su Google Analytics.

      A presto!

    • Niente da fare.
      Non riesco ad usare correttamente la JavaScript API dei singoli video e impostare correttamente la variabile Label con il valore del titolo e url del video.

      Potresti aiutarmi?

      Grazie

    • Ciao Sara, nella variabile {{Label}} non è presente il titolo del video?
      PS inviami una email a mz@inrisalto.it

Hai ancora qualche dubbio? Chiedi pure qui sotto, sarò pronto a risponderti!

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Schermata dashboard Club Tag Manager Italia

Entra GRATIS nel Club Tag Manager Italia!

Ho riaperto temporaneamente le iscrizioni al Club: il posto – l’unico posto – dove puoi accedere a TUTTI i miei materiali avanzati (ore e ore di roba).

In aggiunta, nel Club rispondo a tutte le tue domande in un gruppo di Facebook riservato ai membri!

Richiedi subito il tuo PASS GRATUITO di 60 giorni per provare senza impegno il Club Tag Manager Italia!