FreeWheel プラグインによる広告配信

概要

このプラグインは、Brightcove Player で FreeWheel の広告テクノロジーを利用できるようにします。

広告サーバーのテスト

最初に行うべきことは、使用予定の広告タグが有効かどうかを確認することです。広告タグの URL をコピーしたうえで、次のページにアクセスしてください: Ad Previewer（リンクをクリックすると新しいウィンドウまたはタブで開きます）。

広告タグの URL を指定された入力欄に貼り付けます。OPEN IN AD PREVIEWER をクリックします。Open In Ad Previewer というタイトルのポップアップが表示されるので、OPEN ボタンをクリックして広告をテストします。PLAY をクリックし、正しく動作していれば、広告が動画とともに表示されます。このテスト環境で広告タグが動作しない場合、Brightcove Player でも動作しません。

同意管理 / GDPR 対応

デフォルトの AdManager SDK は v7.2.0 です。これは TCF v2 フレームワークを実装した同意管理プラットフォーム (CMP) を、プラグインの追加設定なしでサポートします。TCF v1 を実装した CMP は今後サポートされません。詳細は Freewheel の ドキュメント (Freewheel Hub へのログインが必要) を参照してください。

手順

1. プレーヤーを埋め込んでいるページに、CMP スクリプトへのリンクを追加します。

   例

   <script src="//your_cmp_address.net/cmp/cmp.complete.bundle.js" async></script>

2. Freewheel SDK のバージョンが 7.2.0 以上であることを確認してください。これは sdkUrl オプションを使用しない場合のデフォルト バージョンです。sdkUrl または sdkVersion でバージョンを設定する場合は、必ず 7.2.0 以上を指定してください。

Players モジュールを使用して実装

Players モジュールを使用して FreeWheel プラグインを実装するには、次の手順を行います。

1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
2. プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
3. Overview タブで Plugins セクションを展開します。

4. 次に、Add Plugin ボタンを選択し、Brightcove Plugin を選択します。

   

5. Brightcove Plugin ドロップダウンを展開し、Freewheel を選択します。

6. Options(JSON) テキスト ボックスに構成オプションを入力します。デフォルト値が用意されていますが、用途に合わせて変更できます。すべてのオプションの一覧については、設定 を参照してください。

   

7. Save をクリックします。
8. プレーヤーを公開するには、Publish Changes をクリックします。
9. 開いたダイアログを閉じるには、Close をクリックします。

設定

FreeWheel プラグインを構成するために、以下の設定項目を使用します。

広告スロットの設定

テンポラル スロット

テンポラル スロットは、動画再生中のいつ・どこに広告を再生するかを定義します。temporalSlots 配列を使用して構成します。

      {
          "temporalSlots": [
              {
                  "customId": "preroll",
                  "adUnit": "preroll",
                  "timeposition": 0
              }
          ]
      }

テンポラル スロットのプロパティ

広告マクロ

FreeWheel を構成する作業を簡素化するために、広告マクロが用意されています。広告マクロは、構成内のどこに記述されていても、対応する値に置き換えられます。

以下は、置換される値が用意されている変数の完全な一覧です。

cust_params={mediainfo.ad_keys}

構成例

"plugins": [{
  "name": "freewheel",
  "is_packaged": true,
  "options": {
      "keyValues": [{
        "feature": "simpleAds",
        "module": "DemoPlayer"
      }, {
        "feature": "trackingURLs"
      }],
      "networkId": 99999,
      "profile": "global-js",
      "serverUrl": "https://cue.v.fwmrm.net/ad/h/5",
      "siteSectionCustomId": "your value here",
      "temporalSlots": [{
        "adUnit": "preroll",
        "customId": "Preroll_1",
        "timePosition": 0
      }, {
        "adUnit": "postroll",
        "customId": "Postroll_1",
        "timePosition": 60
      }, {
        "adUnit": "overlay",
        "customIdd": "Overlay_1",
        "timePosition": 5
      }],
      "videoAssetCustomId": "your value here",
      "videoAssetDuration": 500
    },
    "debug": true,
    "prerollTimeout": 1000,
    "timeout": 5000
}]

イベント

このプラグインは、読み込み、初期化、再生中にいくつかのカスタム イベント タイプを発行します。広告フレームワークのイベントは、他のイベントと同じようにリッスンできます。

player.on('ads-ad-started', function(event) {
  console.log('event', event);
});

サーバー URL の動的な割り当て

fw-before-ad-request イベントを使用して、サーバー URL を動的に割り当てることができます。on() メソッドを使用して広告リクエストをリッスンし、その後、希望するサーバー URL を割り当てます。もちろん、コード内のプレースホルダーには実際のサーバー URL を設定する必要があります。

player.on('fw-before-ad-request', function () {
  player.setOptions({
    serverUrl: '[your server url]'
  })
})

サーバー URL を以前に構成していた場合、上記のコードはその構成を上書きします。

プレーヤー広告ライブラリ

videojs/videojs-contrib-ads GitHub リポジトリには、Brightcove Player と連携する動画広告ライブラリに必要な共通機能を提供するプラグインが含まれています。このプラグインは、動画広告の統合に必要な共通機能を提供し、広告統合担当者に代わって多くの懸念事項を処理するため、広告統合のために記述するコード量を削減できます。

プロパティ

videojs-contrib-ads には、便利に利用できるいくつかのプロパティが用意されています。これらは次のとおりです。

以下のコードはこれらのプロパティの使用例です。

myPlayer.on('ads-ad-started',function( evt ){
  console.log('*****ads-ad-started event passed to event handler', evt);
  console.log('myPlayer.ads.ad.id',myPlayer.ads.ad.id);
  console.log('myPlayer.ads.ad.index',myPlayer.ads.ad.index);
  console.log('myPlayer.ads.ad.duration',myPlayer.ads.ad.duration);
  console.log('myPlayer.ads.ad.type',myPlayer.ads.ad.type);
  setTimeout(function(){
    console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
  },500);
  setTimeout(function(){
    console.log('****myPlayer.ads.ad.currentTime()',myPlayer.ads.ad.currentTime());
  },1000);
});

上記コードによるコンソール出力は次のとおりです。

メソッド

videojs-contrib-ads には、便利に利用できるいくつかのメソッドが用意されています。これらは次のとおりです。

既知の問題

FreeWheel で同じプレーヤーを動的に再利用する場合

動画を動的に読み込み、同じプレーヤーを再利用する場合、setOptions() を使って設定を更新しない限り、FreeWheel の構成設定は FreeWheel プラグインがインスタンス化された時点の値のままになります。

広告再生中のプレーヤー サイズ変更

広告または動画の再生中にプレーヤーがリサイズされた場合、プレーヤーの dimensions 関数を呼び出してリサイズしない限り、広告コンテンツはリサイズされません。それ以外の方法 (例: style の width および height) でプレーヤーをリサイズしても、広告はリサイズされません。

player.dimensions(width,height) を使用してプレーヤーをリサイズする際には、寸法が変更されたことをプラグインに知らせるために、fw-resizeplayer イベントをトリガーする必要があります。これは、一部の VPAID 広告が広告のデフォルト寸法を保持し、プレーヤーのリサイズ時に自動的にリサイズされないためです。

例を以下に示します。

player.dimensions(960,540);
player.trigger('fw-resizeplayer');

変更履歴

重要な変更点は Brightcove Player リリース ノート に掲載されます。