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

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

इंस्टॉल करने की सुविधा

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

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

Tag Manager Google टैग

Google टैग

gtag.js को एएमपी पर लागू करने के लिए, amp-analytics फ़्रेमवर्क का इस्तेमाल किया जाता है. इससे, अपनी एएमपी वेबसाइट पर Analytics को लागू किया जा सकता है. gtag.js को एक बार लागू करने के बाद, एएमपी पेजों से 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 टैग को, पेज पर मौजूद <body> टैग में JSON कॉम्पोनेंट के तौर पर जोड़ें. <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>

ज़्यादा जानकारी के लिए, 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 में कस्टम डाइमेंशन और पैरामीटर भेजना

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

पूरी तरह से तैयार उदाहरण

इस कोड के उदाहरण में, एएमपी पेज का पूरी तरह से काम करने वाला डेमो दिखाया गया है. यह डेमो, एक एएमपी पेज बनाता है. साथ ही, बटन पर क्लिक करने पर, 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 वैल्यू, सभी डोमेन पर एक जैसी हो. इसके लिए, यह तरीका अपनाएं:

• पक्का करें कि आपने कुकी मिटा दी हों या गुप्त मोड का इस्तेमाल किया हो.
• अगर Google Analytics की कुकी में cid नहीं मिलता है, तो इसे वेब ब्राउज़र के नेटवर्क टैब में भी देखा जा सकता है. collect request खोजें. पेलोड में cid वैल्यू होनी चाहिए.

• एएमपी पेज से अपनी वेबसाइट के किसी दूसरे डोमेन पर जाने के बाद, यूआरएल डेकोरेशन का इस्तेमाल करके, cid और gclid वैल्यू पास की जानी चाहिए:

  **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
  

• फ़ाइनल लैंडिंग पेज पर, cid की वही वैल्यू होनी चाहिए जो शुरुआती लैंडिंग पेज पर थी.

• कैननिकल पेज और बिना एएमपी वाले लैंडिंग पेजों के बीच, रीडायरेक्ट और डोमेन में बदलाव करते समय सावधानी बरतें.