Video Launch でのビデオ分析のAdobe

説明 description

環境

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

問題/症状


前提条件

  1. アクティブなAdobeLaunch 実装がある。
  2. レポートスイートがメディアコレクションで有効になっている。
  3. レポートスイートが、Adobe Experience Cloudの正しい Analytics ログイン会社にマッピングされています。
  4. Launch で公開権限を持っています。Adobe:
  5. Launch UI とその仕組みについて詳しいAdobeです。

解決策 resolution

手順 1:新しいルールを作成する

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

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

手順 2:イベントや条件の追加

「イベントと条件」の下の「 + 」ボタンをクリックして、YouTubeビデオを起動する条件を作成します。 この例では、YouTubeビデオを起動する特定の div「player」を探すための条件「Element Exists」を追加しました。

手順 3:アクションの追加 — 設定変数

の下の+ボタンをクリックします。 アクション をクリックして、新しいアクション項目を作成します。 これは、ビデオ分析変数を設定するための単一の設定ポイントとして機能します。 ハードコードされた値をいくつか使用しました。 ただし、データ要素を使用してこれらの変数を設定することはできます。

  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 サービス コードから Code Manager (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. 次からダウンロードする必要があります: Code Manager (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 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

手順 8:公開

プロパティを公開し、テストします。

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