Halaman ini diterjemahkan oleh Cloud Translation API.

Contoh implementasi

Ad Placement API dirancang untuk mendukung developer AdSense dan AdMob yang menggunakan iklan interstisial dan reward di game HTML5 di web atau dalam aplikasi. Contoh ini menunjukkan cara mengintegrasikan Ad Placement API ke dalam game dan menggunakannya untuk menempatkan iklan interstisial.

Prasyarat

Sebelum memulai, Anda memerlukan hal berikut:

Buat dua file kosong di direktori yang sama:
- index.html
- game.js
Instal Python secara lokal, atau gunakan server web untuk menguji penerapan Anda

Kode contoh aplikasi

Penayang AdMob dapat mendownload kode aplikasi contoh untuk lebih memahami cara mengintegrasikan API ke dalam game aplikasi.

Download kode contoh aplikasi

1. Mulai server pengembangan

Karena Ads Placement API memuat dependensi melalui protokol yang sama dengan halaman tempat API dimuat, Anda harus menggunakan server web untuk menguji aplikasi. Anda dapat menggunakan server bawaan Python untuk membuat lingkungan pengembangan lokal.

Buka terminal.
Buka direktori yang berisi file index.html Anda, lalu jalankan:
```
python -m http.server 8000
```
Catatan: http.server hanya tersedia di Python 3.x.
Di browser web, buka localhost:8000

Anda juga dapat menggunakan server web lain, seperti Apache HTTP Server.

2. Membuat game HTML5

Ubah index.html untuk membuat elemen kanvas HTML5 dan tombol untuk memicu gameplay. Kemudian, tambahkan tag skrip yang diperlukan untuk memuat file 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>

Ubah game.js untuk memainkan game lempar koin saat tombol "Play" diklik.

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

Setelah menyelesaikan langkah ini, saat membuka index.html di browser (melalui server pengembangan), Anda akan dapat melihat kanvas game dan tombol "Play". Jika Anda mengklik Mainkan, game lempar koin akan dimulai.

3. Mengimpor Ad Placement API

Selanjutnya, tambahkan Ad Placement API ke game Anda dengan menyisipkan tag skrip di index.html, sebelum tag untuk game.js.

Tag skrip dapat menggunakan sejumlah parameter. Kita akan menggunakan parameter berikut untuk menentukan kode properti AdSense dan mengaktifkan mode pengujian:

data-ad-client=<AdSense property code> Kode properti AdSense Anda. Hal ini selalu diperlukan bahkan untuk game yang akan berjalan dalam aplikasi.
data-adbreak-test="on" Mengaktifkan mode pengujian. Hapus ini untuk game setelah ditayangkan kepada pemain.

Menyiapkan Kode AdSense dan mengaktifkan mode pengujian

Fungsi Ad Placement API disertakan dalam kode AdSense. Untuk mengaktifkannya, Anda harus menambahkan kode AdSense terlebih dahulu dan menyertakan cuplikan skrip kecil yang menginisialisasi dua fungsi utamanya: adBreak() dan adConfig().

index.html (web)

 [...]
    <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>

Menyematkan game Anda (opsional)

Jika Anda ingin menyematkan game di halaman lain dalam iFrame, dan tag adsbygoogle ada di halaman HTML game, pastikan untuk menambahkan allow='autoplay' ke elemen iframe. Ini adalah praktik terbaik, dan diperlukan agar iklan tertentu memenuhi syarat untuk game Anda.

<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>

Mendukung aplikasi seluler

Game H5 dapat berjalan di browser web biasa, WebView, atau Tab Kustom Chrome dalam aplikasi. Ad Placement API dapat mendeteksi lingkungan tempat game Anda berjalan dan mengarahkan permintaan iklan dengan tepat. Jika game Anda berjalan dalam browser web biasa, permintaan iklan akan diperlakukan seperti permintaan AdSense normal. Jika mendeteksi lingkungan dalam aplikasi, Ad Placement API akan berkomunikasi dengan Google Mobile Ads SDK, jika ada, untuk meminta dan menampilkan iklan AdMob.

Kemampuan ini didukung di aplikasi Android yang telah ditautkan dengan Google Mobile Ads SDK. Untuk mengaktifkannya, Anda harus mendaftarkan WebView yang akan menampilkan game Anda dengan Google Mobile Ads SDK, lalu mengonfigurasi unit iklan AdMob dan meneruskannya sebagai parameter tambahan ke tag AdSense. Saat game Anda dijalankan dalam aplikasi yang sesuai, Ad Placement API akan menggunakan unit iklan ini untuk menampilkan iklan.

Untuk mengaktifkan dukungan seluler, Anda harus menentukan parameter tag tambahan berikut:

data-admob-interstitial-slot=<AdMob slot ID> ID unit iklan interstisial AdMob yang telah Anda konfigurasi sebelumnya.
data-admob-rewarded-slot=<AdMob slot ID> ID unit iklan reward AdMob.

Kode properti AdSense Anda harus selalu diteruskan dengan parameter data-ad-client dan setidaknya salah satu dari data-admob-interstitial-slot atau data-admob-rewarded-slot harus ditentukan. Kedua parameter harus ditentukan jika game Anda menggunakan kedua format.

Secara opsional, Anda juga dapat menentukan parameter tag data-admob-ads-only=on untuk menunjukkan bahwa game Anda hanya boleh menampilkan iklan dari AdMob dan tidak melakukan penggantian ke AdSense jika game dimainkan di lingkungan yang tidak mendukung permintaan AdMob (misalnya, lingkungan non-aplikasi atau aplikasi tanpa Google Mobile Ads SDK yang dikonfigurasi).

Penting: Saat Anda mendesain game untuk disematkan di dalam sebuah aplikasi dan Anda adalah pemilik aplikasi tersebut, atau menyepakati perjanjian bagi hasil dengan pemilik aplikasi tersebut, satu-satunya cara untuk melakukannya dengan cara yang menghasilkan performa tinggi dan mematuhi kebijakan adalah menggunakan dukungan AdMob ini.

Pertama, daftarkan WebView yang akan menampilkan game Anda dengan Google Mobile Ads SDK:

MainActivity.java (aplikasi)

Setelan WebView default tidak dioptimalkan untuk iklan. Gunakan API WebSettings untuk mengonfigurasi WebView Anda untuk:

JavaScript
Akses ke penyimpanan lokal
Pemutaran video otomatis

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

Selanjutnya, teruskan unit iklan AdMob (satu untuk iklan interstisial dan satu untuk iklan reward) sebagai berikut:

index.html (aplikasi)

 [...]
    <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. Lakukan panggilan ke adConfig()

Panggilan adConfig() mengomunikasikan konfigurasi game saat ini ke Ad Placement API. Kemudian, API dapat menggunakan informasi ini untuk memfilter jenis iklan yang dimintanya agar sesuai untuk game (seperti iklan video yang memerlukan suara, jika suara diaktifkan).

Panggilan harus dilakukan ke adConfig() setiap kali konfigurasi ini berubah, seperti saat pengguna membisukan atau mengaktifkan suara game. Lakukan panggilan ke adConfig() di konstruktor game, lalu tambahkan tombol untuk membisukan dan mengaktifkan suara game yang melakukan panggilan adConfig() tambahan.

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();
  [...]

Sekarang, tambahkan tombol bisu ke file HTML Anda.

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. Lakukan panggilan ke `adBreak()` saat game berakhir

Panggilan adBreak() menentukan penempatan iklan dan mengambil objek yang disebut konfigurasi penempatan yang menentukan semua yang diperlukan untuk menampilkan iklan pada titik ini dalam game Anda. Untuk mendukung berbagai jenis iklan, Anda harus melakukan inisialisasi berbagai subkumpulan konfigurasi penempatan.

Panggilan adBreak() menentukan penempatan tempat iklan dapat ditampilkan, atau dengan kata lain, peluang untuk menampilkan iklan. Apakah iklan benar-benar ditampilkan atau tidak akan bergantung pada sejumlah hal:

Jenis penempatan iklan yang Anda nyatakan.
Jika ada interaksi pengguna yang sesuai sebelum penempatan iklan ini.
Apakah ada iklan yang sesuai untuk pemutar saat ini, yaitu:
- Relevan bagi mereka.
- Konsisten dengan setelan izin dan privasi data mereka.
Jumlah iklan yang baru-baru ini dilihat pengguna.
Setelan kontrol yang telah Anda konfigurasi untuk game ini sebagai:
- Petunjuk dalam tag.
- Di AdSense (Catatan: kontrol yang tersedia di AdSense akan berkembang seiring waktu)

Tambahkan kode untuk menampilkan iklan interstisial saat game dimulai ulang: lakukan panggilan ke adBreak() di dalam fungsi play(), yang hanya berjalan setelah game dimainkan hingga selesai satu kali.

adBreak() harus dipanggil sebagai bagian dari tindakan pengguna, seperti mengklik tombol "Putar", jika tidak, API tidak akan dapat meminta dan menampilkan iklan.

Buat fungsi yang akan dipanggil sebelum dan setelah jeda iklan, yang kemudian akan Anda gunakan dalam konfigurasi penempatan adBreak(). Penting untuk diperhatikan bahwa fungsi beforeAd dan afterAd hanya akan dipanggil jika iklan yang sesuai ditemukan.

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. Lakukan panggilan ke `adBreak()` untuk iklan reward

Tambahkan kode agar iklan reward ditampilkan saat game berakhir, tetapi pengguna ingin menghidupkan kembali skor yang ada, bukan memulai dari awal. Lakukan panggilan ke adBreak() di dalam fungsi lose(), dengan memeriksa apakah iklan reward tersedia. Jika ya, tunjukkan dialog yang menanyakan apakah pengguna ingin mendapatkan reward (yaitu kebangkitan dalam kasus ini) dan saat mereka setuju untuk menonton iklan, panggil showAdFn() yang sesuai. Anda dapat mengonfigurasi tindakan yang harus dilakukan jika pengguna menonton/melewati iklan reward menggunakan callback adViewed dan adDismissed.

adBreak() baru harus dipanggil untuk setiap peluang menampilkan iklan reward. Hal ini memastikan iklan dimuat ulang jika iklan sebelumnya sudah berakhir atau tidak tersedia.

showAdFn() harus dipanggil sebagai bagian dari tindakan langsung pengguna untuk menonton iklan, jika tidak, iklan mungkin tidak ditampilkan.

Buat fungsi yang akan dipanggil sebelum dan setelah jeda iklan, yang kemudian akan Anda gunakan dalam konfigurasi penempatan adBreak(). Penting untuk diperhatikan bahwa fungsi beforeReward, adViewed, adDismissed, beforeAd, dan afterAd hanya akan dipanggil jika iklan yang sesuai ditemukan.

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

Sekarang, tambahkan tombol lanjutkan ke file HTML Anda.

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>
[...]

Aplikasi lempar koin kini membuat penempatan iklan untuk menampilkan iklan.

Aplikasi Anda sendiri mungkin memiliki tempat tambahan yang sesuai untuk iklan selain saat game berakhir. Panggilan adBreak() di tempat tersebut akan serupa dengan contoh ini.

Menonaktifkan pengujian untuk aplikasi produksi

Sebelum merilis aplikasi, Anda harus menghapus atau mengomentari baris data-adbreak-test="on" di index.html, karena kode ini mengaktifkan setelan pengujian di produksi.

Contoh implementasi Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Prasyarat

Kode contoh aplikasi

1. Mulai server pengembangan

2. Membuat game HTML5

index.html

game.js

3. Mengimpor Ad Placement API

Menyiapkan Kode AdSense dan mengaktifkan mode pengujian

index.html (web)

Menyematkan game Anda (opsional)

Mendukung aplikasi seluler

MainActivity.java (aplikasi)

Java

Kotlin

index.html (aplikasi)

4. Lakukan panggilan ke adConfig()

game.js

index.html

5. Lakukan panggilan ke adBreak() saat game berakhir

game.js

6. Lakukan panggilan ke adBreak() untuk iklan reward

game.js

index.html

Menonaktifkan pengujian untuk aplikasi produksi

Contoh implementasi

5. Lakukan panggilan ke `adBreak()` saat game berakhir

6. Lakukan panggilan ke `adBreak()` untuk iklan reward