דף זה תורגם על ידי Cloud Translation API.

הטמעה לדוגמה

ממשק Ad Placement API נועד לתמוך במפתחים של AdSense ו-AdMob שמשתמשים במודעות מעברון ובמודעות עם תגמול במשחקי HTML5 באינטרנט או באפליקציות. בדוגמה הזו מוצג איך לשלב את Ad Placement API במשחק ולהשתמש בו כדי להציב מודעת מעברון.

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

לפני שמתחילים, צריך לוודא שיש לכם:

יוצרים שני קבצים ריקים באותה ספרייה:
- index.html
- game.js
התקנה מקומית של Python או שימוש בשרת אינטרנט לבדיקת ההטמעה

קוד לדוגמה של אפליקציה

מוציאים לאור ב-AdMob יכולים להוריד קוד לדוגמה של אפליקציה כדי להבין טוב יותר איך אפשר לשלב את ה-API במשחק באפליקציה.

הורדת קוד לדוגמה של אפליקציה

1. הפעלת שרת פיתוח

ממשק ה-API למיקום מודעות טוען תלות באמצעות אותו פרוטוקול כמו הדף שהוא נטען בו, ולכן צריך להשתמש בשרת אינטרנט כדי לבדוק את האפליקציה. אפשר להשתמש בשרת המובנה של Python כדי ליצור סביבת פיתוח מקומית.

פותחים את הטרמינל.
עוברים אל הספרייה שמכילה את הקובץ index.html ומריצים את הפקודה:
```
python -m http.server 8000
```
הערה: http.server זמין רק ב-Python 3.x.
בדפדפן אינטרנט, עוברים אל localhost:8000

אפשר גם להשתמש בכל שרת אינטרנט אחר, כמו Apache HTTP Server.

2. יצירת משחק HTML5

משנים את index.html כדי ליצור רכיב canvas של HTML5 ולחצן להפעלת המשחק. לאחר מכן מוסיפים את תג הסקריפט הנדרש כדי לטעון את הקובץ game.js.

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Ad Placement API HTML5 demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>

    <script src="game.js"></script>
  </body>
</html>

משנים את הקובץ game.js כדי לשחק במשחק הטלת מטבע בלחיצה על הלחצן 'הפעלה'.

game.js

// Create a coin flip game
class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.erase();
  }

  // Start the game
  play() {
    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }

  // Flip the coin
  flipCoin() {
    this.headsButton.disabled = true;
    this.tailsButton.disabled = true;
    this.erase();
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Flipping coin . . .', 60, 150);

    setTimeout(() => { this.coinLanded() }, 2000);
  }

  // Logic for when the coin lands
  coinLanded() {
    this.headsButton.disabled = false;
    this.tailsButton.disabled = false;
    let sideUp;
    if(Math.random() < 0.5) {
      sideUp = 'Heads';
    } else {
      sideUp = 'Tails';
    }

    if (sideUp === this.choice ) {
      this.win(sideUp);
    } else {
      this.lose(sideUp);
    }
  }

  // Guess the flip correctly
  win(sideUp) {
    this.erase();
    this.score += 1;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('It was ' + sideUp + '!', 66, 150);
    this.canvas.fillText('Guess again', 70, 200);
  }

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase();
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block';
    this.headsButton.style.display = 'none';
    this.tailsButton.style.display = 'none';
  }

  // Erase the canvas
  erase() {
    this.canvas.fillStyle = '#ADD8E6';
    this.canvas.fillRect(0, 0, 300, 300);
    this.canvas.fillStyle = '#000000';
  }
}

const game = new Game();

אחרי שמשלימים את השלב הזה, כשפותחים את index.html בדפדפן (דרך שרת הפיתוח), אמורים לראות את בד הציור של המשחק ואת הלחצן 'הפעלה'. אם לוחצים על סמל ההפעלה, משחק הטלת המטבע אמור להתחיל.

3. ייבוא Ad Placement API

לאחר מכן, מוסיפים את Ad Placement API למשחק על ידי הוספת תג סקריפט ב-index.html, לפני התג של game.js.

תג הסקריפט יכול לקבל מספר פרמטרים. נשתמש בפרמטרים הבאים כדי לציין את קוד הנכס של AdSense ולהפעיל את מצב הבדיקה:

data-ad-client=<AdSense property code> קוד הנכס שלכם ב-AdSense. האישור הזה נדרש תמיד, גם למשחקים שיופעלו בתוך אפליקציות.
data-adbreak-test="on" מפעיל מצב בדיקה. צריך להסיר את זה מהמשחקים ברגע שהם מוצגים לשחקנים.

הגדרת קוד AdSense והפעלת מצב בדיקה

הפונקציונליות של Ad Placement API כלולה בקוד AdSense. כדי להפעיל את התכונה, קודם צריך להוסיף את קוד AdSense ולכלול קטע קטן של סקריפט שמפעיל את שתי הפונקציות העיקריות שלה: adBreak() ו-adConfig().

index.html (אינטרנט)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
    <script>
      window.adsbygoogle = window.adsbygoogle || [];
      const adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    </script>
    <script src="game.js"></script>
  </body>
</html>

הטמעת המשחק (אופציונלי)

אם רוצים להטמיע משחק בדפים אחרים בתוך iFrame, ותג adsbygoogle נמצא בדף ה-HTML של המשחק, צריך להוסיף את allow='autoplay' לרכיב ה-iframe. זו שיטה מומלצת, והיא נדרשת כדי שמודעות מסוימות יעמדו בדרישות להצגה במשחק שלכם.

<head>
  <!-- The adsbygoogle tag is not here -->
</head>
<body>
  <iframe src="https://www.my-game.com" title="My game" allow="autoplay">
    <!-- The game is loaded here and contains the adsbygoogle tag -->
  </iframe>
</body>

תמיכה באפליקציות לנייד

משחק H5 יכול לפעול בדפדפן אינטרנט רגיל, ב-WebView או בכרטיסייה מותאמת אישית של Chrome בתוך אפליקציה. Ad Placement API יכול לזהות את הסביבה שבה המשחק פועל ולהפנות את בקשות המודעות בהתאם. אם המשחק פועל בדפדפן אינטרנט רגיל, הבקשות להצגת מודעות מטופלות כמו בקשות רגילות ב-AdSense. אם Ad Placement API מזהה סביבה בתוך אפליקציה, הוא מתקשר עם Google Mobile Ads SDK, אם הוא קיים, כדי לבקש ולהציג מודעות AdMob.

היכולת הזו נתמכת באפליקציות ל-Android שמקושרות ל-Google Mobile Ads SDK. כדי להפעיל את התכונה, צריך לרשום את WebView שבו יוצג המשחק באמצעות Google Mobile Ads SDK, ואז להגדיר יחידות של מודעות ב-AdMob ולהעביר אותן כפרמטרים נוספים לתג AdSense. כשהמשחק מופעל באפליקציה מתאימה, Ad Placement API ישתמש ביחידות המודעות האלה כדי להציג מודעות.

כדי להפעיל תמיכה בנייד, צריך לציין את הפרמטרים הנוספים הבאים של התג:

data-admob-interstitial-slot=<AdMob slot ID> מזהה של יחידת מודעות מעברון ב-AdMob שהגדרתם בעבר.
data-admob-rewarded-slot=<AdMob slot ID> מזהה של יחידה של מודעות מתגמלות ב-AdMob.

תמיד צריך להעביר את קוד המאפיין של AdSense עם הפרמטר data-ad-client, ולציין לפחות אחד מהפרמטרים data-admob-interstitial-slot או data-admob-rewarded-slot. אם המשחק שלכם משתמש בשני הפורמטים, צריך לציין את שני הפרמטרים.

אפשר גם לציין את פרמטר התג data-admob-ads-only=on כדי לציין שבמשחק יוצגו מודעות רק מ-AdMob, ולא תהיה חזרה ל-AdSense במקרים שבהם המשחק מופעל בסביבה שלא תומכת בבקשות מ-AdMob (למשל, סביבות שאינן אפליקציות או אפליקציות שלא הוגדר בהן Google Mobile Ads SDK).

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

קודם צריך לרשום את WebView שבו יוצג המשחק באמצעות Google Mobile Ads SDK:

MainActivity.java (אפליקציה)

ההגדרות של WebView כברירת מחדל לא מותאמות למודעות. משתמשים בממשקי ה-API‏ WebSettings כדי להגדיר את WebView עבור:

JavaScript
גישה לאחסון המקומי
הפעלה אוטומטית של סרטונים

Java

import android.webkit.CookieManager;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
  private WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.webview);

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
    // Let the web view use JavaScript.
    webView.getSettings().setJavaScriptEnabled(true);
    // Let the web view access local storage.
    webView.getSettings().setDomStorageEnabled(true);
    // Let HTML videos play automatically.
    webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

    // Set the H5AdsWebViewClient.
    h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
    webView.setWebViewClient(h5AdsWebViewClient);
    h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);

    // Register the web view.
    MobileAds.registerWebView(webView);
  }
}

Kotlin

import android.webkit.CookieManager
import android.webkit.WebView

class MainActivity : AppCompatActivity() {
  lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    webView = findViewById(R.id.webview)

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true)
    // Let the web view use JavaScript.
    webView.settings.javaScriptEnabled = true
    // Let the web view access local storage.
    webView.settings.domStorageEnabled = true
    // Let HTML videos play automatically.
    webView.settings.mediaPlaybackRequiresUserGesture = false

    // Set the H5AdsWebViewClient.
    val h5AdsWebViewClient = H5AdsWebViewClient(this, webView)
    webView.webViewClient = h5AdsWebViewClient
    h5AdsWebViewClient.delegateWebViewClient = pubWebViewClient

    // Register the web view.
    MobileAds.registerWebView(webView)
  }
}

לאחר מכן, מעבירים יחידות מודעות של AdMob (אחת למודעות מעברון ואחת למודעות מתגמלות) באופן הבא:

index.html (app)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <script async
      data-admob-interstitial-slot="ca-app-pub-0987654321/1234567890"
      data-admob-rewarded-slot="ca-app-pub-0987654321/0987654321"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
    <script>
      window.adsbygoogle = window.adsbygoogle || [];
      const adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    </script>
    <script src="game.js"></script>
  </body>
</html>

4. התקשרות אל adConfig()

הקריאה adConfig() מעבירה את ההגדרה הנוכחית של המשחק אל Ad Placement API. לאחר מכן, ה-API יכול להשתמש במידע הזה כדי לסנן את סוגי המודעות שהוא מבקש, כך שהן יתאימו למשחק (למשל, מודעות וידאו שנדרש בהן סאונד, אם הסאונד מופעל).

צריך להתקשר אל adConfig() בכל פעם שההגדרה הזו משתנה, למשל כשמשתמש משתיק את המשחק או מבטל את ההשתקה. מתקשרים אל adConfig() בבונה של המשחק, ואז מוסיפים לחצן להשתקה ולביטול ההשתקה של המשחק שמתקשר אל adConfig().

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');
    this.muteButton = document.getElementById('muteButton');

    adConfig({
      sound: 'on',
    });

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.muteButton.addEventListener('click', () => {
      var soundString = this.muted ? 'on' : 'off';
      this.muteButton.innerHTML = this.muted ? 'Mute sound' : 'Un-mute sound';
      this.muted = !this.muted;
      adConfig({
        sound: soundString,
      });
    });

    this.erase();
  [...]

עכשיו מוסיפים את לחצן ההשתקה לקובץ ה-HTML.

index.html

[...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <button id="muteButton">Mute sound</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
[...]

5. התקשרות אל `adBreak()` בסיום המשחק

הקריאה adBreak() מגדירה מיקום מודעה ומקבלת את האובייקט שנקרא placement config שמציין את כל מה שנדרש כדי להציג מודעה בנקודה הזו במשחק. כדי לתמוך בסוגים שונים של מודעות, צריך להפעיל קבוצות משנה שונות של הגדרות המיקום.

הקריאה adBreak() מגדירה מיקום שבו אפשר להציג מודעה, או במילים אחרות, הזדמנות להצגת מודעה. האם מודעה תוצג בפועל תלוי במספר גורמים:

סוג מיקום המודעה שהצהרתם עליו.
אם היו אינטראקציות מתאימות של המשתמש לפני הצגת המודעה.
האם קיימת מודעה מתאימה לנגן הנוכחי, ש:
- רלוונטיות עבורם.
- עולה בקנה אחד עם הגדרות הפרטיות וההסכמה שלהם.
מספר המודעות שהמשתמש ראה לאחרונה.
הגדרות הפקדים שהגדרתם למשחק הזה הן:
- רמזים בתג.
- ב-AdSense (הערה: אמצעי הבקרה שזמינים ב-AdSense ישתנו עם הזמן)

מוסיפים קוד להצגת מודעת מעברון כשהמשחק מופעל מחדש: מבצעים קריאה ל-adBreak() בתוך הפונקציה play(), שמופעלת רק אחרי שהמשחק הסתיים פעם אחת.

adBreak() צריך להפעיל את הפונקציה כחלק מפעולת משתמש, כמו לחיצה על הלחצן 'הפעלה'. אחרת, ה-API לא יוכל לבקש ולהציג מודעות.

יוצרים פונקציות שיופעלו לפני ואחרי הפסקת הפרסום, ואז משתמשים בהן בהגדרת המיקום adBreak(). חשוב לציין שהמערכת תקרא לפונקציות beforeAd ו-afterAd רק אם היא תמצא מודעה מתאימה.

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;
    this.shouldShowAdOnPlay = false;

  [...]

  // Start the game
  play() {
    if (this.shouldShowAdOnPlay) {
      this.shouldShowAdOnPlay = false;

      adBreak({
        type: 'next',  // ad shows at start of next level
        name: 'restart-game',
        beforeAd: () => { this.disableButtons(); },  // You may also want to mute the game's sound.
        afterAd: () => { this.enableButtons(); },    // resume the game flow.
      });
    }

    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none'
    this.headsButton.style.display = 'inline-block'
    this.tailsButton.style.display = 'inline-block'
  }

  [...]

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase()
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block'
    this.headsButton.style.display = 'none'
    this.tailsButton.style.display = 'none'
    this.shouldShowAdOnPlay = true;
  }

  [...]

  // Erase the canvas
  erase() {
    this.canvas.fillStyle = '#ADD8E6';
    this.canvas.fillRect(0, 0, 300, 300);
    this.canvas.fillStyle = '#000000';
  }

  enableButtons() {
    this.playButton.disabled = false;
    this.headsButton.disabled = false;
    this.tailsButton.disabled = false;
  }

  disableButtons() {
    this.playButton.disabled = true;
    this.headsButton.disabled = true;
    this.tailsButton.disabled = true;
  }
}

const game = new Game();

6. ביצוע קריאה אל `adBreak()` להצגת מודעה מתגמלת

מוסיפים קוד למודעה מתגמלת שתוצג כשהמשחק מסתיים, אבל המשתמש רוצה להחיות את הניקוד הקיים שלו במקום להתחיל מחדש. מבצעים קריאה אל adBreak() בתוך הפונקציה lose() כדי לבדוק אם יש מודעה מתגמלת זמינה. אם כן, מציגים למשתמש בקשה שבה שואלים אותו אם הוא רוצה לקבל את התגמול (כלומר, החייאה במקרה הזה), וכשהוא מסכים לצפות במודעה, קוראים לפונקציה showAdFn() המתאימה. אפשר להגדיר מה יקרה אם המשתמש יצפה במודעות המתגמלות או ידלג עליהן באמצעות הקריאות החוזרות (callback) adViewed ו-adDismissed.

צריך לקרוא לפונקציה adBreak() בכל הזדמנות להצגת מודעה מתגמלת. כך המודעה תתעדכן אם המודעה הקודמת פג תוקפה או לא הייתה זמינה.

צריך לקרוא ל-showAdFn() כחלק מפעולה ישירה של משתמש לצפייה במודעה, אחרת יכול להיות שהמודעה לא תוצג.

יוצרים פונקציות שיופעלו לפני ואחרי הפסקת הפרסום, ואז משתמשים בהן בהגדרת המיקום adBreak(). חשוב לציין שהפונקציות beforeReward, adViewed, adDismissed, beforeAd ו-afterAd יופעלו רק אם תימצא מודעה מתאימה.

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;
    this.shouldShowAdOnPlay = false;
    this.showRewardedAdFn = null;

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');
    this.muteButton = document.getElementById('muteButton');
    this.continueButton = document.getElementById('continueButton');

    adConfig({
      sound: 'on',
    });

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.muteButton.addEventListener('click', () => {
      var soundString = this.muted ? 'on' : 'off';
      this.muteButton.innerHTML = this.muted ? 'Mute sound' : 'Un-mute sound';
      this.muted = !this.muted;
      adConfig({
        sound: soundString,
      });
    });

    this.continueButton.addEventListener('click', () => {
      if (this.showRewardedAdFn) {
        this.showRewardedAdFn();
      }
    });

    this.erase();
  }

  // Start the game
  play() {
    if (this.shouldShowAdOnPlay) {
      this.shouldShowAdOnPlay = false;

      adBreak({
        type: 'next',  // ad shows at start of next level
        name: 'restart-game',
        beforeAd: () => { this.disableButtons(); },  // You may also want to mute the game's sound.
        afterAd: () => { this.enableButtons(); },    // resume the game flow.
      });
    }

    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.continueButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }

  [...]

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase()
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block'
    this.headsButton.style.display = 'none'
    this.tailsButton.style.display = 'none'
    this.shouldShowAdOnPlay = true;

    adBreak({
      type: 'reward',  // rewarded ad
      name: 'reward-continue',
      beforeReward: (showAdFn) => {
        this.showRewardedAdFn = () => { showAdFn(); };
        // Rewarded ad available - prompt user for a rewarded ad
        this.continueButton.style.display = 'inline-block';
      },
      beforeAd: () => { this.disableButtons(); },     // You may also want to mute the game's sound.
      adDismissed: () => {
        this.continueButton.style.display = 'none';   // Hide the reward button and continue lose flow.
      },
      adViewed: () => { this.continueGame(); },       // Reward granted - continue game at current score.
      afterAd: () => { this.enableButtons(); },       // Resume the game flow.
    });
  }

  // Continue gameplay at current score
  continueGame() {
    this.erase();
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.continueButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }
  [...]
}

const game = new Game();

עכשיו מוסיפים את לחצן ההמשך לקובץ ה-HTML.

index.html

[...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <button style="display:none" id="continueButton">Watch Ad to continue?</button>
    <button id="muteButton">Mute sound</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
[...]

אפליקציית הטלת המטבע יוצרת עכשיו מיקומים להצגת מודעות.

יכול להיות שיש באפליקציה שלכם מקומות נוספים שמתאימים להצגת מודעות, מלבד סיום המשחק. התקשרות אל adBreak() במקומות האלה צריכה להיות דומה לדוגמה הזו.

השבתת בדיקות באפליקציות בסביבת הייצור

לפני שמשחררים את האפליקציה, חשוב להסיר או להוסיף הערה לשורה data-adbreak-test="on" ב-index.html, כי הקוד הזה מפעיל הגדרות בדיקה בסביבת ייצור.

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

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

קוד לדוגמה של אפליקציה

1. הפעלת שרת פיתוח

2. יצירת משחק HTML5

index.html

game.js

3. ייבוא Ad Placement API

הגדרת קוד AdSense והפעלת מצב בדיקה

index.html (אינטרנט)

הטמעת המשחק (אופציונלי)

תמיכה באפליקציות לנייד

MainActivity.java (אפליקציה)

Java

Kotlin

index.html (app)

4. התקשרות אל adConfig()

game.js

index.html

5. התקשרות אל adBreak() בסיום המשחק

game.js

6. ביצוע קריאה אל adBreak() להצגת מודעה מתגמלת

game.js

index.html

השבתת בדיקות באפליקציות בסביבת הייצור

הטמעה לדוגמה

5. התקשרות אל `adBreak()` בסיום המשחק

6. ביצוע קריאה אל `adBreak()` להצגת מודעה מתגמלת