広告ブロッカーの確認

このトピックでは、広告ブロッカーが使用されているかどうかを確認する方法について説明します。

usingAdBlocker() メソッドの使用

Brightcove Player には、動画を再生しているブラウザーが広告ブロッカーを使用しているかどうかを確認するメソッドがあります。このメソッドが usingAdBlocker() です。広告ブロッカーが検出されたかどうかの判断が行われた後、どのようなアクションをとるかはビジネスルールによって決定されます。以下の例では、動画再生中に 3 つの広告を表示しますが、広告ブロッカーが検出された場合はプレーヤー下部にメッセージを表示します。

テスト用に広告ブロッカーをインストールしていない場合、広告ブロッカーが検出された際には次の赤枠内のメッセージが表示されます:

実装

以下のコードは usingAdBlocker() メソッドを使用した完全な例です。基本的にコードは次の処理を行います:

Promise を使用して広告ブロッカーが検出されているか確認します。
検出された場合、段落を動的に作成し、既存の div に挿入します。

<!doctype html>
      <html>
      
      <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      </head>
      
      <body>
      
        <div style="width: 600px;">
          <video-js id="myPlayerID"
            data-account="1752604059001"
            data-player="ZDaDSLULho"
            data-embed="default"
            controls=""
            data-video-id="5701193190001"
            data-playlist-id=""
            data-application-id=""
            width="600" height="337.5" class="vjs-fluid"></video-js>
        </div>
        <script src="https://players.brightcove.net/1752604059001/ZDaDSLULho_default/index.min.js"></script>
        
        <div id="ad-blocker-note"></div>
        
        <script>
          videojs.getPlayer('myPlayerID').ready(function () {
            var myPlayer = this;
            myPlayer.usingAdBlocker().then( hasBlocker => {
              if (hasBlocker) {
                var newP = document.createElement("p");
                newP = '<strong>Ads will not play as you are using an ad blocker.</strong>';
                document.getElementById("ad-blocker-note").insertAdjacentHTML('afterbegin', newP);
            }
          });
        
        </script>
        
      </body>
      
      </html>

もちろん、JavaScript ロジックには if 文を使用することもできます。

videojs.getPlayer('myPlayerID').ready(function () {
        var myPlayer = this;
        if (myPlayer.usingAdBlocker()) {
          var newP = document.createElement("p");
          newP = 'This ad will not play as you are using an ad blocker.';
          document.getElementById("ad-blocker-note2").insertAdjacentHTML('afterbegin', newP);
        }
      });