एम्बेड किया गया कनेक्ट

जब लोग AdSense को आपके प्लैटफ़ॉर्म से जोड़ने की कोशिश करते हैं, तब 'एम्बेड किया गया कनेक्ट' सुविधा, कन्वर्ज़न को कम करती है और कन्वर्ज़न फ़नल को बेहतर बनाती है.

एम्बेडेड कनेक्ट एक छोटी JavaScript लाइब्रेरी है, जो किसी उपयोगकर्ता के लिए सबसे सही शुरुआत की जगह तय करने के साथ-साथ उसे पसंद के मुताबिक बनाए गए AdSense साइन-अप फ़्लो के ज़रिए भी गाइड करती है, जिससे उन्हें विज्ञापन दिखाने के लिए सभी ज़रूरी चरणों को पूरा करने में मदद मिलती है. यह कई तरह की स्थितियों को मैनेज करता है. जैसे, यह पता लगाना कि उपयोगकर्ता के पास AdSense खाता है या नहीं, उसने AdSense के नियमों और शर्तों पर हस्ताक्षर किए हैं या नहीं, आपकी प्लैटफ़ॉर्म साइट को अपने AdSense खाते में जोड़ा है या नहीं, और साइट का स्टेटस "तैयार है" है या नहीं.

Google के मैनेज किए गए UX विकल्प के साथ एम्बेड किए गए Connect टूल से, उपयोगकर्ता को खाते और साइट का स्टेटस दिखाने वाले उपयोगकर्ता अनुभव को भी मैनेज किया जा सकता है. इससे लोगों को संभावित समस्याओं को हल करने के लिए, AdSense में सही जगह चुनने में भी मदद मिलती है.

डेवलपर के अनुभव को बेहतर बनाने के लिए, लाइब्रेरी आपके प्लैटफ़ॉर्म पर कॉलबैक भी जारी करती है. इसमें उपयोगकर्ता का AdSense पब्लिशर आईडी होता है. विज्ञापन दिखाने की सुविधा को सही तरीके से सेट अप करने के लिए, यह आईडी ज़रूरी है.

एम्बेड किया गया 'कनेक्ट करें' सुविधा में, उपयोगकर्ता अनुभव के लिए दो विकल्प मिलते हैं:

• उपयोगकर्ता अनुभव को Google मैनेज करता है. 'एम्बेड किए गए कनेक्ट' विजेट का इस्तेमाल करें, जो पूरा उपयोगकर्ता अनुभव मैनेज करता है. विजेट, साइन अप फ़्लो के ज़रिए उपयोगकर्ताओं की मदद करेगा और विजेट में उनके खाते और साइट की स्थिति की जानकारी भी दिखाएगा. यह विकल्प, AdSense पब्लिशर आईडी के साथ एक कॉलबैक देता है, जो उपयोगकर्ता के पहली बार AdSense खाते को कनेक्ट करने पर ट्रिगर होता है.
• पसंद के मुताबिक उपयोगकर्ता अनुभव. एम्बेड किए गए कनेक्ट adsenseEmbeddedConnect.connect(...) तरीके का इस्तेमाल करें. यह तरीका नई विंडो में साइन-अप फ़्लो को ट्रिगर करता है. यह विकल्प AdSense पब्लिशर आईडी और ऐक्सेस टोकन के साथ एक कॉलबैक देता है. इसका इस्तेमाल, AdSense Management API का इस्तेमाल करके AdSense खाते से ज़्यादा जानकारी पाने के लिए किया जा सकता है. इस विकल्प के लिए ज़रूरी है कि आप खुद ही UX डिज़ाइन करें.

एम्बेड किए गए कनेक्ट को लागू करना

एम्बेड किए गए कनेक्ट का इस्तेमाल करने के लिए, आपको यह तरीका अपनाना होगा:

1. Google Cloud में प्रोजेक्ट बनाना (या पहले से मौजूद प्रोजेक्ट का इस्तेमाल करना)
2. OAuth क्लाइंट आईडी बनाना
3. एम्बेड किए गए कनेक्ट के साथ इस्तेमाल करने के लिए, अपने OAuth क्लाइंट आईडी को कॉन्फ़िगर करना
4. (ज़रूरी नहीं) OAuth के लिए सहमति देने वाली स्क्रीन को पसंद के मुताबिक बनाना
5. पेज पर, एम्बेड की गई Connect JavaScript लाइब्रेरी जोड़ें
6. एम्बेड किए गए कनेक्ट कोड को लागू करना

पहला चरण: नया 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 की सहमति वाली स्क्रीन पेज पर जाएं. पेज में सबसे ऊपर "ऐप्लिकेशन में बदलाव करें" पर क्लिक करें और विज़ार्ड का पालन करें.

पांचवां चरण: एम्बेड की गई Connect 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>

पक्का करें कि आपने load पैरामीटर में भेजे गए JavaScript फ़ंक्शन के नाम को लागू करने की सुविधा दी हो. जब adsenseEmbeddedConnect एपीआई इस्तेमाल के लिए तैयार होगा, तब फ़ंक्शन को कॉल किया जाएगा.

स्क्रिप्ट टैग एट्रिब्यूट

ऊपर दिए गए उदाहरण में ध्यान दें कि स्क्रिप्ट टैग पर कई एट्रिब्यूट सेट हैं. नीचे हर एट्रिब्यूट के बारे में जानकारी दी गई है.

• src: वह यूआरएल जहां से एम्बेड किया गया Connect एपीआई लोड किया जाता है. यूआरएल में कई क्वेरी पैरामीटर हो सकते हैं, जिनके बारे में नीचे बताया गया है.
• async: ब्राउज़र को एसिंक्रोनस तरीके से स्क्रिप्ट डाउनलोड और एक्ज़ीक्यूट करने के लिए कहता है. स्क्रिप्ट चलाने पर, वह load पैरामीटर का इस्तेमाल करके बताए गए फ़ंक्शन को कॉल करेगी.
• defer: अगर इस नीति को सेट किया जाता है, तो ब्राउज़र, पेज को पार्स करने के साथ-साथ एम्बेड किए गए Connect JavaScript को डाउनलोड करेगा. साथ ही, पेज को पार्स करने के बाद, ब्राउज़र उसे एक्ज़ीक्यूट करेगा.

src पैरामीटर

src एट्रिब्यूट में कई क्वेरी पैरामीटर होते हैं. एम्बेड किए गए कनेक्ट को शुरू करने के लिए, इन क्वेरी पैरामीटर की ज़रूरत होती है. हर पैरामीटर के इस्तेमाल के बारे में नीचे जानकारी देखें.

• load, ग्लोबल JavaScript फ़ंक्शन का नाम है. इसे एपीआई के पूरी तरह लोड होने पर कॉल किया जाता है. इस फ़ंक्शन के लिए कोई भी नाम चुना जा सकता है.
• hl सभी स्थानीय भाषा के अनुसार इस्तेमाल की जाने वाली भाषा के बारे में बताता है. इसमें साइन-अप पॉप-अप का टेक्स्ट भी शामिल है. यह एक वैकल्पिक क्वेरी पैरामीटर है. अगर यह मौजूद नहीं है या AdSense में इस्तेमाल की गई भाषा का इस्तेमाल नहीं किया जाता, तो विजेट, डिफ़ॉल्ट रूप से अमेरिकन इंग्लिश में दिखेगा. AdSense में काम करने वाली भाषाएं देखें. hl पैरामीटर की वैल्यू, BCP 47 के मुताबिक होनी चाहिए. उदाहरण के लिए, ब्रिटिश इंग्लिश उपयोगकर्ताओं के लिए, स्ट्रिंग en-GB होगी.
• headless=true से पता चलता है कि एम्बेड किए गए कनेक्ट का इस्तेमाल, Google से मैनेज किए जाने वाले UX के बजाय, कस्टम UX विकल्प के साथ किया जाएगा.

अब आपने Google के ज़रिए मैनेज किए जाने वाले UX और कस्टम UX में से किसी एक को चुना है. इसलिए, नीचे दिए गए हर तरीके के लिए कोड के उदाहरण देखें.

छठा चरण: एम्बेड किए गए कनेक्ट कोड को लागू करना

जैसा कि ऊपर बताया गया है, उपयोगकर्ता अनुभव के लिए दो विकल्प हैं:

• उपयोगकर्ता अनुभव को Google मैनेज करता है
• पसंद के मुताबिक उपयोगकर्ता अनुभव

लागू करने का वह विकल्प चुनें जो आपके प्लैटफ़ॉर्म की ज़रूरतों के मुताबिक सबसे सही हो.

उपयोगकर्ता अनुभव जिसे Google मैनेज करता है

यहां दिया गया तरीका अपनाएं, ताकि Google उस विजेट को रेंडर कर सके जो साइन-अप फ़्लो को ट्रिगर करता है. साथ ही, उपयोगकर्ता को उसके खाते और साइट की स्थिति के बारे में काम की जानकारी दिखाता है.

एम्बेड किए गए कनेक्ट कोड के दो कॉम्पोनेंट होते हैं. पहला वाला एक खाली <div> है, जो बताता है कि एम्बेड किए गए कनेक्ट को साइन-अप विजेट कहां रेंडर करना चाहिए. और दूसरा कोड है, जहां कॉन्फ़िगरेशन सेट किए जाते हैं और कॉलबैक मैनेज किए जाते हैं.

वह एचटीएमएल एलिमेंट जहां एम्बेड किया गया Connect विजेट रेंडर होता है

इस एचटीएमएल को पेज पर वहां रखें जहां आप एम्बेड किए गए कनेक्ट विजेट को रेंडर करना चाहते हैं:

<div id="adsenseEmbeddedConnect"></div>

एम्बेड किया गया कनेक्ट कोड

इसके बाद, एम्बेड की गई Connect लाइब्रेरी के नीचे, लेकिन 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
        },
    });
};

स्क्रीनशॉट

'एम्बेड किए गए कनेक्ट' विजेट में चार मुख्य स्थितियां होती हैं:

1. (डिफ़ॉल्ट) AdSense से कनेक्ट करें
2. AdSense से कनेक्ट किया जा रहा है
3. साइट की जानकारी की समीक्षा की जा रही है
4. समस्याएं मिलीं

1. (डिफ़ॉल्ट) AdSense से कनेक्ट करें

यह डिफ़ॉल्ट स्थिति है. यह उपयोगकर्ताओं को तब दिखाई जाती है, जब एम्बेड किए गए कनेक्ट कोड में publisherId फ़ील्ड मौजूद न हो. यह कनेक्शन फ़्लो (पॉप-अप) शुरू करता है. उपयोगकर्ता के फ़्लो के पूरा होने पर, onConnect कॉलबैक ट्रिगर करेगा.

2. AdSense से कनेक्ट किया जा रहा है

यह स्थिति उपयोगकर्ताओं को तब दिखती है, जब वे कनेक्शन फ़्लो शुरू करते हैं और पॉप-अप मौजूद होता है. पॉप-अप बंद होने या फ़्लो पूरा होने पर, यह स्टेटस किसी दूसरी स्थिति में बदल जाता है.

3. साइट की जानकारी की समीक्षा की जा रही है

AdSense खाते में नई साइट सबमिट करने के बाद, उसकी समीक्षा की प्रोसेस होगी. इस दौरान विज्ञापन नहीं दिखाए जा सकते.

मालिकाना हक की जांच करना, समीक्षा का एक अहम हिस्सा है. इसे कई तरीकों से पास किया जा सकता है. इनमें ये शामिल हैं:

• ads.txt फ़ाइल में चाइल्ड खाते का पब्लिशर आईडी मौजूद है
• चाइल्ड खाते का पब्लिशर आईडी, उपयोगकर्ता की साइट पर किसी विज्ञापन टैग में मौजूद हो
• google-adsense-child-account मेटा टैग उपयोगकर्ता की साइट पर मौजूद है. सबसे अच्छे नतीजे पाने के लिए, पक्का करें कि वह उपयोगकर्ता की साइट के होम पेज पर मौजूद हो.

सबसे अच्छा तरीका आपके यूआरएल के स्ट्रक्चर और कुछ अन्य चीज़ों पर निर्भर करेगा. अपने प्लैटफ़ॉर्म का इस्तेमाल करने के सबसे सही तरीके जानने के लिए, कृपया अपने खाता मैनेजर से सलाह लें.

4. समस्याएं मिलीं

अगर उपयोगकर्ता के खाते या साइट में कोई ऐसी समस्या है जिसे ठीक करने की ज़रूरत है, तो यह स्थिति उपयोगकर्ताओं को दिखेगी.

पसंद के मुताबिक उपयोगकर्ता अनुभव

अगर आपको UX को खुद मैनेज करना है, तो यह तरीका अपनाएं. साथ ही, साइन अप के तरीके को मैन्युअल तरीके से ट्रिगर करने के लिए, एपीआई कॉल का इस्तेमाल करें.

एम्बेड की गई 'कनेक्ट 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.
}