Adobe Launch에서 비디오 분석 구현

설명 description

환경

이 문서에서는 Media 하트비트 SDK를 사용하여 Adobe Launch에서 YouTube 비디오 추적을 구현하는 단계를 제공합니다.

문제/증상


전제 조건

  1. 활성 Adobe Launch 구현이 있습니다.
  2. 보고서 세트가 미디어 컬렉션에 대해 활성화되어 있습니다.
  3. 보고서 세트는 Adobe Experience Cloud의 올바른 Analytics 로그인 회사에 매핑됩니다.
  4. Adobe 실행에 대한 게시 권한이 있습니다.
  5. Adobe Launch UI 및 작동 방식에 익숙할 것입니다.

해결 방법 resolution

1단계: 새 규칙 만들기

Adobe Launch 속성에서 "규칙" 탭 아래의 "규칙 추가" 버튼을 클릭하여 새 규칙을 만듭니다. 이 규칙에는 YouTube 비디오 및 Video Analytics와 YouTube iFrame API 스크립트를 로드하는 이벤트 조건이 포함됩니다.

  • 이름(Name) 텍스트 상자에 규칙 이름을 지정합니다.

2단계: 이벤트 및/또는 조건 추가

이벤트 및 조건 아래의 + 단추를 클릭하여 YouTube 비디오를 시작하는 조건을 만듭니다. 내 예에서는 YouTube 비디오를 시작할 특정 div "player"를 찾기 위해 "Element Exists" 조건을 추가했습니다.

3단계: 작업 추가 - 구성 변수

아래의 + 버튼을 클릭합니다. 작업 새 작업 항목을 만듭니다. 이 기능은 Video Analytics 변수를 설정하는 단일 구성 지점으로 사용됩니다. 하드 코딩된 값을 사용했습니다. 그러나 데이터 요소를 사용하여 이러한 변수를 채울 수 있습니다.

  1. 선택코어" 출처: 확장 드롭다운입니다.
  2. 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
  3. 에 작업 이름 추가 이름 텍스트 상자입니다.
  4. 아래에서 "Javascript" 선택 언어.
  5. 확인 "전체적으로 실행".
  6. 클릭 "편집기 열기".
  7. 코드를 추가하고 저장. 회사 및 보고서 세트에 따라 값을 업데이트해야 합니다.
(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 서비스 코드에서 아래의 + 버튼을 클릭합니다. 작업 새 작업 항목을 만들려면

  1. 선택코어" 출처: 확장 드롭다운입니다.
  2. 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
  3. 에 작업 이름 추가 이름 텍스트 상자입니다.
  4. 아래에서 "Javascript" 선택 언어.
  5. "전체적으로 실행"을 선택합니다.
  6. 클릭 "편집기 열기".
  7. 맨 아래에 다음 코드를 추가하고 을 클릭합니다. 저장.
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 코드에서 아래의 + 버튼을 클릭합니다. 작업 새 작업 항목을 만들려면

  1. 선택코어" 출처: 확장 드롭다운입니다.
  2. 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
  3. 에 작업 이름 추가 이름 텍스트 상자입니다.
  4. 아래에서 "Javascript" 선택 언어.
  5. "전체적으로 실행"을 선택합니다.
  6. 클릭 "편집기 열기".
  7. 추가 방문자 ID 서비스 코드.
  8. 맨 위에 다음 코드를 추가하고 을 클릭합니다. 저장.
// 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.

를 다운로드한 적이 있습니다. 하트비트 코드에서 아래의 + 버튼을 클릭합니다. 작업 새 작업 항목을 만들려면

  1. 선택코어" 출처: 확장 드롭다운입니다.
  2. 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
  3. 에 작업 이름 추가 이름 텍스트 상자입니다.
  4. 아래에서 "Javascript" 선택 언어.
  5. "전체적으로 실행"을 선택합니다.
  6. 클릭 "편집기 열기".
  7. 추가 방문자 ID 서비스 코드.
  8. 맨 아래에 다음 코드를 추가하고 을 클릭합니다. 저장.
//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 코드

  1. 선택코어" 출처: 확장 드롭다운입니다.
  2. 선택사용자 지정 코드" 출처: 작업 유형 드롭다운입니다.
  3. 에 작업 이름 추가 이름 텍스트 상자입니다.
  4. 아래에서 "Javascript" 선택 언어.
  5. "전체적으로 실행"을 선택합니다.
  6. 클릭 "편집기 열기".
  7. 다음 코드를 추가하고 저장.

// 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단계: 게시

속성을 게시하고 테스트합니다.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f