在AdobeLaunch中实施Video Analytics
了解如何在Adobe Launch中使用Media Heartbeat SDK实施YouTube视频跟踪，从而增强您的分析。
描述 description
环境
本文介绍了使用Media Heartbeat SDK在Adobe Launch中实施YouTube视频跟踪的步骤。
问题/症状
先决条件
- 您有一个有效的AdobeLaunch实施。
- 已为媒体收集启用报表包。
- 报表包已映射到Adobe Experience Cloud中的正确Analytics登录公司。
- 您在AdobeLaunch中拥有发布权限。
- 您熟悉AdobeLaunch UI及其工作方式。
解决方法 resolution
步骤1：创建新规则
单击“规则”选项卡下的“添加规则”按钮，在AdobeLaunch资产中创建新规则。 此规则将包含用于加载YouTube视频以及Video Analytics和YouTube iFrame API脚本的事件条件。
- 在“名称”文本框中指定规则名称。
步骤2：添加事件和/或条件
单击“Event and Conditions”（事件和条件）下的+按钮，为启动YouTube视频创建条件。 在我的示例中，我添加了条件“Element Exists”（元素存在），以查找特定的div“player”来启动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”。
- 选中“全局执行”。
- 单击“打开编辑器”。
- 在底部，添加以下代码并单击save。
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服务代码
- 在顶部，添加以下代码并单击save。
// 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服务代码
- 在底部，添加以下代码并单击save。
//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播放器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
发布您的资产并进行测试。
recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f