כיצד להוסיף את Yandex Metrica לאתר שלכם: מדריך התקנה שלב אחר שלב, Webvisor ותיקון תג Informer

כסטודיו למשחקי אינדי או כיוצרי תוכן, מדידת המאמרים שהמבקרים קוראים באתר שלכם, היכן הם לוחצים בדף וכיצד הם מקיימים אינטראקציה עם תגי החנות שלכם היא בעלת חשיבות רבה. אף על פי ש-Google Analytics הוא תקן נפוץ, Yandex Metrica (Yandex.Metrika) הוא כלי אנליטיקה רב-עוצמה למפתחים בזכות תכונות חינמיות כגון Webvisor (הקלטת והשמעת הפעלות / Session Replay), מפת לחיצות (Clickmap), מפת גלילה (Scroll Map) ותג מונה חזותי (Informer).

אנו ב-Arar Games, בעת התאמת פורטל פיתוח המשחקים שלנו Mayhem Corporation (mayhemcorporation.com) – הפועל ברשת מאז 2011 – לתצוגה רספונסיבית במכשירים ניידים, הבחנו שמונה ה-Yandex Metrica והתג החזותי שלנו משנת 2012 בתפריט השמאלי מופיעים כעת כתמונה שבורה.

תג Yandex Metrica ישן משנת 2012 עם הכתובת bs.yandex.ru מופיע כסמל שבור בדפדפנים מודרניים.

במדריך זה, אנו משתפים שלב אחר שלב כיצד ליצור תג (Tag) חדש של Yandex Metrica מאפס, להטמיע את קוד ה-tag.js המעודכן באתר שלכם ולתקן את תג ה-Informer השבור שמקורו ב-bs.yandex.ru הישן עם הגנת 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: השאירו תיבת סימון זו מסומנת בהחלט כדי למנוע מאתרים אחרים להעתיק את מזהה המונה שלכם ולזהם את הנתונים הסטטיסטיים שלכם (תנועת ספאם).
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 שאלות פרופיל קצרות כדי להפיק דוחות השוואה ענפיים (benchmarks) מדויקים:

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, תג הסטטיסטיקה הטורקיז האייקוני בגודל 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: משחק פעולה וארקייד טנקים פיקסלים דו-ממדי.
  Google Play | Microsoft Store
• Paint Trek: משחק ארקייד וחידות דו-ממדי בנושא חלל.
  Google Play | Microsoft Store
• Space Dodger: משחק ארקייד חלל דו-ממדי מבוסס רפלקסים.
  Google Play

רשתות חברתיות

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