Suivre les clics de la souris
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Lorsque vous utilisez le SDK IMA, deux lecteurs vidéo distincts sont disponibles : le lecteur vidéo de votre contenu et le lecteur d'annonces. Le SDK gère automatiquement la superposition du lecteur d'annonces sur le lecteur vidéo du contenu. Par conséquent, l'ajout d'écouteurs d'événements directement au lecteur vidéo ne fonctionne pas. Une solution consiste à afficher et à masquer le conteneur d'annonces, mais cela peut interférer avec le fonctionnement du SDK. Une meilleure solution consiste à encapsuler les deux lecteurs dans un div parent et à y associer des écouteurs d'événements.
Ce guide vous explique comment procéder.
Prérequis
- Lecteur vidéo HTML5 avec le SDK IMA pour HTML5 intégré Si vous n'en avez pas, consultez Configurer le SDK IMA.
Modifier votre code HTML
Vous devez d'abord modifier votre code HTML pour ajouter un div encapsulant à la fois le lecteur d'annonces et le lecteur vidéo de contenu. Dans "Configurer le SDK IMA", cela est déjà fait pour vous avec 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>
...
Ajouter des écouteurs d'événements à votre code JavaScript
Ajoutez ensuite des écouteurs d'événements à votre code JavaScript, par exemple pour détecter un utilisateur qui clique sur la vidéo. Par exemple, dans ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
Et voilà ! Vous pouvez cliquer sur la vidéo pour que le pop-up s'affiche, que l'annonce soit diffusée ou non, et que les clics sur les annonces fonctionnent.
Essayer
Vous trouverez ci-dessous une implémentation fonctionnelle.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/31 (UTC).
[null,null,["Dernière mise à jour le 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."]]
