Adobe Launch에서 비디오 분석 구현
설명 description
환경
이 문서에서는 Media 하트비트 SDK를 사용하여 Adobe Launch에서 YouTube 비디오 추적을 구현하는 단계를 제공합니다.
문제/증상
전제 조건
- 활성 Adobe Launch 구현이 있습니다.
- 보고서 세트가 미디어 컬렉션에 대해 활성화되어 있습니다.
- 보고서 세트는 Adobe Experience Cloud의 올바른 Analytics 로그인 회사에 매핑됩니다.
- Adobe 실행에 대한 게시 권한이 있습니다.
- Adobe Launch UI 및 작동 방식에 익숙할 것입니다.
해결 방법 resolution
1단계: 새 규칙 만들기
Adobe Launch 속성에서 "규칙" 탭 아래의 "규칙 추가" 버튼을 클릭하여 새 규칙을 만듭니다. 이 규칙에는 YouTube 비디오 및 Video Analytics와 YouTube iFrame API 스크립트를 로드하는 이벤트 조건이 포함됩니다.
- 이름(Name) 텍스트 상자에 규칙 이름을 지정합니다.
2단계: 이벤트 및/또는 조건 추가
이벤트 및 조건 아래의 + 단추를 클릭하여 YouTube 비디오를 시작하는 조건을 만듭니다. 내 예에서는 YouTube 비디오를 시작할 특정 div "player"를 찾기 위해 "Element Exists" 조건을 추가했습니다.
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'
}
};
})();
4단계: 작업 추가 방문자 ID 서비스
Media Analytics에는 다음 인스턴스가 필요합니다. 방문자 ID 서비스. 다음을 다운로드해야 합니다. 방문자 ID 서비스 의 코드 코드 관리자 Adobe Analytics UI에서.
을(를) 한 번 다운로드했습니다. 방문자 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)
********* VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js *********
s.visitor=Visitor.getInstance("Experience Cloud ID")
6단계: 작업 추가 - 하트비트 코드
다운로드 하트비트 의 SDK https://github.com/Adobe-Marketing-Cloud/media-sdks/releases.
를 다운로드한 적이 있습니다. 하트비트 코드에서 아래의 + 버튼을 클릭합니다. 작업 새 작업 항목을 만들려면
- 선택코어" 출처: 확장 드롭다운입니다.
- 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
- 에 작업 이름 추가 이름 텍스트 상자입니다.
- 아래에서 "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 플레이어 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
8단계: 게시
속성을 게시하고 테스트합니다.