👩‍🔧 😲 ♿️ सिमो अहावा द्वारा Google टैग प्रबंधक के लिए कस्टम HTML टैग गाइड 👩 🤙🏾 👼🏿

जनवरी के अंत में, सिमो अहावा ने अपने ब्लॉग में Google टैग प्रबंधक में कस्टम HTML टैग का उपयोग करने की संभावना पर एक समीक्षा पोस्ट की। कस्टम HTML टैग साइट पर सामग्री को बदलने के लिए पर्याप्त अवसर प्रदान करते हैं, लेकिन आपको बहुत सावधान रहने की जरूरत है - टैग सुविधाओं और उनके प्रसंस्करण में बहुत जोखिम होता है। मीडियागुरु के विश्लेषक तैमूर लेडेन्योव ने आपके लिए इस उपयोगी समीक्षा का अनुवाद किया है।

काफी समय के लिए (2012 के अंत से), जीटीएम विकल्पों में से एक सबसे महत्वपूर्ण कस्टम HTML टैग था। यह मैजिक टूल GTM को वेबसाइट पेज पर HTML एलिमेंट जोड़ने की अनुमति देता है। 2012 से, Google टैग प्रबंधक एक कस्टम क्लाइंट-साइड सामग्री प्रबंधन समाधान में कस्टम टैग टेम्पलेट के साथ एक अलग वातावरण से विकसित हुआ है।

लेख में, हम कस्टम HTML टैग के सिद्धांतों और इसके अनुप्रयोग की संभावनाओं पर विचार करेंगे।

कस्टम HTML टैग भरना

जैसा कि नाम से ही स्पष्ट है, कस्टम HTML टैग आपको HTML तत्वों को साइट पेज पर रखने की अनुमति देता है। आइए इसे बनाएं:

<script>
  console.log('Hello!');
</script>

<div>
  <span>Hello!</span>
</div>

यह टैग पेज में तीन तत्व जोड़ता है:

<script>, जिसे जावास्क्रिप्ट में संकलित और निष्पादित किया गया है;
ब्लॉक div;
<span>में शामिल <div>

जब आप एक कंटेनर प्रकाशित करते हैं और जावास्क्रिप्ट कंटेनर के न्यूनतम स्रोत को देखते हैं, तो यह इस तरह दिखता है:

आपका सुंदर रूप से निर्मित टैग इस तरह दिखता है क्योंकि HTML एन्कोडेड है, और यह HTML तत्वों के रूप में तारों को परिभाषित करने से पहले एक स्मार्ट कदम है।

EnableIframeMode और enableEditJsMacroBehavior झंडे पुरानी विशेषताएँ हैं जो अब UI में दिखाई नहीं देती हैं। यदि आप जानते हैं कि आप कस्टम HTML टैग इंटरफ़ेस में उन्हें दिखाई दे सकते हैं। लेकिन इसका कुछ भी असर नहीं होगा।

तो, आपने एक कस्टम HTML टैग बनाया और देखा कि यह कंटेनर में कैसे जोड़ा जाता है। लेकिन फिर पेज पर क्या होता है, और वास्तव में कहां होता है?

इंजेक्शन

जब Google टैग प्रबंधक में कस्टम HTML टैग में आग लग जाती है, तो निम्न तंत्र शुरू होता है:

एक डमी बनाई जाती है <div>, जिसमें .innerHTML विशेषता का उपयोग करते हुए, एक कोडेड स्ट्रिंग जोड़ा जाता है जो आपके कस्टम HTML टैग का प्रतिनिधित्व करता है।
यह ब्राउज़र को एन्कोडेड स्ट्रिंग को HTML के रूप में व्यवहार करने के लिए मजबूर करता है, ताकि कस्टम HTML में जोड़े गए टैग HTML तत्वों में परिवर्तित हो जाएं।
एक-एक करके, इन तत्वों को हटा दिया जाता है <div>और इंजेक्शन लगाने के लिए आगे बढ़ते हैं।
फिर प्रत्येक तत्व को अंतिम बच्चे के दस्तावेज के रूप में जोड़ा जाता है।

इस प्रक्रिया में कुछ बारीकियाँ हैं:

कैसे Google टैग प्रबंधक कतार में onHtmlSuccess और onHtmlFailure के साथ सहभागिता करता है
तत्वों <script>को इंजेक्शन से पहले सभी उपयोगकर्ता विशेषताओं से कैसे साफ़ किया जाता है।

इसका क्या मतलब है? कस्टम HTML टैग में आप जो कुछ भी दर्ज करते हैं वह शरीर के अंत में जोड़ा जाता है, जो भी इंजेक्शन के समय था। आमतौर पर वे पृष्ठ पाद लेख का मतलब है, लेकिन यह आवश्यक नहीं है, आधुनिक पेज लेआउट दिया जाता है।

महत्वपूर्ण: जब आप पृष्ठ में एक नया तत्व जोड़ते हैं, तो आप सामग्री को फिर से व्यवस्थित करना शुरू करते हैं। आमतौर पर, ब्राउज़र को तत्वों के आकार, स्थिति, लेआउट और विशेषताओं का पुनर्गणना करना चाहिए; एक अंतर्निहित तत्व के भीतर पूर्ववर्ती, आसपास या नेस्टेड।

यह उतना आसान नहीं है। प्रत्येक आइटम जो आप जोड़ते हैं वह समस्या को बढ़ा देती है। और एकल-पृष्ठ अनुप्रयोगों में, जो संक्रमण के बीच DOM को रीसेट नहीं कर सकते हैं, आप एक पृष्ठ पर सैकड़ों ऐसे तत्वों का निरीक्षण कर सकते हैं, जिनमें से प्रत्येक का प्रदर्शन अधिक से अधिक बिगड़ता है। हम इस निष्कर्ष पर लौटेंगे, लेकिन निष्कर्ष से पहले मैं कहूंगा:

स्पष्ट आवश्यकता के बिना कस्टम HTML टैग का उपयोग करने से बचें।

मैं मानता हूं, लेख के लिए इस तरह का एक अस्वीकृति विडंबना के बिना नहीं है।

कस्टम HTML स्क्रिप्टिंग लिपियों

किसी तत्व को इंजेक्ट करने के लिए इन टैग का उपयोग क्यों करें और टैग प्रबंधन समाधान लागू करें? एक उत्कृष्ट प्रश्न जिसके लिए मेरे पास त्वरित और निश्चित उत्तर नहीं है।

मैं कह सकता हूं कि कंटेनर में बड़ी संख्या में कस्टम HTML निम्नलिखित स्थितियों में से एक के बारे में बात कर सकते हैं:

आपको एक बहुत ही जटिल मामले का सामना करना पड़ता है जिसके लिए मानक जीटीएम टैग या कस्टम टेम्पलेट उपयुक्त नहीं हैं।
आप GTM (या जावास्क्रिप्ट) में नए हैं और आप यह नहीं समझते हैं कि आपके किसी भी कस्टम HTML टैग को मानक टैग या कस्टम टेम्पलेट से बदला जा सकता है।
, -, .
, - .
, Google Tag Manager, .

यह आपका कंटेनर है, और निश्चित रूप से, आपको इसका उपयोग करने का अधिकार है जैसा कि आप फिट देखते हैं। लेकिन अगर परिदृश्य 2 और 3 दिखाई देते हैं, तो मैं दृढ़ता से सलाह देता हूं कि आप यथास्थिति में बदलाव करें। जीटीएम और जावास्क्रिप्ट की जटिलता को अनदेखा करना उन सकारात्मक प्रभावों को बाधित कर सकता है जो इन प्रौद्योगिकियों को खोलते हैं। लंबे समय में आपकी कंपनी में स्थापित प्रतिबंधों के विपरीत काम करना भी असहमति और बाधित संचार, एक भयानक साइट और सूचना के अविश्वसनीय भंडारण का कारण होगा।

आइए कुछ परिदृश्य देखें जिनमें आप शायद कस्टम HTML टैग आज़माना चाहते हैं।

किसी आइटम को पृष्ठ पर किसी विशिष्ट स्थान पर जोड़ना

कस्टम HTML टैग का नुकसान यह है कि यह तत्व को अंत में एम्बेड करता है <body>। किस लिए? यदि तत्व एक दृश्य घटक है (यानी, इसे स्क्रीन पर प्रदर्शित किया जाना चाहिए), तो यह सबसे अधिक संभावना है कि अंत <body>वह स्थान नहीं है जहां आप इसे देखना चाहते हैं। इसके आस-पास जाने के लिए, आपको जावास्क्रिप्ट और इसके डोम हेरफेर विधियों का उपयोग करने की आवश्यकता है।

चाल कुछ तत्व को खोजने के लिए है जो पहले से ही पृष्ठ पर है और इसके सापेक्ष एक नया तत्व रखता है।

: उदाहरण के लिए, मैं इसे इस तरह देखो बनाने के लिए पेज के लिए एक छोटा सा उपशीर्षक जोड़ना चाहते हैं

, अब इस प्रकार यदि आप एक कस्टम HTML बनाएँ: <h3> It's really cool - I promise!</h3>, तत्व अंत में जोड़ा जाता है <body>और बहुत अच्छा नहीं लग रही होगी।

इसलिए इसके बजाय मुझे चाहिएजावास्क्रिप्ट का उपयोग करके एक नया तत्व बनाएं , और फिर इसे पृष्ठ शीर्षक के सापेक्ष स्थिति दें।

<script>
  (function() {
    //    <h3> 
    var h3 = document.createElement('h3');
    
    //  
    h3.innerText = "It's really cool - I promise!";
    
    //     <h1>
    var title = document.querySelector('h1');
    
    //      <h1>
    if (title) {
      title.parentElement.insertBefore(h3, title.nextSibling);
    }
  })();
</script>

अंतिम परिणाम आप ऊपर दिए गए स्क्रीनशॉट में देखें।

यह एक सूक्ष्म विडंबना है - आप एक तत्व ( <script>) बनाने के लिए कस्टम HTML का उपयोग करते हैं जो दूसरा तत्व बनाएगा ( <h3>)। हां, यह बहुत अच्छा होगा यदि आप कस्टम HTML में परिभाषित कर सकते हैं जहां तत्व स्थित होगा। वास्तव में, यह और भी ठंडा होगा यदि कोई कस्टम टेम्पलेट था जो आपको तत्व के लिए स्थान का चयन करने की क्षमता के साथ एक तत्व बनाने की अनुमति देता है। इस प्रकार, आपको कोड के अंत में स्क्रिप्ट को इंजेक्ट करने की आवश्यकता नहीं है! लेकिन हम विचलित थे।

स्क्रिप्ट को `<head>`यथासंभव उच्च स्थान पर रखना

यह आंशिक रूप से पिछले परिदृश्य के कारण है, लेकिन यह विशेष ध्यान देने योग्य है कि यह स्थिति कितनी बार उत्पन्न होती है। कभी-कभी आपसे पूछा जाता है: "स्क्रिप्ट को ASUCH ABOVE के रूप में रखें <head>।"

इसलिए आपको जल्द से जल्द पेज पर चलने के लिए स्क्रिप्ट की आवश्यकता है। तत्व जितना अधिक <head>होगा, ब्राउज़र उतनी ही तेज़ी से प्रदर्शित पृष्ठ के भाग के रूप में संसाधित होगा।

लेकिन Google टैग प्रबंधक का उपयोग करते समय यह लाभ खो जाता है। आमतौर पर, जब जीटीएम लाइब्रेरी ने लोड किया है, तो प्रसंस्करण <head>पहले ही समाप्त हो गया है, और ब्राउज़र पूरे जोरों पर प्रदान कर रहा है <body>। इस वजह से, स्क्रिप्ट को <head>यथासंभव जोड़ने की कोशिश करना कोई मतलब नहीं है और वास्तव में केवल अंतिम परिणाम को परेशान करता है।

क्यों? जब आपने कस्टम HTML बनाया, तो यह एक तत्व बनाता है और इसे अंदर एम्बेड करता है<head>। सबसे पहले, ब्राउज़र को कस्टम HTML (प्रदर्शन हिट) जोड़ने की आवश्यकता है, फिर एक नया तत्व (दूसरा प्रदर्शन हिट) बनाएं और अंत में <head>(प्रदर्शन हिट) में एक नया तत्व जोड़ें ।

इसके बजाय, आपको सीधे <script>कस्टम में HTML जोड़ने की आवश्यकता है । इस पद्धति के साथ, इसे अंत तक जोड़ा जाएगा <body>, और ब्राउज़र इसे जितनी जल्दी हो सके निष्पादित करेगा।

तृतीय-पक्ष जावास्क्रिप्ट कोड डाउनलोड करना

आइए पिछले परिदृश्य से प्रयोग जारी रखें। मान लीजिए कि आपके पास एक तृतीय-पक्ष डेवलपर है जिसका जावास्क्रिप्ट कोड आप साइट पर अपलोड करना चाहते हैं। और आपको एहसास हुआ कि आपको केवल <script>कस्टम HTML का उपयोग करके पृष्ठ पर एक तत्व जोड़ना होगा ।

इस स्थिति में, आपको कस्टम HTML का उपयोग करने की आवश्यकता नहीं है।

इसके बजाय, एक कस्टम टेम्पलेट बनाएं जो लाइब्रेरी लोड करने के लिए इंजेक्टस्क्रिप्ट एपीआई का उपयोग करता है।

कस्टम टेम्पलेट जावास्क्रिप्ट इंजेक्शन और लोडिंग के लिए अनुकूलित हैं, और वे एक सुरक्षित (अधिक सुरक्षित) इंजेक्शन के लिए एक अनुमति और नीति मॉडल पेश करते हैं।

भविष्य में, यह लागू करने का सबसे अच्छा तरीका होगा<script>। यह अन्य स्क्रिप्ट के साथ आपकी मदद नहीं करेगा, क्योंकि जावास्क्रिप्ट टेम्पलेट का मानक सेट काफी सीमित है। इसलिए, यदि आप जोड़ना चाहते हैं, उदाहरण के लिए, एक कस्टम ईवेंट श्रोता, तो आपको कस्टम HTML टैग की आवश्यकता होगी।

ऑक्स को बदलें

कस्टम HTML के साथ आप जिन चीजों को करना चाहते हैं उनमें से एक है UX (उपयोगकर्ता अनुभव) को संशोधित करना। ऐसा करने के लिए, आप कुकी बैनर की तरह कुछ का उपयोग कर सकते हैं, पृष्ठ पर शैलियों को बदलना या इसे जोड़ना संभव है <iframe>, जो आपके ईकॉमर्स साइट के लिए कुछ सुविधाजनक विजेट को लोड करता है।

मैं आपको Google टैग प्रबंधक के साथ यह सब करने में शामिल जोखिमों के बारे में चेतावनी देना चाहूंगा।

(, Brave) / GTM. ( , ).
/ , . , HTML . Google Tag Manager , , , . querySelector() , – - .
इस सब से जोड़े गए प्रदर्शन-संबंधी कारण जो मैंने ऊपर बताए हैं। बढ़ते हुए क्रम में प्रत्येक गतिशील तत्व को जोड़ने से पृष्ठ का प्रदर्शन ख़राब हो जाएगा, जिससे कष्टप्रद चीजें हो सकती हैं: आपके कस्टम तत्व प्रकट और गायब होने लगेंगे; डेटा की गुणवत्ता खराब हो जाएगी (जब iframe, जिसे आप गतिशील रूप से बदलते हैं, परिवर्तन करने से पहले समय होता है) लैग्स और पेज फ्रीज तक, विशेष रूप से सिंगल-पेज साइट्स पर।

इसलिए, कृपया Google टैग प्रबंधक को सामग्री प्रबंधन प्रणाली के रूप में उपयोग करने पर विचार न करें।

जाँच - परिणाम

यह कस्टम HTML टैग की विशेषताओं का एक संक्षिप्त अवलोकन था।

यदि मैं 2012 में खुद से बात कर सकता हूं, तो मैं खुद को जल्द से जल्द कस्टम HTML टैग की कमियों पर विचार करने की सलाह दूंगा और स्क्रिप्ट जोड़ने के लिए Google टैग प्रबंधक की अंतहीन संभावनाओं के बारे में भ्रम पैदा करना बंद कर दूंगा। लेकिन इसके बजाय, एक जटिल तरीके से सोचने के लिए - संगठन के बारे में, साइट के बारे में समग्र रूप से और पर्यावरण के संदर्भ में जिसमें जीटीएम काम करता है - जोखिम भरा निर्णय लेने से पहले।

हालाँकि, आज कस्टम HTML के लिए आवेदन हैं। कस्टम HTML टैग (document.addEventListener ()) का उपयोग करके एक क्लिक श्रोता बनाना जीटीएम ट्रिगर्स का उपयोग करके कुछ प्रकार के कस्टम कोड चलाने से अधिक फायदेमंद हो सकता है।

ऐसा इसलिए है क्योंकि हर बार जब यह क्लिक होता है तो क्लिक ट्रिगर बार-बार टैग को चलाएगा (इसे बार-बार इंजेक्ट करता है)। यदि आप कस्टम HTML टैग में अपना क्लिक श्रोता बनाते हैं और इसके साथ दोहराव वाला काम करते हैं, तो आप कार्यान्वयन के दौरान भ्रम से बचेंगे।

मैं परिकल्पनाओं के समर्थन में कस्टम HTML की सुविधा के लिए भी जोरदार प्रतिज्ञा करता हूं। आप आगंतुकों के एक विशिष्ट नमूने में परिवर्तन पोस्ट करके एक नई डिज़ाइन या कार्यक्षमता को जल्दी से आज़मा सकते हैं। यदि परिणाम संतोषजनक हैं, तो साइट के मुख्य कोड में शामिल किए जाने के लिए इन परिवर्तनों का प्रस्ताव करना संभव होगा।

हालाँकि, मुझे उम्मीद है कि एक दिन कस्टम टेम्पलेट कस्टम HTML टैग को बदल देंगे।

कस्टम HTML टैग का उपयोग करने वालों के लिए एक जुदा शब्द के रूप में, विशेष रूप से उन लोगों के लिए जो नेटवर्क पर पाए गए कोड को जोड़ना चाहते हैं, प्रसिद्ध रूसी कहावत काम में आती है:
ट्रस्ट, लेकिन सत्यापित करें।

यदि आपको पता नहीं है कि कोड क्या कर रहा है, तो किसी परिचित वेब डेवलपर से जांच करें।

सिमो अहावा द्वारा Google टैग प्रबंधक के लिए कस्टम HTML टैग गाइड