अपनी वेबसाइट में Yandex Metrica कैसे जोड़ें: स्टेप-बाय-स्टेप इंस्टॉलेशन, Webvisor और Informer बैज की मरम्मत

एक इंडी गेम स्टूडियो या कंटेंट क्रिएटर के रूप में, यह मापना बेहद महत्वपूर्ण है कि आपकी वेबसाइट पर आने वाले विज़िटर्स कौन से लेख पढ़ रहे हैं, पेज पर कहाँ क्लिक कर रहे हैं और आपके स्टोर बैज के साथ कैसे इंटरैक्ट कर रहे हैं। यद्यपि Google Analytics एक व्यापक मानक है, फिर भी मुफ़्त Webvisor (सत्र रीप्ले / Session Replay), क्लिक मैप (Clickmap), स्क्रॉल मैप (Scroll Map) और विज़ुअल काउंटर बैज (Informer) सुविधाओं के साथ Yandex Metrica (Yandex.Metrika) डेवलपर्स के लिए एक शक्तिशाली एनालिटिक्स टूल है।

Arar Games के रूप में, 2011 से सक्रिय हमारे गेम डेवलपमेंट पोर्टल Mayhem Corporation (mayhemcorporation.com) को मोबाइल उपकरणों के अनुकूल (रिस्पॉन्सिव) बनाते समय, हमने पाया कि हमारे बाएं मेनू में 2012 से लगा Yandex Metrica काउंटर और विज़ुअल बैज अब एक टूटी हुई छवि के रूप में दिखाई दे रहा है।

2012 से पुराने bs.yandex.ru पते वाला Yandex Metrica बैज आधुनिक ब्राउज़रों में टूटे हुए आइकन के रूप में दिखाई दे रहा है।

इस गाइड में, हम शुरुआत से एक नया Yandex Metrica टैग (Tag) बनाना, अपनी साइट में अद्यतन tag.js कोड को एकीकृत करना और पुराने bs.yandex.ru के कारण टूटे हुए Informer बैज को AdBlocker सुरक्षा के साथ ठीक करना चरण-दर-चरण साझा कर रहे हैं।

---

1. Yandex Metrica में नया टैग (Tag) बनाना

अपने Yandex खाते से metrica.yandex.com पर लॉग इन करने के बाद, एक नया वेबसाइट काउंटर जोड़ने के लिए हम Add tag (metrica.yandex.com/add) स्क्रीन पर जाते हैं। सेटअप 3 बुनियादी चरणों से मिलकर बना है:

चरण 1: Create Tag (टैग जानकारी और Webvisor सेटिंग)

पहली स्क्रीन पर, हम अपनी साइट की बुनियादी पहचान और क्षेत्रीय सेटिंग्स कॉन्फ़िगर करते हैं:

1. Tag name: डैशबोर्ड में अपने प्रोजेक्ट को पहचानने के लिए एक नाम दर्ज करें (उदा: Mayhem Corporation)।
2. Website URL: प्रोटोकॉल (https://) के बिना अपनी साइट का मुख्य डोमेन दर्ज करें (उदा: mayhemcorporation.com).
3. Accept data only from the specified addresses: अन्य साइटों को आपकी काउंटर आईडी कॉपी करने और आपके आंकड़ों को दूषित (स्पैम ट्रैफ़िक) करने से रोकने के लिए इस बॉक्स को अनिवार्य रूप से चेक किया हुआ रखें।
4. Including subdomains: यदि आप blog.yoursite.com जैसे सबडोमेन को भी उसी काउंटर में एकत्र करना चाहते हैं तो आप इसे चुन सकते हैं।
5. Time zone & Currency: दैनिक विज़िटर रीसेट समय आपके स्थानीय समय के अनुरूप रखने के लिए (GMT+03:00) Istanbul (या अपना स्थानीय समय क्षेत्र) और मुद्रा के रूप में TRY (या USD) चुनें।
6. Session Replay, scroll map, form analysis (Webvisor):

   💡 सबसे महत्वपूर्ण विशेषता: जब आप इस विकल्प को सक्रिय करते हैं, तो Yandex Metrica विज़िटर्स के माउस मूवमेंट्स, स्क्रॉल गहराई और वे किन गेम/आलेख कार्ड्स पर क्लिक करते हैं, इसे एक अज्ञात वीडियो रिकॉर्डिंग की तरह देखने की अनुमति देता है।

---

चरण 2: Fill Out the Profile (साइट प्रोफ़ाइल कॉन्फ़िगर करना)

दूसरे चरण में, Yandex Metrica सटीक उद्योग बेंचमार्क रिपोर्ट तैयार करने के लिए 5 संक्षिप्त प्रोफ़ाइल प्रश्न पूछता है:

1. Site Type (साइट का प्रकार)

यदि आप लेखों, तकनीकी गाइडों, समाचारों या प्रलेखन पर केंद्रित पोर्टल का प्रबंधन करते हैं, तो Informational website (Website with text content) चुनें; यदि यह सीधे तौर पर ऐप/गेम प्रचार पृष्ठ है, तो आप Promo website चुन सकते हैं:

2. Industry (उद्योग)

अपनी साइट की सामग्री के अनुसार प्रौद्योगिकी, मीडिया, संस्कृति/कला चुनें, या यदि सूची में सटीक मिलान नहीं है, तो सबसे नीचे Other चुनें:

3. CMS (कंटेंट मैनेजमेंट सिस्टम)

यदि आपकी साइट WordPress, Drupal, Joomla या Wix जैसे तैयार प्लेटफ़ॉर्म का उपयोग करती है, तो आप इसे सूची से चुन सकते हैं। यदि आप हमारे Mayhem Corporation पोर्टल की तरह स्वयं विकसित कस्टम PHP/MySQL या .NET आर्किटेक्चर का उपयोग करते हैं, तो सूची के नीचे Other चुनें:

4. CRM प्रणाली

यदि आप किसी एंटरप्राइज CRM का उपयोग नहीं करते हैं, तो आप इस फ़ील्ड में भी Other (या Without CRM) चुनकर आगे बढ़ सकते हैं:

5. Your Role in the Project (परियोजना में आपकी भूमिका)

यदि आप एक इंडी डेवलपर या स्टूडियो संस्थापक हैं, तो Business management या Product management चुनें और Continue बटन पर क्लिक करें:

---

चरण 3: कोड स्निपेट इंस्टॉलेशन (tag.js)

अंतिम चरण में, Yandex Metrica आपकी साइट के <head> या <body> टैग्स के बीच रखने के लिए आधुनिक JavaScript काउंटर कोड (tag.js) उत्पन्न करता है:

उत्पन्न आधुनिक काउंटर कोड की संरचना इस प्रकार है (YOUR_TAG_ID के स्थान पर आपका अपना काउंटर नंबर आएगा):

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function(m,e,t,r,i,k,a){
        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=YOUR_TAG_ID', 'ym');

    ym(YOUR_TAG_ID, 'init', {
        ssr:true,
        webvisor:true,
        clickmap:true,
        ecommerce:"dataLayer",
        referrer: document.referrer,
        url: location.href,
        accurateTrackBounce:true,
        trackLinks:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/YOUR_TAG_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

अपनी साइट के मुख्य टेम्पलेट (index.php या header.php) में कोड जोड़ने और इसे सर्वर पर अपलोड करने के बाद, काउंटर लाइव काम कर रहा है यह सत्यापित करने के लिए स्क्रीन पर "Check tag" बटन दबाएं और अपने एनालिटिक्स डैशबोर्ड पर जाने के लिए "Get started" पर क्लिक करें।

---

2. टूटे हुए Yandex Metrica विज़ुअल बैज (Informer) की मरम्मत और AdBlocker सुरक्षा

2011-2014 में बनी वेबसाइटों पर, Yandex Metrica का प्रतिष्ठित 88x31 पिक्सेल फ़िरोज़ी आँकड़ा बैज (Informer) निम्नलिखित पुराने पते के साथ कॉल किया जाता था:

//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews

चूँकि Yandex ने वर्षों में bs.yandex.ru सर्वर और पुरानी watch.js स्क्रिप्ट को बंद कर दिया है, यह पता अब HTTP 404 Not Found लौटाता है और पेज पर एक टूटी हुई छवि आइकन दिखाता है।

समाधान 1: अद्यतन informer.yandex.ru एंडपॉइंट

विज़ुअल बैज चलाने के लिए, हम छवि स्रोत को Yandex की वर्तमान Informer सेवा (https://informer.yandex.ru/informer/...) पर पुनर्निर्देशित करते हैं।

समाधान 2: AdBlocker का उपयोग करने वाले विज़िटर्स के लिए स्थानीय फ़ॉलबैक (onerror)

आजकल कई गेमर्स और डेवलपर्स अपने ब्राउज़र में AdBlocker (uBlock Origin, Brave Shield आदि) का उपयोग करते हैं। जब विज्ञापन अवरोधक एनालिटिक्स डोमेन को ब्लॉक करते हैं, तो बैज छवि लोड नहीं हो सकती है। यह सुनिश्चित करने के लिए कि डिज़ाइन किसी भी परिस्थिति में बाधित न हो, हम अपने स्वयं के सर्वर पर बैज की 88x31 पिक्सेल की एक प्रति होस्ट करते हैं (images/yandex_metrica_badge.png) और इसे onerror विशेषता के साथ स्वचालित रूप से सक्षम करते हैं:

<!-- Yandex.Metrika informer -->
<a href="https://metrica.yandex.com/stat/?id=YOUR_TAG_ID&amp;from=informer"
   target="_blank" rel="nofollow">
   <img src="https://informer.yandex.ru/informer/YOUR_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews"
        onerror="this.onerror=null;this.src='images/yandex_metrica_badge.png';"
        style="width:88px; height:31px; border:0; border-radius:3px;"
        alt="Yandex.Metrica"
        title="Yandex.Metrica: bugünün verileri (gösterimler, ziyaretler ve tekil ziyaretçiler)"
        class="ym-advanced-informer" data-cid="YOUR_TAG_ID" data-lang="tr" />
</a>
<!-- /Yandex.Metrika informer -->

इस समायोजन के बाद, Mayhem Corporation के बाएं मेनू में Yandex Metrica बैज नियमित ब्राउज़रों में लाइव आँकड़ों के साथ और AdBlocker सक्षम ब्राउज़रों में बिना किसी टूटे हुए आइकन के साफ-सुथरा प्रदर्शित होता है:

अपडेट के बाद mayhemcorporation.com/mayhem/index.php के बाएं मेनू में सक्रिय Yandex Metrica Informer बैज।

पेज व्यूज, विज़िट और अद्वितीय विज़िटर्स का सारांश देने वाला फ़िरोज़ी 88x31 Informer बैज।

---

3. हमारी वेबसाइट और गेम्स (Arar Games)

हमारी वेबसाइट

• Mayhem Corporation: गेम डेवलपमेंट और XNA / MonoGame पर तकनीकी लेखों वाला हमारा वेब पोर्टल।
  mayhemcorporation.com

हमारे गेम्स

• Blocked: Pixel Panzer: 2D पिक्सेल टैंक एक्शन और आर्केड गेम।
  Google Play | Microsoft Store
• Paint Trek: 2D अंतरिक्ष-थीम वाला आर्केड और पहेली गेम।
  Google Play | Microsoft Store
• Space Dodger: रिफ्लेक्स-केंद्रित 2D अंतरिक्ष आर्केड गेम।
  Google Play

सोशल मीडिया

• TikTok: @arargamesstudio
• Instagram: @arargamesstudio
• X (Twitter): @arargamesstudio
• YouTube: @koreaaria
• Threads: @arargamesstudio
• Facebook: arargamesstudio