Google Tag Manager के ज़रिए Stats4U काउंटर लगाना

इस बारे में ब्लॉग पर 2015 की एक गाइड मौजूद है। उसके स्क्रीनशॉट में Tag Manager जैसा दिखता है, वह अब वैसा नहीं दिखता, और उसके सात कदमों में से एक – document.write पर टिक लगाना – अब बिल्कुल ज़रूरी नहीं है। यह पोस्ट उसकी जगह लेती है।

यह उस सवाल का जवाब भी देती है, जिसे पुरानी गाइड ने छोड़ दिया था। उसमें Tag Manager के साथ अदृश्य काउंटर की सलाह दी गई थी, इस आधार पर कि आँकड़ों वाली इमेज की जगह तय नहीं की जा सकती। तय की जा सकती है। इसका तरीका इस पेज पर सबसे नीचे है।

संक्षेप में

Tag Manager में: Tags → New → Custom HTML, फिर HTML फ़ील्ड में यह एक लाइन पेस्ट करें:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

ट्रिगर चुनें: All Pages; फिर कंटेनर को सहेजकर पब्लिश करें। data-id एट्रिब्यूट में काउंटर नंबर आता है, जो आँकड़ों के पेज पर दिया गया है।

बस इतना ही काम है – तीन फ़ील्ड और एक ट्रिगर, जबकि 2015 में सात कदम लगते थे। document.write के लिए कुछ भी टिक नहीं करना पड़ता, क्योंकि स्क्रिप्ट अब इसका इस्तेमाल नहीं करती।

यह असल में क्या करता है – और हो सकता है कि यह सही विकल्प न हो

स्क्रिप्ट काउंटर को पेज में ठीक अपने बाद रखती है। हाथ से लिखे HTML में सीधे पेस्ट करने पर यह बिल्कुल सही है: काउंटर वहीं दिखता है, जहाँ कोड है।

Tag Manager के ज़रिए बात अलग है, क्योंकि जगह अब अपनी मर्ज़ी से नहीं चुनी जाती। यह कंटेनर तय करता है, और वह आमतौर पर डॉक्यूमेंट के head में होता है, या वहाँ, जहाँ कंटेनर का कोड लगाया गया था। इसलिए काउंटर वहीं डाला जाता है – न फ़ुटर में, न साइडबार में, बल्कि वहाँ, जहाँ Tag Manager ने टैग डाल दिया।

किसी अदृश्य काउंटर के लिए इससे ज़रा भी फ़र्क नहीं पड़ता, इसीलिए पुरानी गाइड ने उसी की सलाह दी थी। डिज़ाइन 980 कुछ नहीं दिखाता, डिज़ाइन 981 सिर्फ़ एक छोटा आइकन दिखाता है, जो आँकड़ों के पेज से लिंक होता है। ऐसे में ऊपर दिया गया संक्षिप्त तरीका पूरा है, और इस लेख का बाकी हिस्सा वैकल्पिक है।

दिखने वाले काउंटर को किसी खास जगह पर रखने के लिए थोड़ा और करना पड़ता है।

काउंटर कहाँ दिखे, यह तय करना

स्क्रिप्ट का एक दूसरा मोड भी है, जिसका पुरानी गाइड में कभी ज़िक्र नहीं हुआ। data-id एट्रिब्यूट की जगह यह एक सूची लेती है, और ID के आधार पर प्लेसहोल्डर एलिमेंट खोजती है।

पहला कदम – पेज में एक प्लेसहोल्डर, वहाँ, जहाँ काउंटर होना चाहिए। यह खुद वेबसाइट के टेम्पलेट में जाता है, Tag Manager में नहीं, क्योंकि हम इसी फ़ैसले से Tag Manager को दूर रखना चाहते हैं:

<div id="s4u_cp0"></div>

दूसरा कदम – Tag Manager में यह कोड एक लाइन वाले कोड की जगह लेता है। टैग का प्रकार वही, Custom HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

तीसरा कदम – ट्रिगर बदलें। इसी हिस्से में लोग अक्सर चूक जाते हैं। All Pages उतनी जल्दी फ़ायर होता है, जितनी जल्दी Tag Manager कर सकता है, और अक्सर यह डॉक्यूमेंट में प्लेसहोल्डर बनने से पहले ही हो जाता है। यहाँ पहले से मौजूद DOM Ready ट्रिगर ही सही है। काउंटर को div के बाद आना चाहिए, उससे पहले नहीं।

अब काउंटर उसी div के अंदर दिखता है, और कहीं नहीं।

काउंटर किन पेजों पर दिखे, यह तय करना

इसके लिए दो अलग-अलग तरीके हैं, जो एक-दूसरे पर निर्भर नहीं हैं, और उन्हें अलग-अलग समझना फ़ायदेमंद है।

पहला तरीका प्लेसहोल्डर है। फ़ंक्शन के अंदर की पहली लाइन यह काम करती है: अगर पेज पर s4u_cp0 नहीं है, तो वह वहीं रुक जाती है और स्क्रिप्ट डाउनलोड तक नहीं होती। इसलिए जिस टेम्पलेट में div है, उसमें काउंटर आता है, और जिसमें नहीं है, उसमें नहीं आता – यह फ़ैसला खुद वेबसाइट के टेम्पलेट में होता है, Tag Manager में कोई बदलाव किए बिना और बिना पब्लिश किए।

दूसरा तरीका ट्रिगर है। यही फ़ैसला Tag Manager में भी किया जा सकता है: ट्रिगर पर एक शर्त, ताकि वह DOM Ready पर सिर्फ़ वहीं फ़ायर हो, जहाँ Page Path मेल खाता हो। URL से जुड़े नियमों के लिए ट्रिगर ठीक है, टेम्पलेट से जुड़े नियमों के लिए प्लेसहोल्डर।

एक पेज पर एक से ज़्यादा काउंटर

सूची में जितने चाहिए, उतने काउंटर रखे जा सकते हैं। सूची में जगह ही प्लेसहोल्डर ID की संख्या है:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

पहला काउंटर इसमें जाता है: s4u_cp0, दूसरा इसमें: s4u_cp1। दोनों को यह पोस्ट लिखते समय ब्राउज़र में जाँचा गया: पहला 20 × 20 के आइकन के रूप में दिखा, दूसरा 162 × 25 की पट्टी के रूप में, हर एक अपने प्लेसहोल्डर के अंदर, और पेज पर कहीं और नहीं।

चार बातें, जिनसे दिक्कत होती है

• दोनों तरीके एक साथ नहीं चलते। जिस टैग में data-id एट्रिब्यूट भी हो और सूची भी सेट हो, वह दो काउंटर बनाता है, और दोनों हिट अलग-अलग गिने जाते हैं।
• सूची में s4ustyleid हमेशा ज़रूरी है। जब data-style एट्रिब्यूट नहीं होता, तो चुपचाप डिज़ाइन 30 लिया जाता है। सूची वाले तरीके में ऐसा कोई डिफ़ॉल्ट नहीं है, और वह खाली डिज़ाइन माँगेगा।
• प्लेसहोल्डर न हो, तो गड़बड़ी का कोई संकेत नहीं मिलता। न काउंटर, न गड़बड़ी का कोई संदेश, कंसोल में भी कुछ नहीं। जब कुछ न दिखे, तो पहला शक ID पर जाता है – s4u_cp0, शून्य के साथ, अक्षर O के साथ नहीं।
• अदृश्य काउंटर में जान-बूझकर कोई लिंक नहीं है। डिज़ाइन 980 बिना लिंक के बनता है, क्योंकि किसी और के पेज पर एक पिक्सेल का पारदर्शी क्लिक करने लायक हिस्सा सुविधा नहीं, बल्कि जाल है। लिंक चाहिए, तो डिज़ाइन 981 यह काम करता है, अपने छोटे आइकन के साथ।

काम कर रहा है या नहीं, यह जाँचना

Tag Manager का Preview मोड पेज को सक्रिय कंटेनर के साथ लोड करता है। टैग DOM Ready इवेंट के फ़ायर हुए टैग में दिखना चाहिए। फिर आँकड़ों का पेज इसकी पुष्टि करता है – Preview से हुई विज़िट भी बाकी विज़िट की तरह गिनी जाती है, इसलिए कुछ ही सेकंड में संख्या बदलनी चाहिए।

अगर टैग फ़ायर होता है, पर कुछ नहीं दिखता, तो गड़बड़ी प्लेसहोल्डर में है या ट्रिगर में – और ज़्यादा संभावना इसी क्रम में है।