Mise en oeuvre de Video Analytics dans Adobe Launch

Description

Environnement

Cet article décrit les étapes de mise en oeuvre du suivi vidéo YouTube dans Adobe Launch à l’aide du SDK Media Heartbeat.

Problème/Symptômes


Conditions préalables

Résolution

ÉTAPE 1 : Créer une règle

Créez une nouvelle règle dans votre propriété Launch Adobe en cliquant sur le bouton "Ajouter une règle" sous l’onglet "Règles". Cette règle contient la condition d’événement pour charger la vidéo YouTube et les scripts de l’API Video Analytics et YouTube iFrame.

• Indiquez le nom de la règle dans la zone de texte Nom .

ÉTAPE 2 : Ajout d’événements et/ou de conditions

Cliquez sur le bouton + sous Événement et conditions pour créer des conditions de lancement de la vidéo YouTube. Dans mon exemple, j’ai ajouté une condition "Élément existant" pour rechercher une balise div spécifique "lecteur" afin de lancer la vidéo YouTube.

ÉTAPE 3 : Ajout d’actions - Variables de configuration

Cliquez sur le bouton + sous Actions pour créer un élément d’action. Cela fonctionnera comme un point unique de configuration pour la configuration des variables Video Analytics. J’ai utilisé des valeurs codées en dur. Cependant, vous pouvez utiliser des éléments de données pour renseigner ces variables.

1. Sélectionnez "Core" de Extension déroulant.
2. Sélectionnez "Code personnalisé" de Type d’action déroulant.
3. Ajouter le nom de l’action dans Nom zone de texte.
4. Sélectionnez "Javascript" sous Langue.
5. Vérifier "Exécuter globalement".
6. Cliquez sur "Ouvrir l’éditeur".
7. Ajoutez le code, puis cliquez sur Enregistrer. Veillez à mettre à jour les valeurs en fonction de votre société et de votre suite de rapports.

(function() {    'use strict';
    // Export symbols.
    window.Configuration = {
        PLAYER: {
            NAME: 'sample player name'
            //VIDEO_ID: 'sample video id',
           //VIDEO_NAME: sample video name'
        },
        VISITOR: {
            MARKETING_CLOUD_ORG_ID: 'experience cloud ID',
            TRACKING_SERVER: 'tracking server',
            DPID: '',
            DPUUID: ''
        },
        APP_MEASUREMENT: {
            RSID: 'report suite id',
            TRACKING_SERVER: 'tracking server',
            PAGE_NAME: 'page name',
            CHAR_SET: 'UTF-8'
        },
        HEARTBEAT: {
            TRACKING_SERVER: 'heartbeat tracking server',
            PUBLISHER: 'publisher id',
            CHANNEL: 'channel',
            OVP: 'ovp name',
            SDK: 'sgk version',
       SSL: 'false',
       DEBUG: 'true'
        }
    };
})();

ÉTAPE 4 : Ajout d’actions Service d’identification des visiteurs

Media Analytics nécessite une instance de Service d’identification des visiteurs. Vous devez télécharger Service d’identification des visiteurs code de Gestionnaire de code dans l’interface utilisateur Adobe Analytics.

Une fois le téléchargement effectué Service d’identification des visiteurs code, cliquez sur le bouton + sous Actions pour créer un élément d’action, puis

1. Sélectionnez "Core" de Extension déroulant.
2. Sélectionnez "Code personnalisé" de Type d’action déroulant.
3. Ajouter le nom de l’action dans Nom zone de texte.
4. Sélectionnez "Javascript" sous Langue.
5. Cochez la case "Exécuter globalement".
6. Cliquez sur "Ouvrir l’éditeur".
7. Dans la partie inférieure, ajoutez le code suivant et cliquez sur Enregistrer.

var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});

ÉTAPE 5 : Ajout d’actions - Code Appmeasurement

Media Analytics nécessite une instance de Appmeasurement. Vous devez le télécharger depuis Gestionnaire de code dans l’interface utilisateur Adobe Analytics.

Une fois que vous avez téléchargé la variable Appmeasurement code, cliquez sur le bouton + sous Actions pour créer un élément d’action, puis

1. Sélectionnez "Core" de Extension déroulant.
2. Sélectionnez "Code personnalisé" de Type d’action déroulant.
3. Ajouter le nom de l’action dans Nom zone de texte.
4. Sélectionnez "Javascript" sous Langue.
5. Cochez la case "Exécuter globalement".
6. Cliquez sur "Ouvrir l’éditeur".
7. Ajouter Service d’identification des visiteurs code.
8. Dans la partie supérieure, ajoutez le code suivant et cliquez sur Enregistrer.

// Initialize AppMeasurement
var s_account="report suite id"
var s=s_gi(s_account)
********* VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js *********
s.visitor=Visitor.getInstance("Experience Cloud ID")

ÉTAPE 6 : Ajout d’actions - Heartbeat code

Télécharger Heartbeat SDK depuis https://github.com/Adobe-Marketing-Cloud/media-sdks/releases.

Une fois que vous avez téléchargé la variable Heartbeat code, cliquez sur le bouton + sous Actions pour créer un élément d’action, puis

1. Sélectionnez "Core" de Extension déroulant.
2. Sélectionnez "Code personnalisé" de Type d’action déroulant.
3. Ajouter le nom de l’action dans Nom zone de texte.
4. Sélectionnez "Javascript" sous Langue.
5. Cochez la case "Exécuter globalement".
6. Cliquez sur "Ouvrir l’éditeur".
7. Ajouter Service d’identification des visiteurs code.
8. Dans la partie inférieure, ajoutez le code suivant et cliquez sur Enregistrer.

//Create a local reference to the MediaHeartbeat classes

var MediaHeartbeat = ADB.va.MediaHeartbeat;
var MediaHeartbeatConfig = ADB.va.MediaHeartbeatConfig;
var MediaHeartbeatDelegate = ADB.va.MediaHeartbeatDelegate;

//Media Heartbeat initialization

var mediaConfig = new MediaHeartbeatConfig();
mediaConfig.trackingServer = Configuration.HEARTBEAT.TRACKING_SERVER;
mediaConfig.playerName = Configuration.PLAYER.NAME;
mediaConfig.channel = Configuration.HEARTBEAT.CHANNEL;
mediaConfig.debugLogging = Configuration.HEARTBEAT.DEBUG;

mediaConfig.appVersion = Configuration.HEARTBEAT.SDK;
mediaConfig.ssl = Configuration.HEARTBEAT.SDK;
mediaConfig.ovp = Configuration.HEARTBEAT.OVP;

// Implement the MediaHeartbeatDelegate protocol.
var mediaDelegate = new MediaHeartbeatDelegate();

// Initialize

var appMeasurement = new AppMeasurement();
appMeasurement.visitor = visitor;
appMeasurement.trackingServer = Configuration.APP_MEASUREMENT.TRACKING_SERVER;
appMeasurement.account = Configuration.APP_MEASUREMENT.RSID;
appMeasurement.pageName = Configuration.APP_MEASUREMENT.PAGE_NAME;
appMeasurement.charSet = Configuration.APP_MEASUREMENT.CHAR_SET;
var contextData = {
        pageURL: document.URL,
        isUserLoggedIn: "false",
        tvStation: "Sample TV station",
        programmer: "Khurshid Alam"
        };
var mediaInfo;
var videostarted = false;
var metaDataLoaded = false;

ÉTAPE 7 : Ajout d’actions - Code de l’API YouTube IFrame

1. Sélectionnez "Core" de Extension déroulant.
2. Sélectionnez "Code personnalisé" de Type d’action déroulant.
3. Ajouter le nom de l’action dans Nom zone de texte.
4. Sélectionnez "Javascript" sous Langue.
5. Cochez la case "Exécuter globalement".
6. Cliquez sur "Ouvrir l’éditeur".
7. Ajoutez le code suivant et cliquez sur Enregistrer.

// 2. Ce code charge la variable Lecteur IFrame code API de manière asynchrone.

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')0;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an iframe (and YouTube player)
//    after the API code downloads.

var player;
function onYouTubeIframeAPIReady() {
       console.log("onYouTubeIframeAPIReady called...");
       player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 'xWYHvIjvMnY',
              events: {
                     'onReady': onPlayerReady,
                     'onStateChange': onPlayerStateChange,
                     'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
                     'onPlaybackRateChange': onPlayerPlaybackRateChange,
                     'onError': onPlayerError
              }
       });
}

// 4. L’API appelle cette fonction lorsque le lecteur vidéo est prêt.

function onPlayerReady(event) {
       metaDataLoaded = true;
       player.playVideo();
}

// 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.

function onPlayerStateChange(event) {
       switch (event.data){
              case YT.PlayerState.PLAYING:  console.log("\*\*\*HB Playing");
                     if(metaDataLoaded){
                            if (Math.floor(event.target.getCurrentTime()) == 0) {
                                   console.log("\*\*\*HB Start");
                                   MediaHeartbeat = ADB.va.MediaHeartbeat;
                                   mediaInfo = MediaHeartbeat.createMediaObject(
                                          event.target.getVideoData().title,
                                          event.target.getVideoData().video_id,
                                          Math.floor(event.target.getDuration()),
                                         MediaHeartbeat.StreamType.VOD
                                   );
                                   MediaHeartbeat = new MediaHeartbeat(mediaDelegate, mediaConfig, appMeasurement);
                                   mediaDelegate.getCurrentPlaybackTime = function() {
                                   return Math.floor(event.target.getCurrentTime());
                           };
                                   MediaHeartbeat.trackSessionStart(mediaInfo, contextData);
                                   MediaHeartbeat.trackPlay();
                                   videostarted = true;
                     } else {
                           console.log("\*\*\*HB Play");
                           MediaHeartbeat.trackPlay();
                     }}
                     break;
              case YT.PlayerState.PAUSED:
                     console.log("\*\*\*HB Pause");
                     MediaHeartbeat.trackPause();
                     break;
              case YT.PlayerState.ENDED:
                     console.log("\*\*\*HB Ended");
                     MediaHeartbeat.trackComplete();
                     MediaHeartbeat.trackSessionEnd();
                     break;
              case -1:
                     console.log("\*\*\*HB Unloaded");
                     MediaHeartbeat.trackComplete();
                     MediaHeartbeat.trackSessionEnd();
                     break;
       }

}

function onPlayerPlaybackQualityChange(event) {
       console.log("onPlayerPlaybackQualityChange: event.data: "+ event.data);
}

function onPlayerPlaybackRateChange(event) {
       console.log("onPlayerPlaybackRateChange: event.data: "+ event.data);
}

function onPlayerError(event) {
       console.log("onPlayerError: event.data: "+ event.data);
}

ÉTAPE 8 : Ajouter un HTML

Ajoutez le code suivant dans votre code de HTML.

!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr

ÉTAPE 8 : Publication

Publiez votre propriété et testez-la.