Како да додадете Yandex Metrica на вашата веб-страница? Водич за инсталација чекор по чекор, Webvisor и поправка на Informer значката

Како независно студио за игри или создавач на содржини, од огромна важност е да мерите кои статии ги читаат посетителите на вашата веб-страница, каде кликнуваат на страницата и како комуницираат со вашите значки на продавниците. Иако Google Analytics е широко прифатен стандард, Yandex Metrica (Yandex.Metrika) е моќна алатка за аналитика за програмери, со своите бесплатни функции: Webvisor (снимање на сесии / Session Replay), топлинска мапа на кликови (Clickmap), мапа на скролување (Scroll Map) и визуелна значка на бројач (Informer).

Како Arar Games, при прилагодувањето на нашиот портал за развој на игри Mayhem Corporation (mayhemcorporation.com), кој е онлајн од 2011 година, да биде компатибилен со мобилни уреди (responsive), забележавме дека нашиот бројач и визуелна значка на Yandex Metrica од 2012 година во левото мени се прикажуваат како скршени.

Старата значка на Yandex Metrica од 2012 година од адресата bs.yandex.ru која се појавува како скршена икона во современите прелистувачи.

Во овој водич чекор по чекор споделуваме како од нула да креирате нова ознака (Tag) на Yandex Metrica, да го интегрирате ажурираниот код tag.js на вашата страница и да ја поправите скршената Informer значка од стариот bs.yandex.ru со AdBlocker заштита.

---

1. Креирање нова ознака (Tag) во Yandex Metrica

Откако ќе се најавите на metrica.yandex.com со вашата Yandex сметка, одиме на екранот 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.vasasajt.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 се внесува вашиот 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 година, иконската тиркизна статистичка значка од 88x31 пиксели (Informer) на Yandex Metrica беше повикувана преку следнава стара адреса:

//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

За да функционира визуелната значка, изворот на сликата го пренасочуваме кон ажурираната услуга Informer на Yandex (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 -->

По оваа корекција, значката на Yandex Metrica во левото мени на Mayhem Corporation се прикажува и во нормални прелистувачи со статистика во живо и во прелистувачи со вклучен AdBlocker без скршена икона:

Активна значка Yandex Metrica Informer во левото мени на mayhemcorporation.com/mayhem/index.php по ажурирањето.

Тиркизна значка Informer 88x31 што сумира прегледи на страници, посети и уникатни посетители.

---

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