Monitorare i clic del mouse
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Quando utilizzi l'SDK IMA, sono presenti due video player distinti: il video player per i contenuti e il video player per gli annunci. L'SDK gestisce automaticamente l'overlay del video player dell'annuncio sul video player dei contenuti. Di conseguenza, l'aggiunta di ascoltatori di eventi direttamente al
video player non funziona. Una soluzione alternativa è mostrare e nascondere il contenitore degli annunci, ma ciò può interferire con la funzionalità dell'SDK. Una soluzione migliore è inserire entrambi i giocatori in un elemento div principale e associare a questo gli ascoltatori di eventi.
Questa guida ti spiega come.
Prerequisiti
- Video player HTML5 con l'SDK IMA HTML5 integrato. Se non ne hai uno, consulta l'articolo Configurare l'SDK IMA.
Modificare il codice HTML
Innanzitutto, devi modificare il codice HTML aggiungendo un elemento div che racchiuda sia il player dell'annuncio sia il video player dei contenuti. In *Configura l'SDK IMA*, questa operazione è già stata eseguita per te con 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>
...
Aggiungere ascoltatori di eventi al codice JavaScript
Aggiungi poi gli ascoltatori di eventi al codice JavaScript, ad esempio per rilevare un utente che fa clic sul video. Ad esempio, in ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
È tutto. Puoi fare clic sul video e visualizzare il popup indipendentemente dal fatto che sia in riproduzione un annuncio e i clic sugli annunci continuino a funzionare.
Prova
Di seguito puoi vedere un'implementazione funzionante.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2025-08-31 UTC.
[null,null,["Ultimo aggiornamento 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."]]
