कस्टम टेंप्लेट के बारे में आसानी से बताने/सिखाने वाली गाइड

कस्टम टेम्प्लेट की मदद से आप अपने टैग और वैरिएबल परिभाषाएं खुद लिख सकते हैं, ताकि आपके संगठन के अन्य लोग बिल्ट-इन टैग और वैरिएबल टेम्प्लेट के साथ उनका इस्तेमाल कर सकें. कस्टम एचटीएमएल टैग और कस्टम JavaScript वैरिएबल के इस्तेमाल के बजाय, अनुमति पर आधारित और सैंडबॉक्स वाले कस्टम टेंप्लेट की मदद से, कस्टम टैग और वैरिएबल को ज़्यादा सुरक्षित और बेहतर तरीके से लिखा जा सकता है.

कस्टम टैग और वैरिएबल टेंप्लेट, Google Tag Manager के टेंप्लेट सेक्शन में तय किए जाते हैं. मुख्य टेम्प्लेट स्क्रीन आपके कंटेनर में पहले से परिभाषित किसी भी टैग या वैरिएबल टेम्प्लेट को सूची में रखेगी. इस स्क्रीन से भी नए टेंप्लेट बनाए जा सकते हैं.

आपके पास टेंप्लेट को एक्सपोर्ट करने और उसे अपने संगठन के लोगों के साथ शेयर करने का विकल्प होता है. साथ ही, कम्यूनिटी टेंप्लेट गैलरी में ज़्यादा से ज़्यादा लोगों को उपलब्ध कराने के लिए टेंप्लेट को डेवलप किया जा सकता है.

टेंप्लेट एडिटर

टेंप्लेट एडिटर की मदद से, कस्टम टेंप्लेट बनाए जा सकते हैं, उनकी झलक देखी जा सकती है, और उनकी जांच की जा सकती है. इसमें इनपुट के लिए चार मुख्य क्षेत्र होते हैं, जो टैग टेंप्लेट को तय करने में आपकी मदद करते हैं:

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

अपना पहला कस्टम टैग टेंप्लेट बनाएं

इस उदाहरण में, पिक्सल टैग बनाने का बुनियादी तरीका बताया गया है. जब यह टैग किसी वेब पेज पर ट्रिगर किया जाता है, तो यह टैग कंपनी के सर्वर को खाते की सही जानकारी के साथ एक हिट भेजेगा.

1. अपने पहले टेंप्लेट को शुरू करने के लिए, बाईं ओर मौजूद नेविगेशन में मौजूद टेंप्लेट पर क्लिक करें. इसके बाद, टैग टेंप्लेट सेक्शन में मौजूद, नया बटन पर क्लिक करें.

2. जानकारी पर क्लिक करें और टैग का नाम (ज़रूरी है), जानकारी, और आइकॉन तय करें.

जब उपयोगकर्ता इस टैग को पूरे Tag Manager यूज़र इंटरफ़ेस पर लागू करने के लिए जाएंगे, तब उन्हें नाम दिखाया जाएगा.

ब्यौरा ठीक वैसा ही होता है जैसा यह दिखता है – कम शब्दों में (200 वर्णों या उससे कम में) से यह जानकारी मिलती है कि टैग क्या करता है.

आइकॉन से आप वह इमेज चुन सकते हैं जो आइकॉन प्रॉपर्टी के साथ काम करने वाली सूचियों में टैग दिखाए जाने पर दिखाई देगी. आइकॉन इमेज स्क्वेयर PNG, JPEG या GIF फ़ाइलें होनी चाहिए, जिनका साइज़ 50 केबी से ज़्यादा न हो और जिनका साइज़ कम से कम 64 पिक्सल x 64 पिक्सल हो.

3. अपने टेंप्लेट की झलक देखने के लिए, रीफ़्रेश करें पर क्लिक करें.

फ़ील्ड इनपुट की दाईं ओर, टेंप्लेट की झलक विंडो मौजूद होती है. एडिटर में हर बार बदलाव करने पर, रीफ़्रेश करें बटन दिखता है. 'रीफ़्रेश करें' पर क्लिक करके देखें कि आपके बदलाव, टैग के रंग-रूप में क्या बदलाव करते हैं.

4. अपने टैग टेंप्लेट में फ़ील्ड जोड़ने के लिए, फ़ील्ड पर क्लिक करें.

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

5. फ़ील्ड जोड़ें पर क्लिक करें और टेक्स्ट इनपुट चुनें. डिफ़ॉल्ट नाम (जैसे कि "text1") को "accountId" से बदलें. टेंप्लेट की झलक में, रीफ़्रेश करें पर क्लिक करें.

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

अगले कदम में फ़ील्ड में लेबल जोड़ना होता है:

6. इस फ़ील्ड के लिए ज़्यादा विकल्प खोलने के लिए, टेक्स्ट फ़ील्ड के आगे मौजूद 'बड़ा करें' आइकॉन ('बड़ा करें' आइकॉन) पर क्लिक करें. डिसप्ले नेम फ़ील्ड में "खाता आईडी" डालें. टेंप्लेट की झलक में, रीफ़्रेश करें पर क्लिक करें.

फ़ील्ड के ऊपर "खाता आईडी" टाइटल वाला टेक्स्ट लेबल दिखना चाहिए.

7. कोड टैब पर क्लिक करें और एडिटर में सैंडबॉक्स की गई JavaScript डालें:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

कोड की पहली लाइन, const sendPixel = require('sendPixel'), sendPixel API को इंपोर्ट करता है.

कोड की दूसरी लाइन, const encodeUriComponent = require('encodeUriComponent'), encodeUriComponent API को इंपोर्ट करती है.

अगली लाइन, const account = data.accountId; को पांचवें चरण में बनाए गए accountId की वैल्यू दी जाती है और उसे account नाम के कॉन्सटेंट में स्टोर किया जाता है.

कोड की तीसरी लाइन, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, एक url कॉन्सटेंट सेट अप करती है, जो Analytics का डेटा और कोड में बदले गए उस खाता आईडी को लॉग करने वाले तय यूआरएल एंडपॉइंट को जोड़ता है जिससे टैग को कॉन्फ़िगर किया गया है.

आखिरी लाइन, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), ज़रूरी पैरामीटर के साथ sendPixel() फ़ंक्शन चलाता है और तय किए गए यूआरएल को अनुरोध भेजता है. data.gtmOnSuccess और data.gtmOnFailure वैल्यू, Google Tag Manager को यह बताती हैं कि टैग कब काम पूरा कर चुका है या कब फ़ेल हो गया है. इसके बाद, Google Tag Manager टैग सेटअप या झलक मोड जैसी सुविधाओं के लिए इन वैल्यू का इस्तेमाल करता है.

8. अपनी प्रगति को सेव करने के लिए सेव करें पर क्लिक करें. इससे मिली सभी अनुमतियां, टेंप्लेट एडिटर में लोड हो जाएंगी.

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

9. sendPixel को जिन डोमेन को डेटा भेजने की अनुमति है उन्हें बेहतर करने के लिए, अनुमतियां पर क्लिक करें. Pixel भेजें एंट्री के लिए, बड़ा करें आइकॉन ('बड़ा करें' आइकॉन) पर क्लिक करें और यूआरएल के मिलते-जुलते पैटर्न की अनुमति वाले यूआरएल में https://endpoint.example.com/ डालें.

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

यूआरएल के मैच होने वाले पैटर्न में एचटीटीपीएस का इस्तेमाल करना ज़रूरी है. साथ ही, इसमें होस्ट और पाथ पैटर्न, दोनों की जानकारी भी देनी होगी. होस्ट, कोई डोमेन (जैसे कि "https://example.com/") या खास सबडोमेन (जैसे कि "https://sub.example.com/") हो सकता है. पाथ में कम से कम "/" होना चाहिए. किसी भी लंबाई वाले सबडोमेन या पाथ पैटर्न को दिखाने के लिए, वाइल्डकार्ड के तौर पर तारे के निशान (*) का इस्तेमाल करें.https://example.com/https://\*.example.com/test/\*.example.com/www.example.comshop.example.comblog.example.com\*https://example.com/\*

यूआरएल से मैच होने वाले अतिरिक्त पैटर्न को अलग-अलग लाइनों में बताएं.

10. कोड चलाएं पर क्लिक करें और किसी भी समस्या के लिए, कंसोल विंडो देखें.

अगर किसी गड़बड़ी का पता चलता है, तो वह कंसोल विंडो में दिखेगी.

11. सेव करें पर क्लिक करें और टेंप्लेट एडिटर को बंद करें.

टैग टेंप्लेट अब इस्तेमाल के लिए तैयार है.

अपना नया टैग इस्तेमाल करें

आपके नए तय किए गए कस्टम टैग टेंप्लेट का इस्तेमाल करने वाला नया टैग बनाने की प्रोसेस, किसी भी दूसरे टैग की तरह ही है:

  1. Google Tag Manager में, टैग > नया पर क्लिक करें.
  2. आपका नया टैग, नया टैग विंडो के कस्टम सेक्शन में दिखेगा. टैग टेंप्लेट खोलने के लिए, इस पर क्लिक करें.
  3. टैग टेंप्लेट कॉन्फ़िगरेशन के लिए ज़रूरी फ़ील्ड भरें.
  4. ट्रिगर करें पर क्लिक करें और टैग को कब सक्रिय होना चाहिए, इसके लिए सही ट्रिगर चुनें.
  5. टैग सेव करें और अपना कंटेनर पब्लिश करें.

अपना पहला कस्टम वैरिएबल टेंप्लेट बनाना

कस्टम वैरिएबल टेंप्लेट, टैग टेंप्लेट की तरह ही होते हैं. इनमें कुछ फ़र्क़ होता है:

  • कस्टम वैरिएबल टेंप्लेट से कोई वैल्यू मिलनी चाहिए.

    पूरा होने की जानकारी देने के लिए data['gtmOnSuccess'] को कॉल करने के बजाय, वैरिएबल सीधे तौर पर कोई वैल्यू दिखाते हैं.

  • कस्टम वैरिएबल टेंप्लेट का इस्तेमाल Tag Manager यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों में किया जाता है.

  • अपने कस्टम वैरिएबल के आधार पर एक नया वैरिएबल बनाने के लिए टैग > नया पर जाने के बजाय, आप वैरिएबल > नया पर जाएं

कस्टम वैरिएबल टेंप्लेट बनाने की पूरी गाइड के लिए, कस्टम वैरिएबल बनाएं देखें.

एक्सपोर्ट और इंपोर्ट करें

अपने संगठन के साथ कस्टम टेम्प्लेट को शेयर करने के लिए, कस्टम टेम्प्लेट को निर्यात करके उसे अन्य Tag Manager कंटेनर में आयात करें. टेंप्लेट एक्सपोर्ट करने के लिए:

  1. Tag Manager में, टेंप्लेट पर क्लिक करें.
  2. सूची से उस टेंप्लेट के नाम पर क्लिक करें जिसे एक्सपोर्ट करना है. इससे टेंप्लेट, टेंप्लेट एडिटर में खुल जाएगा.
  3. ज़्यादा कार्रवाइयां मेन्यू () पर क्लिक करें और एक्सपोर्ट करें चुनें.

टेंप्लेट इंपोर्ट करने के लिए:

  1. Tag Manager में, टेंप्लेट पर क्लिक करें.
  2. नया पर क्लिक करें. इससे, टेंप्लेट एडिटर में एक खाली टेंप्लेट खुल जाएगा.
  3. ज़्यादा ऐक्शन मेन्यू () पर क्लिक करें और इंपोर्ट करें चुनें.
  4. वह .tpl फ़ाइल चुनें जिसे आपको इंपोर्ट करना है.