DTM è uno strumento che consente di eseguire le operazioni più rapidamente. Possiamo monitorare i video HTML5 utilizzando regole basate su eventi in DTM. Tuttavia, non dispone di una funzionalità integrata per monitorare i video forniti da altri fornitori di video (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer, etc.).
Se si usa il servizio video che dispone di un’API JavaScript (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer, ecc.), possiamo usare DTM per aggiungere il codice API per intercettare i diversi eventi video. Viene richiesto il caricamento del codice necessario in una regola di caricamento di pagina o in una misurazione App o in un file s_code (verificando che il caricamento avvenga nel punto corretto, ovvero la parte superiore o inferiore della pagina) e questo imposterà l’API e/o gli ascoltatori in modo tale da monitorare i video. È quindi necessario definire ciò che si desidera fare per l’acquisizione e l’invio di dati video. Possiamo utilizzare l’implementazione del modulo multimediale, che non richiede ulteriori impostazioni in DTM.
Per il monitoraggio dei “video YouTube” tramite l’implementazione del modulo multimediale, consultate i passaggi riportati di seguito.
Passaggio 1: i video YouTube possono essere incorporati in una pagina web attraverso un iframe o un tag oggetto.
Incorpora un oggetto: incorpora il video con l’API attivata come ad esempio http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer sulla pagina Web.
Nota: assicurati di non avere due tag con lo stesso ID, ma assicurati che il tag abbia un ID corrispondente al parametro 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>
Incorporare iframe: incorporate il video in un iframe con l’API attivata come ad esempio http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1 sulla pagina Web.
Nota: deve fornire un “Id” all’iframe. Per ulteriori informazioni consulta il seguente codice
<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">
Passaggio 2: aggiungi il modulo di monitoraggio multimediale Adobe Analytics al tuo Appmeasurement (o simile). Deve essere collocato in qualsiasi posizione dopo la sezione di configurazione e prima del messaggio “NON ALTERARE NULLA AL DI SOTTO DI QUESTA RIGA!”. In caso di implementazione precedente, è necessario disporre della versione di codice di H.15.1 o di una versione successiva. Questo modulo multimediale verrà fornito dall’account Adobe Analytics seguendo il percorso seguente: amministratore ---> gestione codice ----> misurazione app -----> App Measurement Media Module.js
Se non vedete “gestione codice” in amministratore, non potete accedere. Per ottenere l’accesso chiedete a un utente amministratore di aggiungere il vostro account a un gruppo che ha accesso a gestione codice.
Passaggio 3: aggiungi il codice seguente all’intestazione della pagina Web in cui è incorporato il video youtube subito al di sotto del codice intestazione 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>
Passaggio 4: dopo aver inserito il codice nel progetto, dovete mappare le variabili e gli eventi di conversione che state utilizzando per monitorare il video. Aggiungi il codice seguente nel file AppMeasurement o 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);
}
}
}
Ulteriori informazioni sul monitoraggio video sono disponibili qui:
- https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_js.html
- https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_ref_methods.html
- https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_ref_variables.html
- https://marketing.adobe.com/resources/help/en_US/sc/appmeasurement/video/video_js_sample.html
