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

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

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

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

שינוי ה-HTML

קודם צריך לשנות את ה-HTML כדי להוסיף את ה-div שמקיף את נגן המודעות ואת נגן הווידאו של התוכן. בקטע 'הגדרת IMA SDK', הפעולה הזו כבר בוצעה בשבילכם באמצעות 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

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

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

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

רוצה לנסות?

בהמשך מופיעה הטמעה עובדת.