Trang này được dịch bởi Cloud Translation API.

Ví dụ về cách triển khai

Ad Placement API được thiết kế để hỗ trợ các nhà phát triển AdSense và AdMob sử dụng quảng cáo xen kẽ và quảng cáo có tặng thưởng trong các trò chơi HTML5 trên web hoặc trong ứng dụng. Ví dụ này minh hoạ cách tích hợp API Vị trí đặt quảng cáo vào một trò chơi và sử dụng API này để đặt quảng cáo xen kẽ.

Điều kiện tiên quyết

Trước khi bắt đầu, bạn sẽ cần có những thông tin sau:

Tạo hai tệp trống trong cùng một thư mục:
- index.html
- game.js
Cài đặt Python cục bộ hoặc sử dụng máy chủ web để kiểm thử việc triển khai

Mã mẫu ứng dụng

Nhà xuất bản AdMob có thể tải mã ứng dụng mẫu xuống để hiểu rõ hơn về cách tích hợp API vào một trò chơi ứng dụng.

Tải mã mẫu ứng dụng xuống

1. Khởi động máy chủ phát triển

Vì Ads Placement API tải các phần phụ thuộc thông qua cùng một giao thức với trang mà API này được tải trên đó, nên bạn cần sử dụng một máy chủ web để kiểm thử ứng dụng của mình. Bạn có thể sử dụng máy chủ tích hợp của Python để tạo một môi trường phát triển cục bộ.

Mở cửa sổ dòng lệnh.
Chuyển đến thư mục chứa tệp index.html, sau đó chạy:
```
python -m http.server 8000
```
Lưu ý: http.server chỉ có trong Python 3.x.
Trong trình duyệt web, hãy truy cập vào localhost:8000

Bạn cũng có thể sử dụng bất kỳ máy chủ web nào khác, chẳng hạn như Máy chủ HTTP Apache.

2. Tạo trò chơi HTML5

Sửa đổi index.html để tạo một phần tử canvas HTML5 và một nút để kích hoạt lối chơi. Sau đó, hãy thêm thẻ tập lệnh cần thiết để tải tệp 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>

Sửa đổi game.js để chơi trò chơi tung đồng xu khi người dùng nhấp vào nút "Chơi".

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

Sau khi hoàn tất bước này, khi mở index.html trong trình duyệt (thông qua máy chủ phát triển), bạn sẽ thấy canvas trò chơi và nút "Chơi". Nếu bạn nhấp vào nút Phát, trò chơi tung đồng xu sẽ bắt đầu.

3. Nhập API Vị trí đặt quảng cáo

Tiếp theo, hãy thêm API Vị trí đặt quảng cáo vào trò chơi bằng cách chèn một thẻ tập lệnh vào index.html, trước thẻ cho game.js.

Thẻ tập lệnh có thể nhận một số tham số. Chúng ta sẽ sử dụng các thông số sau để chỉ định mã tài sản AdSense và bật chế độ thử nghiệm:

data-ad-client=<AdSense property code> Mã tài sản AdSense của bạn. Bạn luôn phải làm việc này, ngay cả đối với những trò chơi sẽ chạy trong ứng dụng.
data-adbreak-test="on" Bật chế độ thử nghiệm. Xoá thông tin này đối với các trò chơi sau khi trò chơi được cung cấp cho người chơi.

Thiết lập mã AdSense và bật chế độ kiểm thử

Chức năng Ad Placement API có trong mã AdSense. Để bật tính năng này, trước tiên, bạn phải thêm mã AdSense và thêm một đoạn mã nhỏ để khởi chạy 2 hàm chính của tính năng này: adBreak() và 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>

Nhúng trò chơi (không bắt buộc)

Nếu bạn muốn nhúng một trò chơi vào các trang khác trong một iFrame và thẻ adsbygoogle nằm trong trang HTML của trò chơi, hãy nhớ thêm allow='autoplay' vào phần tử iframe. Đây là một phương pháp hay nhất và cần thiết để một số quảng cáo đủ điều kiện xuất hiện trong trò chơi của bạn.

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

Hỗ trợ ứng dụng di động

Trò chơi H5 có thể chạy trong một trình duyệt web thông thường, WebView hoặc một Thẻ tuỳ chỉnh của Chrome trong một ứng dụng. Ad Placement API có thể phát hiện môi trường mà trò chơi của bạn đang chạy và chuyển các yêu cầu quảng cáo một cách thích hợp. Nếu trò chơi của bạn đang chạy trong một trình duyệt web thông thường, thì các yêu cầu quảng cáo sẽ được xử lý như các yêu cầu AdSense thông thường. Nếu Ad Placement API phát hiện thấy một môi trường trong ứng dụng, thì API này sẽ giao tiếp với SDK Quảng cáo của Google trên thiết bị di động (nếu có) để yêu cầu và hiển thị quảng cáo AdMob.

Tính năng này được hỗ trợ trên các ứng dụng Android đã được liên kết với SDK Quảng cáo của Google trên thiết bị di động. Để bật tính năng này, bạn cần đăng ký WebView sẽ hiển thị trò chơi của bạn bằng SDK Quảng cáo của Google trên thiết bị di động, sau đó định cấu hình các đơn vị quảng cáo AdMob và truyền các đơn vị quảng cáo đó dưới dạng các thông số bổ sung cho thẻ AdSense. Khi trò chơi của bạn chạy trong một ứng dụng phù hợp, Ad Placement API sẽ sử dụng các đơn vị quảng cáo này để hiển thị quảng cáo.

Để bật tính năng hỗ trợ thiết bị di động, bạn phải chỉ định các thông số thẻ bổ sung sau:

data-admob-interstitial-slot=<AdMob slot ID> Mã đơn vị quảng cáo xen kẽ AdMob mà bạn đã định cấu hình trước đó.
data-admob-rewarded-slot=<AdMob slot ID> Mã đơn vị quảng cáo có tặng thưởng của AdMob.

Bạn phải luôn truyền mã tài sản AdSense bằng tham số data-ad-client và phải chỉ định ít nhất một trong các tham số data-admob-interstitial-slot hoặc data-admob-rewarded-slot. Bạn nên chỉ định cả hai tham số nếu trò chơi của bạn sử dụng cả hai định dạng.

Bạn cũng có thể chỉ định tham số thẻ data-admob-ads-only=on (không bắt buộc) để cho biết rằng trò chơi của bạn chỉ nên hiển thị quảng cáo từ AdMob và không chuyển về AdSense trong trường hợp trò chơi đang được phát trong một môi trường không hỗ trợ các yêu cầu AdMob (ví dụ: môi trường không phải ứng dụng hoặc ứng dụng không có SDK Quảng cáo trên thiết bị di động của Google được định cấu hình).

Lưu ý quan trọng: Khi bạn thiết kế trò chơi được nhúng trong một ứng dụng và bạn sở hữu ứng dụng đó hoặc ký kết thoả thuận chia sẻ doanh thu với chủ sở hữu ứng dụng đó, thì cách duy nhất để làm việc này theo cách hiệu quả và tuân thủ chính sách là sử dụng giải pháp hỗ trợ này của AdMob.

Trước tiên, hãy đăng ký WebView sẽ hiển thị trò chơi của bạn bằng SDK Quảng cáo trên thiết bị di động của Google:

MainActivity.java (ứng dụng)

Chế độ cài đặt WebView mặc định không được tối ưu hoá cho quảng cáo. Dùng API WebSettings để định cấu hình WebView cho:

JavaScript
Quyền truy cập vào bộ nhớ cục bộ
Tự động phát video

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

Tiếp theo, hãy truyền các đơn vị quảng cáo AdMob (một cho quảng cáo xen kẽ và một cho quảng cáo có tặng thưởng) như sau:

index.html (ứng dụng)

 [...]
    <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. Gọi adConfig()

Lệnh gọi adConfig() truyền đạt cấu hình hiện tại của trò chơi đến AdPlacement API. Sau đó, API có thể sử dụng thông tin này để lọc các loại quảng cáo mà API yêu cầu sao cho phù hợp với trò chơi (chẳng hạn như quảng cáo dạng video yêu cầu có âm thanh, nếu âm thanh được bật).

Bạn nên gọi đến adConfig() bất cứ khi nào cấu hình này thay đổi, chẳng hạn như khi người dùng tắt hoặc bật tiếng trò chơi. Gọi adConfig() trong hàm khởi tạo của trò chơi, sau đó thêm một nút để tắt và bật tiếng trò chơi, nút này sẽ thực hiện một lệnh gọi adConfig() khác.

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

Bây giờ, hãy thêm nút tắt tiếng vào tệp 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. Gọi `adBreak()` khi trò chơi kết thúc

Lệnh gọi adBreak() xác định một vị trí đặt quảng cáo và lấy đối tượng có tên là cấu hình vị trí, trong đó chỉ định mọi thứ cần thiết để hiển thị một quảng cáo tại thời điểm này trong trò chơi của bạn. Để hỗ trợ nhiều loại quảng cáo, bạn sẽ phải khởi chạy các tập hợp con khác nhau của cấu hình vị trí.

Lệnh gọi adBreak() xác định một vị trí mà quảng cáo có thể xuất hiện, hay nói cách khác, một cơ hội để hiển thị quảng cáo. Việc quảng cáo có thực sự hiển thị hay không sẽ phụ thuộc vào một số yếu tố:

Loại vị trí đặt quảng cáo mà bạn đã khai báo.
Nếu đã có những lượt tương tác phù hợp của người dùng trước khi vị trí đặt quảng cáo này xuất hiện.
Liệu có quảng cáo phù hợp cho trình phát hiện tại hay không, cụ thể là:
- Phù hợp với họ.
- Phù hợp với chế độ cài đặt về quyền riêng tư đối với dữ liệu và sự đồng ý của họ.
Số lượng quảng cáo mà người dùng đã xem gần đây.
Các chế độ kiểm soát mà bạn đã định cấu hình cho trò chơi này là:
- Gợi ý trong thẻ.
- Trên AdSense (Lưu ý: các chế độ kiểm soát có trong AdSense sẽ thay đổi theo thời gian)

Thêm mã để quảng cáo xen kẽ xuất hiện khi trò chơi khởi động lại: gọi đến adBreak() trong hàm play(). Hàm này chỉ chạy sau khi trò chơi đã được chơi một lần.

adBreak() phải được gọi trong một thao tác của người dùng, chẳng hạn như nhấp vào nút "Phát", nếu không API sẽ không thể yêu cầu và hiển thị quảng cáo.

Tạo các hàm sẽ được gọi trước và sau khoảng thời gian quảng cáo, sau đó bạn sẽ sử dụng các hàm này trong cấu hình vị trí adBreak(). Điều quan trọng cần lưu ý là các hàm beforeAd và afterAd sẽ chỉ được gọi nếu tìm thấy một quảng cáo phù hợp.

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. Gọi đến `adBreak()` để xem quảng cáo có tặng thưởng

Thêm mã để hiển thị quảng cáo có tặng thưởng khi trò chơi kết thúc nhưng người dùng muốn khôi phục điểm số hiện có thay vì bắt đầu lại từ đầu. Gọi adBreak() bên trong hàm lose(), kiểm tra xem quảng cáo có tặng thưởng có dùng được hay không. Nếu có, hãy cho người dùng thấy một lời nhắc hỏi xem họ có muốn nhận phần thưởng (tức là hồi sinh trong trường hợp này) hay không và khi họ đồng ý xem quảng cáo, hãy gọi showAdFn() tương ứng. Bạn có thể định cấu hình những việc cần làm nếu người dùng xem/bỏ qua quảng cáo có tặng thưởng bằng cách sử dụng các lệnh gọi lại adViewed và adDismissed.

Bạn nên gọi một adBreak() mới cho mọi cơ hội hiển thị quảng cáo có tặng thưởng. Điều này đảm bảo quảng cáo được làm mới nếu quảng cáo trước đó hết hạn hoặc không có sẵn.

showAdFn() phải được gọi trong quá trình người dùng thực hiện một thao tác trực tiếp để xem quảng cáo, nếu không quảng cáo có thể không hiển thị.

Tạo các hàm sẽ được gọi trước và sau khoảng thời gian quảng cáo, sau đó bạn sẽ sử dụng các hàm này trong cấu hình vị trí adBreak(). Điều quan trọng cần lưu ý là các hàm beforeReward, adViewed, adDismissed, beforeAd và afterAd sẽ chỉ được gọi nếu tìm thấy một quảng cáo phù hợp.

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

Bây giờ, hãy thêm nút tiếp tục vào tệp HTML của bạn.

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

Giờ đây, ứng dụng tung đồng xu đang tạo vị trí đặt quảng cáo để hiển thị quảng cáo.

Ứng dụng của riêng bạn có thể có những vị trí phù hợp khác để đặt quảng cáo ngoài thời điểm trò chơi kết thúc. Việc gọi adBreak() ở những nơi đó phải tương tự như ví dụ này.

Tắt thử nghiệm cho ứng dụng phát hành công khai

Trước khi phát hành ứng dụng, bạn cần xoá hoặc thêm chú thích vào dòng data-adbreak-test="on" trong index.html, vì mã này sẽ bật chế độ cài đặt thử nghiệm trong bản phát hành công khai.

Ví dụ về cách triển khai Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Điều kiện tiên quyết

Mã mẫu ứng dụng

1. Khởi động máy chủ phát triển

2. Tạo trò chơi HTML5

index.html

game.js

3. Nhập API Vị trí đặt quảng cáo

Thiết lập mã AdSense và bật chế độ kiểm thử

index.html (web)

Nhúng trò chơi (không bắt buộc)

Hỗ trợ ứng dụng di động

MainActivity.java (ứng dụng)

Java

Kotlin

index.html (ứng dụng)

4. Gọi adConfig()

game.js

index.html

5. Gọi adBreak() khi trò chơi kết thúc

game.js

6. Gọi đến adBreak() để xem quảng cáo có tặng thưởng

game.js

index.html

Tắt thử nghiệm cho ứng dụng phát hành công khai

Ví dụ về cách triển khai

5. Gọi `adBreak()` khi trò chơi kết thúc

6. Gọi đến `adBreak()` để xem quảng cáo có tặng thưởng