Implementazione di Video Analytics in Adobe Launch

Descrizione

Ambiente

Questo articolo fornisce passaggi per implementare il tracciamento video di YouTube in Adobe Launch utilizzando Media Heartbeat SDK.

Problema/Sintomi


Prerequisiti

Risoluzione

PASSAGGIO 1: Crea nuova regola

Crea una nuova regola nel tuo Adobe di proprietà Launch facendo clic sul pulsante "Aggiungi regola" sotto la scheda "Regole". Questa regola conterrà la condizione dell’evento per caricare il video YouTube e gli script API per l’analisi video e l’iFrame di YouTube.

• Specificare il nome della regola nella casella di testo Nome.

PASSAGGIO 2: Aggiungi eventi e/o condizioni

Fai clic sul pulsante + in Evento e Condizioni per creare condizioni per avviare il video YouTube. Nel mio esempio, ho aggiunto una condizione "Element Exists" per cercare uno specifico div "player" per avviare il video YouTube.

PASSAGGIO 3: Aggiungi azioni - Variabili di configurazione

Fai clic sul pulsante + sotto Azioni per creare un nuovo elemento azione. Questo fungerà da singolo punto di configurazione per l’impostazione delle variabili di Video Analytics. Ho usato alcuni valori hardcoded. Tuttavia, puoi utilizzare gli elementi dati per compilare queste variabili.

1. Seleziona "Core" Estensione a discesa.
2. Seleziona "Codice personalizzato" Tipo di azione a discesa.
3. Aggiungi nome azione in Nome casella di testo.
4. Seleziona "Javascript" in Lingua.
5. Controlla "Esegui globalmente".
6. Fai clic su "Open Editor".
7. Aggiungi il codice e fai clic su Salva. Assicurati di aggiornare i valori in base alla tua azienda e alla suite di rapporti.

(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'
        }
    };
})();

PASSAGGIO 4: Aggiungi azioni Servizio ID visitatori

Media Analytics richiede un'istanza di Servizio ID visitatori. È necessario scaricare Servizio ID visitatori codice da Gestione codici nell’interfaccia utente di Adobe Analytics.

Una volta scaricato Servizio ID visitatori codice, fai clic sul pulsante + sotto Azioni per creare un nuovo elemento azione, quindi

1. Seleziona "Core" Estensione a discesa.
2. Seleziona "Codice personalizzato" Tipo di azione a discesa.
3. Aggiungi nome azione in Nome casella di testo.
4. Seleziona "Javascript" in Lingua.
5. Selezionare "Esegui globalmente".
6. Fai clic su "Open Editor".
7. In basso, aggiungi il seguente codice e fai clic su Salva.

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

PASSAGGIO 5: Aggiungi azioni - Codice Appmeasurement

Media Analytics richiede un'istanza di Appmeasurement. Dovreste scaricarlo da Gestione codici nell’interfaccia utente di Adobe Analytics.

Una volta scaricato il Appmeasurement codice, fai clic sul pulsante + sotto Azioni per creare un nuovo elemento azione, quindi

1. Seleziona "Core" Estensione a discesa.
2. Seleziona "Codice personalizzato" Tipo di azione a discesa.
3. Aggiungi nome azione in Nome casella di testo.
4. Seleziona "Javascript" in Lingua.
5. Selezionare "Esegui globalmente".
6. Fai clic su "Open Editor".
7. Aggiungi Servizio ID visitatori codice.
8. Nella parte superiore, aggiungi il seguente codice e fai clic su Salva.

// 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")

PASSAGGIO 6: Aggiungi azioni - Heartbeat codice

Scarica Heartbeat SDK da https://github.com/Adobe-Marketing-Cloud/media-sdks/tree/master/sdks/js/libs.

Una volta scaricato il Heartbeat codice, fai clic sul pulsante + sotto Azioni per creare un nuovo elemento azione, quindi

1. Seleziona "Core" Estensione a discesa.
2. Seleziona "Codice personalizzato" Tipo di azione a discesa.
3. Aggiungi nome azione in Nome casella di testo.
4. Seleziona "Javascript" in Lingua.
5. Selezionare "Esegui globalmente".
6. Fai clic su "Open Editor".
7. Aggiungi Servizio ID visitatori codice.
8. In basso, aggiungi il seguente codice e fai clic su Salva.

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

PASSAGGIO 7: Aggiungi azioni - Codice API YouTube IFrame

1. Seleziona "Core" Estensione a discesa.
2. Seleziona "Codice personalizzato" Tipo di azione a discesa.
3. Aggiungi nome azione in Nome casella di testo.
4. Seleziona "Javascript" in Lingua.
5. Selezionare "Esegui globalmente".
6. Fai clic su "Open Editor".
7. Aggiungi il codice seguente e fai clic su Salva.

// 2. Questo codice carica il IFrame Player Codice API in modo asincrono.

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 chiamerà questa funzione quando il lettore video è pronto.

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);
}

PASSAGGIO 8: Aggiungi HTML

Aggiungi il seguente codice nel codice HTML.

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

PASSAGGIO 8: Pubblica

Pubblica la proprietà e verifica.

Risorse Business.Adobe.com