JavaScript 2.x のセットアップ

前提条件

  • 有効な設定パラメーターを取得 これらのパラメーターは、Analytics アカウントの設定後、アドビの担当者から取得できます。

  • JavaScript 向けAppMeasurementをメディアアプリケーションに実装 Adobe Mobile SDK のドキュメントについて詳しくは、JavaScript を使用した Analytics の実装を参照してください。

  • メディアプレーヤーで以下の機能を設定します。

    • プレーヤーイベントをサブスクライブするための API - メディア SDK では、プレーヤーでイベントが発生する際に、シンプルな API のセットを呼び出す必要があります。
    • プレーヤー情報を提供する API - メディア名や再生ヘッドなどの情報がこれに該当します。
  1. ダウンロードしたライブラリをプロジェクトに追加します。利便性のために、クラスへのローカル参照を作成します。

    1. ダウンロードした MediaSDK-js-v2.*.zip ファイルを展開します。

    2. libs ディレクトリに MediaSDK.min.js ファイルが存在することを確認します。

    3. MediaSDK.min.js ファイルをホストします。

      このコア JavaScript ファイルは、サイトのすべてのページから参照可能な Web サーバーでホストする必要があります。次の手順で、これらのファイルへのパス情報が必要になります。

    4. サイトのすべてのページから MediaSDK.min.js を参照します。

      各ページの <head> タグまたは <body> タグに以下のコードを追加して、JavaScript 用の MediaSDK を含めます。例:

      <script type="text/javascript"
      src="https://INSERT-DOMAIN-AND-PATH-TO-CODE-HERE/MediaSDK.min.js"></script>
      
    5. ライブラリが正しくインポートされたことをすばやく確認するには、ADB.va.MediaHeartbeatConfig クラスをインスタンス化します。

    メモ

    バージョン 2.1.0 以降の JavaScript SDK は、AMD および CommonJS モジュールの仕様に準拠しており、互換性のあるモジュールローダーと共に VideoHeartbeat.min.js を使用することもできます。

  2. API に簡単にアクセスできるように、MediaHeartbeat クラスへのローカル参照を作成します。

    var MediaHeartbeat = ADB.va.MediaHeartbeat;
    var MediaHeartbeatConfig = ADB.va.MediaHeartbeatConfig;
    var MediaHeartbeatDelegate = ADB.va.MediaHeartbeatDelegate;
    
  3. MediaHeartbeatConfig インスタンスを作成します。

    ここでは、MediaHeartbeat 設定パラメーターと、正確な追跡のために MediaHeartbeat インスタンスに正しい設定値を設定する方法について説明します。

    MediaHeartbeatConfig 初期化のサンプル:

    //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 = true;
    mediaConfig.appVersion = Configuration.HEARTBEAT.SDK;
    mediaConfig.ssl = false;
    mediaConfig.ovp = Configuration.HEARTBEAT.OVP;
    
  4. MediaHeartbeatDelegate プロトコルを実装します。

    var mediaDelegate = new MediaHeartbeatDelegate();
    
    // Replace <currentPlaybackTime> with the video player current playback time
    mediaDelegate.getCurrentPlaybackTime = function() {
        return <currentPlaybackTime>;
    };
    
    // Replace <bitrate>, <startuptime>, <fps> and <droppeFrames> with the current playback QoS values.  
    mediaDelegate.getQoSObject = function() {
        return MediaHeartbeat.createQoSObject(<bitrate>, <startuptime>, <fps>, <droppedFrames>);
    };
    
  5. MediaHeartbeat インスタンスを作成します。

    MediaHeartbeatConfig および MediaHeartbeatDelegate を使用して、MediaHeartbeat インスタンスを作成します。

    this.mediaHeartbeat = new MediaHeartbeat(mediaDelegate, mediaConfig, appMeasurement);
    
    重要

    MediaHeartbeat インスタンスがアクセス可能であることと、メディアセッションの終わりまで解放されないことを確認します。このインスタンスは、以下のすべてのトラッキングイベントに使用されます。

    ヒント

    MediaHeartbeat が Adobe Analytics に呼び出しを送信するためには、AppMeasurement のインスタンスが必要です。以下に、AppMeasurement インスタンスの例を示します。

    var appMeasurement = new AppMeasurement();
    appMeasurement.visitor = visitor;
    appMeasurement.trackingServer = "<visitor_namespace>.sc.omtrdc.net";
    appMeasurement.account = <rsid>;
    appMeasurement.pageName = <page_name>;
    appMeasurement.charSet = "UTF­8";
    

JavaScript 1.x から 2.x への移行

バージョン 2.x では、すべてのパブリックメソッドは、開発をより簡単にするために、ADB.va.MediaHeartbeat クラスに統合されています。また、すべての設定は、ADB.va.MediaHeartbeatConfig クラスに統合されました。

1.x から 2.x への移行について詳しくは、VHL 1.x から 2.x への移行を参照してください。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now