लागू करने का उदाहरण

Ad Placement API को AdSense और AdMob डेवलपर की मदद करने के लिए डिज़ाइन किया गया है. ये डेवलपर, वेब पर या ऐप्लिकेशन में HTML5 गेम में इंटरस्टीशियल और इनाम वाले विज्ञापन दिखाते हैं. इस उदाहरण में, Ad Placement API को किसी गेम में इंटिग्रेट करने और इसका इस्तेमाल करके इंटरस्टीशियल विज्ञापन दिखाने का तरीका बताया गया है.

ज़रूरी शर्तें

शुरू करने से पहले, आपको इनकी ज़रूरत होगी:

  • एक ही डायरेक्ट्री में दो खाली फ़ाइलें बनाएं:
    • index.html
    • game.js
  • Python को स्थानीय तौर पर इंस्टॉल करें या अपने सेटअप की जांच करने के लिए वेब सर्वर का इस्तेमाल करें

ऐप्लिकेशन का सैंपल कोड

AdMob पब्लिशर, ऐप्लिकेशन कोड का सैंपल डाउनलोड कर सकते हैं. इससे उन्हें यह समझने में मदद मिलेगी कि एपीआई को किसी ऐप्लिकेशन गेम में कैसे इंटिग्रेट किया जा सकता है.

ऐप्लिकेशन का सैंपल कोड डाउनलोड करें

1. डेवलपमेंट सर्वर शुरू करना

Ads Placement API, उन डिपेंडेंसी को उसी प्रोटोकॉल के ज़रिए लोड करता है जिस प्रोटोकॉल के ज़रिए पेज लोड होता है. इसलिए, आपको अपने ऐप्लिकेशन की जांच करने के लिए वेब सर्वर का इस्तेमाल करना होगा. लोकल डेवलपमेंट एनवायरमेंट बनाने के लिए, Python के बिल्ट-इन सर्वर का इस्तेमाल किया जा सकता है.

  1. टर्मिनल खोलें.

  2. उस डायरेक्ट्री पर जाएं जिसमें आपकी index.html फ़ाइल है. इसके बाद, यह कमांड चलाएं:

    python -m http.server 8000

  3. किसी वेब ब्राउज़र में, localhost:8000 पर जाएं

Apache HTTP Server जैसे किसी अन्य वेब सर्वर का भी इस्तेमाल किया जा सकता है.

2. HTML5 गेम बनाना

एचटीएमएल5 कैनवस एलिमेंट और गेमप्ले को ट्रिगर करने के लिए बटन बनाने के लिए, index.html में बदलाव करें. इसके बाद, 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>

"Play" बटन पर क्लिक करने पर, टॉस वाला गेम खेलने के लिए 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 टैग, गेम के एचटीएमएल पेज में मौजूद है, तो पक्का करें कि आपने iframe एलिमेंट में allow='autoplay' टैग जोड़ा हो. यह सबसे सही तरीका है. साथ ही, कुछ विज्ञापनों के लिए यह ज़रूरी है कि वे आपके गेम में दिखाए जाने की ज़रूरी शर्तें पूरी करें.

<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 से कम्यूनिकेट करता है. ऐसा तब होता है, जब 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 सेटिंग, विज्ञापनों के लिए ऑप्टिमाइज़ नहीं की जाती हैं. WebView को कॉन्फ़िगर करने के लिए, WebSettings एपीआई का इस्तेमाल करें. इनका इस्तेमाल इन कामों के लिए किया जा सकता है:

  • 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 (ऐप्लिकेशन)

 [...]
    <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() कॉल, AdPlacement 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();
  [...]

अब अपनी एचटीएमएल फ़ाइल में म्यूट बटन जोड़ें.

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() कॉल, विज्ञापन प्लेसमेंट तय करता है. साथ ही, यह प्लेसमेंट कॉन्फ़िगरेशन नाम का ऑब्जेक्ट लेता है. इसमें आपके गेम में इस पॉइंट पर विज्ञापन दिखाने के लिए ज़रूरी सभी चीज़ें शामिल होती हैं. अलग-अलग तरह के विज्ञापनों को दिखाने के लिए, आपको प्लेसमेंट कॉन्फ़िगरेशन के अलग-अलग सबसेट शुरू करने होंगे.

adBreak() कॉल से, उस प्लेसमेंट के बारे में पता चलता है जहां विज्ञापन दिखाया जा सकता है. दूसरे शब्दों में कहें, तो यह विज्ञापन दिखाने का एक अवसर होता है. कोई विज्ञापन दिखेगा या नहीं, यह कई बातों पर निर्भर करता है:

  • विज्ञापन प्लेसमेंट का वह टाइप जिसे आपने बताया है.
  • अगर विज्ञापन दिखाने से पहले, उपयोगकर्ता के साथ सही इंटरैक्शन हुए हों.
  • क्या मौजूदा प्लेयर के लिए कोई ऐसा विज्ञापन मौजूद है जो:
    • उनके काम की हो.
    • डेटा की निजता और सहमति से जुड़ी सेटिंग के मुताबिक हो.
  • उपयोगकर्ता ने हाल ही में कितने विज्ञापन देखे हैं.
  • इस गेम के लिए, कंट्रोल की सेटिंग को इनमें से किसी एक के तौर पर कॉन्फ़िगर किया गया हो:
    • टैग में दिए गए सुझाव.
    • AdSense में (ध्यान दें: AdSense में उपलब्ध कंट्रोल समय के साथ बेहतर होते जाएंगे)

गेम के फिर से शुरू होने पर, पेज पर अचानक दिखने वाला विज्ञापन दिखाने के लिए कोड जोड़ें: play() फ़ंक्शन में adBreak() को कॉल करें. यह फ़ंक्शन सिर्फ़ तब चलता है, जब गेम को एक बार खेला जा चुका हो.

adBreak() को उपयोगकर्ता की किसी कार्रवाई के हिस्से के तौर पर कॉल किया जाना चाहिए. जैसे, "चलाएं" बटन पर क्लिक करना. ऐसा न करने पर, एपीआई विज्ञापनों का अनुरोध नहीं कर पाएगा और उन्हें दिखा नहीं पाएगा.

विज्ञापन ब्रेक से पहले और बाद में कॉल किए जाने वाले फ़ंक्शन बनाएं. इनका इस्तेमाल 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() को कॉल करना

गेम खत्म होने पर इनाम वाला विज्ञापन दिखाने के लिए कोड जोड़ें. हालांकि, उपयोगकर्ता को नए सिरे से शुरू करने के बजाय, अपने मौजूदा स्कोर को फिर से शुरू करना होगा. lose() फ़ंक्शन में adBreak() को कॉल करें. इससे यह पता चलेगा कि इनाम वाला विज्ञापन उपलब्ध है या नहीं. अगर ऐसा है, तो उपयोगकर्ता को एक प्रॉम्प्ट दिखाएं. इसमें उससे पूछें कि क्या उसे इनाम चाहिए (यानी, इस मामले में गेम में वापस आना) और जब वह विज्ञापन देखने के लिए सहमत हो जाए, तो उससे जुड़ा showAdFn() कॉल करें. 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();

अब अपनी एचटीएमएल फ़ाइल में, जारी रखें बटन जोड़ें.

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() को कॉल करने का तरीका, इस उदाहरण के जैसा होना चाहिए.

प्रोडक्शन ऐप्लिकेशन के लिए टेस्टिंग की सुविधा बंद करना

अपने ऐप्लिकेशन को रिलीज़ करने से पहले, index.html में मौजूद data-adbreak-test="on" लाइन को हटाना या उस पर टिप्पणी करना ज़रूरी है. ऐसा इसलिए, क्योंकि यह कोड प्रोडक्शन में टेस्ट सेटिंग चालू करता है.