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