หน้านี้ได้รับการแปลโดย Cloud Translation API

ตัวอย่างการติดตั้งใช้งาน

Ad Placement API ออกแบบมาเพื่อรองรับนักพัฒนาแอป AdSense และ AdMob ที่ใช้ โฆษณาคั่นหน้าและโฆษณาที่มีการให้รางวัลในเกม HTML5 บนเว็บหรือภายในแอป ตัวอย่างนี้ แสดงวิธีผสานรวม API ตำแหน่งโฆษณาเข้ากับเกมและใช้ เพื่อวางโฆษณาคั่นระหว่างหน้า

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้

สร้างไฟล์ว่าง 2 ไฟล์ในไดเรกทอรีเดียวกัน
- index.html
- game.js
ติดตั้ง Python ในเครื่อง หรือใช้เว็บเซิร์ฟเวอร์เพื่อทดสอบการใช้งาน

โค้ดตัวอย่างของแอป

ผู้เผยแพร่โฆษณา AdMob สามารถดาวน์โหลดโค้ดแอปตัวอย่างเพื่อทำความเข้าใจวิธีผสานรวม API เข้ากับเกมแอปได้ดียิ่งขึ้น

ดาวน์โหลดโค้ดตัวอย่างของแอป

1. เริ่มเซิร์ฟเวอร์การพัฒนา

เนื่องจาก Ads Placement API จะโหลดการอ้างอิงผ่านโปรโตคอลเดียวกับ หน้าเว็บที่โหลด API นี้ คุณจึงต้องใช้เว็บเซิร์ฟเวอร์เพื่อทดสอบแอป คุณสามารถใช้เซิร์ฟเวอร์ในตัวของ Python เพื่อสร้างสภาพแวดล้อมการพัฒนาในเครื่องได้

เปิดเทอร์มินัล
ไปที่ไดเรกทอรีที่มีไฟล์ index.html แล้วเรียกใช้คำสั่งต่อไปนี้
```
python -m http.server 8000
```
หมายเหตุ: http.server พร้อมให้บริการใน Python 3.x เท่านั้น
ในเว็บเบราว์เซอร์ ให้ไปที่ localhost:8000

นอกจากนี้ คุณยังใช้เว็บเซิร์ฟเวอร์อื่นๆ เช่น Apache HTTP Server ได้ด้วย

2. สร้างเกม HTML5

แก้ไข index.html เพื่อสร้างองค์ประกอบ Canvas ของ HTML5 และปุ่มเพื่อทริกเกอร์ การเล่นเกม จากนั้นเพิ่มแท็กสคริปต์ที่จำเป็นเพื่อโหลดไฟล์ 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 ในเบราว์เซอร์ (ผ่านเซิร์ฟเวอร์สำหรับพัฒนา) คุณควรจะเห็น Canvas ของเกมและปุ่ม "เล่น" หากคุณคลิกเล่น เกมเสี่ยงทายหัวก้อยควรจะเริ่มขึ้น

3. นําเข้า API ตำแหน่งโฆษณา

จากนั้นเพิ่ม Ad Placement API ลงในเกมโดยการแทรกแท็กสคริปต์ใน index.html ก่อนแท็กสำหรับ game.js

แท็กสคริปต์ใช้พารามิเตอร์ได้หลายรายการ เราจะใช้พารามิเตอร์ต่อไปนี้เพื่อระบุโค้ดพร็อพเพอร์ตี้ AdSense และเพื่อ เปิดใช้โหมดการทดสอบ

data-ad-client=<AdSense property code> รหัสพร็อพเพอร์ตี้ AdSense ของคุณ ต้องระบุเสมอแม้แต่สำหรับเกมที่จะ ทำงานภายในแอป
data-adbreak-test="on" เปิดใช้โหมดทดสอบ นำออกสำหรับเกมเมื่อ แสดงต่อผู้เล่นแล้ว

ตั้งค่าโค้ด AdSense และเปิดโหมดการทดสอบ

ฟังก์ชันการทำงานของ API ตำแหน่งโฆษณาจะรวมอยู่ในโค้ด AdSense หากต้องการเปิดใช้ คุณต้องเพิ่มโค้ด AdSense ก่อน และใส่ข้อมูลโค้ดสคริปต์ขนาดเล็กที่เริ่มต้นฟังก์ชันหลัก 2 อย่าง ได้แก่ 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 ของเกม ให้เพิ่ม allow='autoplay' ลงในองค์ประกอบ iframe นี่คือแนวทางปฏิบัติแนะนำ และจำเป็นสำหรับโฆษณาบางรายการเพื่อให้มีสิทธิ์แสดงในเกม

<head>
  <!-- The adsbygoogle tag is not here -->
</head>
<body>
  <iframe src="https://www.my-game.com" title="My game" allow="autoplay">
    <!-- The game is loaded here and contains the adsbygoogle tag -->
  </iframe>
</body>

รองรับแอปบนอุปกรณ์เคลื่อนที่

เกม H5 สามารถทำงานในเว็บเบราว์เซอร์ปกติ WebView หรือแท็บที่กำหนดเองของ Chrome ภายในแอปได้ Ad Placement API สามารถตรวจหาว่าเกมของคุณ ทำงานในสภาพแวดล้อมใด และส่งคำขอโฆษณาได้อย่างเหมาะสม หากเกมของคุณ ทํางานภายในเว็บเบราว์เซอร์ปกติ ระบบจะถือว่าคําขอโฆษณาเป็นคําขอ AdSense ปกติ หาก Ad Placement API ตรวจพบสภาพแวดล้อมในแอป ระบบจะสื่อสารกับ Google Mobile Ads SDK (หากมี) เพื่อขอและแสดงโฆษณา AdMob

ความสามารถนี้รองรับในแอป Android ที่ลิงก์กับ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google หากต้องการเปิดใช้ คุณต้อง ลงทะเบียน WebView ที่จะแสดงเกมของคุณด้วย SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google แล้วกำหนดค่าหน่วยโฆษณา AdMob และส่งเป็นพารามิเตอร์เพิ่มเติมไปยังแท็ก AdSense เมื่อเกมของคุณทำงานภายในแอปที่เหมาะสม Ad Placement API จะใช้หน่วยโฆษณาเหล่านี้ เพื่อแสดงโฆษณา

หากต้องการเปิดใช้การรองรับอุปกรณ์เคลื่อนที่ คุณต้องระบุพารามิเตอร์แท็กเพิ่มเติมต่อไปนี้

data-admob-interstitial-slot=<AdMob slot ID> รหัสหน่วยโฆษณาคั่นระหว่างหน้า AdMob ที่คุณกำหนดค่าไว้ก่อนหน้านี้
data-admob-rewarded-slot=<AdMob slot ID> รหัสหน่วยโฆษณาที่มีการให้รางวัลของ AdMob

คุณควรส่งรหัสพร็อพเพอร์ตี้ AdSense พร้อมพารามิเตอร์ data-ad-client เสมอ และต้องระบุ data-admob-interstitial-slot หรือ data-admob-rewarded-slot อย่างน้อย 1 รายการ คุณควรระบุพารามิเตอร์ทั้ง 2 รายการหากเกมใช้ทั้ง 2 รูปแบบ

นอกจากนี้ คุณยังระบุพารามิเตอร์แท็ก data-admob-ads-only=on เพื่อ ระบุว่าเกมควรแสดงโฆษณาจาก AdMob เท่านั้น และไม่ควรใช้ AdSense เป็นโฆษณาสำรอง ในกรณีที่เล่นเกมในสภาพแวดล้อมที่ไม่รองรับคำขอ AdMob (เช่น สภาพแวดล้อมที่ไม่ใช่แอปหรือแอปที่ไม่ได้ กำหนดค่า SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google)

สำคัญ: เมื่อออกแบบเกมให้ฝังอยู่ในแอปและคุณเป็นเจ้าของแอป หรือเข้าร่วมข้อตกลงส่วนแบ่งรายได้กับเจ้าของแอป การใช้การสนับสนุนของ AdMob นี้เป็นวิธีเดียวที่จะทำเช่นนี้ได้โดยที่เกมยังมีประสิทธิภาพสูงและสอดคล้องกับนโยบาย

ก่อนอื่น ให้ลงทะเบียน WebView ที่จะแสดงเกมของคุณด้วย SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google โดยทำดังนี้

MainActivity.java (แอป)

การตั้งค่า WebView เริ่มต้นไม่ได้เพิ่มประสิทธิภาพสําหรับโฆษณา ใช้ API ของ WebSettings เพื่อกำหนดค่า WebView สำหรับสิ่งต่อไปนี้

JavaScript
สิทธิ์เข้าถึงพื้นที่เก็บข้อมูลในเครื่อง
การเล่นวิดีโออัตโนมัติ

Java

import android.webkit.CookieManager;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
  private WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.webview);

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
    // Let the web view use JavaScript.
    webView.getSettings().setJavaScriptEnabled(true);
    // Let the web view access local storage.
    webView.getSettings().setDomStorageEnabled(true);
    // Let HTML videos play automatically.
    webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

    // Set the H5AdsWebViewClient.
    h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
    webView.setWebViewClient(h5AdsWebViewClient);
    h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);

    // Register the web view.
    MobileAds.registerWebView(webView);
  }
}

Kotlin

import android.webkit.CookieManager
import android.webkit.WebView

class MainActivity : AppCompatActivity() {
  lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    webView = findViewById(R.id.webview)

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true)
    // Let the web view use JavaScript.
    webView.settings.javaScriptEnabled = true
    // Let the web view access local storage.
    webView.settings.domStorageEnabled = true
    // Let HTML videos play automatically.
    webView.settings.mediaPlaybackRequiresUserGesture = false

    // Set the H5AdsWebViewClient.
    val h5AdsWebViewClient = H5AdsWebViewClient(this, webView)
    webView.webViewClient = h5AdsWebViewClient
    h5AdsWebViewClient.delegateWebViewClient = pubWebViewClient

    // Register the web view.
    MobileAds.registerWebView(webView)
  }
}

จากนั้นส่งหน่วยโฆษณา AdMob (1 หน่วยสำหรับโฆษณาคั่นระหว่างหน้าและ 1 หน่วยสำหรับโฆษณาที่มีการให้รางวัล) ดังนี้

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 จากนั้น 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() การเรียกจะกำหนดตําแหน่งที่โฆษณาอาจแสดง หรือกล่าวอีกนัยหนึ่งคือโอกาสในการแสดงโฆษณา การที่โฆษณาจะได้แสดงหรือไม่นั้นขึ้นอยู่กับ หลายสิ่งต่อไปนี้

ประเภทตําแหน่งโฆษณาที่คุณประกาศ
หากมีการโต้ตอบของผู้ใช้ที่เหมาะสมก่อนการวางโฆษณานี้
มีโฆษณาที่เหมาะสมสำหรับเพลเยอร์ปัจจุบันหรือไม่ โดยมีเงื่อนไขดังนี้
- มีความเกี่ยวข้องกับผู้ใช้
- สอดคล้องกับการตั้งค่าความเป็นส่วนตัวและความยินยอมของข้อมูล
จำนวนโฆษณาที่ผู้ใช้เห็นเมื่อเร็วๆ นี้
การตั้งค่าการควบคุมที่คุณกำหนดค่าไว้สำหรับเกมนี้มี 2 แบบ ได้แก่
- คำแนะนำในแท็ก
- ใน AdSense (หมายเหตุ: การควบคุมที่มีใน AdSense จะมีการเปลี่ยนแปลงไปเรื่อยๆ)

เพิ่มโค้ดสำหรับโฆษณาคั่นระหว่างหน้าที่จะแสดงเมื่อเกมรีสตาร์ท: เรียกใช้ adBreak() ภายในฟังก์ชัน play() ซึ่งจะทํางานหลังจากเล่นเกมจนจบแล้วเท่านั้น

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()` สำหรับโฆษณาที่มีการให้รางวัล

เพิ่มโค้ดเพื่อให้โฆษณาที่มีการให้รางวัลแสดงเมื่อเกมจบ แต่ผู้ใช้ต้องการ ฟื้นคะแนนที่มีอยู่แทนที่จะเริ่มใหม่ เรียกใช้ adBreak() ภายในฟังก์ชัน lose() เพื่อตรวจสอบว่ามีโฆษณาที่มีการให้รางวัล หรือไม่ หากเป็นเช่นนั้น ให้แสดงข้อความแจ้งแก่ผู้ใช้เพื่อถามว่าต้องการรับรางวัลหรือไม่ (เช่น การฟื้นคืนชีพในกรณีนี้) และเมื่อผู้ใช้ตกลงที่จะดูโฆษณา ให้เรียกใช้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() ในสถานที่ดังกล่าวควรมีลักษณะคล้ายกับ ตัวอย่างนี้

ปิดการทดสอบสำหรับแอปเวอร์ชันที่ใช้งานจริง

ก่อนเผยแพร่แอป คุณควรนำบรรทัด data-adbreak-test="on" ใน index.html ออกหรือใส่เครื่องหมายความคิดเห็น เนื่องจากโค้ดนี้จะเปิดการตั้งค่าการทดสอบใน เวอร์ชันที่ใช้งานจริง

ข้อกำหนดเบื้องต้น

โค้ดตัวอย่างของแอป

1. เริ่มเซิร์ฟเวอร์การพัฒนา

2. สร้างเกม HTML5

index.html

game.js

3. นําเข้า API ตำแหน่งโฆษณา

ตั้งค่าโค้ด AdSense และเปิดโหมดการทดสอบ

index.html (เว็บ)

การฝังเกม (ไม่บังคับ)

รองรับแอปบนอุปกรณ์เคลื่อนที่

MainActivity.java (แอป)

Java

Kotlin

index.html (แอป)

4. โทรหา adConfig()

game.js

index.html

5. โทรหา adBreak() เมื่อการแข่งขันสิ้นสุดลง

game.js

6. เรียกใช้ adBreak() สำหรับโฆษณาที่มีการให้รางวัล

game.js

index.html

ปิดการทดสอบสำหรับแอปเวอร์ชันที่ใช้งานจริง

5. โทรหา `adBreak()` เมื่อการแข่งขันสิ้นสุดลง

6. เรียกใช้ `adBreak()` สำหรับโฆษณาที่มีการให้รางวัล