नीचे दी गई गाइड में टेस्ट विज्ञापन दिखाने के बारे में जानकारी दी गई है. साथ ही, Google पब्लिशर टैग (GPT) लाइब्रेरी का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, कुछ बुनियादी कॉन्सेप्ट के बारे में बताया गया है. जैसे:
- विज्ञापन का साइज़ बदलना
- की-वैल्यू टारगेटिंग
- एक अनुरोध वाला फ़ॉर्मैट
GPT लाइब्रेरी लोड करें
GPT लाइब्रेरी को लोड करके और शुरू करके शुरू करें. एचटीएमएल दस्तावेज़ के <head> में ये चीज़ें जोड़ें:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
इससे GPT लाइब्रेरी लोड हो जाएगी और googletag
और CommandArray, दोनों ऑब्जेक्ट शुरू हो जाएंगे. इन ऑब्जेक्ट को शुरू करने से, आपको तुरंत
GPT कमांड अरे का इस्तेमाल करना शुरू करने में मदद मिलती है. इस स्निपेट में बताए गए खाली फ़ंक्शन के मुख्य हिस्से में दिया गया JavaScript कोड जोड़ें.
विज्ञापन स्लॉट परिभाषित करें
GPT लोड करने के बाद, आप विज्ञापन स्लॉट तय कर सकते हैं. नीचे दिए गए उदाहरण में, अलग-अलग विज्ञापन फ़ॉर्मैट, साइज़, और टारगेटिंग के विकल्पों वाले तीन विज्ञापन स्लॉट के बारे में बताया गया है.
तय आकार का विज्ञापन स्लॉट
यहां एक सरल, तय आकार का विज्ञापन स्लॉट दिया गया है:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
इस स्निपेट में विज्ञापन यूनिट के पाथ, साइज़, और कंटेनर <div> आईडी के साथ-साथ कई टारगेटिंग विकल्प भी होते हैं. ये विकल्प, इस स्लॉट में दिखाए जा सकने वाले विज्ञापनों को सीमित करते हैं और उनमें अंतर करते हैं. मुख्य वैल्यू टारगेटिंग
के बारे में ज़्यादा जानें.
ऐंकर विज्ञापन स्लॉट
यहां एक ऐंकर विज्ञापन स्लॉट दिया गया है, जिसे व्यूपोर्ट के निचले हिस्से में अटैच किया गया है:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
ऐंकर स्लॉट, पेज से बाहर के फ़ॉर्मैट में होते हैं. इनके बारे में जानकारी देने के लिए, आम तौर पर इस्तेमाल होने वाले defineSlot तरीके के बजाय, defineOutOfPageSlot तरीके का इस्तेमाल किया जाता है. पेज से बाहर के क्रिएटिव के बारे में ज़्यादा जानें.
आउट-ऑफ़-पेज फ़ॉर्मैट में, अक्सर इस बात की पाबंदियां होती हैं कि उन्हें किस तरह के पेजों और डिवाइसों पर दिखाया जा सकता है. इन पाबंदियों की वजह से, स्लॉट से इंटरैक्ट करने से पहले आपको यह पुष्टि करनी होगी कि स्लॉट सही तरीके से तय किया गया है या नहीं. ज़्यादा जानकारी के लिए, ऐंकर विज्ञापन दिखाएं सैंपल देखें.
फ़्लूइड विज्ञापन स्लॉट
यहां नेटिव विज्ञापन के लिए एक तरल विज्ञापन स्लॉट दिया गया है:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
फ़्लूइड विज्ञापन स्लॉट का साइज़ तय नहीं होता. फ़्लूइड विज्ञापन स्लॉट, विज्ञापन के क्रिएटिव कॉन्टेंट
के हिसाब से फ़िट हो जाते हैं. आप fluid साइज़ के विकल्प के साथ फ़्लूइड विज्ञापन स्लॉट तय करते हैं. विज्ञापन के साइज़ और साइज़ के लिए उपलब्ध विकल्पों
के बारे में ज़्यादा जानें.
पेज-लेवल की सेटिंग कॉन्फ़िगर करें
कुछ GPT कॉन्फ़िगरेशन विकल्प खास विज्ञापन स्लॉट के बजाय, दुनिया भर में लागू होते हैं. इन्हें पेज-लेवल सेटिंग कहा जाता है.
यहां पेज-लेवल की सेटिंग कॉन्फ़िगर करने का उदाहरण दिया गया है:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
यह स्निपेट तीन काम करता है:
- पेज-लेवल पर टारगेटिंग के विकल्प कॉन्फ़िगर करें. ये विकल्प, पेज पर मौजूद हर विज्ञापन स्लॉट पर लागू होते हैं.
- सिंगल रिक्वेस्ट आर्किटेक्चर (SRA) मोड चालू करता है, जो एक से ज़्यादा विज्ञापन स्लॉट के लिए अनुरोधों को एक विज्ञापन अनुरोध में बंडल कर देता है. SRA से परफ़ॉर्मेंस को बेहतर बनाने के साथ-साथ, प्रतिस्पर्धा से बाहर रखे जाने और रोडब्लॉक को बनाए रखने की गारंटी देना ज़रूरी है. इसलिए, हमारा सुझाव है कि आप हमेशा SRA को चालू रखें. एसआरए को सही तरीके से इस्तेमाल करने के बारे में ज़्यादा जानें.
- हमारे विज्ञापन स्लॉट से जुड़ी सेवाएं चालू करता है, जो विज्ञापन अनुरोध करने की अनुमति देती हैं.
डिसप्ले विज्ञापन
आखिर में, पेज के <body> में यह स्निपेट जोड़ें:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
यह दो विज्ञापन स्लॉट कंटेनर के बारे में बताता है: banner-ad और native-ad. ये
कंटेनर id वैल्यू उन वैल्यू के हिसाब से होती हैं जो आपने इस उदाहरण में पहले विज्ञापन स्लॉट
को तय करते समय दी थीं.
सभी विज्ञापन स्लॉट तय होने के बाद, banner-ad दिखाने के लिए एक कॉल किया जाता है. SRA के चालू होने की वजह से यह सिंगल डिसप्ले कॉल का अनुरोध करता है और इस पॉइंट तक बताए गए सभी विज्ञापन स्लॉट को रेंडर करता है. ज़रूरत पड़ने पर, एसआरए सेटिंग चालू करके विज्ञापन लोड होने और रीफ़्रेश करने और बैच करने के तरीके को ज़्यादा सटीक तरीके से कंट्रोल किया जा सकता है.
उदाहरण को पूरा करें
यह गाइड जिस सैंपल पेज पर आधारित है उसका पूरा सोर्स कोड यहां दिया गया है. इस पेज का इंटरैक्टिव डेमो भी देखा जा सकता है.