Implementazione di Video Analytics in Adobe Launch

Ultimo aggiornamento: 2023-10-31

Descrizione


Ambiente

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



Problema/Sintomi


Prerequisiti

  1. Hai un’implementazione Adobe Launch attiva.
  2. La suite di rapporti è abilitata per Media Collection.
  3. La suite di rapporti è mappata sulla società di accesso di Analytics corretta in Adobe Experience Cloud.
  4. Hai diritti di pubblicazione in Adobe Launch.
  5. Conosci l’interfaccia utente di Adobe Launch e il suo funzionamento.

Risoluzione

PASSAGGIO 1: creare una nuova regola

Crea una nuova regola nell’Adobe Proprietà di Launch facendo clic sul pulsante "Aggiungi regola" nella scheda "Regole". Questa regola contiene la condizione dell’evento per caricare il video YouTube e gli script Video Analytics e YouTube iFrame API.

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

PASSAGGIO 2: Aggiungere eventi e/o condizioni

Per creare le condizioni necessarie per avviare il video YouTube, fai clic sul pulsante + in Evento e condizioni. Nel mio esempio, ho aggiunto una condizione "Element Exists" (Esiste un elemento) per cercare un div specifico "player" per avviare il video di YouTube.

PASSAGGIO 3: Aggiungere azioni - Variabili di configurazione

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

  1. Seleziona "Core" da Estensione a discesa.
  2. Seleziona "Codice personalizzato" da Tipo di azione a discesa.
  3. Aggiungi nome azione in Nome casella di testo.
  4. Seleziona "Javascript" in Lingua.
  5. Seleziona "Esegui globalmente".
  6. Fai clic su "Apri editor".
  7. Aggiungi il codice e fai clic su Salva. Assicurati di aggiornare i valori in base all’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: Aggiungere azioni Servizio ID visitatore

Media Analytics richiede un’istanza di Servizio ID visitatore. Dovresti scaricare Servizio ID visitatore codice da Gestore codici nell’interfaccia di Adobe Analytics.

Una volta scaricato Servizio ID visitatore codice, fai clic sul pulsante + in Azioni per creare un nuovo elemento azione:

  1. Seleziona "Core" da Estensione a discesa.
  2. Seleziona "Codice personalizzato" da 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 "Apri editor".
  7. Nella parte inferiore, 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: Aggiungere azioni - Codice Appmeasurement

Media Analytics richiede un’istanza di Appmeasurement. Dovrai scaricarlo da Gestore codici nell’interfaccia di Adobe Analytics.

Una volta scaricato, Appmeasurement codice, fai clic sul pulsante + in Azioni per creare un nuovo elemento azione:

  1. Seleziona "Core" da Estensione a discesa.
  2. Seleziona "Codice personalizzato" da 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 "Apri editor".
  7. Aggiungi Servizio ID visitatore codice.
  8. Aggiungi il seguente codice nella parte superiore 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: Aggiungere azioni - Heartbeat codice

Scarica Heartbeat SDK da https://github.com/Adobe-Marketing-Cloud/media-sdks/releases.

Una volta scaricato, Heartbeat codice, fai clic sul pulsante + in Azioni per creare un nuovo elemento azione:

  1. Seleziona "Core" da Estensione a discesa.
  2. Seleziona "Codice personalizzato" da 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 "Apri editor".
  7. Aggiungi Servizio ID visitatore codice.
  8. Nella parte inferiore, 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: Aggiungere azioni - Codice API IFrame di YouTube

  1. Seleziona "Core" da Estensione a discesa.
  2. Seleziona "Codice personalizzato" da 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 "Apri editor".
  7. Aggiungi il codice seguente e fai clic su Salva.

// 2. Questo codice carica 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 richiamerà questa funzione quando il lettore video sarà 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: Aggiungere 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: Pubblicazione

Pubblica la proprietà e verifica.

In questa pagina