Como trackear áudio e vídeo HTML5 com Google Tag Manager

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Google Tag Manager

Se as páginas do seu site possuem áudio ou vídeo rodando em player HTML5, é importante trackear os cliques no "play" para mensurar o engajamento dos usuários.

Considerando que você já usa o Google Tag Manager e Google Analytics para configurar a captura de ações do usuário e mensurar o tráfego, provavelmente já tentou usar o acionador "Clique em todos os elementos" para trackear o clique no "play".

▶ Se preferir, acesse "Como trackear áudio e vídeo HTML5 com Google Tag Manager + Analytics (4 e Universal) e Tag Assistant" no YouTube, com muito mais detalhes.

Infelizmente o Google Tag Manager pode não capturar esse tipo de clique, e se isso acontecer, a solução é criar um "ouvinte" para essa ação. Quando o usuário clicar no botão "play", um evento personalizado com o nome "audio" será capturado pelo GTM e ele poderá ser usado como acionador para qualquer tag.

O primeiro passo é criar uma Tag do tipo HTML Personalizado e que deve ser executada quando o DOM estiver pronto. O conteúdo da tag é o código JavaScript a seguir:

<script>
	
	var audio = document.getElementsByTagName('audio');
	
	audio[0].onplay = function() {
		 dataLayer.push({
					'event': 'audio',
					'audioPlayerAction': 'play',
					'audioTitle': this.currentSrc,
				});
	};
	
</script>

O código apresentado funciona para cliques no botão play do primeiro elemento de áudio da página, considerando que existe apenas um. Para criar o ouvinte para vídeo, faça uma cópia do código e cole logo abaixo, substituindo a palavra audio por video.

O segundo passo é criar um Acionador do tipo Evento Personalizado com o nome do evento igual a "audio".

O terceiro e último passo é criar a sua Tag do tipo Google Analytics (Universal ou 4) com um evento personalizado e usar o Acionador criado anteriormente.