Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

एएमपी के लिए टैग सेटअप करना

Accelerated Mobile Pages (एएमपी) प्रोजेक्ट, एक ओपन-सोर्स वेब प्लैटफ़ॉर्म है. इससे आपके वेब कॉन्टेंट की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलती है. AMP में, Google टैग और Google Tag Manager के लिए पहले से मौजूद सहायता शामिल है. इस गाइड में, एएमपी पेजों के लिए Google Analytics को सेट अप करने का तरीका बताया गया है.

इंस्टॉल करना

Google टैग की मदद से, एएमपी पेजों पर Google Analytics, Google Ads, और Google के अन्य प्रॉडक्ट इंस्टॉल किए जा सकते हैं. Google Tag Manager, AMP कंटेनर सेट अप करता है. साथ ही, आपको Tag Manager इंटरफ़ेस से बेहतर कॉन्फ़िगरेशन बनाने और तीसरे पक्ष के टैग डिप्लॉय करने की सुविधा देता है.

यहां दिए गए बटन में से, अपनी पसंद का प्लैटफ़ॉर्म चुनें:

Google टैग

gtag.js का एएमपी वर्शन, amp-analytics फ़्रेमवर्क का इस्तेमाल करता है. इससे आपको अपनी एएमपी वेबसाइट पर आंकड़ों को मेज़र करने की सुविधा मिलती है. gtag.js को लागू करने के एक ही तरीके से, AMP पेजों से Google Ads, Google Analytics, और Google के अन्य प्रॉडक्ट को डेटा भेजा जा सकता है.

इंस्टॉल करना

किसी एएमपी पेज पर gtag.js को कॉन्फ़िगर करने के लिए, पहले पक्का करें कि आपने पेज पर मौजूद <head> टैग में amp-analytics कॉम्पोनेंट शामिल किया हो:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

इसके बाद, अपने एएमपी पेज पर Google टैग को JSON कॉम्पोनेंट के तौर पर जोड़ें. इसके लिए, पेज पर मौजूद <body> टैग का इस्तेमाल करें. <TARGET_ID> को उन प्रॉडक्ट (जैसे, Google Ads, Google Analytics) के टैग आईडी से बदलें जिन्हें आपको डेटा भेजना है:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Google टैग में कई प्रॉडक्ट कॉन्फ़िगर करने के लिए, आपको उस प्रॉडक्ट का पूरा टैग इंस्टॉल करने की ज़रूरत नहीं है. आपको सिर्फ़ डेस्टिनेशन आईडी को अलग config कमांड में जोड़ना होगा.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

ध्यान दें: Google टैग के आईडी बदले जा सकते हैं. अगर आपने दूसरा आईडी पहले ही जोड़ दिया है, तो एक आईडी के लिए आपको अतिरिक्त config लाइन की ज़रूरत नहीं है. उदाहरण के लिए, अगर आपने Analytics के लिए पहले से ही आईडी जोड़ दिया है (यानी कि "G-" से शुरू होने वाला आईडी), तो आपको Ads के लिए आईडी जोड़ने की ज़रूरत नहीं है (यानी कि "AW-" से शुरू होने वाला आईडी).

ज़्यादा जानकारी के लिए, amp-analytics दस्तावेज़ देखें.

इवेंट ट्रिगर

अपने प्रॉडक्ट के लिए कोई खास डेटा भेजने के लिए, क्लिक जैसे इवेंट के आधार पर ट्रिगर कॉन्फ़िगर करें. एएमपी में gtag.js के लिए ट्रिगर, amp-analytics ट्रिगर कॉन्फ़िगरेशन के JSON पैटर्न के मुताबिक ही काम करते हैं.

इस उदाहरण में, Google Analytics को click इवेंट भेजने का तरीका बताया गया है. selector वैल्यू एक सीएसएस सिलेक्टर है. इससे यह तय किया जा सकता है कि किस एलिमेंट को टारगेट किया गया है. on वैल्यू से इवेंट का टाइप तय होता है. इस मामले में, यह click इवेंट है. vars सेक्शन में, event_name में इवेंट का टाइप बताएं. साथ ही, ज़रूरत के मुताबिक अतिरिक्त पैरामीटर जोड़ें.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

सुझाए गए इवेंट के अलावा, अपने कस्टम इवेंट भी तय किए जा सकते हैं.

Google Analytics की मदद से कस्टम डाइमेंशन और पैरामीटर भेजना

gtag.js का इस्तेमाल करके, एएमपी पेजों से Google Analytics में कस्टम डाइमेंशन और मेट्रिक भेजने के लिए, <amp-analytics> JSON में ट्रिगर कॉन्फ़िगरेशन के अंदर मौजूद extraUrlParams प्रॉपर्टी का इस्तेमाल किया जा सकता है. Google Analytics में मौजूद कस्टम पैरामीटर, इवेंट पैरामीटर के तौर पर भेजे जाते हैं.

स्ट्रिंग वैल्यू वाले इवेंट पैरामीटर के लिए, ep. प्रीफ़िक्स का इस्तेमाल करें.
संख्या वाली वैल्यू वाले इवेंट पैरामीटर के लिए, epn. प्रीफ़िक्स का इस्तेमाल करें.

डेटा भेजने से पहले, पक्का करें कि ये कस्टम डाइमेंशन और मेट्रिक, आपकी Google Analytics प्रॉपर्टी में रजिस्टर हों.

उदाहरण: पेज व्यू के साथ कस्टम पैरामीटर

यह कॉन्फ़िगरेशन, शुरुआती पेज व्यू के साथ एक कस्टम डाइमेंशन my_custom_dimension और एक कस्टम मेट्रिक my_page_score भेजता है:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

उदाहरण: क्लिक इवेंट के साथ कस्टम पैरामीटर

इस कॉन्फ़िगरेशन से, myButton आईडी वाले एलिमेंट पर क्लिक करने पर कस्टम पैरामीटर भेजे जाते हैं:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

डोमेन लिंक करना

डोमेन लिंकर की मदद से, अलग-अलग डोमेन पर मौजूद दो या इससे ज़्यादा मिलती-जुलती साइटों को एक ही साइट के तौर पर मेज़र किया जा सकता है. लिंक किए जाने वाले डोमेन तय करने के लिए, "linker": { "domains": [...] } का इस्तेमाल करें:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

एएमपी कैश से अपने कैननिकल डोमेन को लिंक करने की सुविधा डिफ़ॉल्ट रूप से चालू होती है. डोमेन ट्रैफ़िक को लिंक करने की सुविधा बंद करने के लिए, "linker": "false" पैरामीटर में "linker": "false" जोड़ें:config

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

पूरा उदाहरण

इस कोड के उदाहरण में, एएमपी पेज का पूरी तरह से काम करने वाला डेमो दिखाया गया है. यह एक एएमपी पेज बनाता है और बटन पर क्लिक करने पर, Google Analytics को button-click इवेंट भेजता है. <TAG_ID> की जगह मान्य टैग आईडी डालें:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

समस्या का हल

टैग करने के सेटअप की पुष्टि करने के लिए, validator.amp.dev का इस्तेमाल करें. इसके अलावा, मैन्युअल तरीके से यह पक्का किया जा सकता है कि cid वैल्यू सभी डोमेन में एक जैसी हो. इसके लिए, यह तरीका अपनाएं:

कुकी मिटाना या गुप्त मोड का इस्तेमाल करना न भूलें.
अगर cid, Google Analytics कुकी में नहीं मिलता है, तो इसे आपके वेब ब्राउज़र के नेटवर्क टैब में भी देखा जा सकता है. collect request के लिए खोजें. साथ ही, पेलोड में cid वैल्यू होनी चाहिए.
Google CDN से क्लाइंट की वेबसाइट पर जाने के बाद, cid और gclid वैल्यू को यूआरएल डेकोरेशन के ज़रिए पास किया जाना चाहिए:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
फ़ाइनल लैंडिंग पेज पर cid एट्रिब्यूट की वैल्यू वही होनी चाहिए जो शुरुआती लैंडिंग पेज पर थी.
कैननिकल पेज और बिना एएमपी वाले लैंडिंग पेजों के बीच रीडायरेक्ट और डोमेन में बदलाव करते समय सावधानी बरतें.