Implementazione di Video Analytics in Adobe Launch
Questo articolo fornisce i passaggi per implementare il tracciamento video di YouTube in Adobe Launch utilizzando Media Heartbeat SDK.
Descrizione description
Ambiente
Analytics
Problema/Sintomi
Implementazione di analisi video in Adobe Launch
Prerequisiti
- Hai un’implementazione Adobe Launch attiva.
- La suite di rapporti è abilitata per Media Collection.
- La suite di rapporti è mappata sulla società di accesso di Analytics corretta in Adobe Experience Cloud.
- Hai diritti di pubblicazione in Adobe Launch.
- Conosci l’interfaccia utente di Adobe Launch e il suo funzionamento.
Risoluzione resolution
Passaggio 1: creare una nuova regola
Creare una nuova regola nell'Adobe della proprietà Launch facendo clic sul pulsante "Aggiungi regola" nella scheda Regole. Questa regola conterrà la condizione evento per caricare il video YouTube e gli script Video Analytics e API iFrame di YouTube.
- Specificare il nome della regola nella casella di testo Nome.
Passaggio 2: aggiungere eventi e/o condizioni
Fare clic sul pulsante + in Evento e condizioni per creare le condizioni per avviare il video YouTube. Ad esempio, hai aggiunto la condizione Esiste un elemento per cercare un lettore div specifico per avviare il video YouTube.
PASSAGGIO 3: aggiungere azioni - variabili di configurazione
Fare clic sul pulsante + in azioni per creare un nuovo elemento azione. Questo fungerà da singolo punto di configurazione per la configurazione delle variabili di Video Analytics. Sono stati utilizzati alcuni valori hardcoded. Tuttavia, puoi utilizzare elementi dati per compilare queste variabili.
- Seleziona Core dal menu a discesa Estensione.
- Seleziona Codice personalizzato dal menu a discesa Tipo di azione.
- Aggiungi il nome dell'azione nella casella di testo Nome.
- Seleziona JavaScript in Lingua.
- Seleziona Esegui globalmente.
- Fare clic su "Open Editor".
- 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'
}
};
})();
(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 visitatore
Media Analytics richiede un’istanza del servizio ID visitatori. Dovrai scaricare il codice del servizio ID visitatore da Code Manager in Adobe Analytics
Una volta scaricato il codice del servizio ID visitatore, fai clic sul pulsante + in azioni per creare un nuovo elemento azione, quindi
- Seleziona Core dal menu a discesa Estensione.
- Seleziona Codice personalizzato dal menu a discesa Tipo di azione.
- Aggiungi il nome dell'azione nella casella di testo Nome.
- Selezionare Javascript in Lingua.
- Seleziona Esegui globalmente.
- Fare clic su "Open Editor".
- 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 Code Manager nell’interfaccia utente di Adobe Analytics.
Una volta scaricato il codice Appmeasurement, fai clic sul pulsante + in azioni per creare un nuovo elemento azione, quindi
- Seleziona Core dal menu a discesa Estensione.
- Seleziona Codice personalizzato dal menu a discesa Tipo di azione.
- Aggiungi il nome dell'azione nella casella di testo Nome.
- Selezionare Javascript in Lingua.
- Seleziona Esegui globalmente.
- Fare clic su "Apri editor".
- Aggiungi il codice del servizio ID visitatore.
- 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)
/<b></b><b></b> VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js <b></b><b></b>/
s.visitor=Visitor.getInstance("Experience Cloud ID")
PASSAGGIO 6: aggiungere azioni - Codice Heartbeat
Scarica l'SDK Heartbeat da https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.
Una volta scaricato il codice Heartbeat, fai clic sul pulsante + in azioni per creare un nuovo elemento azione, quindi
- Seleziona Core dal menu a discesa Estensione.
- Seleziona Codice personalizzato dal menu a discesa Tipo di azione.
- Aggiungi il nome dell'azione nella casella di testo Nome.
- Selezionare Javascript in Lingua.
- Seleziona "Esegui globalmente.
- Fare clic su "Apri editor".
- Aggiungi il codice del servizio ID visitatore.
- 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 YouTube IFrame
- Seleziona Core dal menu a discesa Estensione.
- Seleziona Codice personalizzato dal menu a discesa Tipo di azione.
- Aggiungi il nome dell'azione nella casella di testo Nome.
- Seleziona JavaScript in Lingua.
- Seleziona Esegui globalmente.
- Fare clic su "Apri editor".
- Aggiungi il codice seguente e fai clic su Salva.
- Questo codice carica il codice API di IFrame Player 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);
- Questa funzione crea un iframe
><(e un lettore YouTube) dopo il download del codice 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 richiamerà questa funzione quando il lettore video sarà pronto.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- L’API chiama questa funzione quando lo stato del lettore cambia. La funzione indica che durante la riproduzione di un video (stato=1), il lettore deve riprodurre per sei secondi e quindi arrestarsi.
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 HTMLM
Aggiungi il seguente codice nel codice HTML.
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
PASSAGGIO 9: Publish
Esegui il test della proprietà e esegui il Publish.