Implementera videoanalys i Adobe Launch
I den här artikeln beskrivs hur du implementerar videospårning i YouTube i Adobe Launch med Media Heartbeat SDK.
Beskrivning description
Miljö
Analytics
Problem/symtom
Implementera videoanalys i Adobe Launch
Krav
- Du har en aktiv implementering av Adobe Launch.
- Rapportsviten är aktiverad för Media Collection.
- Rapportsviten mappas till rätt inloggningsföretag för Analytics i Adobe Experience Cloud.
- Du har publiceringsrättigheter i Adobe Launch.
- Du känner till användargränssnittet för Adobe Launch och hur det fungerar.
Upplösning resolution
Steg 1: Skapa ny regel
Skapa en ny regel i Adobe-startegenskapen genom att klicka på knappen "Lägg till regel" under fliken Regler. Den här regeln innehåller händelsevillkoret för att läsa in YouTube-video och Video Analytics- och YouTube iFrame API-skript.
- Ange regelnamnet i textrutan Namn.
Steg 2: Lägg till händelser och/eller villkor
Klicka på knappen + under Händelse och villkor för att skapa villkor för att starta YouTube-video. Du har t.ex. lagt till ett villkorselement finns för att söka efter en viss div-spelare som ska starta YouTube-videon.
STEG 3: Lägg till åtgärder - konfigurationsvariabler
Klicka på knappen + under åtgärder för att skapa ett nytt åtgärdsobjekt. Detta fungerar som en enda konfigurationspunkt för att konfigurera videoanalysvariabler. Du har använt vissa hårdkodade värden. Du kan dock använda dataelement för att fylla i dessa variabler.
- Välj Core (kärna) i listrutan Extension.
- Välj Anpassad kod i listrutan Åtgärdstyp.
- Lägg till åtgärdsnamn i textrutan Namn.
- Välj Javascript under Språk.
- Kontrollera Kör globalt.
- Klicka på "Öppna redigerare".
- Lägg till koden och klicka på Spara. Se till att du uppdaterar värdena enligt ditt företag och rapporterar en programsvit.
(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'
}
};
})();
STEG 4: Lägg till tjänst för åtgärdsbesökar-ID
Media Analytics behöver en instans av Visitor ID-tjänsten. Du måste hämta tjänstkoden för Visitor ID från kodhanteraren i Adobe Analytics
När du har laddat ned tjänstkoden för Visitor ID klickar du på + under åtgärder för att skapa ett nytt åtgärdsobjekt och sedan
- Välj Core (kärna) i listrutan Extension.
- Välj Anpassad kod i listrutan Åtgärdstyp.
- Lägg till åtgärdsnamn i textrutan Namn.
- Välj JavaScript under Språk.
- Kontrollera Kör globalt.
- Klicka på "Öppna redigerare".
- Längst ned lägger du till följande kod och klickar på Spara.
var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});
STEG 5: Lägg till åtgärder - Använd mätningskod
Media Analytics behöver en instans av Appmeasurement. Du måste ladda ned den från Code Manager i Adobe Analytics UI.
När du har laddat ned Appmeasurement-koden klickar du på + under åtgärder för att skapa ett nytt åtgärdsobjekt och sedan
- Välj Core (kärna) i listrutan Extension.
- Välj Anpassad kod i listrutan Åtgärdstyp.
- Lägg till åtgärdsnamn i textrutan Namn.
- Välj JavaScript under Språk.
- Kontrollera Kör globalt.
- Klicka på Öppna redigeraren.
- Lägg till tjänstkod för besökar-ID.
- Lägg till följande kod högst upp och klicka på Spara.
// 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")
STEG 6: Lägg till åtgärder - pulsslagskod
Hämta SDK för pulsslag från https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.
När du har laddat ned pulsslagskoden klickar du på + under åtgärder för att skapa ett nytt åtgärdsobjekt och sedan
- Välj Core (kärna) i listrutan Extension.
- Välj Anpassad kod i listrutan Åtgärdstyp.
- Lägg till åtgärdsnamn i textrutan Namn.
- Välj JavaScript under Språk.
- Markera Kör globalt.
- Klicka på Öppna redigeraren.
- Lägg till tjänstkod för besökar-ID.
- Längst ned lägger du till följande kod och klickar på Spara.
//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;
STEG 7: Lägg till åtgärder - YouTube IFrame API-kod
- Välj Core (kärna) i listrutan Extension.
- Välj Anpassad kod i listrutan Åtgärdstyp.
- Lägg till åtgärdsnamn i textrutan Namn.
- Välj Javascript under Språk.
- Kontrollera Kör globalt.
- Klicka på Öppna redigeraren.
- Lägg till följande kod och klicka på Spara.
- Den här koden läser in API-koden för IFrame Player asynkront.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')0;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
- Den här funktionen skapar en
<iframe>(och YouTube-spelare) efter att API-koden har hämtats.
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
}
});
}
- API:t anropar den här funktionen när videospelaren är klar.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- API:t anropar den här funktionen när spelarens läge ändras. Funktionen anger att spelaren ska spelas upp i sex sekunder och sedan stoppas när en video (state=1) spelas upp.
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);
}
STEG 8: Lägg till HTMLM
Lägg till följande kod i HTML-koden.
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
STEG 9: Publish
Publish er egendom och testa.