O DTM é uma ferramenta que permite ter mais rapidez em seu trabalho. Podemos rastrear vídeos em HTML5 usando regras baseadas em eventos no DTM. No entanto, ele não tem nenhuma funcionalidade pronta para rastrear vídeos fornecidos por outros provedores de vídeo (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer, etc.)
Se alguém usa o serviço de vídeo que tem algum tipo de API JavaScript (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer etc.), podemos usar o DTM para adicionar o código da API para ouvir os diferentes eventos de vídeo. É necessário para carregar o código que você precisa em uma regra de carregamento de página ou medição de aplicativo ou arquivo s_code (verifique se ele é carregado no local correto, ou seja, no topo da página ou na parte inferior da página), e que irá configurar a API e / ou os ouvintes para rastrear os vídeos. Então temos que definir o que queremos fazer quando se trata de capturar e enviar os dados de vídeo. Podemos usar a implementação do Módulo de mídia que não requer configurações adicionais no DTM.
Por favor, veja os seguintes passos para rastrear o “YouTube Video” por meio da Implementação do módulo de mídia.
Etapa 1: os vídeos do YouTube podem ser incorporados em uma página da Web por meio de uma tag de iframe ou de objeto.
Incorporação de objeto: Incorpore o vídeo com a API ativada, por exemplo, http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer na sua página da web.
Observação - certifique-se de que você não tenha duas tags com a mesma ID, mas verifique se a tag tem um código que corresponda ao parâmetro playerapiid
<p>Sample YouTube in OBJECT embed tag</p>
<object id="myytplayer" width="425" height="344" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://www.youtube.com/v/AhgtoQIfuQ4?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="myytplayer2" src="http://www.youtube.com/v/AhgtoQIfuQ4?fs=1&rel=0wcv8zQo9HyU&enablejsapi=1&playerapiid=myytplayer2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
Incorporar Iframe: Incorpore o vídeo em um iframe com a API ativada, por exemplo, http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1 na sua página da web.
Nota: Deve fornecer um "Id" para o iframe. Consulte abaixo o código para obter uma ajuda mais detalhada
<p>YouTube video in iframe embed tag</p> <iframe id="player1" frameborder="0" width="425" height="344" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/wcv8zQo9HyU?enablejsapi=1">
Etapa 2: adicione o módulo de Rastreamento de mídia do Adobe Analytics ao seu Appmeasurement (ou semelhante). Ele deve ser colocado em algum lugar após a sua seção de configuração e antes do "NÃO ALTERAR NADA ABAIXO DESTA LINHA!". No caso de implementação legada, você precisa ter uma versão de código do H.15.1 ou mais recente. Você obterá esse Módulo de mídia da sua conta do Adobe Analytics da seguinte maneira: Admin ----> Gerenciador de código ----> App Measurement ------> App Measurement Media Module.js
Caso “Gerenciador de código” não seja exibido em Admin, você não terá acesso. Para obter acesso, peça a um usuário administrador que adicione sua conta a um grupo que tenha acesso ao Gerenciador de código.
Etapa 3: adicione o seguinte código no cabeçalho da página da web em que o vídeo do YouTube é incorporado logo abaixo do código de cabeçalho DTM.
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var video_obj=null;
var video_length=0;
var video_name='Movie name ' + new Date().getTime();
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
console.log('*** iFrame embed onYouTubeIframeAPIReady');
player = new YT.Player("player1", {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
// event.target.playVideo();
console.log('*** iFrame embed onPlayerReady ', player);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log('*** iFrame embed onPlayerStateChange ' + event.data + ' --- YT Player state ' + YT.PlayerState.PLAYING, player.getCurrentTime(), player);
/*
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
*/
video_name = player.getVideoData();
video_name = video_name.title;
video_length = player.getDuration();
// if(event.data === YT.PlayerState.PLAYING && (event.data === 1 || event.data < 0)){
if((event.data === 1 || event.data < 0) && YT.PlayerState.PLAYING === 1){
//*-* PLAY
console.log("*-* Player is on play mode " + event.data + ' ' + player.getCurrentTime(), s);
if(player.getCurrentTime() === 0) {
s.Media.open(video_name, video_length, 'Youtube Object Embed');
s.Media.play(video_name, player.getCurrentTime());
} else {
s.Media.play(video_name, player.getCurrentTime());
}
}else if(event.data === 2){
//*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!!
console.log("*-* Player is on pause mode " + event.data+' '+player.getCurrentTime());
s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP'
}else if(event.data === 3){
//*-* SKIPPING
console.log("*-* Player is on skipping mode " + event.data);
s.Media.stop(video_name, player.getCurrentTime());//this will cause the monitor to have media.event='STOP'
}else if(event.data === 0){
//*-* Completed
console.log("*-* Player has been completed " + event.data);
s.Media.stop(video_name, player.getCurrentTime());
s.Media.close(video_name);
}
}
function onYouTubePlayerReady(playerId) {
video_obj=document.getElementById(playerId);//playerId
video_obj.addEventListener("onStateChange", "onytplayerStateChange");
video_length= video_obj.getDuration();
console.log('*-* Youtube Video Ready - in call back function --- ' + playerId, 'video duration= ' + video_obj.getDuration(), 'video current time= ' + video_obj.getCurrentTime());
}
function onytplayerStateChange(newState) {
console.log("*-* Player's new state: " + newState);
//-1 --> <0 is not started
if(newState===1){
//*-* PLAY
console.log("*-* Player is on play mode " + newState + ' ' + video_obj.getCurrentTime(), s);
if(video_obj.getCurrentTime() === 0) {
s.Media.open(video_name, video_length, 'Youtube Object Embed');
s.Media.play(video_name, video_obj.getCurrentTime());
// s.Media.play(video_name, video_obj.getCurrentTime(),5,'a segment name', 30);
} else {
s.Media.play(video_name, video_obj.getCurrentTime());
}
}else if(newState===2){
//*-* PAUSE --- CAN USE THIS FOR ENDING TOO =-- check on time -5 sec!!
console.log("*-* Player is on pause mode " + newState+' '+video_obj.getCurrentTime());
s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
// s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
//*-*if not used (ie. not pausing) then CLOSE will kick in when the video completes otherwise video completes will also send 'STOP'
}else if(newState===3){
//*-* SKIPPING
console.log("*-* Player is on skipping mode " + newState);
s.Media.stop(video_name, video_obj.getCurrentTime());//this will cause the monitor to have media.event='STOP'
}else if(newState===0){
//*-* Completed
console.log("*-* Player has been completed " + newState);
s.Media.stop(video_name, video_obj.getCurrentTime());
s.Media.close(video_name);
}
}
</script>
Etapa 4: depois de inserir o código em seu projeto, você precisa mapear as variáveis de conversão e os eventos que você está usando para rastrear o vídeo. Adicione o seguinte código no AppMeasurement ou arquivo s_code.
s.loadModule("Media");
s.Media.onLoad = function() {
console.log('**** MEDIA module loaded');
/*Configure Media Module Functions */
s.Media.autoTrack= false;
s.Media.trackWhilePlaying=false;
// s.Media.trackSecond=0; // set to 30 if milestone in seconds
console.log('**** MEDIA module loaded1');
s.Media.completeByCloseOffset = true; //*** Enabled if you want to allow the video to be completed a few seconds before the actual end of the video
s.Media.completeCloseOffsetThreshold = 10;
s.Media.trackVars="events,eVar16,eVar17"; //**NOTE: Add additional data which will be pushed either in the plugin or on the page
s.Media.trackEvents="event16,event17,event18,event19,event20,event21"; //**NOTE: Add additional data which will be pushed either in the plugin or on the page
s.Media.trackMilestones="25,50,75";
s.Media.playerName="My TEst You tube video tracking";
s.Media.segmentByMilestones = false;
s.Media.trackUsingContextData = true;
console.log('**** MEDIA module loaded2');
s.Media.contextDataMapping = {
"a.media.name":"eVar16",
"a.media.segment":"",
"a.contentType":"eVar17",
"a.media.timePlayed":"event18",
"a.media.view":"event16",
"a.media.segmentView":"",
"a.media.complete":"event17",
"a.media.milestones": {
25:"event19",
50:"event20",
75:"event21"
}
}
console.log('**** MEDIA module loaded3');
/*
* can use the below IF wanna pass additional data --- Need to update s.Media.trackVars --- BUT we could potential set it on above var and avoid using the below
*/
s.Media.monitor =function(s, media){
console.log('**** MEDIA module loaded4');
console.log(media);
//https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_mediamonitor.html
console.log('in the video monitor, can help add additional evar, prop or events', media);
if(media.event == "OPEN") {
s.contextData = s.Media.contextDataMapping
s.Media.track(media.name);
} else if(media.event == "MILESTONE") {
s.contextData = s.Media.contextDataMapping
s.Media.track(media.name);
} else if(media.event == "CLOSE") {
s.contextData = s.Media.contextDataMapping
s.Media.track(media.name);
}
}
}
Mais informações sobre o acompanhamento de vídeos disponíveis aqui:
- https://marketing.adobe.com/resources/help/pt_BR/sc/appmeasurement/video/video_js.html
- https://marketing.adobe.com/resources/help/pt_BR/sc/appmeasurement/video/video_ref_methods.html
- https://marketing.adobe.com/resources/help/pt_BR/sc/appmeasurement/video/video_ref_variables.html
- https://marketing.adobe.com/resources/help/pt_BR/sc/appmeasurement/video/video_js_sample.html