यहां दी गई गाइड में, टेस्ट विज्ञापन दिखाने के बारे में ज़्यादा जानकारी दी गई है. साथ ही, Google पब्लिशर टैग (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 दिखाने के लिए कॉल किया जाता है. एसआरए चालू होने की वजह से, यह एक ही डिसप्ले कॉल अनुरोध करता है और अब तक तय किए गए सभी विज्ञापन स्लॉट को रेंडर करता है. ज़रूरत पड़ने पर, एसआरए चालू करके, विज्ञापन लोड होने और रीफ़्रेश होने की प्रोसेस को ज़्यादा सटीक तरीके से कंट्रोल किया जा सकता है. साथ ही, विज्ञापनों को एक साथ लोड करने की प्रोसेस को भी कंट्रोल किया जा सकता है.
पूरा उदाहरण
यहां उस सैंपल पेज का पूरा सोर्स कोड दिया गया है जिस पर यह गाइड आधारित है. इस पेज का इंटरैक्टिव डेमो भी देखा जा सकता है.