تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

مثال على التنفيذ

تم تصميم واجهة برمجة التطبيقات "موضع الإعلان" لتتيح لمطوّري AdSense وAdMob استخدام الإعلانات البينية والإعلانات مقابل مكافآت في ألعاب HTML5 على الويب أو داخل التطبيقات. يوضّح هذا المثال كيفية دمج واجهة برمجة التطبيقات لموضع الإعلان في لعبة واستخدامها لعرض إعلان بيني.

المتطلبات الأساسية

قبل البدء، ستحتاج إلى ما يلي:

أنشِئ ملفَين فارغَين في الدليل نفسه:
- index.html
- game.js
تثبيت Python محليًا أو استخدام خادم ويب لاختبار عملية التنفيذ

نموذج التعليمات البرمجية للتطبيق

يمكن للناشرين على AdMob تنزيل عيّنة من الرمز البرمجي للتطبيق للتعرّف بشكل أفضل على كيفية دمج واجهة برمجة التطبيقات في لعبة على تطبيق.

تنزيل نموذج الرمز البرمجي للتطبيق

1. بدء خادم تطوير

بما أنّ واجهة برمجة التطبيقات Ads Placement API تحمّل التبعيات باستخدام البروتوكول نفسه الذي يتم تحميل الصفحة عليه، عليك استخدام خادم ويب لاختبار تطبيقك. ويمكنك استخدام الخادم المضمّن في Python لإنشاء بيئة تطوير محلية.

افتح الوحدة الطرفية.
انتقِل إلى الدليل الذي يحتوي على ملف index.html، ثم نفِّذ ما يلي:
```
python -m http.server 8000
```
ملاحظة: لا يتوفّر http.server إلا في الإصدار 3.x من Python.
في متصفِّح الويب، انتقِل إلى localhost:8000

يمكنك أيضًا استخدام أي خادم ويب آخر، مثل خادم Apache HTTP.

2. إنشاء لعبة HTML5

عدِّل index.html لإنشاء عنصر لوحة عرض 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 في المتصفّح (عبر خادم التطوير)، من المفترض أن تتمكّن من رؤية لوحة عرض اللعبة وزر "تشغيل". إذا نقرت على "تشغيل"، من المفترض أن تبدأ لعبة رمي العملة المعدنية.

3- استيراد واجهة برمجة التطبيقات لموضع الإعلان

بعد ذلك، أضِف واجهة برمجة التطبيقات لموضع الإعلان إلى لعبتك من خلال إدراج علامة نصية في index.html، قبل العلامة الخاصة بـ game.js.

يمكن أن تتضمّن علامة البرنامج النصي عددًا من المَعلمات. سنستخدم المَعلمات التالية لتحديد رمز موقع AdSense وتفعيل وضع الاختبار:

data-ad-client=<AdSense property code> رمز الموقع الخاص بك على AdSense ويجب توفُّر هذا الإذن دائمًا حتى بالنسبة إلى الألعاب التي سيتم تشغيلها داخل التطبيقات.
data-adbreak-test="on" تفعيل وضع الاختبار يجب إزالة هذا الإذن من الألعاب بعد أن يتم عرضها على اللاعبين.

إعداد رمز AdSense وتفعيل وضع الاختبار

يتم تضمين وظائف Ad Placement API في رمز AdSense. لتفعيل هذه الميزة، عليك أولاً إضافة رمز AdSense وتضمين مقتطف صغير من البرنامج النصي يعمل على إعداد وظيفتَين أساسيتَين، هما 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. إذا رصدت واجهة برمجة التطبيقات "موضع الإعلان" بيئة داخل التطبيق، فإنّها تتواصل مع حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"، إذا كانت متوفّرة، لطلب إعلانات AdMob وعرضها.

تتوفّر هذه الإمكانية في تطبيقات Android التي تم ربطها بحزمة Google Mobile Ads SDK. لتفعيلها، عليك تسجيل WebView الذي سيعرض لعبتك باستخدام حزمة SDK لإعلانات Google على الأجهزة الجوّالة، ثم إعداد وحدات إعلانية في AdMob وتمريرها كمعلَمات إضافية إلى علامة AdSense. عند تشغيل لعبتك ضمن تطبيق مناسب، ستستخدِم واجهة برمجة التطبيقات لموضع الإعلان هذه الوحدات الإعلانية لعرض الإعلانات.

لتفعيل التوافق مع الأجهزة الجوّالة، يجب تحديد مَعلمات العلامة الإضافية التالية:

data-admob-interstitial-slot=<AdMob slot ID> معرّف وحدة إعلانية بينية في AdMob سبق لك إعداده.
data-admob-rewarded-slot=<AdMob slot ID> رقم تعريف وحدة إعلانية مقابل مكافأة في AdMob

يجب دائمًا تمرير رمز الموقع الخاص بك على AdSense مع المَعلمة data-ad-client، ويجب تحديد قيمة واحدة على الأقل من data-admob-interstitial-slot أو data-admob-rewarded-slot. يجب تحديد كلتا المَعلمتَين إذا كانت لعبتك تستخدم كلا التنسيقَين.

يمكنك أيضًا تحديد مَعلمة العلامة data-admob-ads-only=on للإشارة إلى أنّ لعبتك يجب أن تعرض إعلانات من AdMob فقط، وليس من AdSense في الحالات التي يتم فيها تشغيل اللعبة في بيئة لا تتوافق مع طلبات AdMob (مثل البيئات غير التابعة للتطبيقات أو التطبيقات التي لم يتم ضبط حزمة SDK لإعلانات Google على الأجهزة الجوّالة فيها).

ملاحظة مهمة: عند تصميم لعبتك لتضمينها في أحد التطبيقات وامتلاك التطبيق أو الدخول إلى اتفاقية مشاركة الأرباح مع مالك التطبيق، فإن الطريقة الوحيدة لإجراء ذلك بأفضل أداءً وبشكلٍ متوافق مع السياسات هي استخدام دعم AdMob هذا.

أولاً، سجِّل WebView الذي سيعرض لعبتك باستخدام حزمة "SDK لإعلانات Google على الأجهزة الجوّالة":

MainActivity.java (التطبيق)

إنّ إعدادات WebView التلقائية غير محسَّنة لعرض الإعلانات. استخدِم واجهات برمجة التطبيقات 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 الإعلانية (واحدة للإعلانات البينية وواحدة للإعلانات مقابل مكافأة) على النحو التالي:

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() إعدادات اللعبة الحالية إلى واجهة برمجة التطبيقات AdPlacement 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() موضعًا يمكن أن يظهر فيه الإعلان، أو بعبارة أخرى، فرصة لعرض إعلان. يعتمد ظهور الإعلان فعليًا على عدد من العوامل، وهي:

نوع موضع الإعلان الذي أفصحت عنه
إذا كانت هناك تفاعلات مناسبة من المستخدم قبل موضع الإعلان هذا
ما إذا كان يتوفّر إعلان مناسب للمشغّل الحالي، على أن يكون:
- أن تكون ذات صلة باهتماماتهم
- أن تكون متوافقة مع إعدادات الخصوصية والموافقة على البيانات.
عدد الإعلانات التي شاهدها المستخدم مؤخرًا
إعدادات التحكّم التي ضبطتها لهذه اللعبة على النحو التالي:
- تلميحات في العلامة
- في AdSense (ملاحظة: ستتطوّر عناصر التحكّم المتوفّرة في AdSense بمرور الوقت)

أضِف رمزًا لعرض إعلان بيني عند إعادة تشغيل اللعبة: أجرِ مكالمة إلى adBreak() داخل الدالة play()، التي لا يتم تنفيذها إلا بعد إكمال اللعبة مرة واحدة.

يجب استدعاء adBreak() كجزء من إجراء يتّخذه المستخدم، مثل النقر على الزر "تشغيل"، وإلا لن يتمكّن واجهة برمجة التطبيقات من طلب الإعلانات وعرضها.

أنشئ دوالاً يتم استدعاؤها قبل فاصل الإعلانات وبعده، ثم استخدِمها في إعدادات موضع الإعلان 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- استيراد واجهة برمجة التطبيقات لموضع الإعلان

إعداد رمز 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()` لعرض "إعلان مقابل مكافأة"