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

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

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

अगली लाइन, const account = data.accountId;, को accountId की वैल्यू मिलती है जो चरण 5 में बनाया गया है और उसे 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/test/"). यह तारे का निशान एक वाइल्डकार्ड है ऐसा वर्ण जो कई संभावित पैटर्न को कैच कर लेगा, जैसे कि "\*.example.com/" www.example.com, shop.example.com से मेल खाएगा, blog.example.com, वगैरह. तारे का निशान, बैकस्लैश से एस्केप होना चाहिए वर्ण: "\*". बिना अतिरिक्त वर्ण वाला यूआरएल (जैसे, "https://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. ज़्यादा कार्रवाई वाले मेन्यू पर क्लिक करें (more_vert) और एक्सपोर्ट करें चुनें.

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

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