마우스 클릭 추적

IMA SDK를 사용하면 콘텐츠 동영상 플레이어와 광고 플레이어라는 두 가지 동영상 플레이어가 별도로 있습니다. 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!');});
  ...
}
...

작업이 끝났습니다. 동영상을 클릭하면 광고가 재생 중인지와 관계없이 팝업이 표시되고 광고 클릭연결이 계속 작동합니다.

사용해 보기

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