Google Tag Manager Video Tracking | Rastreamento de Vídeo no GTM - Tutorial Completo
Querendo saber como anda as interações dos seus usuários com os vídeos do seu site?
Só encontra por aí guias de como rastrear vídeos do YouTube no seu site, né?
Eu sei, eu sei... não existe só YouTube no mundo e você precisa de ajuda...
Então vem aprender como rastrear os vídeos corretamente pelo Gerenciador de Tags do Google.
Vou começar pelos vídeos do YouTube pois é o mais procurado, em seguida vou falar sobre como rastrear vídeos de outros players.
Índice:
Como rastrear vídeos do YouTube com o GTM
Passo 1: Habilitar as variáveis incorporadas de Vídeo
Tudo começa com as variáveis, pois sempre utilizamos seus valores para o restante dos passos no Google Tag Manager.
No GTM, acesse o Menu 'Variáveis'-> Configurar e selecione todas as variáveis de Vídeo.
Passo 2: Criar uma variável Tabela de Consulta
O que vamos definir aqui:
1) Quando um usuário/visitante começar a assistir um vídeo ou terminar de assistir um vídeo vamos enviar um evento para o Google Analytics com essas informações;
2) Quando o usuário assistir somente uma parte do vídeo, por exemplo 25% do vídeo, vamos enviar para o Google Analytics o % assistido do vídeo.
Para fazer isso vamos utilizar a variável Tabela de consulta.
No GTM, acesse o Menu 'Variáveis' -> Nova -> Tabela de Consulta e preencha conforme abaixo:
Em 'Variável de entrada' inclua a variável {{Video Status}};
Em 'Tabela de consulta', clique no botão para incluir uma linha e inclua: "progress" (sem as aspas e tudo minúsculo) no campo 'Entrada'. Em 'Saída', inclua {{Video Percent}}% assistido;
Clique para adicionar uma nova linha e coloque "start" (sem as aspas e tudo minúsculo) como 'Entrada' e, em 'Saída', inclua Início;
Adicione mais uma nova linha: 'Entrada' = "complete" (sem as aspas e tudo minúsculo) e 'Saída' = Vídeo Completo;
Selecione a opção 'Definir valor padrão' e em 'Valor padrão' inclua {{Video Status}}.
Agora deixa eu te explicar o que fizemos:
Utilizando o valor de {{Video Status}} como entrada, definimos que:
sempre que o usuário iniciar o vídeo no seu site, você vai ter o valor Início;
sempre que o usuários assistir um vídeo até o final, você vai ter o valor Vídeo Completo;
sempre que o usuário assistir um vídeo, você vai ter o % de progresso atual;
sempre que o valor de {{Video Status}} for diferente desses casos vamos ter o valor dessa variável.
Passo 3: Criar Acionador de Vídeo do YouTube
No GTM, acesse o menu 'Acionadores' -> Novo -> Configuração do acionador -> Vídeo do YouTube.
Preencha conforme a imagem:
Em Porcentagens, você pode incluir outros valores e/ou retirar algum que está ali. Apenas de lembre de sempre separar os valores com vírgula.
Se quiser rastrear também se o vídeo foi pausado, ignorado e armazenado em buffer, é só marcar a opção.
O suporte para JavaScript (opção avançada) não é obrigatório, mas eu prefiro utilizar porque altera um pouquinho a forma como as mudanças no vídeo são rastreadas.
Passo 4: Criar a Tag de evento do Google Analytics
Vou estar mostrando apenas como criar o evento para o Google Analytics - Universal Analytics porque o GA4 já rastreia automaticamente vídeos do YouTube se você ativou a Métrica otimizada.
No GTM, acesse o Menu 'Tags'-> Nova -> Configuração da tag -> Google Analytics: Universal Analytics e configure conforme a imagem abaixo:
Em 'Acionamento', inclua o Acionador que criamos no Passo 3.
Passo 5: Teste e depois publique
Se você chegou até aqui, espero que tenha feito todas os 4 passos anteriores, então é hora de testar tudo que você fez.
Abra o modo de depuração do GTM e efetue ações em algum vídeo do YouTube que você tem na sua página. Você vai ver eventos referente ao Vídeo do YouTube aparecendo.
Depois de verificar no depurador do Google Tag Manager, confirme se os eventos aparecem também na guia de eventos do Google Analytics.
Já conhece os cursos de GTM que preparei pra você?
Dominando o Google Tag Manager: Um curso que vai te ajudar a dominar essa ferramenta incrível!
Google Tag Manager - Básico: Pra você que não precisa de nada muito avançado do GTM mas quer suas Tags, Pixels e eventos funcionando da forma correta.
Como Rastrear Vídeos do Vimeo com o GTM
Seus vídeos não são do YouTube? São do Vimeo?
Ok, sem problemas, dá pra rastrear também, porém... é... vou ser sincero com você, é bem mais complicado mas eu vou te ensinar a fazer!
O código de rastreamento de vídeo do Vimeo é um pouco 'pesado' e se o incluirmos em todas as páginas, vamos deixar nossas páginas lentas sem a necessidade. Por isso vamos ativar o nosso rastreador somente nas páginas que realmente possuírem um vídeo do Vimeo incorporado.
Passo 1: Criar uma variável JavaScript Personalizado
Entre no Menu 'Variáveis' -> Nova -> JavaScript Personalizado e insira o código abaixo:
//Essa função verifica se existe algum vídeo Vimeo presente
//se encontrar algum vídeo, retorna true, senão retorna false
function () {
for (var e = document.getElementsByTagName("iframe"), x=0; x < e.length; x++) {
if (/^https?:\/\/player.vimeo.com/.test(e[x].src)) {
return true;
}
}
return false;
}Passo 2: Acionador para Vimeo na Página
Menu 'Acionadores' -> Novo -> DOM Pronto e configure para só alguns eventos. A condição será quando a variável que criamos no Passo 1 for igual a true.
Passo 3: Rastreador de Eventos do Vimeo
Esse rastreador é um trecho de código que ativa uma função ou várias funções no seu site para procurar certas ações ou eventos. Para este caso, vamos utilizar um rastreador específico para procurar interações com vídeos do Vimeo.
Crie uma tag de HTML personalizado com o nome "[HTMLp] - Rastreador Vimeo" (sem as aspas) e inclua o código abaixo ( a versão original deste código tem como autores: Bill Tripple e Bogdan Bistriceanu de Cardinal Path).
Esse rastreador foi atualizado para suportar mudanças que ocorreram no Vimeo.
<!--
Google Analytics Tag Manager (V2) custom HTML tag for Vimeo video tracking
Copyright 2016, Cardinal Path, Inc.
Original author: Bill Tripple <btripple@cardinalpath.com>
Revised by: Bogdan Bistriceanu <bbistriceanu@cardinalpath.com>
Updated by: Julius Fedorovicius <julius@analyticsmania.com> and Richard Outram <Richard.Outram@simmbiotic.com>
Updated by: Daniel Constant <contato@daniel-constant.com>
Version 2.2
-->
<script>
var dataLayer = (typeof(dataLayer) !== "undefined" && dataLayer instanceof Array) ? dataLayer : [];
var videoLabels=[];
var lastP=[];
//Declaração das variáveis que vão conter as informações do vídeo
var _playerTitle = {}, _playerAuthor = {}, _playerAuthorURL = {}, _playerUploadDate = {};
try{
init();
}
catch(err){
dataLayer.push({
'event': 'gtm.error',
'errorMessage': e.message,
// se você não colocar o nome conforme indicado nesse passo 3, será
// necessário ajustar o nome aqui também
'tag': '[HTMLp] - Rastreador Vimeo'
})
}
function init(){
try{
var player=document.getElementsByTagName("iframe");
for (i = 0; i < player.length; ++i) {
var url=player[i].getAttribute("src");
if(/player\.vimeo\.com\/video/.test(url)){ // vimeo encontrado
if(!player[i].hasAttribute("id")){ // id faltando
player[i].setAttribute("id","vimeo_id_"+i); // add id
}
var urlUpdated=false;
if(!/api=/.test(url)){ // verifica parâmetro api no src
url=updateUrl(url,"api",1);
urlUpdated=true;
}
if(!/player_id=/.test(url)){ // verifica se player_id está no src
url=updateUrl(url,"player_id",player[i].getAttribute("id"));
urlUpdated=true;
}
if(urlUpdated){ // refaz os atributos do src com os parametros adicionados
player[i].setAttribute("src",url)
}
videoLabels[player[i].getAttribute("id")]=player[i].getAttribute("src");
}
}
// Rastreia mensagens do player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
}
catch(err){
}
}
function updateUrl(url,param,value){
try{
return url+((/\?/.test(url)) ? "&" : "?")+param+"="+value;
}
catch(err){
}
}
// Trata as mensagens recebidas do player
function onMessageReceived(e) {
try{
var data = e.data;
if(typeof data === "string"){
data = JSON.parse(data);
}
switch (data.event) {
case 'ready':
onReady(data);
break;
case 'play':
onPlay(data);
break;
case 'pause':
onPause(data);
break;
case 'timeupdate':
onPlayProgress(data);
break;
}
}
catch(err){
}
}
// Função de ajuda para enviar mensagem para o player
function post(action, value) {
try{
var data = {
method: action
};
if (value) {
data.value = value;
}
var message = JSON.stringify(data);
var player = document.getElementsByTagName("iframe");
var url;
var prot;
for (i = 0; i < player.length; ++i) {
url=player[i].getAttribute("src");
if(/player\.vimeo\.com\/video/.test(url)){
// Verificase if protocol existe
prot = player[i].getAttribute('src').split('?')[0].split('//')[0];
// Se não existir, então é necessário adicionar na "url"
if (!prot){
url="https:" + player[i].getAttribute("src").split('?')[0];
}
player[i].contentWindow.postMessage(data, url);
}
}
}
catch(err){
}
}
function getLabel(id){
try{
return videoLabels[id].split('?')[0].split('/').pop();
}
catch(err){
}
}
//our function that will use the Vimeo oEmbed API to retrieve additional information about the video
function getVimeoInfo(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
}
//the callback function which takes the data received from the Vimeo oEmbed API and places it into the corresponding objectes
function vimeoCallback(e){
//console.log(e);
_playerTitle[e['video_id']] = e['title'];
_playerAuthor[e['video_id']] = e['author_name']
_playerAuthorURL[e['video_id']] = e['author_url']
_playerUploadDate[e['video_id']] = e['upload_date']
}
function onReady(data) {
try{
//execute our function which queries the Vimeo oEmbed API once the embedded videos are "ready"
getVimeoInfo("https://www.vimeo.com/api/oembed.json?url=https://vimeo.com/"+getLabel(data.player_id)+"&callback=vimeoCallback", vimeoCallback);
post('addEventListener', 'play');
post('addEventListener', 'pause');
post('addEventListener', 'finish');
post('addEventListener', 'playProgress');
}
catch(err){
}
}
function onPlay(data){
try{
// enviar os dados para o DataLayer - Video Iniciado
dataLayer.push({
event: "video",
eventCategory: "vimeo",
eventAction: "Vídeo Iniciado",
eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
vimeo_playerID: getLabel(data.player_id),
vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
nonInteractive: true
});
}
catch(err){
}
}
function onPause(data){
try{
// enviar os dados para o DataLayer - Video Pausado
dataLayer.push({
event: "video",
eventCategory: "vimeo",
eventAction: "Vídeo Pausado",
eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
vimeo_playerID: getLabel(data.player_id),
vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
nonInteractive: true
});
}
catch(err){
}
}
// Rastreia progresso: 25%, 50%, 75%, 100%
function onPlayProgress(data) {
try{
var t = data.data.duration - data.data.seconds <= 1.5 ? 1 : (Math.floor(data.data.seconds / data.data.duration * 4) / 4).toFixed(2);
if (!lastP[data.player_id] || t > lastP[data.player_id]) {
lastP[data.player_id]=t;
if (parseFloat(t) != 0){
// enviar os dados para o DataLayer - Progresso
dataLayer.push({
event: "video",
eventCategory: "vimeo",
eventAction: t*100+"%",
eventLabel: _playerTitle[getLabel(data.player_id)].toLowerCase() + " - " + getLabel(data.player_id),
vimeo_playerID: getLabel(data.player_id),
vimeo_playerTitle: _playerTitle[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthor: _playerAuthor[getLabel(data.player_id)].toLowerCase(),
vimeo_playerAuthorURL: _playerAuthorURL[getLabel(data.player_id)].toLowerCase(),
vimeo_playerUploadDate: _playerUploadDate[getLabel(data.player_id)],
nonInteractive: true
})
}
}
}
catch(err){
}
}
</script>Inclua o Acionador, aquele que criamos no Passo 2, na Tag.
Já foi bastante coisa, lembra de tudo que foi feito?
Variável JavaScript Personalizado para verificar se existe algum vídeo Vimeo na página;
Acionador de DOM Pronto quando o valor da variável JavaScript Personalziado for true;
HTML Personalizado de rastreamento de eventos do Vimeo.
Nesse ponto, se você quiser testar através do modo de depuração do GTM, você já vai poder encontrar um evento com o nome video na barra de eventos do depurador.
Passo 4: Criando as Variáveis da Camada de dados (DataLayer)
O HTML que criamos no Passo 3 envia um evento na camada de dados (dataLayer) a cada ação ou progresso no vídeo do Vimeo.
Vamos utilizar 3 campos desse DataLayer.
Passo 5: Criar Acionador do Evento video
No Menu 'Acionadores' -> Novo - > Evento Personalizado, crie conforme abaixo:
Passo 6: Criando Tag do Google Analytics
- Tag Google Analytics: Universal Analytics
Tipo de acompanhamento: Evento
Categoria: {{[dL VAR] - eventCategory}}
Ação: {{[dL VAR] - eventAction}}
Rótulo: {{[dL VAR] - eventLabel}}
Acionamento: [AC] [EVp] - Interação de Vídeo (Acionador criado no Passo 5)
- Tag Google Analytics: evento do GA4
Vamos utilizar os mesmo dados que os eventos de video coletados automaticamente para manter o padrão do GA4, veja aqui os eventos coletados automaticamente.
Para isso, primeiro vamos criar a seguinte tabela de consulta:
Nessa tabela de consulta, utilizamos o valor do {{[dL VAR] - eventAction}}, recuperado do HTML personalizado do Passo 3, para definir qual o evento que vamos enviar ao GA4.
Além disso, vamos criar uma nova variável da camada de dados com a url do vídeo (também enviado pelo HTML personalizado do Passo 3):
Pronto, agora vamos criar a Tag de evento do GA4.
Nome do Evento: {{[TC] - Evento de Interação de Vídeo}}
video_percent: {{[dL VAR] - eventAction}}
video_provider: {{[dL Var] - eventCategory}}
video_title: {{[dL VAR] - eventLabel}}
video_url: {{[dL VAR] - vimeo_playerAuthorURL}}
Acionamento: [AC] [EVp] - Interação de Vídeo (Acionador criado no Passo 5)
Passo 7: Testar e Publicar
Abra o modo de depuração do GTM e efetue ações em algum vídeo do Vimeo que você possui na sua página. Você vai ver eventos com o nome video aparecendo.
Depois de verificar no depurador do Google Tag Manager, confirme se os eventos aparecem também na guia de eventos do Google Analytics.
Como Rastrear Vídeo HTML5 e Vídeos do Wistia
Eu preparei uma receita de contêiner pronto tanto para vídeos HTML quanto para vídeos do Wistia.
Ambas as receitas estão disponíveis para compra somente para os alunos dos meus cursos por um preço bem baixo.
Se você ainda não é aluno, chegou a hora de se inscrever:
Dominando o Google Tag Manager: Um curso que vai te ajudar a dominar essa ferramenta incrível!
Google Tag Manager - Básico: Pra você que não precisa de nada muito avançado do GTM mas quer suas Tags, Pixels e eventos funcionando da forma correta.
Se encontrar algum bug nos processos descritos aqui, não deixe de comentar para que eu possa ajustá-lo.
Até o próximo post!
Sobre o autor:
Me chamo Daniel Constant, trabalho com TI e Produtos Digitais há mais de 14 anos e vou te ensinar sobre o Google Tag Manager.
.jpg)
Kommentare