마우스 클릭 추적

IMA SDK를 사용하는 경우 두 개의 개별 동영상 플레이어가 있습니다. 동영상 플레이어와 광고 플레이어가 있습니다. SDK가 자동으로 광고 오버레이를 관리합니다. 동영상 플레이어 위에 겹쳐서 표시될 수 있습니다. 따라서 작동하지 않습니다. 한 가지 해결 방법은 광고를 표시하고 숨기는 것입니다. SDK 기능을 방해할 수 있습니다. 더 나은 해결책은 두 플레이어를 모두 상위 요소에 래핑하고 div 여기에 이벤트 리스너를 연결합니다. 이 가이드에서 그 방법을 알려드립니다.

기본 요건

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

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에 이벤트 리스너 추가

다음으로, 자바스크립트 코드에 이벤트 리스너를 추가합니다. 사용자가 동영상을 클릭할 때 발생합니다. 예를 들어 ads.js에서 다음을 실행합니다.

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

작업이 끝났습니다. 동영상을 클릭하면 광고가 재생되고 광고 클릭연결이 작동하는지 여부

사용해 보기

아래에서 실제 구현을 확인할 수 있습니다.