Documentation

Mise en oeuvre de Video Analytics dans Adobe Launch

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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

Description description

Environnement

Analytics

Problème/Symptômes

Mise en oeuvre de l’analyse vidéo dans Adobe Launch

Prérequis

  1. Vous disposez d’une mise en oeuvre Adobe Launch active.
  2. La suite de rapports est activée pour Media Collection.
  3. La suite de rapports est mappée à la société de connexion Analytics correcte dans Adobe Experience Cloud.
  4. Vous disposez des droits de publication dans Adobe Launch.
  5. Vous connaissez l’interface utilisateur d’Adobe Launch et son fonctionnement.

Résolution resolution

É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 analyses vidéo et les scripts de l’API d’iFrame YouTube.

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

Étape 2 : Ajouter des événements et/ou des conditions

Cliquez sur le bouton + sous Événement et conditions pour créer des conditions de lancement de la vidéo YouTube. Par exemple, vous avez ajouté un élément de condition Existe pour rechercher un lecteur div spécifique pour lancer la vidéo YouTube.

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

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

  1. Sélectionnez Core dans la liste déroulante Extension .
  2. Sélectionnez Code personnalisé dans la liste déroulante Type d’action .
  3. Ajoutez le nom de l’action dans la zone de texte Nom .
  4. Sélectionnez JavaScript sous Langue.
  5. Cochez Exécuter globalement.
  6. Cliquez sur "Open Editor".
  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'
        }
    };
})();
(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 du service d’identification des visiteurs. Vous devez télécharger le code du service d’identification des visiteurs à partir du gestionnaire de code dans Adobe Analytics.

Une fois que vous avez téléchargé le code du service d’identification des visiteurs, cliquez sur le bouton + sous Actions pour créer un élément d’action, puis

  1. Sélectionnez Core dans la liste déroulante Extension .
  2. Sélectionnez Code personnalisé dans la liste déroulante Type d’action .
  3. Ajoutez le nom de l’action dans la zone de texte Nom .
  4. Sélectionnez Javascript sous Langue.
  5. Cochez 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 : Ajouter des actions - Code Appmeasurement

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

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

  1. Sélectionnez Core dans la liste déroulante Extension .
  2. Sélectionnez Code personnalisé dans la liste déroulante Type d’action .
  3. Ajoutez le nom de l’action dans la zone de texte Nom .
  4. Sélectionnez Javascript sous Langue.
  5. Cochez Exécuter globalement.
  6. Cliquez sur "Ouvrir l’éditeur".
  7. Ajoutez le code du service d’identification des visiteurs.
  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)
/<b></b><b></b> VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js <b></b><b></b>/
s.visitor=Visitor.getInstance("Experience Cloud ID")

ÉTAPE 6 : Ajout d’actions - Code Heartbeat

Téléchargez le SDK Heartbeat à partir de https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.

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

  1. Sélectionnez Core dans la liste déroulante Extension .
  2. Sélectionnez Code personnalisé dans la liste déroulante Type d’action .
  3. Ajoutez le nom de l’action dans la zone de texte Nom .
  4. Sélectionnez Javascript sous Langue.
  5. Cochez la case "Exécuter globalement.
  6. Cliquez sur "Ouvrir l’éditeur".
  7. Ajoutez le code du service d’identification des visiteurs.
  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 API YouTube IFrame

  1. Sélectionnez Core dans la liste déroulante Extension .
  2. Sélectionnez Code personnalisé dans la liste déroulante Type d’action .
  3. Ajoutez le nom de l’action dans la zone de texte Nom .
  4. Sélectionnez JavaScript sous Langue.
  5. Cochez Exécuter globalement.
  6. Cliquez sur "Ouvrir l’éditeur".
  7. Ajoutez le code suivant et cliquez sur Enregistrer.
  8. Ce code charge le code de l’API du lecteur IFrame 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);
  • Cette fonction crée un iframe < > (et un lecteur YouTube) après le téléchargement du code de l’API.
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
              }
       });
}
  • L’API appelle cette fonction lorsque le lecteur vidéo est prêt.
function onPlayerReady(event) {
       metaDataLoaded = true;
       player.playVideo();
  • L’API appelle cette fonction lorsque l’état du lecteur change. La fonction indique que lors de la lecture d’une vidéo (state=1), le lecteur doit lire pendant six secondes, puis s’arrêter.
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 HTMLM

Ajoutez le code suivant dans votre code d’HTML.

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

ÉTAPE 9 : Publish

Publish votre propriété et testez-la.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f