在Adobe Launch中實作Video Analytics
瞭解如何透過Media Heartbeat SDK在Adobe Launch中實施YouTube視訊追蹤,以強化您的分析。
說明 description
環境
本文提供使用Media Heartbeat SDK在Adobe Launch中實施YouTube視訊追蹤的步驟。
問題/症狀
先決條件
- 您有一個作用中的Adobe Launch實作。
- 報表套裝已啟用媒體收集。
- 報表套裝已對應至Adobe Experience Cloud中的正確Analytics登入公司。
- 您在Adobe Launch中擁有發佈許可權。
- 您熟悉Adobe Launch UI及其運作方式。
解決方法 resolution
步驟1:建立新規則
按一下「規則」標籤下方的「新增規則」按鈕,在AdobeLaunch屬性中建立新規則。 此規則將包含載入YouTube視訊、Video Analytics和YouTube iFrame API指令碼的事件條件。
- 在「名稱」文字方塊中指定規則名稱。
步驟2:新增事件和/或條件
按一下「事件和條件」下的+按鈕,建立條件以啟動YouTube影片。 在我的範例中,我新增「元素存在」條件來尋找特定div「播放器」,以啟動YouTube影片。
步驟3:新增動作 — 設定變數
按一下動作底下的+按鈕,以建立新的動作專案。 這會作為設定Video Analytics變數的單一設定點。 我使用了一些硬式編碼值。 不過,您可以使用資料元素來填入這些變數。
- 從「擴充功能」下拉式清單中選取「核心」。
- 從「動作型別」下拉式清單中選取「自訂程式碼」。
- 在名稱文字方塊中新增動作名稱。
- 選取「語言」下的「Javascript」。
- 勾選「全域執行」。
- 按一下「開啟編輯器」。
- 新增程式碼,然後按一下「儲存」 。 請務必根據貴公司和報表套裝更新值。
(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'
}
};
})();
步驟4:新增動作訪客ID服務
Media Analytics需要訪客ID服務的例項。 您必須從Adobe Analytics UI的「代碼管理器」下載訪客ID服務程式碼。
下載訪客ID服務程式碼後,按一下「動作」底下的「+」按鈕以建立新的動作專案,然後
- 從「擴充功能」下拉式清單中選取「核心」。
- 從「動作型別」下拉式清單中選取「自訂程式碼」。
- 在名稱文字方塊中新增動作名稱。
- 選取「語言」下的「Javascript」。
- 勾選「全域執行」。
- 按一下「開啟編輯器」。
- 在底部新增下列程式碼,然後按一下「儲存」 。
var visitor = Visitor.getInstance("Experience Cloud ID", {
trackingServer: "tracking server", // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});
步驟5:新增動作 — Appmeasurement程式碼
Media Analytics需要Appmeasurement例項。 您必須從Adobe Analytics UI的程式碼管理員下載它。
下載Appmeasurement程式碼後,按一下「動作」底下的+按鈕以建立新的動作專案,然後
- 從「擴充功能」下拉式清單中選取「核心」。
- 從「動作型別」下拉式清單中選取「自訂程式碼」。
- 在名稱文字方塊中新增動作名稱。
- 選取「語言」下的「Javascript」。
- 勾選「全域執行」。
- 按一下「開啟編輯器」。
- 新增訪客ID服務程式碼。
- 在頂端新增下列程式碼,然後按一下「儲存」 。
// 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")
步驟6:新增動作 — 心率程式碼
從下載心率SDK https://github.com/Adobe-Marketing-Cloud/media-sdks/tree/master/sdks/js/libs.
下載心率程式碼後,按一下動作底下的+按鈕以建立新的動作專案,然後
- 從「擴充功能」下拉式清單中選取「核心」。
- 從「動作型別」下拉式清單中選取「自訂程式碼」。
- 在名稱文字方塊中新增動作名稱。
- 選取「語言」下的「Javascript」。
- 勾選「全域執行」。
- 按一下「開啟編輯器」。
- 新增訪客ID服務程式碼。
- 在底部新增下列程式碼,然後按一下「儲存」 。
//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;
步驟7:新增動作 — YouTube IFrame API程式碼
-
從「擴充功能」下拉式清單中選取「核心」。
-
從「動作型別」下拉式清單中選取「自訂程式碼」。
-
在名稱文字方塊中新增動作名稱。
-
選取「語言」下的「Javascript」。
-
勾選「全域執行」。
-
按一下「開啟編輯器」。
-
新增下列程式碼並儲存。
/ 2. 此程式碼會非同步載入IFrame Player API程式碼。
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. 當視訊播放器準備就緒時,API會呼叫此函式。
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);
}
步驟8:新增HTML
在HTML程式碼中新增下列程式碼。
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
STEP 9: Publish
發佈您的屬性並測試。