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

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

পূর্বশর্ত

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

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

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

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

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

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

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

  1. টার্মিনাল খুলুন।

  2. যে ডিরেক্টরিতে আপনার index.html ফাইল রয়েছে সেখানে যান, তারপর চালান:

    python -m http.server 8000

  3. একটি ওয়েব ব্রাউজারে, 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>
    <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>
    <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 অনুরোধের মতো বিবেচনা করা হয়। যদি অ্যাড প্লেসমেন্ট এপিআই একটি অ্যাপ-মধ্যস্থ পরিবেশ শনাক্ত করে, তাহলে এটি GMA SDK-এর সাথে যোগাযোগ করে, যদি এটি উপস্থিত থাকে, AdMob বিজ্ঞাপনের অনুরোধ এবং দেখানোর জন্য।

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

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

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

MainActivity.java (অ্যাপ)

...
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    webView = findViewById(R.id.webview_minigame);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);

    h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
    webView.setWebViewClient(h5AdsWebViewClient);

    h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);

এরপরে, AdMob বিজ্ঞাপন ইউনিট (একটি ইন্টারস্টিশিয়ালের জন্য এবং একটি পুরস্কৃত বিজ্ঞাপনের জন্য) নিম্নরূপ পাস করুন:

index.html (অ্যাপ)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <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>
    <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();

কয়েন ফ্লিপ অ্যাপটি এখন বিজ্ঞাপন দেখানোর জন্য বিজ্ঞাপন প্লেসমেন্ট তৈরি করছে।

আপনার নিজের অ্যাপে গেমটি শেষ না হওয়া ছাড়া বিজ্ঞাপনের জন্য অতিরিক্ত, উপযুক্ত জায়গা থাকতে পারে। সেই জায়গাগুলিতে adBreak() কল করা এই উদাহরণের মতো হওয়া উচিত।

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

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