Adobe Launch에서 비디오 분석 구현
이 문서에서는 Media 하트비트 SDK를 사용하여 Adobe Launch에서 YouTube 비디오 추적을 구현하는 단계를 제공합니다.
설명 description
환경
Analytics
문제/증상
Adobe Launch에서 비디오 분석 구현
전제 조건
- 활성 Adobe Launch 구현이 있습니다.
- 보고서 세트가 미디어 컬렉션에 대해 활성화되어 있습니다.
- 보고서 세트는 Adobe Experience Cloud의 올바른 Analytics 로그인 회사에 매핑됩니다.
- Adobe 실행에 대한 게시 권한이 있습니다.
- Adobe Launch UI 및 작동 방식에 익숙할 것입니다.
해결 방법 resolution
1단계: 새 규칙 만들기
Adobe 탭 아래의 "규칙 추가" 단추를 클릭하여 규칙 실행 속성에 새 규칙을 만듭니다. 이 규칙에는 YouTube 비디오 및 Video Analytics와 YouTube iFrame API 스크립트 를 로드하는 이벤트 조건이 포함됩니다.
- 이름(Name) 텍스트 상자에 규칙 이름을 지정합니다.
2단계: 이벤트 및/또는 조건 추가
YouTube 비디오를 시작하는 조건을 만들려면 이벤트 및 조건 아래의 + 단추를 클릭하십시오. 예를 들어 YouTube 비디오를 시작할 특정 div 플레이어를 찾기 위해 요소 존재 조건 을 추가했습니다.
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 분석의 코드 관리자에서 방문자 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단계: 작업 추가 - 하트비트 코드
https://github.com/Adobe-Marketing-Cloud/media-sdks/blob/master/sdks/js/2.x/libs/MediaSDK.min.js에서 하트비트 SDK를 다운로드합니다.
하트비트 코드를 다운로드한 후 작업 아래의 + 단추를 클릭하여 새 작업 항목을 만든 다음
- 확장 드롭다운에서 코어 를 선택합니다.
- 작업 유형 드롭다운에서 사용자 지정 코드 를 선택합니다.
- 이름 텍스트 상자에 작업 이름을 추가합니다.
- 언어에서 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를 선택합니다.
- 전역적으로 실행을 선택합니다.
- "편집기 열기"를 클릭합니다.
- 다음 코드를 추가하고 저장 을 클릭합니다.
- 이 코드는 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);
- 이 함수는 API 코드를 다운로드한 후
<iframe>(및 YouTube 플레이어)을 만듭니다.
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는 비디오 플레이어가 준비되면 이 함수를 호출합니다.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- 플레이어의 상태가 변경되면 API에서 이 함수를 호출합니다. 함수는 비디오 재생(상태=1) 시 플레이어가 6초 동안 재생한 다음 중지함을 나타냅니다.
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단계: HTMLM 추가
HTML 코드에 다음 코드를 추가합니다.
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
9단계: Publish
속성 및 테스트를 Publish에 추가합니다.
recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f