Πώς να προσθέσετε το Yandex Metrica στον ιστότοπό σας: Οδηγός εγκατάστασης βήμα προς βήμα, Webvisor και επιδιόρθωση του σήματος Informer

Ως ανεξάρτητο στούντιο ανάπτυξης παιχνιδιών (indie game studio) ή δημιουργός περιεχομένου, είναι εξαιρετικά σημαντικό να μετράτε ποια άρθρα διαβάζουν οι επισκέπτες του ιστοτόπου σας, πού κάνουν κλικ στη σελίδα και πώς αλληλεπιδρούν με τα σήματα του καταστήματός σας. Παρόλο που το 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

Αφού συνδεθείτε με τον λογαριασμό σας 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 του μετρητή σας και να αλλοιώσουν τα στατιστικά σας (ανεπιθύμητη κίνηση / spam traffic).
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 pixel (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: Τοπική εναλλακτική λύση (Fallback) για επισκέπτες με AdBlocker (onerror)

Στις μέρες μας, πολλοί παίκτες και προγραμματιστές χρησιμοποιούν AdBlocker (uBlock Origin, Brave Shield κ.λπ.) στο πρόγραμμα περιήγησής τους. Όταν τα προγράμματα αποκλεισμού διαφημίσεων αποκλείουν τομείς αναλυτικών στοιχείων, η εικόνα του σήματος ενδέχεται να μην φορτωθεί. Για να διασφαλίσουμε ότι η σχεδίαση δεν θα διαταραχθεί σε καμία περίπτωση, φιλοξενούμε ένα αντίγραφο 88x31 pixel του σήματος στον δικό μας διακομιστή (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 pixel tank παιχνίδι δράσης και arcade.
  Google Play | Microsoft Store
• Paint Trek: 2D arcade παιχνίδι γρίφων με θέμα το διάστημα.
  Google Play | Microsoft Store
• Space Dodger: 2D διαστημικό arcade παιχνίδι βασισμένο στα αντανακλαστικά.
  Google Play

Κοινωνικά δίκτυα

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