マウスクリックをトラッキングする

IMA SDK を使用する場合、コンテンツ動画プレーヤーと広告プレーヤーの 2 つの動画プレーヤーが存在します。SDK は、コンテンツ動画プレーヤーの上に広告プレーヤーをオーバーレイすることを自動的に管理します。そのため、動画プレーヤーにイベント リスナーを直接追加することはできません。回避策として、広告コンテナを表示したり非表示にしたりすることもできますが、この方法は SDK の機能に干渉する可能性があります。より良い解決策は、両方のプレーヤーを親 div にラップし、それにイベント リスナーをアタッチすることです。このガイドでは、その方法について説明します。

前提条件

• IMA HTML5 SDK が統合された HTML5 動画プレーヤー。まだ設定していない場合は、IMA SDK を設定するをご覧ください。

HTML を変更する

まず、HTML を変更して、広告プレーヤーとコンテンツ動画プレーヤーの両方をラップする div を追加する必要があります。[IMA SDK を設定する] では、mainContainer によってすでに設定されています。

...
<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4">
    </video>
  </div>

  <div id="adContainer"></div>
</div>
...

JavaScript にイベント リスナーを追加する

次に、ユーザーが動画をクリックしたことを検出するなどの、イベント リスナーを JavaScript コードに追加します。たとえば、ads.js では次のようになります。

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

これで、動画をクリックすると、広告の再生中かどうかにかかわらずポップアップが表示され、広告のクリックスルーが機能します。

試してみる

動作する実装は次のとおりです。