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

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

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

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

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

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

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

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

רוצה לנסות?

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