โดยปกติแล้ว ผู้จัดจําหน่ายเกมส่วนใหญ่จะโฮสต์เกมของตนในรูปแบบที่สามารถเล่นแบบเต็มหน้าจอ หรือ iFrame'd ไปยังหน้าเว็บอื่นหรือ WebView ภายในแอปได้อย่างง่ายดาย
หน้าที่โฮสต์เกม (เช่น Canvas ของเกมที่เล่นได้) จะมีโค้ด AdSense ('แท็ก') จะโหลดตรรกะ JavaScript สําหรับเกม และโดยปกติจะมีองค์ประกอบ Canvas ที่เกมแสดงผล
เป้าหมายของเราเกี่ยวกับ Ad Placement API คือการลดโค้ดที่คุณต้องเพิ่มลงในเกม คุณจึงควบคุมโฆษณาได้โดยไม่ต้องเปลี่ยนเกมและเปิดตัวเวอร์ชันใหม่อยู่เรื่อยๆ
การสร้างเกม H5 ทําได้หลายวิธีโดยใช้ JavaScript โดยตรง หรือไลบรารีของบุคคลที่สามสําหรับกราฟิก 2 มิติและ 3 มิติที่แสดงผลในวิดเจ็ต Canvas เครื่องมือเกม และในบางกรณีก็เป็นกระบวนการรวบรวมที่ซับซ้อนจากภาษาอื่นๆ
Ad Placement API ได้รับการออกแบบมาให้ทํางานภายในเอกสารเดียวกับผืนผ้าใบเกมและแท็ก adsbygoogle ตัวอย่างเช่น หากคุณเพิ่มเกมเป็น iframe ลงในหน้าที่ใหญ่ขึ้น แท็กและการเรียก API ทั้งหมดควรจะทําจากภายใน iFrame นั้น
ตัวอย่างโครงสร้างเกม H5
ตัวอย่างที่ละเอียดยิ่งขึ้นต่อไปนี้แสดงส่วนสําคัญของหน้าเกมทั่วไป
การสร้างเกม H5 ทําได้หลายวิธีโดยใช้ JavaScript โดยตรง หรือไลบรารีของบุคคลที่สามสําหรับกราฟิก 2 มิติและ 3 มิติที่แสดงผลในวิดเจ็ต 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 ได้รับการออกแบบมาให้ทํางานภายในเอกสารเดียวกับผืนผ้าใบเกมและแท็ก 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 ที่มีแท็กคือตําแหน่งที่โฆษณาแสดง
- โฆษณาต้องครอบคลุมเอกสารที่แนบมาทุกครั้ง
- แท็กและเกมควรอยู่ในเอกสารเดียวกันเสมอ