يستضيف معظم موزّعي الألعاب عادةً ألعابهم بشكل يمكن تشغيله بسهولة في وضع ملء الشاشة، أو إطار iframe في صفحة ويب أخرى أو ضمن WebView في أحد التطبيقات.
تحتوي الصفحة التي تستضيف اللعبة (أي لوحة اللعبة القابلة للتشغيل) على رمز AdSense ('the tag')، وتحميل منطق JavaScript للّعبة، وتحتوي عادةً على عنصر لوحة الرسم حيث يتم عرض اللعبة.
هدفنا من واجهة برمجة تطبيقات موضع الإعلان هو تقليل الرمز الذي يجب إضافته إلى لعبتك. وبالتالي، يمكنك التحكم في الإعلانات بدون الحاجة إلى تغيير اللعبة باستمرار وإصدار إصدارات جديدة منها.
وهناك العديد من الطرق لإنشاء ألعاب H5، وذلك باستخدام JavaScript مباشرةً أو مكتبات الجهات الخارجية للرسومات الثنائية الأبعاد والثلاثية الأبعاد التي يتم عرضها على أداة لوحة الرسم ومحركات الألعاب، وفي بعض الحالات، عملية تجميع متعددة معقّدة من لغات أخرى.
تم تصميم واجهة Ad Placement API للعمل داخل المستند نفسه الذي يتضمّن لوحة الرسم الخاصة باللعبة وعلامة adsbygoogle. على سبيل المثال، إذا أضفت لعبة كإطار iframe إلى صفحة أكبر، يجب إجراء العلامة وجميع طلبات البيانات من واجهة برمجة التطبيقات من داخل إطار iframe.
مثال على بنية لعبة H5
يوضّح المثال الأكثر تفصيلاً الأجزاء الرئيسية في صفحة اللعبة العادية.
وهناك العديد من الطرق لإنشاء ألعاب H5، وذلك باستخدام JavaScript مباشرةً أو مكتبات الجهات الخارجية للرسومات الثنائية الأبعاد والثلاثية الأبعاد التي يتم عرضها على أداة لوحة الرسم ومحركات الألعاب، وفي بعض الحالات، عملية تجميع متعددة معقّدة من لغات أخرى. قد تختلف التفاصيل الدقيقة عن لعبتك عن هذا المثال.
<head>
## The Ad Placement tag ##
# Configure your monetisation settings here and place the standard
# boilerplate code for initialising the API functions. This code may change
# depending on where the game is being distributed (eg. a website, a super
# app, different publishers).
<script async
data-ad-frequency-hint="30s"
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789" # your publisher ID
crossorigin="anonymous">
</script>
<script>
window.adsbygoogle = window.adsbygoogle || [];
var adBreak = adConfig = function(o) {adsbygoogle.push(o);}
</script>
[...]
</head>
<body>
[...]
## Your game code ##
# This is your game logic that renders the playable canvas. Once you've
# integrated your game with the Ad Placement API, this code won't change due
# to ad configuration updates.
<canvas id="game_canvas" width="100%" height="100%"></canvas>
<script src="game.js"></script>
[...]
</body>
تم تصميم واجهة Ad Placement API للعمل داخل المستند نفسه الذي يتضمّن لوحة الرسم الخاصة باللعبة وعلامة adsbygoogle. على سبيل المثال، إذا أضفت لعبة كإطار iframe إلى صفحة أكبر، يجب إجراء العلامة وجميع طلبات البيانات من واجهة برمجة التطبيقات من داخل إطار 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
يمكن توزيع ألعاب H5 بطرق مختلفة وعلى العديد من الأنظمة الأساسية المختلفة. غالبًا ما يكون هناك كيانات مختلفة تتطلّب إنشاء الألعاب وتوزيعها، بما في ذلك:
- مطوّرو البرامج – الأشخاص الذين ينشئون الألعاب
- المحركات - الشركات التي توفّر الأدوات لإنشائها
- خدمات الاستضافة: استضافة الألعاب
- الموزّعون: يعملون مع مطوّري البرامج لإنشاء كتالوجات غنية من الألعاب.
- الناشرون: الذين يملكون مصدر الزيارات ويريدون عرض ألعاب على مواقعهم الإلكترونية أو تطبيقاتهم
في كثير من الحالات، يمكن للكيانات أن تشمل هذه الأدوار، فيمكنك تطوير ألعابك واستضافةها ونشرها.
يمكن تشغيل الألعاب بطرق مختلفة، بما في ذلك:
- ملء الشاشة: يمكنهم استخدام الشاشة بأكملها للحصول على تجربة شاملة.
- iframe/WebView – حيث يتم عرضها في جزء من مستند أكبر حجمًا
- مضمّنة: حيث يتم وضعها مباشرةً على الصفحات التي تتضمّن محتوى آخر
تنطبق تجارب ملء الشاشة وإطار iFrame على كل من الويب والتطبيق ("iframe" وفي هذه الحالة يمكن أن تشير أيضًا إلى WebView المضمّن في التطبيق) — نتوقع أن يتم توزيع معظم الألعاب بهذه الطرق. الألعاب المضمّنة هي تجارب على الويب فقط.
ملاحظة
- مستند HTML الذي يحتوي على العلامة هو المكان الذي يظهر فيه الإعلان.
- يجب أن يغطي الإعلان دائمًا مستند التضمين بالكامل.
- يجب أن تقع العلامة واللعبة دائمًا داخل المستند نفسه.