Ad Placement API, वेब और ऐप्लिकेशन में HTML5 गेम में पेज पर अचानक दिखने वाले विज्ञापन और इनाम वाले विज्ञापन का इस्तेमाल करके, AdSense और AdMob डेवलपर की मदद करने के लिए बनाया गया है. इस उदाहरण में विज्ञापन प्लेसमेंट एपीआई को गेम में इंटिग्रेट करने और पेज पर अचानक दिखने वाले विज्ञापन को डालने के लिए इसका तरीका बताया गया है.
ज़रूरी शर्तें
शुरू करने से पहले, आपको इनकी ज़रूरत होगी:
- एक ही डायरेक्ट्री में दो खाली फ़ाइलें बनाना:
- index.html
- Game.js
- अपने लागू होने की जांच करने के लिए, Python को स्थानीय तौर पर इंस्टॉल करें या वेब सर्वर का इस्तेमाल करें
ऐप्लिकेशन का सैंपल कोड
AdMob के पब्लिशर, ऐप्लिकेशन के नमूने का कोड डाउनलोड कर सकते हैं. ऐसा करके, यह बेहतर तरीके से समझा जा सकता है कि एपीआई को ऐप्लिकेशन के गेम में कैसे इंटिग्रेट किया जा सकता है.
ऐप्लिकेशन का सैंपल कोड डाउनलोड करना
1. डेवलपमेंट सर्वर शुरू करना
Ads प्लेसमेंट एपीआई, निर्भर प्रोटोकॉल को उसी पेज पर लोड करता है जिस पर पेज लोड होता है. अपने ऐप्लिकेशन की जांच करने के लिए, आपको वेब सर्वर का इस्तेमाल करना होगा. लोकल डेवलपमेंट एनवायरमेंट बनाने के लिए, आप Python's का इस्तेमाल कर सकते हैं.
टर्मिनल खोलें.
उस डायरेक्ट्री पर जाएं जिसमें आपकी index.html फ़ाइल शामिल है. इसके बाद, चलाएं:
python -m http.server 8000वेब ब्राउज़र में,
localhost:8000पर जाएं
आप किसी अन्य वेब सर्वर का भी इस्तेमाल कर सकते हैं, जैसे कि Apache एचटीटीपी सर्वर.
2. HTML5 गेम बनाना
HTML5 कैनवस एलिमेंट बनाने और गेमप्ले शुरू करने का बटन बनाने के लिए index.html में बदलाव करें. इसके बाद, 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>
<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>
सिक्का उछालने वाला गेम चलाने के लिए &.t&Play " बटन क्लिक किए जाने पर गेम.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 (डेवलपमेंट सर्वर के ज़रिए) खोलेंगे, तब आपको गेम कैनवस और &Play और कोट बटन दिखेगा.
अगर आप Play पर क्लिक करते हैं, तो सिक्का उछालने वाला गेम शुरू हो जाना चाहिए.
3. Ad Placement API इंपोर्ट करें
इसके बाद, index.html के लिए game.js से पहले टैग में स्क्रिप्ट टैग डालकर अपने गेम में Ad Placement API जोड़ें.
स्क्रिप्ट टैग कई पैरामीटर ले सकता है. हम 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>
<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 गेम, किसी सामान्य वेब ब्राउज़र या किसी ऐप्लिकेशन में वेबव्यू या Chrome कस्टम टैब में चल सकता है. विज्ञापन प्लेसमेंट एपीआई यह पता लगा सकता है कि आपका गेम किस एनवायरमेंट में चल रहा है. साथ ही, वह विज्ञापन अनुरोधों को सही तरीके से निर्देश भी दे सकता है. अगर आपका गेम सामान्य वेब ब्राउज़र पर चल रहा है, तो विज्ञापन अनुरोधों को सामान्य AdSense अनुरोधों की तरह ही माना जाएगा. अगर Ad Placement API, इन-ऐप्लिकेशन एनवायरमेंट का पता लगाता है, तो यह AdMob विज्ञापनों का अनुरोध करने और उन्हें दिखाने के लिए, GMA SDK टूल के साथ काम करता है. ऐसा तब होता है, जब ऐप्लिकेशन मौजूद हो.
फ़िलहाल, यह सुविधा उन AdMob ऐप्लिकेशन पर काम करती है जिन्हें AdMob GMA SDK टूल के साथ जोड़ा गया है. इसे चालू करने के लिए आपको WebView को रजिस्टर करना होगा. यह आपका गेम GMA SDK टूल के साथ दिखाएगा. इसके बाद, 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 से विज्ञापन दिखाए जाने चाहिए, न कि ऐसे मामलों में जहां
AdMob के अनुरोध काम नहीं करते (जैसे कि बिना ऐप्लिकेशन वाले एनवायरमेंट या AdMob GMA SDK टूल को कॉन्फ़िगर किए बिना).
ज़रूरी जानकारी: जब आप अपने गेम को किसी ऐप्लिकेशन में जोड़ने के लिए डिज़ाइन करते हैं या ऐप्लिकेशन के मालिक होते हैं या ऐप्लिकेशन के मालिक के साथ आय का बंटवारा करने के लिए कानूनी समझौता करते हैं, तो बेहतर परफ़ॉर्म करने और नीति का पालन करने के लिए, आप सिर्फ़ इस AdMob सहायता का इस्तेमाल कर सकते हैं.
सबसे पहले, उस वेबव्यू को रजिस्टर करें जो GMA SDK टूल के साथ आपका गेम दिखाएगा:
MainActivity.java (ऐप्लिकेशन)
...
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = findViewById(R.id.webview_minigame);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
webView.setWebViewClient(h5AdsWebViewClient);
h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);
इसके बाद, AdMob विज्ञापन यूनिट (पेज पर अचानक दिखने वाले विज्ञापन के लिए एक और इनाम वाले विज्ञापनों के लिए एक) पास करें, जैसा कि नीचे बताया गया है:
index.html (ऐप्लिकेशन)
[...]
<canvas id="gameContainer" height="300px" width="300px"></canvas>
<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() कॉल, गेम के मौजूदा कॉन्फ़िगरेशन को विज्ञापन
प्लेसमेंट एपीआई के बारे में बताता है. इसके बाद, एपीआई इस जानकारी का इस्तेमाल करके,
यह तय कर सकता है कि विज्ञापन किस तरह के
विज्ञापनों के लिए दिखाए जाएं. ऐसा इसलिए किया जाता है, ताकि वे गेम के हिसाब से सही हों. जैसे, ऐसे वीडियो विज्ञापन जिनमें आवाज़ होने पर
आवाज़ होती है.
जब भी यह कॉन्फ़िगरेशन बदलता है, तो किसी भी समय 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();
[...]
अब, अपनी एचटीएमएल फ़ाइल में म्यूट बटन जोड़ें.
index.html
[...]
<canvas id="gameContainer" height="300px" width="300px"></canvas>
<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 में उपलब्ध कंट्रोल बेहतर होंगे)
गेम के रीस्टार्ट होने पर, पेज पर अचानक दिखने वाले विज्ञापन के लिए कोड जोड़ें: play() फ़ंक्शन में, adBreak() पर कॉल करें. यह फ़ंक्शन, गेम खत्म होने के बाद ही चलता है.
adBreak() को उपयोगकर्ता की कार्रवाई के हिस्से के तौर पर कॉल किया जाना चाहिए, जैसे कि "Play"
बटन पर क्लिक करना, नहीं तो एपीआई विज्ञापनों का अनुरोध करने और उन्हें दिखाने की सुविधा नहीं दे पाएगा.
विज्ञापन के लिए ब्रेक से पहले और बाद में, कॉल करने के लिए फ़ंक्शन बनाएं. इनका इस्तेमाल 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();
सिक्कों का फ़्लिप ऐप्लिकेशन अब विज्ञापन दिखाने के लिए विज्ञापन प्लेसमेंट बना रहा है.
आपके ऐप्लिकेशन में, गेम खत्म होने की जगह के अलावा, विज्ञापनों के लिए अन्य ज़रूरी जगहें भी हो सकती हैं. उन जगहों में adBreak() को कॉल करना, इस उदाहरण से मिलता-जुलता होना चाहिए.
प्रोडक्शन ऐप्लिकेशन के लिए टेस्टिंग बंद करें
अपना ऐप्लिकेशन रिलीज़ करने से पहले, index.html में लाइन data-adbreak-test="on" को हटाना या उस पर टिप्पणी करना ज़रूरी है, क्योंकि यह कोड प्रोडक्शन में टेस्ट सेटिंग
चालू करता है.