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 के मेज़रमेंट प्रॉडक्ट के साथ काम करे. <amp-analytics> के लिए type एट्रिब्यूट को "gtag" पर (gtag.js सहायता चालू करने के लिए) और 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 वैल्यू "login" और एक method वैल्यू "Google" भेजेगा:

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