Ինչպես ավելացնել 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), նկատեցինք, որ ձախ ընտրացանկում 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. Տեղական պահուստային տարբերակ 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