एएमपी पेजों में 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 के मेज़रमेंट प्रॉडक्ट के साथ काम किया जा सके. gtag.js सहायता चालू करने के लिए, <amp-analytics> के लिए type एट्रिब्यूट को "gtag" पर और data-credentials एट्रिब्यूट को "शामिल करें" (कुकी चालू करने के लिए) पर सेट करें.

<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>

Universal 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>

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

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

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

  • डेटा सोर्स डाइमेंशन या कस्टम डाइमेंशन (Universal 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>