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

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

इंस्टॉल करना

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

इन बटनों में से अपनी पसंदीदा प्लैटफ़ॉर्म चुनें:

Google टैग

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

इंस्टॉल करना

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

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

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

<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 के ट्रिगर, JSON पैटर्न के मुताबिक होते हैं. ये पैटर्न, अन्य amp-analytics ट्रिगर कॉन्फ़िगरेशन के हिसाब से होते हैं.

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

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

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

डोमेन लिंकर, अलग-अलग डोमेन पर मौजूद दो या उससे ज़्यादा मिलती-जुलती साइटों को एक के तौर पर मेज़र करने में मदद करता है. लिंक किए जाने वाले डोमेन तय करने के लिए, "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" को 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>

समस्या हल करना

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

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

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

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

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

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