एम्बेड किया गया कनेक्ट
जब उपयोगकर्ता AdSense को आपके प्लैटफ़ॉर्म से जोड़ने की कोशिश करते हैं, तब 'एम्बेड किया गया कनेक्ट' सुविधा, अड़चनें कम करती है और कन्वर्ज़न फ़नल को बेहतर बनाती है.
एम्बेड किया गया कनेक्ट एक छोटी JavaScript लाइब्रेरी है जो किसी उपयोगकर्ता के लिए सबसे सही तरीके से शुरुआत करने का तरीका तय करती है. साथ ही, उसे पसंद के मुताबिक बनाए गए AdSense साइन अप फ़्लो के बारे में भी बताती है, जिससे उन्हें विज्ञापन दिखाने के लिए सभी ज़रूरी चरणों को पूरा करने में मदद मिलती है. यह कई स्थितियों को मैनेज करता है. जैसे, यह पता लगाना कि उपयोगकर्ता के पास AdSense खाता है या नहीं, उन्होंने AdSense के नियमों और शर्तों पर हस्ताक्षर किए हैं या नहीं, आपकी प्लैटफ़ॉर्म साइट को अपने AdSense खाते में जोड़ा है या नहीं, और साइट का स्टेटस "तैयार है" है या नहीं.
Google की तरफ़ से मैनेज किए जाने वाले UX विकल्प के साथ एम्बेड किए गए Connect से, उपयोगकर्ता को खाते और साइट की स्थिति दिखाने के लिए इस्तेमाल किया जाने वाला UX भी मैनेज किया जा सकता है. इससे उपयोगकर्ता को किसी भी संभावित समस्या को हल करने के लिए, AdSense में सही जगह पर ले जाने में मदद मिलती है.
डेवलपर को बेहतर अनुभव देने के लिए, लाइब्रेरी आपके प्लैटफ़ॉर्म पर कॉलबैक भी जारी करती है. इसमें उपयोगकर्ता का AdSense पब्लिशर आईडी होता है, जो सही तरीके से विज्ञापन दिखाने के लिए ज़रूरी है.
एम्बेड किया गया Connect, उपयोगकर्ता अनुभव के लिए दो विकल्प देता है:
- वह UX जिसे Google मैनेज करता है. 'एम्बेड किए गए कनेक्ट' विजेट का इस्तेमाल करें, जो पूरा UX मैनेज करता है. विजेट, उपयोगकर्ताओं को साइन अप के दौरान मदद करेगा. साथ ही, विजेट में उपयोगकर्ता को उनके खाते और साइट की स्थिति की जानकारी दिखाएगा. इस विकल्प से, AdSense पब्लिशर आईडी के साथ एक कॉलबैक मिलता है. यह आईडी तब ट्रिगर होता है, जब उपयोगकर्ता पहली बार किसी AdSense खाते को कनेक्ट करता है.
- पसंद के मुताबिक उपयोगकर्ता अनुभव. एम्बेड किए गए कनेक्ट
adsenseEmbeddedConnect.connect(...)तरीके का इस्तेमाल करें. यह तरीका नई विंडो में साइन-अप फ़्लो को ट्रिगर करता है. यह विकल्प, AdSense पब्लिशर आईडी और ऐक्सेस टोकन के साथ एक कॉलबैक देता है. इसका इस्तेमाल, AdSense Management API का इस्तेमाल करके, AdSense खाते से ज़्यादा जानकारी पाने के लिए किया जा सकता है. इस विकल्प के लिए आपको UX खुद डिज़ाइन करना होगा.
एम्बेड किया गया कनेक्ट लागू करना
एम्बेड किए गए कनेक्ट का इस्तेमाल करने के लिए, आपको यह तरीका अपनाना होगा:
- Google Cloud में प्रोजेक्ट बनाना (या किसी मौजूदा प्रोजेक्ट का इस्तेमाल करना)
- OAuth क्लाइंट आईडी बनाना
- एम्बेड किए गए कनेक्ट के साथ इस्तेमाल करने के लिए, अपने OAuth क्लाइंट आईडी को कॉन्फ़िगर करना
- (ज़रूरी नहीं) उस स्क्रीन को पसंद के मुताबिक बनाएं जहां OAuth के लिए सहमति दी जाती है
- पेज पर एम्बेड की गई कनेक्ट JavaScript लाइब्रेरी जोड़ना
- एम्बेड किए गए कनेक्ट कोड को लागू करना
पहला चरण: नया Google Cloud प्रोजेक्ट बनाना (या किसी मौजूदा प्रोजेक्ट का इस्तेमाल करना)
अगर आपके पास कोई मौजूदा Google Cloud प्रोजेक्ट है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो नया प्रोजेक्ट सेट अप करने के लिए यह गाइड देखें:
https://cloud.google.com/resource-manager/docs/creating-managing-projects
दूसरा चरण: OAuth क्लाइंट आईडी बनाना
Google Cloud प्रोजेक्ट में एक डिफ़ॉल्ट OAuth क्लाइंट आईडी होगा, जिसका इस्तेमाल किया जा सकता है. इसे ढूंढने के लिए, एपीआई और सेवाएं > क्रेडेंशियल पर जाएं.
अगर आपको एक खास OAuth क्लाइंट आईडी बनाना है, तो यह तरीका अपनाएं:
- एपीआई और सेवाएं > क्रेडेंशियल पर जाएं
- पेज पर सबसे ऊपर मौजूद, "+ क्रेडेंशियल बनाएं" पर क्लिक करें. इसके बाद, OAuth क्लाइंट आईडी चुनें
- आपके ऐप्लिकेशन का टाइप "वेब ऐप्लिकेशन" होगा
- अपने क्लाइंट आईडी को कोई नाम दें और "बनाएं" पर क्लिक करें
तीसरा चरण: एम्बेड किए गए कनेक्ट के साथ इस्तेमाल करने के लिए, अपने OAuth क्लाइंट आईडी को कॉन्फ़िगर करना
एम्बेड किए गए कनेक्ट इंटिग्रेशन के लिए, आपको किस OAuth क्लाइंट आईडी का इस्तेमाल करना है, यह तय करने के बाद आपको उसे कॉन्फ़िगर करना होगा.
यह तरीक़ा अपनाएँ:
- क्रेडेंशियल पेज से, उस क्लाइंट आईडी के पेंसिल आइकॉन पर क्लिक करें जिसे आपको कॉन्फ़िगर करना है
- अनुमति वाले JavaScript ऑरिजिन सेक्शन में, ऐसे यूआरआई जोड़ें जिन्हें आपके क्लाइंट आईडी का इस्तेमाल करके अनुरोध जारी करने की अनुमति है. आम तौर पर, आपके डेवलपमेंट सर्वर और लोकल एनवायरमेंट के लिए यूआरआई जोड़े जाते हैं (उदाहरण के लिए, https://dev.example.com और http://localhost:5000). इसके अलावा, आपको अपने प्रोडक्शन एनवायरमेंट (उदाहरण के लिए, https://example.com) के लिए एक यूआरआई जोड़ना होगा
(ज़रूरी नहीं) चौथा चरण: ऐसी स्क्रीन को पसंद के मुताबिक बनाना जहां OAuth के लिए सहमति दी जाती है
OAuth के लिए सहमति वाली स्क्रीन की जगह पर, आपके क्लाइंट आईडी को उसके AdSense डेटा का ऐक्सेस दिया जाता है. यह, एम्बेड किया गया कनेक्ट कैसे काम करता है, इसका एक ज़रूरी हिस्सा है. अपने प्लैटफ़ॉर्म का नाम, लोगो वगैरह शामिल करने के लिए, इस स्क्रीन को अपनी पसंद के मुताबिक बनाया जा सकता है. कस्टमाइज़ेशन को कॉन्फ़िगर करने के लिए, OAuth की सहमति वाली स्क्रीन पेज पर जाएं. पृष्ठ में सबसे ऊपर "ऐप्लिकेशन में बदलाव करें" पर क्लिक करें और विज़ार्ड का पालन करें.
पांचवां चरण: एम्बेड की गई कनेक्ट JavaScript लाइब्रेरी को लागू करना
इस लाइब्रेरी में, एम्बेड किए गए कनेक्ट को शुरू करने के लिए इस्तेमाल किए जाने वाले अलग-अलग तरीके होते हैं. साथ ही, इसमें आपको ऐसे कॉलबैक दिए जाते हैं जो उपयोगकर्ता के पब्लिशर आईडी को वापस पाने और उसे भूलने के लिए ज़रूरी हैं. इसे पेज के शीर्षक की ओर लागू करें.
Google से मैनेज किए जाने वाले UX के लिए:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}" async defer></script>
पसंद के मुताबिक उपयोगकर्ता अनुभव के लिए:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
पक्का करें कि आपने JavaScript फ़ंक्शन के ऐसे नाम को लागू किया हो जो load पैरामीटर में पास किया गया हो. जब adsenseEmbeddedConnect एपीआई इस्तेमाल के लिए तैयार हो जाएगा, तब फ़ंक्शन को कॉल किया जाएगा.
स्क्रिप्ट टैग एट्रिब्यूट
ऊपर दिए गए उदाहरण में ध्यान दें कि स्क्रिप्ट टैग पर कई एट्रिब्यूट सेट किए गए हैं. नीचे हर एट्रिब्यूट के बारे में बताया गया है.
src: वह यूआरएल जहां से एम्बेड किए गए Connect एपीआई को लोड किया जाता है. यूआरएल में कई क्वेरी पैरामीटर हो सकते हैं, जिनके बारे में नीचे बताया गया है.async: ब्राउज़र से स्क्रिप्ट को एसिंक्रोनस रूप से डाउनलोड और एक्ज़ीक्यूट करने के लिए कहता है. स्क्रिप्ट चलाए जाने पर, यहloadपैरामीटर का इस्तेमाल करके तय किए गए फ़ंक्शन को कॉल करेगी.defer: इस नीति को सेट करने पर, ब्राउज़र, पेज को पार्स करने के साथ-साथ एम्बेड किया गया कनेक्ट JavaScript डाउनलोड करेगा. साथ ही, पेज को पार्स करने के बाद उसे एक्ज़ीक्यूट करेगा.
src पैरामीटर
src एट्रिब्यूट में कई क्वेरी पैरामीटर शामिल होते हैं, जिनकी ज़रूरत एम्बेड किए गए कनेक्ट को शुरू करने के लिए होती है. नीचे हर पैरामीटर के इस्तेमाल के बारे में जानकारी दी गई है.
load, ग्लोबल JavaScript फ़ंक्शन का नाम है. एपीआई के पूरी तरह लोड होने पर इसे कॉल किया जाता है. इस फ़ंक्शन के लिए कोई भी नाम चुना जा सकता है.hlहर तरह के स्थानीय भाषा के मुताबिक इस्तेमाल की जाने वाली भाषा तय करता है. इसमें साइन अप पॉप-अप का टेक्स्ट भी शामिल है (उदाहरण के लिए). यह एक वैकल्पिक क्वेरी पैरामीटर है. अगर यह मौजूद नहीं है या AdSense की भाषा के साथ काम नहीं करता है, तो विजेट, डिफ़ॉल्ट रूप से अमेरिकन इंग्लिश में दिखेगा. AdSense में उपलब्ध भाषाएं देखें.hlपैरामीटर की वैल्यू, BCP 47 के मुताबिक होनी चाहिए. उदाहरण के लिए, ब्रिटिश इंग्लिश उपयोगकर्ताओं के लिए, स्ट्रिंगen-GBहोगी.headless=trueबताता है कि एम्बेड किए गए कनेक्ट का इस्तेमाल, Google से मैनेज किए जाने वाले UX के बजाय, कस्टम UX विकल्प के साथ किया जाएगा.
अब आपने Google से मैनेज किए जाने वाले UX और कस्टम UX में से किसी एक को चुन लिया है. इसलिए, नीचे दिए गए हर तरीके के कोड के उदाहरण देखें.
छठा चरण: एम्बेड किया गया कनेक्ट कोड लागू करना
जैसा कि ऊपर बताया गया है, उपयोगकर्ता अनुभव के लिए दो विकल्प हैं:
अपने प्लैटफ़ॉर्म की ज़रूरतों के मुताबिक, लागू करने का सबसे अच्छा विकल्प चुनें.
उपयोगकर्ता अनुभव जिसे Google मैनेज करता है
यह तरीका अपनाएं, ताकि Google उस विजेट को रेंडर कर सके जो साइन-अप फ़्लो को ट्रिगर करता है. साथ ही, उपयोगकर्ता को उसके खाते और साइट की स्थिति के बारे में काम की जानकारी दिखाता है.
एम्बेड किए गए कनेक्ट कोड के दो कॉम्पोनेंट होते हैं. पहला विकल्प खाली <div> होता है, जो यह बताता है कि एम्बेड किया गया कनेक्ट, साइन अप विजेट को कहां रेंडर करेगा. और दूसरा कोड है, जहां कॉन्फ़िगरेशन सेट किए जाते हैं और कॉलबैक मैनेज किए जाते हैं.
वह एचटीएमएल एलिमेंट जहां एम्बेड किया गया Connect विजेट रेंडर करता है
इस एचटीएमएल को पेज पर वहां रखें जहां आप एम्बेड किया गया 'कनेक्ट' विजेट को रेंडर करना चाहते हैं:
<div id="adsenseEmbeddedConnect"></div>
एम्बेड किया गया कनेक्ट कोड
इसके बाद, एम्बेड की गई कनेक्ट लाइब्रेरी के नीचे, लेकिन div एलिमेंट के ऊपर, कॉन्फ़िगरेशन कोड डालें:
function initEmbeddedConnect() {
adsenseEmbeddedConnect.init({
// <div> to show the Embedded Connect widget in
'divId': 'adsenseEmbeddedConnect',
// OAuth client ID from step 2
'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
// Access token from the Google Identity APIs, see
// https://developers.google.com/identity/oauth2/web/guides/use-token-model
// Use the following scope when requesting the access token:
// https://www.googleapis.com/auth/adsense.readonly
'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',
// Login hint, an optional parameter which suppresses the account
// chooser and either pre-fills the email box on the sign-in form,
// or selects the proper session (if the user is using multiple
// sign-in)
'loginHint': 'user@example.com',
// Child site (which is added to AdSense as part of the Embedded Connect flow)
// Consult with your account manager to ensure this value is set correctly for your platform
'siteUrl': 'site.example.com',
// Optional parameter, the publisher ID of the user.
// When set, the Embedded Connect widget will display the state of the user's AdSense account.
// When unset, the Embedded Connect widget will show the default state which triggers the connection flow.
'publisherId': "pub-0000000000000000",
'onConnect': function(pid) {
// Your custom code to send the publisher ID (pid) to your server for it to be saved.
// The onConnect function is called when the user has completed all the onboarding steps
},
'onDisconnect': function() {
// Your custom code to forget the publisher ID.
// This onDisconnect function is called when the user has clicked the "Disconnect" button in the Embedded Connect widget
},
});
};
स्क्रीनशॉट
एम्बेड किए गए कनेक्ट विजेट की चार मुख्य स्थितियां होती हैं:
- (डिफ़ॉल्ट) AdSense से कनेक्ट करें
- AdSense से कनेक्ट करना
- साइट की जानकारी की समीक्षा की जा रही है
- समस्याएं मिलीं
1. (डिफ़ॉल्ट) AdSense से कनेक्ट करें
यह डिफ़ॉल्ट स्थिति है. यह तब दिखती है, जब एम्बेड किए गए कनेक्ट कोड में publisherId फ़ील्ड मौजूद न हो. यह, कनेक्शन फ़्लो (पॉप-अप) शुरू करता है. उपयोगकर्ता के फ़्लो के पूरा होने पर, onConnect कॉलबैक ट्रिगर करेगा.
2. AdSense से कनेक्ट करना
यह स्थिति उपयोगकर्ताओं को तब दिखती है, जब वे कनेक्शन फ़्लो शुरू करते हैं और पॉप-अप मौजूद होता है. पॉप-अप के बंद होने या फ़्लो पूरा होने पर, यह स्टेटस एक दूसरी स्थिति में बदल जाता है.
3. साइट की जानकारी की समीक्षा की जा रही है
AdSense में नई साइट सबमिट करने के बाद, उसकी समीक्षा की प्रक्रिया पूरी होगी. इस दौरान विज्ञापन नहीं दिखाए जा सकते.
समीक्षा का एक अहम हिस्सा मालिकाना हक की जांच है. इसे कई तरीकों से पास किया जा सकता है. इनमें ये तरीके शामिल हैं:
- ads.txt फ़ाइल में आपका पैरंट पब्लिशर आईडी मौजूद है
- ads.txt फ़ाइल में चाइल्ड खाते का पब्लिशर आईडी मौजूद है
- google-adsense-child-account मेटा टैग उपयोगकर्ता की साइट पर मौजूद है
सबसे अच्छा तरीका आपके यूआरएल के स्ट्रक्चर और कुछ अन्य चीज़ों पर निर्भर करेगा. अपने प्लैटफ़ॉर्म को इस्तेमाल करने का सबसे सही तरीका जानने के लिए, कृपया अपने खाता मैनेजर से सलाह लें.
4. समस्याएं मिलीं
अगर उपयोगकर्ता के खाते या साइट में कोई ऐसी समस्या है जिसे ठीक करने की ज़रूरत है, तो यह स्थिति उपयोगकर्ताओं को दिखाई जाएगी.
पसंद के मुताबिक उपयोगकर्ता अनुभव
अगर आपको उपयोगकर्ता अनुभव को खुद मैनेज करना है, तो यह तरीका अपनाएं. साथ ही, साइन अप के तरीके को मैन्युअल तरीके से ट्रिगर करने के लिए एपीआई कॉल का इस्तेमाल करें.
एम्बेड की गई JavaScript लाइब्रेरी
कस्टम UX विकल्प का इस्तेमाल करने के लिए, headless=true पैरामीटर को src एट्रिब्यूट में सेट करना ज़रूरी है. उदाहरण के लिए:
<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>
'कनेक्ट और डिसकनेक्ट करें' बटन उपलब्ध कराना
जब adsenseEmbeddedConnect API इस्तेमाल के लिए तैयार हो जाए (जैसा कि load पैरामीटर में पास किए गए JavaScript फ़ंक्शन से पुष्टि हुई है), तो AdSense से कनेक्ट और डिसकनेक्ट करने की जानकारी दें. उदाहरण के लिए, दो बटन देकर:
<button onclick="connectAdSense()">Connect to AdSense</button>
<button onclick="disconnectAdSense()">Disconnect account</button>
आपने अपने उपयोगकर्ता का पब्लिशर आईडी सेव किया है या नहीं, इसके आधार पर आपके पास यह चुनने का विकल्प होता है कि कौनसा बटन दिखाया जाए.
कनेक्ट करने के लिए कोड
function connectAdSense(){
adsenseEmbeddedConnect.connect({
// OAuth client ID
'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
// Access token from the Google Identity APIs, see
// https://developers.google.com/identity/oauth2/web/guides/use-token-model
// Use the following scope when requesting the access token:
// https://www.googleapis.com/auth/adsense.readonly
'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',
// Child site (which is added to AdSense as part of the Embedded Connect flow)
// Consult with your account manager to ensure this value is set correctly for your platform
'siteUrl': 'site.example.com',
'onConnect': function(response) {
// Your custom code to send the publisher ID (response[publisherId]) to your server for it to be saved.
// The onConnect function is called when the user has completed all the onboarding steps
// Note that you'll additionally receive an OAuth2 access token (response[token]) which can be used with the AdSense Management API to perform other operations
},
'onCancel': function() {
// This callback is called if the user closes the popup window without completing the sign-up flow
}
});
}
डिसकनेक्ट कोड
function disconnectAdSense(){
// Your custom code to forget the publisherId from your server.
}