AdobeLaunch へのビデオ分析の実装

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

この記事では、Media Heartbeat SDK を使用して、Adobe Launch にYouTube ビデオトラッキングを実装する手順を説明します。

説明 description

環境

Analytics

問題/症状

AdobeLaunch へのビデオ分析の実装

前提条件

アクティブなAdobeローンチの実装がある。
レポートスイートはメディアコレクションに対して有効になっています。
レポートスイートは、Adobe Experience Cloud内の適切な Analytics ログイン会社にマッピングされます。
Adobeローンチの公開権限があります。
Adobeローンチ UI とその仕組みについて詳しく説明します。

解決策 resolution

手順 1：新しいルールの作成

「ルール」タブの 「ルールを追加」 ボタンをクリックして、Adobeローンチプロパティに新しいルールを作しす。このルールには、YouTube ビデオとビデオ分析および YouTube iFrame API スクリプトを読み込むためのイベント条件が含 れます。

「名前」テキストボックスにルール名を指定します。

手順 2：イベントや条件を追加する

イベントと条件の下の「+」ボタンをクリックして、YouTube ビデオをローンチする条件を作成します。例えば、「要素が存在する」という条件を追加して、YouTube ビデオを起動する特定の div Player を検索するとします。

手順 3：アクションの追加 – 設定変数

アクションの下の「+」ボタンをクリックして、新しいアクション項目を作成します。これは、Video Analytics 変数を設定するための単一の設定ポイントとして機能します。一部のハードコーディングされた値を使用しています。ただし、データ要素を使用してこれらの変数を設定することができます。

拡張機能ドロップダウンから「Core」を選択します。
「アクションタイプ」ドロップダウンから「カスタムコード」を選択します。
「名前」テキストボックスにアクション名を追加します。
「言語」の下の「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 サービスコードをダウンロードしたら、「アクション」の下の「+」ボタンをクリックして、新しいアクション項目を作成します。

拡張機能ドロップダウンから「Core」を選択します。
「アクションタイプ」ドロップダウンから「カスタムコード」を選択します。
「名前」テキストボックスにアクション名を追加します。
「言語」の下の「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 の Code Manager からダウンロードする必要があります。

Appmeasurement コードをダウンロードしたら、「アクション」の下の「+」ボタンをクリックして、新しいアクション項目を作成します。

拡張機能ドロップダウンから「Core」を選択します。
「アクションタイプ」ドロップダウンから「カスタムコード」を選択します。
「名前」テキストボックスにアクション名を追加します。
「言語」の下の「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 をダウンロードします。

ハートビートコードをダウンロードしたら、「アクション」の下の「+」ボタンをクリックして、新しいアクション項目を作成します。

拡張機能ドロップダウンから「Core」を選択します。
「アクションタイプ」ドロップダウンから「カスタムコード」を選択します。
「名前」テキストボックスにアクション名を追加します。
「言語」の下の「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 コード

拡張機能ドロップダウンから「Core」を選択します。
「アクションタイプ」ドロップダウンから「カスタムコード」を選択します。
「名前」テキストボックスにアクション名を追加します。
「言語」の下の「Javascript」を選択します。
「グローバルに実行」をオンにします。
「エディターを開く」をクリックします。
次のコードを追加し、「保存」をクリックします。
このコードは、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);

この関数は、API コードのダウンロード後に、< iframe> （およびYouTube Player）を作成します。

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 は、プレーヤーの状態が変更されたときにこの関数を呼び出します。この関数は、ビデオを再生するとき（state=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