Ambiente
Questo articolo fornisce passaggi per implementare il tracciamento video di YouTube in Adobe Launch utilizzando Media Heartbeat SDK.
Problema/Sintomi
Prerequisiti
|
---|
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.
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.
(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
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
// 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
//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
// 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.