在Adobe Launch中實作Video Analytics

Last update: Wed Apr 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

瞭解如何透過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

發佈您的屬性並測試。

recommendation-more-help

3d58f420-19b5-47a0-a122-5c9dab55ec7f