マウスクリックのトラッキング

IMA SDK を使用する場合、2 つの動画プレーヤーがあります。 動画プレーヤーと広告プレーヤーで構成されますSDK が広告のオーバーレイを自動的に管理する 動画プレーヤーの上に重ねて表示されます。そのため、イベント リスナーを 直接動作しない場合があります。回避策の 1 つは、広告の表示と非表示を切り替えること。 SDK の機能が妨げられる可能性があります。より適切な解決策は、 両方のプレーヤーを親 div でラップし、そこにイベント リスナーをアタッチします。 このガイドでは、その方法について説明します。

前提条件

  • IMA HTML5 SDK が統合された HTML5 動画プレーヤーです。Google アカウントがない場合は、スタートガイドをご覧ください。

HTML を変更する

まず、HTML を変更して、両方をラップする div を追加する必要があります。 広告プレーヤーとコンテンツ動画プレーヤーこれは、スタートガイドに 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!');});
  ...
}
...

これで、動画をクリックすると、 広告が再生中でもクリックスルーが成功するかどうか。

試してみる

以下に、機能する実装を示します。