როგორ დავამატოთ Yandex Metrica ვებსაიტზე: ნაბიჯ-ნაბიჯ ინსტალაცია, Webvisor და Informer ბეიჯის შეკეთება

როგორც ინდი თამაშების სტუდიისთვის ან კონტენტის შემქმნელისთვის, უაღრესად მნიშვნელოვანია იმის გაზომვა, თუ რომელ სტატიებს კითხულობენ თქვენი ვებსაიტის ვიზიტორები, გვერდის რომელ ნაწილზე აწკაპუნებენ და როგორ ურთიერთქმედებენ თქვენი მაღაზიის ბეიჯებთან. მიუხედავად იმისა, რომ Google Analytics ფართოდ გავრცელებული სტანდარტია, Yandex Metrica (Yandex.Metrika) დეველოპერებისთვის მძლავრი ანალიტიკური ინსტრუმენტია ისეთი უფასო ფუნქციების წყალობით, როგორიცაა Webvisor (სესიის გამეორება / Session Replay), დაწკაპუნების რუკა (Clickmap), სქროლვის რუკა (Scroll Map) და ვიზუალური მრიცხველის ბეიჯი (Informer).

ჩვენ, 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. ახალი ტეგის (Tag) შექმნა Yandex Metrica-ში

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: აუცილებლად დატოვეთ ეს ველი მონიშნული, რათა სხვა საიტებმა ვერ შეძლონ თქვენი მრიცხველის ID-ის კოპირება და სტატისტიკის დაბინძურება (სპამ ტრაფიკი).
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 მოკლე პროფილურ შეკითხვას, რათა სწორად შექმნას დარგობრივი შედარებითი (benchmark) ანგარიშები:

1. Site Type (საიტის ტიპი)

თუ მართავთ პორტალს, რომელიც ძირითადად სტატიებზე, ტექნიკურ სახელმძღვანელოებზე, სიახლეებზე ან დოკუმენტაციაზეა ორიენტირებული, მონიშნეთ Informational website (Website with text content); ხოლო თუ ეს არის უშუალოდ აპლიკაციის/თამაშის სარეკლამო გვერდი, შეგიძლიათ აირჩიოთ Promo website:

2. Industry (დარგი)

თქვენი საიტის შინაარსის მიხედვით აირჩიეთ ტექნოლოგია, მედია, კულტურა/ხელოვნება, ან თუ სიაში ზუსტი შესაბამისობა არ არის, ბოლოში მონიშნეთ Other:

3. CMS (კონტენტის მართვის სისტემა)

თუ თქვენი საიტი იყენებს მზა პლატფორმას, როგორიცაა WordPress, Drupal, Joomla ან Wix, შეგიძლიათ აირჩიოთ სიიდან. თუ იყენებთ საკუთარ შექმნილ PHP/MySQL ან .NET არქიტექტურას, როგორც ჩვენი Mayhem Corporation პორტალი, მონიშნეთ სიის ბოლოში არსებული Other:

4. CRM სისტემა

თუ არ იყენებთ რაიმე კორპორატიულ CRM-ს, ამ ველშიც შეგიძლიათ აირჩიოთ Other (ან Without CRM) და გააგრძელოთ:

5. Your Role in the Project (თქვენი როლი პროექტში)

თუ ხართ ინდი დეველოპერი ან სტუდიის დამფუძნებელი, მონიშნეთ Business management ან Product management და დააჭირეთ ღილაკს Continue:

---

ნაბიჯი 3: კოდის ფრაგმენტის ინსტალაცია (tag.js)

ბოლო ნაბიჯზე Yandex Metrica აგენერირებს განახლებულ JavaScript მრიცხველის კოდს (tag.js), რომელიც უნდა განათავსოთ თქვენი საიტის <head> ან <body> ტეგებს შორის:

გენერირებული თანამედროვე მრიცხველის კოდის სტრუქტურა ასეთია (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: ლოკალური სარეზერვო ვარიანტი (Fallback) 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