Soluções Players de Video

As funções onYouTubeIframeAPIReady, onPlayerReady, onPlayerStateChange são chamadas automaticamente pela API, mas especificamente:

onPlayerStateChange: É disparado sempre que o estado do player for alterado, a propriedade data é alterada conforme esta função é executada, atribuindo determinados valores que representam o estado do player, no caso do código acima (data = 1) representa o player em reprodução.

onPlayerReady: É disparado sempre que um player terminar de carregar e estiver pronto para começar a receber chamadas de API.

onYouTubeIframeAPIReady: Será executada assim que o código API do player for baixado.

Exemplo:

Para exemplificar vamos usar este site, o objetivo é acionar a conversão após dar play num player específico, pois o site em questão possui vários:

• Selecionamos o player para editar seu atributo src e criar um id único conforme explicado acima:

• Após deixar o iframe dentro dos padrões exigidos pela API inserimos o script dentro do console para fazer o teste:

• Após dar play no vídeo podemos ver que a conversão e a mensagem no console é disparada com sucesso!

Solução via GTM

Como uma alternativa mais simples à solução por gtag o GTM apresenta um método próprio para rastrear o player do Youtube, isto é possível graçãs ao trigger Youtube Video.

Requisitos:

• Antes de trabalhar com este trigger, é importante ativar as variáveis incorporadas de vídeo:

• Após ativá-las podemos trabalhar com mais flexibilidade com o trigger Youtube Video:

O trigger Youtube Video coleta dados dos players, por exemplo, se estão em reprodução, se estão pausados, a porcentagem de reprodução, etc.

Para trabalhar com este trigger sempre devemos ativar a opção “Add Javascript API support” ela adiciona o parâmetro “?enablejsapi=1” automaticamente no final de todos os atributos src dos iframes, nos poupando da parte de ter que editar eles manualmente como no método por Gtag.

Exemplo:

Para exemplificar vamos usar o mesmo site usado no tópico mostrando a solução por gtag, o objetivo é acionar uma conversão após dar play num player específico, pois o site em questão têm vários.

• Antes de tudo ativamos as variáveis incorporadas de vídeo como mostrado acima pois o website possui vários players e para diferenciar um vídeo do outro vamos precisar da variável “Video Title”.

• Após dar play vemos que a conversão é disparada com sucesso!

• Após dar play vemos no console como as respectivas mensagens de cada vídeo são disparadas junto com sua respectiva conversão:

Exemplo:

Vamos usar como exemplo este site, o objetivo é acionar uma conversão por GTM após iniciar a reprodução do player.

Neste exemplo, o código sofreu uma pequena mudança pois o seletor do iframe somente aparece após clicar neste botão:

• Após dar play notamos que a conversão no preview foi disparada com sucesso!

Por último, mas não menos importante em situações muito raras podemos nos encontrar com o player clássico de vídeo gerado pela tag <video>, neste caso o código é ainda mais simples, pois podemos fazer o seu rastreio a través de eventos de vídeo como play ou pause: