בדרך כלל, רוב מפיצי המשחקים מארחים את המשחקים שלהם בפורמט שמאפשר לשחק בהם בקלות במסך מלא, או משלבים אותם בתור iFrame בדף אינטרנט אחר או ב-WebView באפליקציה.
הדף שמארח את המשחק (כלומר, אזור המשחק שניתן לשחק בו) מכיל את קוד AdSense (התג), טוען את הלוגיקה של JavaScript עבור המשחק, ובדרך כלל מכיל רכיב canvas שבו המשחק מוצג.
המטרה שלנו ב-Ad Placement API היא לצמצם את כמות הקוד שצריך להוסיף למשחק. כך תוכלו לשלוט במודעות בלי שתצטרכו לשנות את המשחק כל הזמן ולפרסם גרסאות חדשות שלו.
יש הרבה דרכים ליצור משחקי H5, למשל באמצעות JavaScript ישירות, או באמצעות ספריות של צד שלישי לגרפיקה דו-ממדית ותלת-ממדית שמעובדת לווידג'ט Canvas, מנועי משחקים, ובמקרים מסוימים תהליכי קומפילציה צולבת מורכבים למדי משפות אחרות.
ה-Ad Placement API מיועד להפעלה באותו מסמך כמו canvas המשחק והתג adsbygoogle. לדוגמה, אם מוסיפים משחק בתור iFrame לדף גדול יותר, התג וכל הקריאות ל-API צריכים להתבצע מתוך ה-iFrame הזה.
דוגמה למבנה של משחק H5
בדוגמה המפורטת הבאה מוצגים החלקים העיקריים של דף משחק טיפוסי.
יש הרבה דרכים ליצור משחקי H5, למשל באמצעות JavaScript ישירות, או באמצעות ספריות של צד שלישי לגרפיקה דו-ממדית ותלת-ממדית שמעובדת לווידג'ט Canvas, מנועי משחקים, ובמקרים מסוימים תהליכי קומפילציה צולבת מורכבים למדי משפות אחרות. הפרטים המדויקים של המשחק שלכם עשויים להיות שונים מהדוגמה הזו.
<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 מיועד להפעלה באותו מסמך כמו canvas המשחק והתג adsbygoogle. לדוגמה, אם מוסיפים משחק בתור iFrame לדף גדול יותר, התג וכל הקריאות ל-API צריכים להתבצע מתוך ה-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 שמכיל את התג.
- המודעה צריכה לכסות תמיד את המסמך המצורף באופן מלא.
- התג והמשחק צריכים להיות תמיד באותו מסמך.