top of page
  • Foto do escritorDaniel Constant

Google Tag Manager Video Tracking | Rastreamento de Vídeo no GTM - Tutorial Completo


Video Tracking

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.

variáveis incorporadas google tag manager

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}}.

tabela de consulta gtm

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:

acionador video youtube

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:

evento google analytics video

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.

depurador gtm youtube video

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ê?

 
 

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.

acionador dom pronto

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.

html personalizado vimeo tracking

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.

variavel camada de dados tag manager

Passo 5: Criar Acionador do Evento video

No Menu 'Acionadores' -> Novo - > Evento Personalizado, crie conforme abaixo:

acionador evento personalizado video vimeo

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)

evento video vimeo universal analytics

- 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:

tabela consulta gerenciador de tags do google

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):

variavel datalayer gtm

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)

evento ga4 video vimeo

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:


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.

 

Comments


Daniel Constant

Prazer, eu sou o Daniel Constant e vou te ensinar tudo sobre Google Tag Manager. Você vai aprender a instalar Tags, Pixels e cadastrar seus eventos e conversões. Rastrear e Traquear ações não vai ser mais um problema pra você.

Precisa de Ajuda com seu Google Tag Manager?

Faço toda a configuração pra você:

  • Pixel Facebook;

  • Tag Google Ads;

  • Tags Google Analytics;

  • Eventos;

  • Conversões;

  • Pinterest, LinkedIn;

  • Traqueamento;

  • E muito mais.

Clique aqui e saiba mais ou me chame no WhatsApp.

Rbbbe08a939799189efe331c947089e3c.png
bottom of page