마우스 클릭 추적

IMA SDK를 사용하는 경우 별도의 두 동영상 플레이어, 즉 콘텐츠 동영상 플레이어와 광고 플레이어가 있습니다. SDK는 콘텐츠 동영상 플레이어 위에 광고 플레이어를 오버레이하는 것을 자동으로 관리합니다. 따라서 이벤트 리스너를 동영상 플레이어에 직접 추가해도 작동하지 않습니다. 한 가지 해결 방법은 광고 컨테이너를 표시하거나 숨기는 것이지만 이 경우 SDK 기능이 방해를 받을 수 있습니다. 더 좋은 방법은 두 플레이어를 상위 div에 래핑하고 여기에 이벤트 리스너를 연결하는 것입니다. 이 가이드에서는 그 방법을 설명합니다.

기본 요건

• IMA HTML5 SDK가 통합된 HTML5 동영상 플레이어입니다. 계정이 없는 경우 시작 가이드를 확인하세요.

HTML 수정

먼저 광고 플레이어와 콘텐츠 동영상 플레이어를 모두 래핑하는 div를 추가하도록 HTML을 변경해야 합니다. 시작 가이드에서 이 작업은 이미 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에 이벤트 리스너 추가

다음으로, 사용자의 동영상 클릭을 감지하는 등의 이벤트 리스너를 자바스크립트 코드에 추가합니다. 예를 들어 ads.js에서 다음과 같습니다.

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

이제 완료됐습니다. 동영상을 클릭하면 광고가 재생 중이고 광고 클릭연결이 여전히 작동하는지에 관계없이 팝업이 표시됩니다.

사용해 보기

아래에서 실제로 작동하는 구현을 확인할 수 있습니다.