מעקב אחר קליקים בעכבר

כאשר משתמשים ב-IMA SDK, יש שני נגני וידאו נפרדים: נגן הווידאו של התוכן ונגן המודעות. ה-SDK מנהל באופן אוטומטי את שכבת-העל של נגן המודעה מעל נגן הווידאו של התוכן. כתוצאה מכך, הוספת פונקציות event listener ישירות לנגן הווידאו לא פועלת. אחת מהדרכים לעקוף את הבעיה היא להציג ולהסתיר את מאגר המודעות, אבל הדבר עלול להפריע לפונקציונליות של ה-SDK. פתרון עדיף הוא לצרף את שני הנגנים ל-div הורה ולצרף לכך פונקציות event listener. במדריך הזה נסביר איך עושים זאת.

דרישות מוקדמות

• נגן וידאו בפורמט HTML5 עם שילוב של IMA HTML5 SDK. אם אין לכם חשבון Google, כדאי לעיין במדריך לתחילת העבודה.

שינוי ה-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>
...

הוספת פונקציות event listener ל-JavaScript

בשלב הבא, מוסיפים פונקציות event listener לקוד ה-JavaScript, למשל כדי לזהות משתמש שלוחץ על הסרטון. לדוגמה, ב-ads.js:

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

זהו! תוכלו ללחוץ על הסרטון ולראות את החלון הקופץ, גם אם המודעה לא פועלת וגם אם הקליק על המודעה עדיין לא פעיל.

אני רוצה לנסות

בהמשך אפשר לראות הטמעה תקינה.