इस गाइड में टेस्ट विज्ञापन दिखाने के बारे में विस्तार से बताया गया है. साथ ही, इसमें Google पब्लिशर टैग (GPT) लाइब्रेरी का ज़्यादा से ज़्यादा फ़ायदा पाने के बुनियादी सिद्धांतों के बारे में भी बताया गया है. इनमें ये कॉन्सेप्ट शामिल हैं:
- विज्ञापन का साइज़
- की-वैल्यू टारगेटिंग
- एक अनुरोध वाला आर्किटेक्चर
GPT लाइब्रेरी लोड करें
GPT लाइब्रेरी को लोड और शुरू करके शुरुआत करें. एचटीएमएल दस्तावेज़ के <head> में ये चीज़ें जोड़ें:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>यह जीपीटी लाइब्रेरी को लोड करता है और 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 fills the width of the enclosing column and // adjusts the height as defined by the native creative delivered. 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();
यह स्निपेट तीन काम करता है:
- पेज-लेवल टारगेटिंग के विकल्पों को कॉन्फ़िगर करता है. ये विकल्प, पेज पर मौजूद हर विज्ञापन स्लॉट पर लागू होते हैं.
- एक अनुरोध वाले आर्किटेक्चर (एसआरए) मोड को चालू करता है. यह मोड, एक ही विज्ञापन अनुरोध में कई विज्ञापन स्लॉट के अनुरोधों को बंडल करता है. एसआरए की मदद से परफ़ॉर्मेंस बेहतर होती है. साथ ही, यह इस बात की गारंटी देता है कि प्रतिस्पर्धी एक्सक्लूज़न और रोके गए विज्ञापनों को दिखाने से रोका जाए. इसलिए, हमारा सुझाव है कि आप एसआरए को हमेशा चालू रखें. एसआरए का सही तरीके से इस्तेमाल करने के बारे में ज़्यादा जानें.
- हमारे विज्ञापन स्लॉट से जुड़ी उन सेवाओं को चालू करता है जो विज्ञापन दिखाने का अनुरोध करती हैं.
डिसप्ले विज्ञापन
आखिर में, पेज के <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 दिखाने के लिए कॉल किया जाता है. एसआरए चालू होने की वजह से, यह एक ही डिसप्ले कॉल अनुरोध करता है और अब तक तय किए गए सभी विज्ञापन स्लॉट को रेंडर करता है. ज़रूरत पड़ने पर, एसआरए चालू करके, विज्ञापन लोड होने और रीफ़्रेश होने की प्रोसेस को ज़्यादा सटीक तरीके से कंट्रोल किया जा सकता है. साथ ही, विज्ञापनों को एक साथ लोड करने की प्रोसेस को भी कंट्रोल किया जा सकता है.
पूरा उदाहरण
यहां उस सैंपल पेज का पूरा सोर्स कोड दिया गया है जिस पर यह गाइड आधारित है. इस पेज का इंटरैक्टिव डेमो भी देखा जा सकता है.