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

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 फ़्रेमवर्क का इस्तेमाल किया जाता है आपको अपनी एएमपी वेबसाइट पर इंस्ट्रुमेंट ऐनलिटिक्स करने की सुविधा मिलती है. डेटा एएमपी पेजों से 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>

ज़्यादा जानकारी के लिए, 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>

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

<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 को button-click इवेंट भेजता है बटन पर क्लिक होने के बाद Analytics. <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 वैल्यू होनी चाहिए जो शुरुआती लैंडिंग पेज पर थी.

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