वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने के लिए, टैग और टैग मैनेजर को ऑप्टिमाइज़ करें.
टैग स्निपेट होते हैं जिन्हें आम तौर पर किसी टैग मैनेजर के ज़रिए साइट में डाला जाता है. टैग का इस्तेमाल आम तौर पर मार्केटिंग और आंकड़ों के लिए किया जाता है.
टैग और टैग मैनेजर का परफ़ॉर्मेंस अलग-अलग होता है. यह हर साइट के हिसाब से अलग-अलग होता है. टैग मैनेजर की तुलना किसी एन्वेलप से की जा सकती है: टैग मैनेजर बेहतर होगा, लेकिन आप इसे किस तरह से भरते हैं और कैसे इस्तेमाल करते हैं, यह खास तौर पर आपके ऊपर निर्भर करता है.
इस लेख में, इन कामों के लिए टैग और टैग मैनेजर को ऑप्टिमाइज़ करने की तकनीकों के बारे में बताया गया है वेबसाइट की परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी होती है. भले ही इस लेख में Google Tag Manager का ज़िक्र किया गया है, चर्चा किए गए कई उपाय दूसरे टैग मैनेजरों पर भी लागू होते हैं.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर इसका असर
Tag Manager अक्सर आपके पेज को तेज़ी से लोड करने और रिस्पॉन्सिव बनाए रखने के लिए ज़रूरी संसाधनों का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर किसी भी तरह का असर डाल सकते हैं. बैंडविथ, आपकी साइटों के लिए टैग मैनेजर JavaScript को डाउनलोड करने या इससे होने वाले बाद के कॉल को डाउनलोड करके खर्च किया जा सकता है. मुख्य थ्रेड का सीपीयू समय, Tag Manager और टैग में शामिल JavaScript का आकलन करने और उसे लागू करने में खर्च किया जा सकता है.
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) पर, पेज लोड होने में ज़्यादा समय लगने के दौरान, बैंडविथ से जुड़े विवाद का सामना करना पड़ सकता है. इसके अलावा, मुख्य थ्रेड को ब्लॉक करने से एलसीपी को रेंडर होने में लगने वाले समय में देरी हो सकती है.
कुल लेआउट शिफ़्ट (सीएलएस) पर असर पड़ सकता है. पहली बार रेंडर होने से पहले ज़रूरी संसाधन लोड होने में देरी हो सकती है या टैग मैनेजर, पेज में कॉन्टेंट इंजेक्ट कर सकते हैं.
नेक्स्ट पेंट (INP) से इंटरैक्शन, मुख्य थ्रेड पर सीपीयू से जुड़े विवाद की वजह से हो सकता है. हमें टैग मैनेजर के साइज़ और आईएनपी के खराब स्कोर के बीच संबंध देखने को मिला है.
टैग किस तरह के हैं
परफ़ॉर्मेंस पर टैग का असर, टैग टाइप के हिसाब से अलग-अलग होता है. आम तौर पर, इमेज टैग ("पिक्सल") सबसे ज़्यादा असरदार हैं. इसके बाद, कस्टम टेंप्लेट और आख़िर में, कस्टम एचटीएमएल टैग. वेंडर टैग, उनके काम करने के तरीके के आधार पर अलग-अलग होते हैं अनुमति दें.
हालांकि, ध्यान रखें कि किसी टैग का इस्तेमाल करने का तरीका, उसकी परफ़ॉर्मेंस पर काफ़ी असर डालता है असर पड़ता है. "Pixel" ज़्यादा बेहतर परफ़ॉर्म कर रहे हैं, क्योंकि इस टैग का टाइप टाइप के इस्तेमाल के तरीके पर सख्त पाबंदियां लागू करती हों; कस्टम HTML टैग यह परफ़ॉर्मेंस के लिए हमेशा खराब होता है, लेकिन आज़ादी की आज़ादी की वजह से साथ ही, उनका आसानी से गलत इस्तेमाल हो सकता है. इससे उनकी परफ़ॉर्मेंस पर बुरा असर पड़ता है.
टैग के बारे में सोचते समय, पैमाने को ध्यान में रखें: किसी टैग का प्रदर्शन एकल टैग नगण्य हो सकता है—लेकिन तब महत्वपूर्ण बन सकता है, जब एक ही पेज पर टैग इस्तेमाल किए गए हों.
Tag Manager का इस्तेमाल करके सभी स्क्रिप्ट लोड नहीं की जानी चाहिए
टैग मैनेजर, आम तौर पर उन रिसॉर्स को लोड करने का सही तरीका नहीं होते हैं उपयोगकर्ता अनुभव के विज़ुअल या फ़ंक्शनल पहलुओं को तुरंत लागू करना चाहिए. उदाहरण के लिए, कुकी नोटिस, हीरो इमेज या साइट की सुविधाएं. टैग मैनेजर का इस्तेमाल करके आम तौर पर, इन संसाधनों को लोड करने में देरी होती है. यह उपयोगकर्ता के लिए ठीक नहीं है साथ ही, एलसीपी और सीएलएस जैसी मेट्रिक को बढ़ा सकते हैं. इसके अलावा, ध्यान रखें कि कुछ उपयोगकर्ता टैग मैनेजर को ब्लॉक कर देते हैं. UX को लागू करने के लिए टैग मैनेजर का इस्तेमाल करना सुविधाओं की वजह से हो सकता है कि आपकी वेबसाइट का इस्तेमाल करने वाले कुछ लोगों की वेबसाइट काम न करे.
कस्टम एचटीएमएल टैग का इस्तेमाल करते समय सावधानी बरतें
कस्टम एचटीएमएल
टैग
कई सालों से हैं और ज़्यादातर साइटों पर इसका बहुत ज़्यादा इस्तेमाल किया जाता है. कस्टम एचटीएमएल
टैग की सहायता से आप कुछ प्रतिबंधों के साथ अपना कोड दर्ज कर सकते हैं, चाहे नाम,
इस टैग का इस्तेमाल मुख्य रूप से किसी पेज में कस्टम <script> एलिमेंट जोड़ने के लिए किया जाता है.
कस्टम एचटीएमएल टैग का इस्तेमाल कई तरह से किया जा सकता है. साथ ही, इनकी परफ़ॉर्मेंस पर इसका असर भी पड़ता है बहुत अलग-अलग होता है. अपनी साइट की परफ़ॉर्मेंस का आकलन करते समय, ध्यान रखें कि ज़्यादातर टूल कस्टम एचटीएमएल टैग की परफ़ॉर्मेंस का असर टैग को एट्रिब्यूट करेंगे टैग डालने के बजाय—इन इंजेक्ट करने वाला मैनेजर बनाया.
कस्टम एचटीएमएल टैग में आस-पास के पेज में एलिमेंट शामिल किया जा सकता है. गतिविधि पेज में एलिमेंट शामिल करने की वजह से, परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं और कुछ मामलों में, लेआउट शिफ़्ट भी हो सकते हैं.
- ज़्यादातर मामलों में, अगर पेज में कोई एलिमेंट डाला जाता है, तो ब्राउज़र पेज पर मौजूद हर आइटम के साइज़ और पोज़िशन का फिर से हिसाब लगाना चाहिए—यह प्रोसेस को कहा जाता है लेआउट. सिंगल लेआउट की परफ़ॉर्मेंस पर बहुत कम असर पड़ता है, लेकिन जब ऐसा होता है बहुत ज़्यादा होने की वजह से, परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं. इसका असर यह घटना, कम कीमत वाले डिवाइसों और ऐसे पेजों पर ज़्यादा होती है जिनमें DOM एलिमेंट.
- अगर किसी पेज एलिमेंट को आस-पास के हिस्से के बाद DOM में डाला जाता है क्षेत्र को पहले ही रेंडर किया जा चुका है, तो इससे लेआउट शिफ़्ट हो सकता है. यह घटना टैग मैनेजर के लिए खास नहीं है—हालांकि, टैग आम तौर पर बाद में लोड होते हैं पेज के अन्य भागों की तुलना में, उन्हें अक्सर आस-पास के पेज के रेंडर होने के बाद ही, DOM.
कस्टम टेंप्लेट का इस्तेमाल करें
कस्टम टेंप्लेट से जुड़ी सहायता कुछ ऑपरेशन ऐसी ही होती हैं जो कस्टम एचटीएमएल टैग जैसी होती हैं, लेकिन सैंडबॉक्स में बनाई गई हैं. JavaScript का वह वर्शन है जो सामान्य इस्तेमाल के लिए एपीआई स्क्रिप्ट इंजेक्शन और पिक्सल इंजेक्शन जैसे मामलों में. जैसा कि इसके नाम से ही पता चलता है, वे एक जानकार उपयोगकर्ता द्वारा बनाया जाने वाला टेम्प्लेट, जो इसे दिमाग. इसके बाद, कम तकनीकी उपयोगकर्ता टेंप्लेट का इस्तेमाल कर सकते हैं. यह अक्सर ज़्यादा सुरक्षित होता है करने के बजाय कस्टम एचटीएमएल का ऐक्सेस दें.
कस्टम टेंप्लेट पर ज़्यादा पाबंदियां लगी होने की वजह से, ये टैग परफ़ॉर्मेंस या सुरक्षा से जुड़ी समस्याएं कम होने की संभावना कम होती है; हालांकि, उसी तरह की वजह से कस्टम टेंप्लेट सभी मामलों में काम नहीं करेंगे.
स्क्रिप्ट सही तरीके से इंजेक्ट करें
आम तौर पर, स्क्रिप्ट इंजेक्ट करने के लिए Tag Manager का इस्तेमाल किया जाता है. कॉन्टेंट बनाने
इसका सुझाव दिया जाता है कि आप कस्टम टेम्प्लेट का इस्तेमाल करें और
injectScript
एपीआई.
मौजूदा कस्टम एचटीएमएल को बदलने के लिए, injectScript API का इस्तेमाल करने के बारे में जानकारी टैग के लिए, किसी मौजूदा कीवर्ड को बदलना टैग में रखें.
अगर आपको कस्टम एचटीएमएल टैग का इस्तेमाल करना ज़रूरी है, तो यहां दी गई कुछ बातों का ध्यान रखें:
- लाइब्रेरी और तीसरे पक्ष की बड़ी स्क्रिप्ट, स्क्रिप्ट टैग के ज़रिए लोड की जानी चाहिए
जो स्क्रिप्ट के दस्तावेज़ों को कॉपी-पेस्ट करने के बजाय, किसी बाहरी फ़ाइल (उदाहरण के लिए,
<script src="external-scripts.js">) को डाउनलोड करता है टैग में कॉन्टेंट शामिल होता है. हालांकि<script>टैग का इस्तेमाल करना जारी रखा जा रहा है स्क्रिप्ट का कॉन्टेंट डाउनलोड करने के लिए एक अलग राउंड-ट्रिप हटा देता है, प्रैक्टिस करने से कंटेनर का साइज़ बढ़ जाता है और स्क्रिप्ट को कैश मेमोरी में सेव होने से रोका जाता है ब्राउज़र की मदद से अलग-अलग किया जा सकता है. - कई वेंडर अपने
<script>टैग को सबसे ऊपर रखने का सुझाव देते हैं<head>. हालांकि, Tag Manager के ज़रिए लोड की गई स्क्रिप्ट के लिए, यह सुझाव आम तौर पर इसकी ज़रूरत नहीं होती: ज़्यादातर परिस्थितियों में, ब्राउज़र पहले ही काम कर चुका होता है<head>को टैग मैनेजर के काम करने के समय के हिसाब से पार्स करना.
पिक्सल का इस्तेमाल करें
कुछ परिस्थितियों में तीसरे पक्ष की स्क्रिप्ट को इमेज या iframe से बदला जा सकता है "पिक्सल". स्क्रिप्ट पर आधारित अपने समकक्षों की तुलना में, पिक्सल कम फ़ंक्शनैलिटी होती है. इसलिए, इसे अक्सर कम प्राथमिकता दी जाती है, क्योंकि उसमें से कोई भी विकल्प चुनें. हालांकि, टैग मैनेजर में इस्तेमाल किए जाने पर पिक्सल ज़्यादा डाइनैमिक हो सकते हैं क्योंकि वे ट्रिगर पर फ़ायर कर सकते हैं और अलग-अलग वैरिएबल पास कर सकते हैं. ये सबसे टैग का परफ़ॉर्म करने वाला और सुरक्षित टाइप, क्योंकि इसके बाद JavaScript का कोई काम नहीं होता तो यह ट्रिगर हो जाता है. पिक्सेल बहुत ही छोटा संसाधन आकार (1 केबी से कम) होते हैं और इससे लेआउट शिफ़्ट नहीं होते.
सेवा देने वाली तीसरे पक्ष की कंपनी से, सहायता पाने के बारे में ज़्यादा जानकारी पाने के लिए, उनसे संपर्क करें
पिक्सल. इसके अलावा, <noscript> टैग के लिए उनके कोड की जांच की जा सकती है.
अगर कोई वेंडर, पिक्सल का इस्तेमाल करता है, तो वह अक्सर उसे
<noscript> टैग.
पिक्सल के विकल्प
पिक्सल काफ़ी लोकप्रिय हुए, क्योंकि एक समय में ये सबसे सस्ते होते थे
और ऐसी स्थितियों में HTTP अनुरोध करने के सबसे भरोसेमंद तरीके हैं जहां सर्वर
जवाब काम का नहीं है ( उदाहरण के लिए, Analytics को डेटा भेजते समय
प्रोवाइडर). कॉन्टेंट बनाने
navigator.sendBeacon()
और fetch()
keepalive
एपीआई इस तरह से डिज़ाइन किए गए हैं, ताकि वे इसी काम के लिए इस्तेमाल कर पाएं. हालांकि, ये एपीआई ज़्यादा भरोसेमंद होते हैं
पिक्सल से भी ज़्यादा.
पिक्सल का इस्तेमाल जारी रखने में कोई गलती नहीं है—वे अच्छी तरह से काम करते हैं और परफ़ॉर्मेंस पर सबसे कम असर पड़ता है. हालांकि, अगर आपको खुद ही बीकन बनाने हैं, इनमें से किसी एक एपीआई का इस्तेमाल करना बेहतर है.
sendBeacon()
कॉन्टेंट बनाने
navigator.sendBeacon()
एपीआई को इस तरह से डिज़ाइन किया गया है कि वह वेब सर्वर को ज़रूरत के हिसाब से कम डेटा भेज सके
यहां सर्वर के रिस्पॉन्स से कोई फ़र्क़ नहीं पड़ता.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
navigator.sendBeacon(url, data);
sendBeacon() का एपीआई सीमित तौर पर इस्तेमाल किया जा सकता है: यह सिर्फ़ पोस्ट अनुरोध करने की सुविधा देता है और यह काम करता है
कस्टम हेडर सेट करने की सुविधा उपलब्ध नहीं है. हां
सभी मॉडर्न ब्राउज़र पर काम करता है.
fetch() keepalive
keepalive
एक फ़्लैग है जो फ़ेच करें
एपीआई को
का इस्तेमाल, ब्लॉक न करने वाले अनुरोधों के लिए किया जा सकता है, जैसे कि इवेंट की रिपोर्टिंग और आंकड़े. हां
इसका इस्तेमाल, fetch() को पास किए गए पैरामीटर में keepalive: true को शामिल करके किया जाता है.
const url = "https://example.com/analytics";
const data = JSON.stringify({
event: "checkout",
time: performance.now()
});
fetch(url, {
method: 'POST',
body: data,
keepalive: true
});
अगर fetch() keepalive और sendBeacon() बहुत मिलते-जुलते लगते हैं, तो इसकी वजह यह है कि
हैं. यही नहीं, Chromium ब्राउज़र में sendBeacon() अब fetch()
keepalive पर बना है.
fetch() keepalive और sendBeacon() में से किसी एक को चुनते समय, इन बातों पर ध्यान देना ज़रूरी है
अपनी ज़रूरत की सुविधाओं और ब्राउज़र सपोर्ट पर विचार करें. फ़ेच() एपीआई
ज़्यादा सुविधाजनक; हालांकि, keepalive में कम ब्राउज़र है
sendBeacon() की तुलना में सहायता.
उसके बारे में जानकारी पाएँ
टैग अक्सर तीसरे पक्ष के वेंडर के दिशा-निर्देशों का पालन करके बनाए जाते हैं. अगर यह समझ नहीं आ रहा है कि वेंडर कोड क्या करता है—तो किसी ऐसे व्यक्ति से पूछें जो इस बारे में जानकारी रखता हो. दूसरों की राय लेने से यह पता चल सकता है कि टैग में नया टैग बनाने की क्षमता है या नहीं या सुरक्षा से जुड़ी समस्याएं हो सकती हैं.
टैग मैनेजर में टैग को मालिक के तौर पर लेबल करने का भी सुझाव दिया जाता है. यह दूर है यह आसानी से भूल जाते हैं कि टैग का मालिक कौन है. अगर ऐसा है, तो उन्हें हटा दें!
ट्रिगर
टैग को ऑप्टिमाइज़ करके, बड़े लेवल पर ट्रिगर आम तौर पर, यह पक्का किया जाता है कि टैग ज़रूरत से ज़्यादा ट्रिगर न हों और एक ऐसा ट्रिगर चुनना जो परफ़ॉर्मेंस की लागत के साथ कारोबार की ज़रूरतों को पूरा करता हो.
ट्रिगर खुद ही JavaScript कोड होते हैं, जो आकार और निष्पादन को बढ़ाएंगे टैग मैनेजर की लागत. हालांकि ज़्यादातर ट्रिगर छोटे होते हैं, लेकिन इनके मिले-जुले असर से जोड़ें. उदाहरण के लिए, कई क्लिक इवेंट या टाइमर ट्रिगर होने से नाटकीय रूप से को बढ़ाने के लिए टैग मैनेजर का वर्कलोड बढ़ाएं.
सही ट्रिगर इवेंट चुनें
टैग की परफ़ॉर्मेंस का असर तय नहीं होता है: आम तौर पर, पहले टैग ट्रिगर होता है, तो परफ़ॉर्मेंस पर इसका ज़्यादा असर पड़ता है. आम तौर पर, रिसॉर्स शुरुआती पेज लोड के दौरान सीमित होता है और इसलिए खास संसाधन (या टैग) संसाधनों को किसी और चीज़ से दूर ले जाता है.
हालांकि, सभी टैग के लिए सही ट्रिगर चुनना ज़रूरी है, लेकिन खास तौर पर, उन टैग के लिए ज़रूरी है जो बड़े रिसॉर्स को लोड करते हैं या लंबे समय तक काम करते हैं स्क्रिप्ट.
टैग यहां ट्रिगर किए जा सकते हैं
पेज व्यू
(आम तौर पर Page load, DOM Ready को, Window Loaded को) या
कस्टम इवेंट. पेज लोड पर असर न पड़े, इसके लिए हमारा सुझाव है कि
Window Loaded के बाद ग़ैर-ज़रूरी टैग.
कस्टम इवेंट का इस्तेमाल करें
कस्टम इवेंट
आपको उन पेज इवेंट की प्रतिक्रिया में ट्रिगर सक्रिय करने की अनुमति देनी होगी, जो
Google Tag Manager में पहले से मौजूद ट्रिगर. उदाहरण के लिए, कई टैग पेज व्यू
ट्रिगर; हालांकि,
DOM Ready से Window Loaded के बीच की समयावधि कई
पेज हैं और इसके कारण किसी टैग के सक्रिय होने पर उसे ठीक करना कठिन हो सकता है. अपने हिसाब से चुनी गई रेंज
इवेंट इस समस्या का समाधान उपलब्ध कराते हैं.
कस्टम इवेंट का इस्तेमाल करने के लिए, सबसे पहले कस्टम इवेंट ट्रिगर बनाएं और अपने टैग अपडेट करें इस ट्रिगर का इस्तेमाल करें.
ट्रिगर को सक्रिय करने के लिए, संबंधित इवेंट को डेटा लेयर में पुश करें.
// Custom event trigger that fires after 2 seconds
setTimeout(() => {
dataLayer.push({
'event' : 'my-custom-event'
});
}, 2000);
ट्रिगर करने की खास शर्तों का इस्तेमाल करना
ट्रिगर की खास शर्तों का इस्तेमाल करके, टैग को बेवजह ट्रिगर होने से रोका जा सकता है. हालांकि, इस सिद्धांत को कई तरीकों से लागू किया जा सकता है. हालांकि, यह सबसे आसान, अब तक का सबसे कारगर तरीका है तो आप यह सुनिश्चित कर सकते है कि टैग केवल उन्हीं पेजों पर सक्रिय हो, जहां वह इस्तेमाल किया गया है.
बिल्ट-इन वैरिएबल से ये काम किए जा सकते हैं साथ ही, इसे टैग ट्रिगर करने की शर्तों में भी शामिल किया जाना चाहिए.
हालांकि, ध्यान रखें कि ट्रिगर की जटिल शर्तें या अपवाद होने पर उनकी प्रोसेसिंग में लगने वाला समय अलग-अलग हो सकता है. इसलिए, उन्हें बहुत जटिल न बनाएं.
अपने टैग मैनेजर को सही समय पर लोड करें
टैग मैनेजर के लोड होने के समय में बदलाव करने से, परफ़ॉर्मेंस. ट्रिगर, चाहे उन्हें किसी भी तरह से कॉन्फ़िगर किया गया हो, तब तक सक्रिय नहीं हो सकते जब तक कि टैग मैनेजर लोड होने के बाद. हालांकि, क्वेरी के लिए अच्छे ट्रिगर चुनना ज़रूरी है अलग-अलग टैग (जैसा कि ऊपर बताया गया है), तो अपना टैग लोड करते समय उसके साथ प्रयोग करना मैनेजर की फ़ैसले का असर पेज के सभी टैग पर पड़ेगा.
टैग मैनेजर को बाद में लोड करने से कंट्रोल की एक लेयर भी जुड़ जाती है और इसे आने वाले समय में रोका जा सकता है नहीं होनी चाहिए, क्योंकि इसकी वजह से टैग मैनेजर उपयोगकर्ता अनजाने में लोड नहीं हो पाएगा तय समय से पहले ही टैग का इस्तेमाल कर सकते हैं, लेकिन आपको इसके असर का पता नहीं चलता.
वैरिएबल
वैरिएबल की मदद से, डेटा को पेज से पढ़ा जा सकता है. वे ट्रिगर में उपयोगी होते हैं और अपने टैग खुद टैग करते हैं.
ट्रिगर की तरह ही, वैरिएबल की वजह से टैग मैनेजर में JavaScript कोड जोड़ा जाता है, इस वजह से परफ़ॉर्मेंस से जुड़ी समस्याएं भी हो सकती हैं. वैरिएबल दूसरे एलिमेंट में आसानी से बिल्ट-इन हो सकते हैं टाइप जो उदाहरण के लिए, यूआरएल, कुकी, डेटा लेयर या DOM के हिस्सों को पढ़ सकते हैं. इसके अलावा, ये कस्टम JavaScript हो सकते हैं. इसमें इनके काम करने की कोई सीमा नहीं है.
वैरिएबल को आसान और कम से कम रखें, क्योंकि उनका आकलन करना होगा टैग मैनेजर की मदद से लगातार अपडेट किया जाता है. इस्तेमाल नहीं किए जा रहे पुराने वैरिएबल हटाएं टैग मैनेजर स्क्रिप्ट का साइज़ और इसकी प्रोसेसिंग में लगने वाले समय, दोनों को कम करने के लिए इस्तेमाल.
टैग मैनेजमेंट
टैग का बेहतर तरीके से इस्तेमाल करने से, परफ़ॉर्मेंस से जुड़ी समस्याओं का खतरा कम हो जाता है.
डेटा लेयर का इस्तेमाल करना
डेटा लेयर में " वह सभी जानकारी शामिल है, जिसे आप Google Tag Manager को भेजना चाहते हैं". ज़्यादा देखें यह ऑब्जेक्ट की एक JavaScript अरे होती है. इसमें पेज. इसका इस्तेमाल, टैग को ट्रिगर करने के लिए भी किया जा सकता है.
// Contents of the data layer
window.dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
// Pushing a variable to the data layer
window.dataLayer.push({'variable_name': 'variable_value'});
// Pushing an event to the data layer
window.dataLayer.push({'event': 'event_name'});
हालांकि Google Tag Manager का इस्तेमाल डेटा लेयर के बिना भी किया जा सकता है, लेकिन इसका इस्तेमाल इसका सुझाव दिया जाता है. डेटा लेयर की मदद से, डेटा को एक ही जगह पर देखा जा सकता है तीसरे पक्ष की स्क्रिप्ट एक ही जगह पर ऐक्सेस करती हैं, जिससे और उसके इस्तेमाल पर बेहतर तरीके से नज़र रखता है. अन्य चीज़ों के साथ ही, इसकी मदद से, रिडंडेंट वैरिएबल कैलकुलेशन और स्क्रिप्ट एक्ज़ीक्यूशन. डेटा लेयर का इस्तेमाल करना भी इससे टैग के ज़रिए ऐक्सेस किए जा रहे डेटा को कंट्रोल किया जाता है. साथ ही, इसमें पूरी JavaScript को कंट्रोल करने का विकल्प नहीं होता वैरिएबल या डीओएम ऐक्सेस.
डुप्लीकेट और इस्तेमाल न होने वाले टैग हटाना
डुप्लीकेट टैग तब हो सकते हैं, जब किसी टैग को यह टैग मैनेजर से डाला जाता है.
इस्तेमाल नहीं किए जा रहे टैग को ब्लॉक करने के बजाय रोक दिया जाना चाहिए या हटा देना चाहिए ट्रिगर रोकना. किसी टैग को रोकने या हटाने से, कंटेनर से कोड हट जाता है; ब्लॉक करने से नहीं.
जब इस्तेमाल नहीं किए गए टैग हटा दिए जाएं, तो ट्रिगर और वैरिएबल भी ऐसे होने चाहिए यह देखने के लिए समीक्षा की कि क्या उनमें से किसी को भी हटाया जा सकता है, अगर उसका इस्तेमाल सिर्फ़ टैग.
अनुमति दें और अस्वीकार करें सूचियां इस्तेमाल करें
सूची को अनुमति देना और अस्वीकार करना आपको अपने टैग, ट्रिगर, और टैग, एक पेज पर वैरिएबल की अनुमति नहीं है. इसका इस्तेमाल परफ़ॉर्मेंस को बेहतर तरीके से लागू करने के लिए किया जा सकता है के बारे में और अन्य नीतियों के बारे में बताएँ.
अनुमति दें और अस्वीकार करें सूचियां, डेटा लेयर के ज़रिए कॉन्फ़िगर की जाती हैं.
window.dataLayer = [{
'gtm.allowlist': ['<id>', '<id>', ...],
'gtm.blocklist': ['customScripts']
}];
उदाहरण के लिए, संभव है कि किसी भी कस्टम एचटीएमएल टैग, JavaScript को अनुमति न दी जाए वैरिएबल या डायरेक्ट डीओएम ऐक्सेस. इसका मतलब है सिर्फ़ पिक्सल और पहले से तय टैग का इस्तेमाल किया जा सकता है, जिसमें डेटा लेयर के डेटा शामिल होते हैं. हालांकि यह पूरी तरह से पाबंदी है, लेकिन तो इसकी वजह से Tag Manager को ज़्यादा बेहतर और सुरक्षित तरीके से लागू किया जा सकता है.
सर्वर साइड टैगिंग का इस्तेमाल करना
सर्वर साइड टैगिंग पर स्विच करना कोई आसान काम नहीं है, लेकिन यह काम ज़रूर करें - खास तौर पर ऐसी बड़ी साइटों के लिए जो अपने कॉन्टेंट पर ज़्यादा कंट्रोल पाना चाहती हैं डेटा शामिल है. सर्वर साइड टैगिंग से वेंडर कोड को क्लाइंट से हटा दिया जाता है. साथ ही, इसके साथ क्लाइंट को क्लाइंट से सर्वर पर प्रोसेसिंग को ऑफ़लोड करता है.
उदाहरण के लिए, क्लाइंट-साइड टैगिंग का इस्तेमाल करते समय, एक से ज़्यादा Analytics को डेटा भेजना खातों के लिए यह ज़रूरी है कि क्लाइंट हर एंडपॉइंट के लिए अलग-अलग अनुरोध करे. इसके उलट, सर्वर साइड टैगिंग की मदद से, क्लाइंट एक ही अनुरोध करता है, ताकि सर्वर-साइड कंटेनर से कनेक्ट किया जाता है और वहां से इस डेटा को Analytics खाते.
ध्यान रखें कि सर्वर साइड टैगिंग सिर्फ़ कुछ टैग के साथ काम करती है; टैग साथ काम करने की सुविधा, वेंडर के हिसाब से अलग-अलग होती है.
ज़्यादा जानकारी के लिए, सर्वर-साइड के बारे में जानकारी देखें टैग लागू करें.
कंटेनर
आम तौर पर, टैग मैनेजर कई इंस्टेंस या "कंटेनर" की अनुमति देते हैं अपने सेट अप. इससे एक टैग में कई कंटेनर को कंट्रोल किया जा सकता है मैनेजर खाते में साइन इन करें.
हर पेज पर सिर्फ़ एक कंटेनर इस्तेमाल करें
एकाधिक का उपयोग कर रहा है कंटेनर होने की वजह से, परफ़ॉर्मेंस से जुड़ी गंभीर समस्याएं हो सकती हैं. अतिरिक्त ओवरहेड और स्क्रिप्ट निष्पादन. यह कम से कम कोर टैग कोड का उपयोग करता है, जो कंटेनर के भाग के रूप में JavaScript को कंटेनर के बीच फिर से इस्तेमाल नहीं किया जा सकता.
ऐसा बहुत कम होता है कि एक से ज़्यादा कंटेनर को असरदार तरीके से इस्तेमाल किया जाए. हालांकि, कई वजहों से अगर इसे अच्छी तरह से नियंत्रित किया जाए, तो यह सुविधा काम कर सकती है, जिसमें ये शामिल हैं:
- "समय से पहले लोड" होने की वजह से कंटेनर, और एक भारी "बाद में लोड" होगा कंटेनर, इस्तेमाल करें.
- ऐसा प्रतिबंधित कंटेनर होना चाहिए जिसका इस्तेमाल कम तकनीकी उपयोगकर्ता करते हों. प्रतिबंधित, लेकिन अधिक सशक्त रूप से नियंत्रित, टैग के लिए कंटेनर, जिनका उपयोग नहीं किया जा सकता प्रतिबंधित कंटेनर में डालें.
अगर आपको हर पेज पर एक से ज़्यादा कंटेनर का इस्तेमाल करना है, तो Google Tag Manager को फ़ॉलो करें एक से ज़्यादा कैंपेन सेट अप करने के लिए दिशा-निर्देश कंटेनर हैं.
अगर ज़रूरत हो, तो अलग-अलग कंटेनर का इस्तेमाल करें
अगर एक से ज़्यादा प्रॉपर्टी के लिए Tag Manager का इस्तेमाल किया जाता है (उदाहरण के लिए, वेब ऐप्लिकेशन और मोबाइल ऐप)—इस्तेमाल किए जाने वाले कंटेनर की संख्या आपके वर्कफ़्लो में मदद कर सकती है या उसे नुकसान पहुंचा सकती है बेहतर ढंग से काम करते हैं. इससे परफ़ॉर्मेंस पर भी असर पड़ सकता है.
आम तौर पर, एक ही कंटेनर को कई प्रॉपर्टी में असरदार तरीके से इस्तेमाल किया जा सकता है अगर साइटें एक जैसी हैं और उनका इस्तेमाल एक जैसा है. उदाहरण के लिए, भले ही मोबाइल और वेब ऐप्लिकेशन एक जैसे काम कर सकते हैं, तो हो सकता है कि ऐप्लिकेशन का स्ट्रक्चर अलग तरीके से होगा. इसलिए, उन्हें ज़्यादा असरदार तरीके से मैनेज किया जा सकेगा करते हैं.
किसी एक कंटेनर को कई बार इस्तेमाल करने की कोशिश अक्सर बेवजह हो जाती है कॉम्प्लेक्स लॉजिक का इस्तेमाल करके, कंटेनर की जटिलता और साइज़ का इस्तेमाल करें.
कंटेनर के साइज़ पर नज़र रखें
कंटेनर का साइज़, उसके टैग, ट्रिगर, और वैरिएबल से तय होता है. हालांकि एक छोटा कंटेनर अब भी पेज के परफ़ॉर्मेंस पर बुरा असर डाल सकता है, लेकिन बड़ा कंटेनर में कोई कमी नहीं होगी.
अपना टैग ऑप्टिमाइज़ करते समय कंटेनर का साइज़, आपकी नॉर्थ-स्टार मेट्रिक नहीं होना चाहिए इस्तेमाल; हालांकि, कंटेनर का साइज़ बड़ा होना अक्सर एक चेतावनी का संकेत होता है, जो बताता है कि कंटेनर का सही रखरखाव नहीं किया गया है और इसका गलत इस्तेमाल हो सकता है.
Google टैग मैनेजर limits कंटेनर साइज़ 200 केबी होना चाहिए. साथ ही, कंटेनर का साइज़ 140 केबी से शुरू होने पर चेतावनी दी जाएगी. हालांकि, ज़्यादातर साइटों को अपने कंटेनर को इससे कम रखना चाहिए. इसके लिए के हिसाब से, साइट कंटेनर का मीडियन करीब 50 केबी है.
अपने कंटेनर का साइज़ तय करने के लिए, रिस्पॉन्स का साइज़ देखें
https://www.googletagmanager.com/gtag/js?id=YOUR_ID ने वापस किया. यह
जवाब में Google Tag Manager लाइब्रेरी के साथ-साथ
कंटेनर. Google Tag Manager की लाइब्रेरी अपने-आप में करीब 33 केबी की होती है
कंप्रेस किया हुआ है.
अपने कंटेनर वर्शन को नाम दें
एक कंटेनर वर्शन किसी खास समय पर किसी कंटेनर के कॉन्टेंट का स्नैपशॉट होता है. इसका इस्तेमाल करके सही नाम और इसके साथ ही, पूरी जानकारी देने वाला में किए गए बदलावों की वजह से आने वाले समय की परफ़ॉर्मेंस को डीबग करना आसान हो जाता है समस्याएं.
वर्कफ़्लो टैग करना
अपने टैग में किए गए बदलावों को मैनेज करना ज़रूरी है, ताकि यह पक्का किया जा सके कि उनमें पेज की परफ़ॉर्मेंस पर बुरा असर पड़ता है.
डिप्लॉय करने से पहले टैग की जांच करें
डिप्लॉयमेंट से पहले अपने टैग की जांच करने से, समस्याओं (परफ़ॉर्मेंस और नहीं देती हैं) भेजने से पहले.
टैग की जांच करते समय इन बातों का ध्यान रखें:
- क्या टैग ठीक से काम कर रहा है?
- क्या टैग की वजह से कोई लेआउट शिफ़्ट होता है?
- क्या टैग कोई संसाधन लोड करता है? ये संसाधन कितने बड़े हैं?
- क्या टैग लंबे समय तक चलने वाली स्क्रिप्ट को ट्रिगर करता है?
'झलक देखें' मोड
झलक मोड इस्तेमाल करके, आपकी असली साइट पर टैग में किए गए बदलावों को लागू किए बिना उनकी जांच करने के लिए, सार्वजनिक तौर पर पहले दिखाएं. 'झलक देखें' मोड में एक डीबगिंग कंसोल शामिल होता है, जो टैग के बारे में जानकारी.
Google Tag Manager को चलाने का समय अलग होगा (थोड़ा धीमा) जब प्रदर्शन के लिए आवश्यक अतिरिक्त ओवरहेड के कारण पूर्वावलोकन मोड में चलाया जा रहा हो डीबगिंग कंसोल में दी गई जानकारी. इसलिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के आकलन से हमारा सुझाव है कि वीडियो को झलक मोड में इकट्ठा करने का सुझाव नहीं दिया जाता. हालांकि, इस अंतर का असर टैग के काम करने के तरीके पर नहीं पड़ना चाहिए खुद को सुरक्षित रखने की कोशिश करते हैं.
स्टैंडअलोन टेस्टिंग
टैग की जांच करने का एक वैकल्पिक तरीका यह है कि आप एक खाली पेज सेट अप करें, जिसमें एकल टैग वाला कंटेनर—जिस टैग का आप परीक्षण कर रहे हैं. टेस्टिंग के लिए यह सेट अप कम है और यह कुछ समस्याओं को नहीं पकड़ पाएगा (उदाहरण के लिए, क्या किसी टैग की वजह से लेआउट बन रहा है या नहीं शिफ़्ट)—हालांकि, इससे असर को अलग करना और असर को मापना आसान हो सकता है टैग का इस्तेमाल करें. जानें कि Telegraph इसका इस्तेमाल कैसे करता है आइसोलेशन अप्रोच में सुधार करना परफ़ॉर्मेंस कोड की ज़रूरत होती है.
टैग की परफ़ॉर्मेंस पर नज़र रखना
Google Tag Manager की निगरानी एपीआई का इस्तेमाल किया जा सकता है निष्पादन के बारे में जानकारी इकट्ठा करने के लिए समय टैग करें. यह जानकारी आपके चुनने का विकल्प है.
ज़्यादा जानकारी के लिए, Google Tag Manager बनाने का तरीका जानें मॉनिटर.
कंटेनर में बदलाव करने के लिए अनुमति ज़रूरी है
पहले पक्ष के कोड को डिप्लॉय करने से पहले, आम तौर पर उसकी समीक्षा और जांच की जाती है - अपने टैग के साथ एक जैसा व्यवहार करें. दो-चरण वाला खाता जोड़ा जा रहा है पुष्टि करना, ऐसा करने का एक तरीका यह है कि कंटेनर में बदलाव करने के लिए एडमिन की मंज़ूरी ज़रूरी है. यह. इसके अलावा, अगर आप दो चरणों में पुष्टि की सुविधा को ज़रूरी अगर आप अब भी बदलावों पर नज़र रखना चाहते हैं, तो आप कंटेनर सूचनाएं पाने के लिए अपने चुने गए कंटेनर इवेंट के बारे में ईमेल अलर्ट पाएं.
समय-समय पर, टैग के इस्तेमाल को ऑडिट करें
टैग के साथ काम करने की एक चुनौती यह भी है कि वे अलग-अलग समय पर, समय: टैग जोड़े जाते हैं, लेकिन बहुत कम बार हटाए जाते हैं. टैग को समय-समय पर ऑडिट करना को पलटने का तरीका बताया गया है. ऐसा करने की सबसे सही फ़्रीक्वेंसी इस बात पर निर्भर करेगी कि अक्सर आपकी साइट के टैग अपडेट होते हैं.
टैग को इस तरह लेबल करें कि टैग के मालिक को साफ़ तौर पर पता चल सके कि कौन-कौन टैग है, इसकी पहचान आसानी से की जा सकती है उस टैग के लिए रिस्पॉन्सिव है और बता सकता है कि उसकी अब भी ज़रूरत है या नहीं.
टैग को ऑडिट करते समय, ट्रिगर और वैरिएबल को साफ़ करने का ध्यान रखें करते हैं. इनकी वजह से भी परफ़ॉर्मेंस में समस्याएं हो सकती हैं.
ज़्यादा जानकारी के लिए, तीसरे पक्ष की स्क्रिप्ट को नियंत्रण.