Śledzenie kliknięć myszką
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
W przypadku pakietu IMA SDK są 2 osobne odtwarzacze wideo: odtwarzacz treści i odtwarzacz reklam. Pakiet SDK automatycznie zarządza nakładaniem odtwarzacza reklamy na odtwarzacz treści. W związku z tym dodawanie odbiorników zdarzeń bezpośrednio do odtwarzacza wideo nie działa. Jednym z rozwiązań jest wyświetlanie i ukrywanie kontenera reklamy, ale może to zakłócać działanie pakietu SDK. Lepszym rozwiązaniem jest owinięcie obu graczy w element nadrzędny div i dołączenie do niego detektorów zdarzeń.
Z tego przewodnika dowiesz się, jak to zrobić.
Wymagania wstępne
Modyfikowanie kodu HTML
Najpierw musisz zmienić kod HTML, aby dodać element divobejmujący odtwarzacz reklamy i odtwarzacz filmu z treściami. W sekcji *Konfigurowanie pakietu IMA SDK* te czynności zostały już wykonane dla Ciebie: 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>
...
Dodawanie detektorów zdarzeń do kodu JavaScript
Następnie dodaj do kodu JavaScriptu odbiorniki zdarzeń, np. do wykrywania kliknięć filmu przez użytkownika. Na przykład w ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
Znakomicie. Możesz kliknąć film, aby wyświetlić wyskakujące okienko, niezależnie od tego, czy reklama jest odtwarzana i czy kliknięcia reklamy nadal działają.
Wypróbuj
Poniżej znajdziesz działające rozwiązanie.
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-08-31 UTC.
[null,null,["Ostatnia aktualizacja: 2025-08-31 UTC."],[[["\u003cp\u003eThe IMA SDK uses two separate video players: one for content and one for ads, which it automatically overlays.\u003c/p\u003e\n"],["\u003cp\u003eDirectly adding event listeners to the content video player is ineffective due to the ad overlay.\u003c/p\u003e\n"],["\u003cp\u003eWrap both video players in a parent \u003ccode\u003ediv\u003c/code\u003e and attach event listeners to that parent element for proper functionality.\u003c/p\u003e\n"],["\u003cp\u003eThis method enables event handling (like click detection) on the video, irrespective of ad playback, while preserving ad click-throughs.\u003c/p\u003e\n"]]],[],null,["# Track mouse clicks\n\nWhen using the IMA SDK, there are two separate video players, your content\nvideo player and the ad player. The SDK automatically manages overlaying the ad\nplayer over the content video player. As a result, adding event listeners to the\nvideo player directly does not work. One workaround is to show and hide the ad\ncontainer, but this can interfere with SDK functionality. A better solution is to\nwrap both players in a parent `div` and attach event listeners to that.\nThis guide shows you how.\n\nPrerequisites\n-------------\n\n- HTML5 video player with the IMA HTML5 SDK integrated. If you don't have one, check out [Set up the IMA SDK](/interactive-media-ads/docs/sdks/html5/client-side).\n\nModify your HTML\n----------------\n\nFirst you need to change your HTML to add a `div` wrapping both\nthe ad player and content video player. In \\*Set up the IMA SDK\\*, this is already\ndone for you with `mainContainer`: \n\n```text\n...\n\u003cdiv id=\"mainContainer\"\u003e\n \u003cdiv id=\"content\"\u003e\n \u003cvideo id=\"contentElement\"\u003e\n \u003csource src=\"https://storage.googleapis.com/gvabox/media/samples/stock.mp4\"\u003e\n \u003c/video\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"adContainer\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n...\n```\n\nAdd event listeners to your JavaScript\n--------------------------------------\n\nNext, add event listeners to your JavaScript code, such as to detect a\nuser clicking on the video. For example, in `ads.js`: \n\n```text\n...\nfunction init() {\n videoContent = document.getElementById('contentElement');\n mainContainer = document.getElementById('mainContainer');\n mainContainer.addEventListener('click', function() { alert('I was clicked!');});\n ...\n}\n...\n```\n\n\u003cbr /\u003e\n\nThat's it! You can click on the video and see the pop-up appear regardless of\nwhether an ad is playing and still have ad click-throughs work.\n\nTry it out\n----------\n\nYou can see a working implementation below.\nSee the Pen \\\u003ca href='http://codepen.io/imasdk/pen/gPYzYO/'\\\u003egPYzYO\\\u003c/a\\\u003e by IMA SDK (\\\u003ca href='http://codepen.io/imasdk'\\\u003e@imasdk\\\u003c/a\\\u003e) on \\\u003ca href='http://codepen.io'\\\u003eCodePen\\\u003c/a\\\u003e."]]
