AMP और 'टैग प्रबंधक' को सेट करने के लिए गाइड

Accelerated Mobile Pages प्रोजेक्ट (AMP) एक ऐसा ओपन सोर्स वेब प्लैटफ़ॉर्म है, जिससे अपनी वेब सामग्री के परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलती है. AMP में 'Google टैग प्रबंधक' के लिए सहायता पहले से ही मौजूद है. इस लेख में AMP पेज पर 'Google टैग प्रबंधक' सेट करने का तरीका सुझाया गया है.

AMP पर 'टैग प्रबंधक' सेट करने के लिए :

'टैग प्रबंधक' में एक AMP कंटेनर बनाएं.
अपने AMP पेज पर 'टैग प्रबंधक' स्निपेट जोड़ें.
अपने 'टैग प्रबंधक' कंटेनर में टैग को कॉन्फ़िगर करें और प्रकाशित करें.

एक AMP कंटेनर बनाएं

'टैग प्रबंधक' में AMP कंटेनर प्रकार की सुविधा होती है. अपने प्रोजेक्ट के लिए एक नया AMP कंटेनर बनाएं :

खाता स्क्रीन में, उस खाते के लिए ज़्यादा कार्रवाइयां () पर क्लिक करें, जिसका आप इस्तेमाल करना चाहते हैं. कंटेनर बनाएं चुनें.
कंटेनर का नाम रखें. किसी जानकारी देने वाले नाम का इस्तेमाल करें, उदाहरण, "example.com - news - AMP".
कंटेनर का इस्तेमाल कहां करें के अंदर, AMP चुनें.
बनाएं पर क्लिक करें.

अब आपका कंटेनर बन गया है. अगले कदम में अपने AMP पेज पर 'टैग प्रबंधक' का कोड डालें.

'टैग प्रबंधक' आपको कोड स्निपेट डालने का सबसे बढ़िया तरीका बताएगा. इसके अलावा, ज़्यादा जानकारी के लिए आप अगला सेक्शन देख सकते हैं.

'टैग प्रबंधक' स्निपेट जोड़ें

आपका नया AMP कंटेनर बन जाने के बाद, 'Google टैग प्रबंधक' इंस्टॉल करें दिखाई देगी. 'टैग प्रबंधक' से दो कोड स्निपेट मिलते हैं. इन कोड स्निपेट को कॉपी करें, ताकि वे आपके AMP पेज पर दिख सकें.

नोट: कोड स्निपेट को बाद में एक्सेस करने के लिए, अपने फ़ाइल फ़ोल्डर की खास जानकारी देने वाले पेज में सबसे ऊपर मौजूद कंटेनर आईडी नंबर पर क्लिक करें या एडमिन पर क्लिक करने के बाद 'Google टैग प्रबंधक' इंस्टॉल करें पर क्लिक करें.

पहला स्निपेट, आपके AMP पेज में AMP Analytics कॉम्पोनेंट जोड़ता है. यह कोड आपके पेज के <head> सेक्शन के अंत में होता है और इसे पेज पर सिर्फ़ एक बार दिखना चाहिए.

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

ज़रूरी जानकारी : अगर यह कोड आपके पेज पर पहले से मौजूद न हो, तो सिर्फ़ इसी कोड को जोड़ें. साथ ही, पक्का करें कि यह हर पेज पर सिर्फ़ एक बार दिखाई देता है.

दूसरा स्निपेट, 'टैग प्रबंधक' का इस्तेमाल करने के लिए AMP Analytics को कॉन्फ़िगर करता है. इस कोड को शुरूआती <body> ऐलीमेंट के ठीक बगल में डालें. अपने 'टैग प्रबंधक' की कंटेनर आईडी के जगह पर GTM-CONTAINER_ID डालें या 'टैग प्रबंधक' यूज़र इंटरफ़ेस के पूरे स्निपेट को कॉपी करके पेस्ट करें.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

अपना कंटेनर कॉन्फ़िगर करें और प्रकाशित करें

अगर कंटेनर स्निपेट आपके पेज में सही ढंग से डाला गया है, तो 'टैग प्रबंधक' में डाले गए टैग सक्रिय हो जाएंगे. अगले कदम में टैग कॉन्फ़िगरेशन बनाएं और कंटेनर प्रकाशित करें.

कोई नया टैग बनाने के लिए :

टैग नया पर क्लिक करें.
टैग कॉन्फ़िगरेशन पर क्लिक करें और काम करने लायक AMP टैग की सूची से टैग का प्रकार चुनें.
अपने टैग विक्रेता से मिली जानकारी का इस्तेमाल करके टैग को कॉन्फ़िगर करें.
ट्रिगर करना पर क्लिक करें और टैग को सक्रिय करने वाले एक या इससे ज़्यादा इवेंट की शर्तें जोड़ें.
ट्रिगर का नाम रखें और सेव करें पर क्लिक करें.

कुछ और टैग को कॉन्फ़िगर करने के लिए इन कदमों को दोहराएं. जब आपका कंटेनर कॉन्फ़िगर हो जाए, तो बदलावों को प्रभाव में लाने के लिए अपने कंटेनर को प्रकाशित करें.

पेज वैरिएबल

'टैग प्रबंधक' AMP वैरिएबल को कैप्चर कर सकता है और उनका इस्तेमाल टैग और ट्रिगर को कॉन्फ़िगर करने में कर सकता है. उदाहरण के लिए, जूतों की बिक्री दिखाने वाले पेज में ऐसे वैरिएबल हो सकते हैं, जिसमें किसी खास जूते की क्वालिटी के बारे में बताया गया हो. इन मानों का इस्तेमाल 'टैग प्रबंधक' वैरिएबल बनाने के लिए किया जा सकता है :

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
</amp-analytics>

ऊपर दिए गए कोड से रंग वैरिएबल को कैप्चर करने वाले 'टैग प्रबंधक' में, उपयोगकर्ता का तय किया गया वैरिएबल बनाने के लिए :

वैरिएबल पर क्लिक करें.
उपयोगकर्ता के तय वैरिएबल में, नया पर क्लिक करें.
वैरिएबल कॉन्फ़िगरेशन पर क्लिक करके AMP वैरिएबल चुनें.
AMP वैरिएबल फ़ील्ड में, फ़ील्ड का नाम डालें (उदाहरण, "color".)
वैरिएबल के लिए जानकारी देने वाला नाम रखें (उदाहरण, "AMP Variable - color".)
सेव करें पर क्लिक करें.

'टैग प्रबंधक' में AMP टैग का इस्तेमाल करने के लिए सहायता देने वाले टूल

क्या यह उपयोगी था?

हम उसे किस तरह बेहतर बना सकते हैं?