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 モジュールでのサポートは近日公開予定です。

JSON エディタを使用して実装

Players モジュールで、設定したいプレーヤーに移動し、JSON エディタのリンクをクリックします。 "plugins" 配列を編集して FreeWheel プラグインを追加します。

              
                "plugins": [
                {
                  "name": "freewheel",
                  "is_packaged": true,
                  "options": {
                    ...
                  }
                }
              ]
              
            

設定

以下の設定項目を使用して 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 を使用する同一プレーヤーを動的に再利用する場合

動画を動的に読み込み、同じプレーヤーを使い続ける場合、FreeWheel の設定値はプラグインが初期化された時点のまま保持されます。 設定を更新するには setOptions() を使用する必要があります。

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

広告または動画再生中にプレーヤーサイズを変更した場合、広告コンテンツは自動でサイズ変更されません。 プレーヤーのサイズ変更は、プレーヤーの dimension 機能を使用した場合のみ適用されます。

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

以下は例です：

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