এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

উদাহরণ বাস্তবায়ন

অ্যাড প্লেসমেন্ট এপিআই ওয়েবে বা অ্যাপের মধ্যে HTML5 গেমগুলিতে ইন্টারস্টিশিয়াল এবং পুরস্কৃত বিজ্ঞাপনগুলি ব্যবহার করে AdSense এবং AdMob বিকাশকারীদের সমর্থন করার জন্য ডিজাইন করা হয়েছে। এই উদাহরণটি দেখায় যে কীভাবে একটি গেমের মধ্যে অ্যাড প্লেসমেন্ট এপিআইকে একীভূত করতে হয় এবং একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেওয়ার জন্য এটি ব্যবহার করতে হয়।

পূর্বশর্ত

আপনি শুরু করার আগে, আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

একই ডিরেক্টরিতে দুটি খালি ফাইল তৈরি করুন:
- index.html
- game.js
স্থানীয়ভাবে পাইথন ইনস্টল করুন, অথবা আপনার বাস্তবায়ন পরীক্ষা করতে একটি ওয়েব সার্ভার ব্যবহার করুন

অ্যাপের নমুনা কোড

AdMob প্রকাশকরা একটি অ্যাপ গেমে API কীভাবে একীভূত করা যায় তা আরও ভালভাবে বুঝতে অ্যাপ কোডের নমুনা ডাউনলোড করতে পারেন।

অ্যাপের নমুনা কোড ডাউনলোড করুন

1. একটি ডেভেলপমেন্ট সার্ভার শুরু করুন

যেহেতু বিজ্ঞাপন প্লেসমেন্ট এপিআই যে পৃষ্ঠায় লোড করা হয়েছে সেই একই প্রোটোকলের মাধ্যমে নির্ভরতা লোড করে, তাই আপনার অ্যাপ পরীক্ষা করার জন্য আপনাকে একটি ওয়েব সার্ভার ব্যবহার করতে হবে। স্থানীয় উন্নয়ন পরিবেশ তৈরি করতে আপনি পাইথনের অন্তর্নির্মিত সার্ভার ব্যবহার করতে পারেন।

টার্মিনাল খুলুন।
যে ডিরেক্টরিতে আপনার index.html ফাইল রয়েছে সেখানে যান, তারপর চালান:
```
python -m http.server 8000
```
দ্রষ্টব্য: http.server শুধুমাত্র Python 3.x এ উপলব্ধ।
একটি ওয়েব ব্রাউজারে, localhost:8000

আপনি অন্য কোনো ওয়েব সার্ভারও ব্যবহার করতে পারেন, যেমন Apache HTTP সার্ভার ।

2. একটি HTML5 গেম তৈরি করুন৷

একটি HTML5 ক্যানভাস উপাদান এবং গেমপ্লে ট্রিগার করার জন্য একটি বোতাম তৈরি করতে 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>

"প্লে" বোতামে ক্লিক করার সময় একটি কয়েন ফ্লিপ গেম খেলতে 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. বিজ্ঞাপন প্লেসমেন্ট API আমদানি করুন৷

এরপর, game.js এর ট্যাগের আগে index.html এ একটি স্ক্রিপ্ট ট্যাগ সন্নিবেশ করে আপনার গেমে অ্যাড প্লেসমেন্ট API যোগ করুন।

স্ক্রিপ্ট ট্যাগ অনেক প্যারামিটার নিতে পারে। আমরা AdSense সম্পত্তি কোড নির্দিষ্ট করতে এবং টেস্টিং মোড সক্ষম করতে নিম্নলিখিত প্যারামিটার ব্যবহার করব:

data-ad-client= <AdSense property code> আপনার AdSense সম্পত্তি কোড। অ্যাপের মধ্যে চলা গেমগুলির জন্যও এটি সবসময় প্রয়োজন।
data-adbreak-test="on" পরীক্ষার মোড সক্ষম করে। গেমগুলি খেলোয়াড়দের কাছে পরিবেশন করার পরে এটিকে সরিয়ে দিন।

AdSense কোড সেটআপ করুন এবং পরীক্ষার মোড চালু করুন

অ্যাড প্লেসমেন্ট API কার্যকারিতা অ্যাডসেন্স কোডে অন্তর্ভুক্ত করা হয়েছে৷ এটি চালু করতে, আপনাকে প্রথমে 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 পৃষ্ঠায় থাকে, তাহলে 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 কাস্টম ট্যাবে চলতে পারে। অ্যাড প্লেসমেন্ট API আপনার গেমটি কোন পরিবেশে চলছে তা সনাক্ত করতে পারে এবং বিজ্ঞাপনের অনুরোধগুলি যথাযথভাবে পরিচালনা করতে পারে। যদি আপনার গেমটি একটি নিয়মিত ওয়েব ব্রাউজারে চলছে তাহলে বিজ্ঞাপনের অনুরোধগুলিকে সাধারণ AdSense অনুরোধের মতো বিবেচনা করা হয়। অ্যাড প্লেসমেন্ট এপিআই যদি একটি অ্যাপ-মধ্যস্থ পরিবেশ শনাক্ত করে তাহলে এটি Google মোবাইল বিজ্ঞাপন SDK-এর সাথে যোগাযোগ করে, যদি এটি উপস্থিত থাকে, AdMob বিজ্ঞাপনের অনুরোধ এবং দেখানোর জন্য।

এই ক্ষমতাটি Google মোবাইল বিজ্ঞাপন SDK-এর সাথে লিঙ্ক করা Android অ্যাপগুলিতে সমর্থিত। এটি সক্ষম করার জন্য আপনাকে WebView নিবন্ধন করতে হবে যা Google মোবাইল বিজ্ঞাপন SDK এর সাথে আপনার গেমটি দেখাবে এবং তারপর AdMob বিজ্ঞাপন ইউনিটগুলি কনফিগার করবে এবং অ্যাডসেন্স ট্যাগে অতিরিক্ত প্যারামিটার হিসাবে পাস করবে৷ যখন আপনার গেমটি একটি উপযুক্ত অ্যাপের মধ্যে চালানো হয়, তখন বিজ্ঞাপন প্লেসমেন্ট 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 থেকে বিজ্ঞাপন দেখাতে হবে এবং AdMob অনুরোধগুলিকে সমর্থন করে না এমন পরিবেশে যেখানে গেমটি খেলা হচ্ছে সেক্ষেত্রে AdSense-এ ফলব্যাক করা উচিত নয় (যেমন নন-অ্যাপ পরিবেশ বা Google মোবাইল বিজ্ঞাপন SDK কনফিগার করা ছাড়া অ্যাপ)।

গুরুত্বপূর্ণ : আপনি যখন আপনার গেমটি একটি অ্যাপের মধ্যে এম্বেড করার জন্য ডিজাইন করেন এবং আপনি অ্যাপটির মালিক হন, বা অ্যাপের মালিকের সাথে একটি রাজস্ব ভাগ চুক্তিতে প্রবেশ করেন, তখন এটি করার একমাত্র উপায় হল এই AdMob সমর্থন ব্যবহার করা।

প্রথমে, WebView নিবন্ধন করুন যা Google Mobile Ads SDK-এর সাথে আপনার গেমটি দেখাবে:

MainActivity.java (অ্যাপ)

ডিফল্ট WebView সেটিংস বিজ্ঞাপনের জন্য অপ্টিমাইজ করা হয় না। এর জন্য আপনার WebView কনফিগার করতে WebSettings API ব্যবহার করুন:

জাভাস্ক্রিপ্ট
স্থানীয় স্টোরেজ অ্যাক্সেস
স্বয়ংক্রিয় ভিডিও প্লে

জাভা

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);
  }
}

কোটলিন

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() কলটি Ad Placement 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() কল একটি বিজ্ঞাপন প্লেসমেন্টকে সংজ্ঞায়িত করে এবং প্লেসমেন্ট কনফিগার নামক বস্তুটি নেয় যা আপনার গেমের এই সময়ে একটি বিজ্ঞাপন দেখানোর জন্য প্রয়োজনীয় সবকিছু নির্দিষ্ট করে। বিভিন্ন ধরনের বিজ্ঞাপন সমর্থন করার জন্য আপনাকে প্লেসমেন্ট কনফিগারেশনের বিভিন্ন উপসেট শুরু করতে হবে।

adBreak() কল এমন একটি স্থান নির্ধারণ করে যেখানে একটি বিজ্ঞাপন দেখানো হতে পারে, বা অন্য কথায়, একটি বিজ্ঞাপন দেখানোর সুযোগ। একটি বিজ্ঞাপন আসলে দেখাবে কিনা তা নির্ভর করবে অনেক কিছুর উপর:

আপনি যে ধরনের বিজ্ঞাপন প্লেসমেন্ট ঘোষণা করেছেন।
যদি এই বিজ্ঞাপন বসানোর আগে উপযুক্ত ব্যবহারকারীর ইন্টারঅ্যাকশন হয়ে থাকে।
বর্তমান প্লেয়ারের জন্য উপযুক্ত বিজ্ঞাপন আছে কিনা, যে:
- তাদের জন্য প্রাসঙ্গিক।
- তাদের ডেটা গোপনীয়তা এবং সম্মতি সেটিংসের সাথে সামঞ্জস্যপূর্ণ।
ব্যবহারকারী সম্প্রতি দেখেছেন বিজ্ঞাপনের সংখ্যা.
এই গেমের জন্য আপনি যে কন্ট্রোল সেটিংস কনফিগার করেছেন তা হল:
- ট্যাগে ইঙ্গিত।
- AdSense-এ (দ্রষ্টব্য: AdSense-এ উপলব্ধ নিয়ন্ত্রণগুলি সময়ের সাথে বিকশিত হবে)

গেমটি রিস্টার্ট করার সময় একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখানোর জন্য কোড যোগ করুন: play() ফাংশনের ভিতরে adBreak() এ একটি কল করুন, যা একবার খেলার পরেই চলে।

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()` এ কল করুন৷

গেমটি শেষ হলে দেখানোর জন্য একটি পুরস্কৃত বিজ্ঞাপনের জন্য কোড যোগ করুন কিন্তু ব্যবহারকারী নতুন করে শুরু করার পরিবর্তে তাদের বিদ্যমান স্কোর পুনরুজ্জীবিত করতে চান। 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();

এখন, আপনার 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() কল করা এই উদাহরণের মতো হওয়া উচিত।

প্রোডাকশন অ্যাপের পরীক্ষা বন্ধ করুন

আপনার অ্যাপটি প্রকাশ করার আগে, index.html এ লাইন data-adbreak-test="on" অপসারণ করা বা মন্তব্য করা গুরুত্বপূর্ণ, কারণ এই কোডটি উৎপাদনে পরীক্ষা সেটিংস চালু করে।

পূর্বশর্ত

অ্যাপের নমুনা কোড

1. একটি ডেভেলপমেন্ট সার্ভার শুরু করুন

2. একটি HTML5 গেম তৈরি করুন৷

index.html

game.js

3. বিজ্ঞাপন প্লেসমেন্ট API আমদানি করুন৷

AdSense কোড সেটআপ করুন এবং পরীক্ষার মোড চালু করুন

index.html (ওয়েব)

আপনার গেম এম্বেড করা (ঐচ্ছিক)

মোবাইল অ্যাপ্লিকেশন সমর্থন

MainActivity.java (অ্যাপ)

জাভা

কোটলিন

index.html (অ্যাপ)

4. adConfig() এ একটি কল করুন

game.js

index.html

5. খেলা শেষ হলে adBreak() এ কল করুন

game.js

6. একটি পুরস্কৃত বিজ্ঞাপনের জন্য adBreak() এ কল করুন৷

game.js

index.html

প্রোডাকশন অ্যাপের পরীক্ষা বন্ধ করুন

5. খেলা শেষ হলে `adBreak()` এ কল করুন

6. একটি পুরস্কৃত বিজ্ঞাপনের জন্য `adBreak()` এ কল করুন৷