Analytics को एएमपी पेजों में जोड़ना

Accelerated Mobile Pages (एएमपी) एक ऐसा प्लैटफ़ॉर्म है जो तेज़ी से रेंडर होने वाले स्टैटिक कॉन्टेंट के लिए वेब पेज बनाने की सुविधा देता है. एएमपी में एक ऐसा <amp-analytics> एलिमेंट होता है जो उपयोगकर्ता के इंटरैक्शन को मेज़र करने की सुविधा देता है. यह Google Analytics के साथ काम करता है.

पेज व्यू मेज़र करने के लिए बुनियादी सेट अप

किसी एएमपी पेज पर Google Analytics का बुनियादी इंस्टॉलेशन बनाने के लिए, इस कोड स्निपेट को कॉपी करें और <GA_MEASUREMENT_ID> को अपने Google टैग आईडी से बदलें. अपना Google टैग आईडी ढूंढें.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

डेटा को कई डेस्टिनेशन पर भेजा जा रहा है

आप एक ही <amp-analytics> टैग की मदद से कई डेस्टिनेशन पर डेटा भेज सकते हैं. इसके लिए, अपने config निर्देश में नया मेज़रमेंट आईडी <GA_MEASUREMENT_ID_NEW> जोड़ें.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

यह कैसे काम करता है

<amp-analytics> एलिमेंट, एक्सटेंडेड एएमपी कॉम्पोनेंट है और इसे स्क्रिप्ट टैग में, custom-element के तौर पर साफ़ तौर पर चालू किया जाता है.

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

<amp-analytics> एलिमेंट ब्लॉक को Google के मेज़रमेंट प्रॉडक्ट के साथ काम करने के लिए कॉन्फ़िगर किया गया है. type एट्रिब्यूट को <amp-analytics> के लिए, "gtag" पर सेट करें, ताकि gtag.js सहायता चालू हो सके. साथ ही, data-credentials एट्रिब्यूट को "include" पर सेट करें, ताकि कुकी चालू की जा सके.

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

एएमपी किसी भी JavaScript को उसकी अनुमति वाली लाइब्रेरी से बाहर नहीं होने देता, इसलिए इसके बजाय कॉन्फ़िगरेशन को JSON के साथ किया जाता है. मान्य <GA_MEASUREMENT_ID> प्रॉपर्टी वाली gtag_id प्रॉपर्टी को vars ब्लॉक में जोड़ दिया गया है. इसके नीचे, <GA_MEASUREMENT_ID>: {} वाली कॉन्फ़िगरेशन प्रॉपर्टी को वैल्यू के तौर पर जोड़ा गया है.

इवेंट मेज़र करना

एएमपी पेजों में इवेंट को मेज़र करने के लिए, तय वैल्यू के साथ triggers का इस्तेमाल करें. इन प्रॉपर्टी का इस्तेमाल ट्रिगर कॉन्फ़िगरेशन में किया जाता है:

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

इस उदाहरण में बुनियादी Google Analytics इवेंट को सेट अप करने का तरीका बताया गया है. "button" नाम का एक ट्रिगर बनाएं, जो "the-button" के आईडी वैल्यू वाले एलिमेंट पर क्लिक करने से सक्रिय होगा. यह ट्रिगर, Google Analytics को "लॉगिन" की event_name वैल्यू और "Google" की method वैल्यू भेजेगा:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics इवेंट, Google Analytics के लिए खास तौर पर बनाए गए इवेंट की कैटगरी होते हैं. आम तौर पर, इनका इस्तेमाल कैंपेन पर रिपोर्ट बनाने के लिए किया जाता है. ये वैल्यू, event_category, event_label, और value पैरामीटर वाले वैरिएबल ब्लॉक में दी जा सकती हैं:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

ट्रिगर कॉन्फ़िगरेशन के बारे में ज़्यादा जानने के लिए, amp-analytics दस्तावेज़ देखें.

पैरामीटर में बदलाव करना

Google Analytics के डिफ़ॉल्ट पैरामीटर बदलने या नए पैरामीटर जोड़ने के लिए, config ब्लॉक के parameter सेक्शन में अपनी पसंद की वैल्यू जोड़ें. यह उदाहरण, page_title और page_location के लिए, डिफ़ॉल्ट पेज व्यू और इवेंट वैल्यू को बदल देता है:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

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

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

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

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

यूनिवर्सल Analytics के लिए साइट स्पीड

Google Analytics को आपकी साइट के ट्रैफ़िक के एक छोटे से हिस्से के लिए, साइट स्पीड से जुड़ा डेटा अपने-आप इकट्ठा करने के लिए कॉन्फ़िगर किया गया है. डेटा इकट्ठा करने के लिए, सैंपल रेट को बदला जा सकता है. सैंपल रेट को 100% पर सेट करने के लिए, हाइलाइट किए गए कोड को अपने कॉन्फ़िगरेशन में जोड़ें:

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

साइट की स्पीड से जुड़ा डेटा इकट्ठा होने से रोकने के लिए, हाइलाइट किए गए कोड का इस्तेमाल करें:

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

एएमपी बनाम बिना एएमपी वाला ट्रैफ़िक

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

एएमपी ट्रैफ़िक को मापने के लिए एक अलग प्रॉपर्टी का इस्तेमाल करने से, मेट्रिक का बेहतर विश्लेषण किया जा सकता है. साथ ही, आपके ट्रैफ़िक की ज़्यादा सटीक जानकारी मिल सकती है. अगर आपको एक ही प्रॉपर्टी का इस्तेमाल करना है, तो एएमपी और बिना एएमपी वाले ट्रैफ़िक में अंतर करने के लिए:

  • डेटा सोर्स डाइमेंशन या कस्टम डाइमेंशन (यूनिवर्सल Analytics) का इस्तेमाल करें.
  • कस्टम इवेंट पैरामीटर (Google Analytics 4) का इस्तेमाल करें.

कॉन्फ़िगरेशन को डीबग करना

एएमपी की पुष्टि करने वाले टूल का इस्तेमाल करके, यह पता लगाया जा सकता है कि कोई वेब पेज, एएमपी एचटीएमएल की शर्तों के हिसाब से नहीं है या नहीं. #development=1 को पुष्टि करने वाले प्रोग्राम की सुविधा चालू करने के लिए, किसी पेज के यूआरएल में जोड़ें.

amp-analytics एक्सटेंशन, डीबग और समस्या हल करने में मदद करने के लिए चेतावनी और गड़बड़ी के मैसेज की सुविधा देता है. अपने वेब ब्राउज़र के कंसोल में लॉग किए गए गड़बड़ी के मैसेज देखने के लिए, किसी पेज के यूआरएल में #log=1 जोड़ें.

उदाहरण देखें

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

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>