La gestion dynamique des balises est un outil qui vous permet de réaliser des opérations plus rapidement. Il est possible de suivre les vidéos HTML5 à l’aide de règles basées sur un événement dans la gestion dynamique des balises. Cependant, il n’a pas de fonctionnalités prêtes à l’emploi pour suivre des vidéos fournies par d’autres fournisseurs vidéo (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer, etc.).
Si quelqu’un utilise le service vidéo avec une sorte d’API de JavaScript (Brightcove, YouTube, Vimeo, VideoJS, Flowplayer, etc.), il est possible d’utiliser la gestion dynamique des balises pour ajouter le code de l’API pour écouter les différents événements vidéo. Il est nécessaire de charger le code requis dans une règle de chargement de page ou une mesure d’application ou un fichier s_code (assurez-vous qu’il soit chargé à l’endroit correct, c’est-à-dire le haut ou le bas de la page), ce qui configurera l’API et/ou des écouteurs pour suivre les vidéos. Ensuite, il faut définir la marche à suivre lorsqu’il capture et envoie les données vidéo. Il est possible d’utiliser l’implémentation du module de média qui ne nécessite aucun paramètre supplémentaire dans la gestion dynamique des balises.
Consultez les étapes suivantes pour suivre une « Vidéo YouTube » via l’implémentation du module de média.
Étape 1 : les vidéos YouTube peuvent être intégrées dans une page Web par un iframe ou une balise d’objet.
Objet intégré : intégrer la vidéo avec l’API activé, par exemple http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer sur votre page Web.
Remarque : assurez-vous que vous ne disposez pas de deux balises avec le même identifiant, mais que la balise possède un identifiant qui correspond au paramètre 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>
Intégrer un iframe : intégrer la vidéo dans un iframe avec l’API activé, par exemple http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1 sur votre page Web.
Remarque : il doit fournir une « identifiant » à un iframe. Consultez le code ci-dessous pour obtenir de l’aide.
<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">
Étape 2 : ajouter un module de suivi d’Adobe Analytics Media à votre application de mesure (ou similaire). Il doit être placé à côté de votre section de configuration et avant l’indication « NE RIEN MODIFIER SOUS CETTE LIGNE ! ». En cas d’implémentation héritée, vous devez disposer de la version du code H.15.1 ou une version ultérieure. Vous allez obtenir ce module média depuis votre compte Adobe Analytics en accédant à ce qui suit : Admin ----> Gestionnaire de code ----> Mesure d’application -----> Module média de mesure d’application.js.
Si vous ne voyez pas 'Gestionnaire de code' sous Admin, vous n’y avez pas accès. Pour y accéder, demandez à un utilisateur administrateur d’ajouter votre compte à un groupe ayant accès au Gestionnaire de code.
Étape 3 : ajoutez le code suivant dans l’en-tête de la page Web sur laquelle la vidéo YouTube est intégrée, juste sous le code d’en-tête de gestion dynamique des balises.
<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>
Étape 4 : une fois que vous avez inséré le code dans votre projet, vous devez mettre en correspondance les événements et les variables de conversion que vous utilisez pour le suivi des vidéos. Ajoutez le code suivant dans le fichier AppMeasurement ou 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);
}
}
}
Plus d’informations sur le suivi vidéo sont disponibles ici :
- https://marketing.adobe.com/resources/help/fr_FR/sc/appmeasurement/video/video_js.html
- https://marketing.adobe.com/resources/help/fr_FR/sc/appmeasurement/video/video_ref_methods.html
- https://marketing.adobe.com/resources/help/fr_FR/sc/appmeasurement/video/video_ref_variables.html
- https://marketing.adobe.com/resources/help/fr_FR/sc/appmeasurement/video/video_js_sample.html
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?