Bu sayfa, Cloud Translation API ile çevrilmiştir.

Örnek uygulama

Reklam Yerleştirme API'si, web'deki veya uygulamalardaki HTML5 oyunlarında geçiş reklamları ve ödüllü reklamlar kullanan AdSense ve AdMob geliştiricilerini desteklemek için tasarlanmıştır. Bu örnek, Reklam Yerleşimi API'sinin bir oyuna nasıl entegre edileceğini ve geçiş reklamı yerleştirmek için nasıl kullanılacağını gösterir.

Ön koşullar

Başlamadan önce aşağıdakilere ihtiyacınız olacaktır:

Aynı dizinde iki boş dosya oluşturun:
- index.html
- game.js
Python'ı yerel olarak yükleyin veya uygulamanızı test etmek için bir web sunucusu kullanın.

Uygulama örnek kodu

AdMob yayıncıları, API'nin bir uygulama oyununa nasıl entegre edilebileceğini daha iyi anlamak için örnek uygulama kodu indirebilir.

Uygulama örnek kodunu indirme

1. Geliştirme sunucusu başlatma

Ads Placement API, bağımlılıkları yüklendiği sayfayla aynı protokol üzerinden yüklediğinden uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel bir geliştirme ortamı oluşturmak için Python'ın yerleşik sunucusunu kullanabilirsiniz.

Terminali açın.
index.html dosyanızı içeren dizine gidin ve şu komutu çalıştırın:
```
python -m http.server 8000
```
Not: http.server yalnızca Python 3.x'te kullanılabilir.
Web tarayıcısında localhost:8000 adresine gidin.

Apache HTTP Server gibi başka bir web sunucusu da kullanabilirsiniz.

2. HTML5 oyunu oluşturma

HTML5 tuval öğesi ve oyun oynama özelliğini tetikleyecek bir düğme oluşturmak için index.html öğesini değiştirin. Ardından, game.js dosyasını yüklemek için gerekli komut dosyası etiketini ekleyin.

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>

"Oyna" düğmesi tıklandığında yazı tura oyunu oynatmak için game.js dosyasını değiştirin.

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

Bu adımı tamamladıktan sonra tarayıcınızda index.html adresini (geliştirme sunucunuz üzerinden) açtığınızda oyun tuvalini ve "Oyna" düğmesini görebilirsiniz. Oyna'yı tıkladığınızda yazı tura oyunu başlar.

3. Reklam Yerleşimi API'sini içe aktarma

Ardından, index.html içine game.js etiketinden önce bir komut dosyası etiketi ekleyerek Reklam Yerleşimi API'sini oyununuza ekleyin.

Komut dosyası etiketi bir dizi parametre alabilir. AdSense mülk kodunu belirtmek ve test modunu etkinleştirmek için aşağıdaki parametreleri kullanacağız:

data-ad-client=<AdSense property code> AdSense mülk kodunuz. Bu, uygulamalarda çalışacak oyunlar için bile her zaman gereklidir.
data-adbreak-test="on" Test modunu etkinleştirir. Oyunlar oyunculara sunulduktan sonra bu özelliği kaldırın.

AdSense kodunu ayarlama ve test modunu etkinleştirme

Reklam Yerleşimi API'si işlevselliği AdSense koduna dahil edilmiştir. Bu özelliği etkinleştirmek için önce AdSense kodunu eklemeniz ve iki temel işlevini (adBreak() ve adConfig()) başlatan küçük bir komut dosyası snippet'i eklemeniz gerekir.

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>

Oyununuzu yerleştirme (isteğe bağlı)

Bir oyunu iFrame içindeki diğer sayfalara yerleştirmek istiyorsanız ve adsbygoogle etiketi oyunun HTML sayfasında bulunuyorsa iFrame öğesine allow='autoplay' eklediğinizden emin olun. Bu en iyi uygulamadır ve belirli reklamların oyununuzda yayınlanmaya uygun olması için gereklidir.

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

Mobil uygulamaları destekleme

H5 oyunları normal bir web tarayıcısında, WebView veya bir uygulama içindeki Chrome özel sekmesinde çalışabilir. Ad Placement API, oyununuzun hangi ortamda çalıştığını algılayabilir ve reklam isteklerini uygun şekilde yönlendirebilir. Oyununuz normal bir web tarayıcısında çalışıyorsa reklam istekleri normal AdSense istekleri gibi değerlendirilir. Reklam Yerleşimi API'si uygulama içi bir ortam algılarsa AdMob reklamlarını istemek ve göstermek için Google Mobile Ads SDK'sı ile (varsa) iletişim kurar.

Bu özellik, Google Mobile Ads SDK'sı ile bağlantı oluşturulmuş Android uygulamalarında desteklenir. Bu özelliği etkinleştirmek için oyununuzu Google Mobile Ads SDK ile gösterecek WebView kaydetmeniz, ardından AdMob reklam birimlerini yapılandırıp AdSense etiketine ek parametreler olarak iletmeniz gerekir. Oyununuz uygun bir uygulamada çalıştırıldığında, reklam yerleşimi API'si reklam göstermek için bu reklam birimlerini kullanır.

Mobil desteğini etkinleştirmek için aşağıdaki ek etiket parametrelerini belirtmeniz gerekir:

data-admob-interstitial-slot=<AdMob slot ID> Daha önce yapılandırdığınız bir AdMob geçiş reklamı birimi kimliği.
data-admob-rewarded-slot=<AdMob slot ID> AdMob ödüllü reklam birimi kimliği.

AdSense mülk kodunuz her zaman data-ad-client parametresiyle birlikte iletilmeli ve data-admob-interstitial-slot veya data-admob-rewarded-slot parametrelerinden en az biri belirtilmelidir. Oyununuz her iki biçimi de kullanıyorsa her iki parametre de belirtilmelidir.

İsteğe bağlı olarak, oyununuzun yalnızca AdMob'dan gelen reklamları göstermesi ve oyunun AdMob isteklerini desteklemeyen bir ortamda (ör. uygulama dışı ortamlar veya Google Mobile Ads SDK'sı yapılandırılmamış uygulamalar) oynandığı durumlarda AdSense'e geri dönmemesi gerektiğini belirtmek için data-admob-ads-only=on etiket parametresini de belirtebilirsiniz.

Önemli: Oyununuzu bir uygulamaya yerleştirilecek şekilde tasarlarken, uygulamanın sahibi sizseniz veya uygulamanın sahibiyle bir gelir paylaşımı sözleşmesi imzalayacaksanız bunu yüksek performanslı ve politikalara uyumlu şekilde yapmanın tek yolu bu AdMob desteğini kullanmaktır.

Öncelikle, oyununuzu gösterecek WebView öğesini Google Mobile Ads SDK'sına kaydedin:

MainActivity.java (uygulama)

Varsayılan WebView ayarları reklamlar için optimize edilmemiştir. WebView için WebSettings API'lerini kullanarak WebView yapılandırın:

JavaScript
Yerel depolama alanına erişim
Otomatik video oynatma

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

Ardından, AdMob reklam birimlerini (biri geçiş reklamları, diğeri ödüllü reklamlar için) aşağıdaki şekilde iletin:

index.html (uygulama)

 [...]
    <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() işlevini çağırma

adConfig() çağrısı, oyunun mevcut yapılandırmasını AdPlacement API'ye iletir. API daha sonra bu bilgileri, istediği reklam türlerini oyuna uygun olacak şekilde filtrelemek için kullanabilir (ör. ses etkinse ses gerektiren video reklamlar).

Bu yapılandırma her değiştiğinde (ör. kullanıcı oyunu sessize aldığında veya sessizden çıkardığında) adConfig() numarası aranmalıdır. Oyunun oluşturucusunda adConfig() işlevine çağrı yapın, ardından oyunu sessize almak ve sessizliğini kaldırmak için ek bir adConfig() çağrısı yapan bir düğme ekleyin.

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

Şimdi, sessize alma düğmesini HTML dosyanıza ekleyin.

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. Oyun bittiğinde `adBreak()` numarasına telefon etme

adBreak() çağrısı bir reklam yerleşimini tanımlar ve oyununuzda bu noktada bir reklam göstermek için gereken her şeyi belirten yerleşim yapılandırması adlı nesneyi alır. Farklı reklam türlerini desteklemek için yerleşim yapılandırmasının farklı alt kümelerini başlatmanız gerekir.

adBreak() çağrısı, bir reklamın gösterilebileceği bir yerleşimi veya başka bir deyişle bir reklam gösterme fırsatını tanımlar. Bir reklamın gerçekten gösterilip gösterilmeyeceği çeşitli faktörlere bağlıdır:

Bildirdiğiniz reklam yerleşiminin türü.
Bu reklam yerleşiminden önce uygun kullanıcı etkileşimleri olduysa.
Mevcut oynatıcı için uygun bir reklam olup olmadığı:
- Kullanıcılarla alakalı olmalıdır.
- Veri gizliliği ve izin ayarlarıyla tutarlı olmalıdır.
Kullanıcının son zamanlarda gördüğü reklamların sayısı.
Bu oyun için yapılandırdığınız kontrol ayarları:
- Etiketteki ipuçları
- AdSense'te (Not: AdSense'te bulunan kontroller zaman içinde değişecektir)

Oyun yeniden başlatıldığında gösterilecek bir geçiş reklamı için kod ekleyin: Yalnızca oyun bir kez oynandıktan sonra çalışan play() işlevinin içinde adBreak() işlevini çağırın.

adBreak(), "Oynat" düğmesini tıklama gibi bir kullanıcı işlemi kapsamında çağrılmalıdır. Aksi takdirde API, reklam isteğinde bulunamaz ve reklam görüntüleyemez.

Reklam arasından önce ve sonra çağrılacak işlevler oluşturun. Bu işlevleri daha sonra adBreak() yerleşim yapılandırmasında kullanacaksınız. beforeAd ve afterAd işlevlerinin yalnızca uygun bir reklam bulunursa çağrılacağını unutmayın.

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. Ödüllü reklam için `adBreak()` işlevini çağırma

Oyun bittiğinde ancak kullanıcının baştan başlamak yerine mevcut puanını canlandırmak istediğinde gösterilecek bir ödüllü reklam kodu ekleyin. lose() işlevinin içinde adBreak() işlevini çağırarak ödüllü reklamın kullanılabilir olup olmadığını kontrol edin. Ödül varsa kullanıcıya ödülü (bu durumda yeniden canlandırma) isteyip istemediğini soran bir istem gösterin ve kullanıcı reklamı izlemeyi kabul ettiğinde ilgili showAdFn() işlevini çağırın. Kullanıcı ödüllü reklamları izlerse/atlarsa ne yapılacağını adViewed ve adDismissed geri çağırma işlevlerini kullanarak yapılandırabilirsiniz.

Ödüllü reklam gösterme fırsatlarının her birinde yeni bir adBreak() çağrılmalıdır. Bu, önceki reklamın süresi dolduysa veya kullanılamıyorsa reklamın yenilenmesini sağlar.

showAdFn(), reklam izlemek için doğrudan kullanıcı işlemi kapsamında çağrılmalıdır. Aksi takdirde reklam gösterilmeyebilir.

Reklam arasından önce ve sonra çağrılacak işlevler oluşturun. Bu işlevleri daha sonra adBreak() yerleşim yapılandırmasında kullanacaksınız. beforeReward, adViewed, adDismissed, beforeAd ve afterAd işlevlerinin yalnızca uygun bir reklam bulunursa çağrılacağını unutmayın.

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

Şimdi devam düğmesini HTML dosyanıza ekleyin.

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

Madeni para atma uygulaması artık gösterilecek reklamlar için reklam yerleşimleri oluşturuyor.

Uygulamanızda, oyunun sona erdiği anın dışında reklamlar için uygun ek yerler olabilir. Bu yerlerdeki arama adBreak() işlemi, bu örneğe benzer olmalıdır.

Üretim uygulamaları için testi devre dışı bırakma

Uygulamanızı yayınlamadan önce data-adbreak-test="on" satırını index.html dosyasından kaldırmanız veya bu satırda yorum satırı oluşturmanız önemlidir. Bu kod, üretimde test ayarlarını etkinleştirir.

Örnek uygulama Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Ön koşullar

Uygulama örnek kodu

1. Geliştirme sunucusu başlatma

2. HTML5 oyunu oluşturma

index.html

game.js

3. Reklam Yerleşimi API'sini içe aktarma

AdSense kodunu ayarlama ve test modunu etkinleştirme

index.html (web)

Oyununuzu yerleştirme (isteğe bağlı)

Mobil uygulamaları destekleme

MainActivity.java (uygulama)

Java

Kotlin

index.html (uygulama)

4. adConfig() işlevini çağırma

game.js

index.html

5. Oyun bittiğinde adBreak() numarasına telefon etme

game.js

6. Ödüllü reklam için adBreak() işlevini çağırma

game.js

index.html

Üretim uygulamaları için testi devre dışı bırakma

Örnek uygulama

5. Oyun bittiğinde `adBreak()` numarasına telefon etme

6. Ödüllü reklam için `adBreak()` işlevini çağırma