Comment ajouter Yandex Metrica à votre site web : guide d'installation étape par étape, Webvisor et réparation du badge Informer

En tant que studio de jeux vidéo indépendant ou créateur de contenu, mesurer quels articles lisent les visiteurs de votre site web, où ils cliquent sur la page et comment ils interagissent avec vos badges de magasin est essentiel. Bien que Google Analytics soit une norme courante, Yandex Metrica (Yandex.Metrika) constitue un outil d'analyse puissant pour les développeurs grâce à des fonctionnalités gratuites telles que Webvisor (enregistrement de session / Session Replay), les cartes de clics (Clickmap), les cartes de défilement (Scroll Map) et son badge de compteur visuel (Informer).

Au sein d'Arar Games, en adaptant aux appareils mobiles (responsive) notre portail de développement de jeux Mayhem Corporation (mayhemcorporation.com), en ligne depuis 2011, nous avons constaté que notre compteur et notre badge visuel Yandex Metrica, datant de 2012 dans notre menu de gauche, apparaissaient désormais comme une image brisée.

L'ancien badge Yandex Metrica datant de 2012 avec l'adresse bs.yandex.ru apparaissant comme une icône brisée sur les navigateurs actuels.

Dans ce guide, nous partageons étape par étape la création d'une nouvelle balise (Tag) Yandex Metrica à partir de zéro, l'intégration du code moderne tag.js sur votre site et la réparation du badge Informer brisé issu de l'ancien bs.yandex.ru avec une protection AdBlocker.

---

1. Création d'une nouvelle balise (Tag) dans Yandex Metrica

Après vous être connecté avec votre compte Yandex sur metrica.yandex.com, rendez-vous sur l'écran Add tag (metrica.yandex.com/add) pour ajouter un nouveau compteur de site web. L'installation comprend 3 étapes principales :

Étape 1 : Create Tag (Informations sur la balise et configuration de Webvisor)

Sur le premier écran, nous configurons l'identité de base et les paramètres régionaux de notre site :

1. Tag name : Entrez un nom qui vous permettra d'identifier votre projet dans le tableau de bord (ex. : Mayhem Corporation).
2. Website URL : Saisissez le domaine principal de votre site sans le protocole (https://) (ex. : mayhemcorporation.com).
3. Accept data only from the specified addresses : Laissez absolument cette case cochée pour empêcher d'autres sites de copier votre identifiant de compteur et de polluer vos statistiques (trafic de spam).
4. Including subdomains : Vous pouvez cocher cette option si vous souhaitez regrouper des sous-domaines tels que blog.votresite.com dans le même compteur.
5. Time zone & Currency : Sélectionnez (GMT+03:00) Istanbul (ou votre fuseau horaire local) et la devise TRY (ou USD) afin que la réinitialisation quotidienne des statistiques de visiteurs corresponde à vos préférences horaires.
6. Session Replay, scroll map, form analysis (Webvisor) :

   💡 Fonctionnalité la plus critique : Lorsque vous activez cette option, Yandex Metrica vous permet d'observer les mouvements de souris des visiteurs, leur profondeur de défilement et leurs clics sur les cartes de jeux ou d'articles sous forme d'enregistrements vidéo anonymisés.

---

Étape 2 : Fill Out the Profile (Configuration du profil du site)

À la deuxième étape, Yandex Metrica pose 5 courtes questions de profil afin de générer des rapports de comparaison sectorielle (benchmarks) précis :

1. Site Type (Type de site)

Si vous gérez un portail axé sur les articles, guides techniques, actualités ou documentations, cochez Informational website (Website with text content) ; s'il s'agit d'une page de promotion directe d'une application ou d'un jeu, choisissez Promo website :

2. Industry (Secteur d'activité)

Selon le contenu de votre site, sélectionnez technologie, médias, culture/art ou, si aucune catégorie exacte ne correspond dans la liste, choisissez Other tout en bas :

3. CMS (Système de gestion de contenu)

Si votre site utilise une plateforme prête à l'emploi comme WordPress, Drupal, Joomla ou Wix, vous pouvez la sélectionner dans la liste. Si vous utilisez une architecture PHP/MySQL ou .NET personnalisée comme notre portail Mayhem Corporation, cochez l'option Other en bas de la liste :

4. Système CRM

Si vous n'utilisez aucun CRM d'entreprise, poursuivez en sélectionnant également Other (ou Without CRM) dans ce champ :

5. Your Role in the Project (Votre rôle dans le projet)

Si vous êtes un développeur indépendant ou le fondateur d'un studio, cochez Business management ou Product management et cliquez sur le bouton Continue :

---

Étape 3 : Installation de l'extrait de code (tag.js)

À la dernière étape, Yandex Metrica génère le code de compteur JavaScript (tag.js) moderne à placer entre les balises <head> ou <body> de votre site :

La structure du code de compteur moderne généré se présente comme suit (remplacez YOUR_TAG_ID par votre propre identifiant de compteur) :

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

Après avoir ajouté le code dans le modèle principal de votre site (index.php ou header.php) et l'avoir déployé sur le serveur, vous pouvez vérifier le fonctionnement du compteur en direct en cliquant sur le bouton "Check tag" à l'écran, puis passer à votre tableau de bord analytique en cliquant sur "Get started".

---

2. Réparation du badge visuel Yandex Metrica (Informer) et protection contre les AdBlockers

Sur les sites web créés entre 2011 et 2014, le badge de statistiques turquoise emblématique de 88x31 pixels (Informer) de Yandex Metrica était appelé avec cette ancienne adresse :

//bs.yandex.ru/informer/OLD_TAG_ID/3_1_3FFEEFFF_1FDECFFF_1_pageviews

Au fil des années, Yandex ayant abandonné le serveur bs.yandex.ru ainsi que l'ancien script watch.js, cette adresse renvoie désormais une erreur HTTP 404 Not Found et affiche une icône d'image brisée sur la page.

Solution 1 : Point de terminaison moderne informer.yandex.ru

Pour faire fonctionner le badge visuel, nous redirigeons la source de l'image vers le service Informer actuel de Yandex (https://informer.yandex.ru/informer/...).

Solution 2 : Solution de secours locale pour les visiteurs utilisant un AdBlocker (onerror)

De nos jours, de nombreux joueurs et développeurs utilisent un AdBlocker (uBlock Origin, Brave Shield, etc.) sur leur navigateur. Lorsque les bloqueurs de publicité bloquent les domaines d'analyse, l'image du badge peut ne pas se charger. Pour s'assurer que le design ne soit en aucun cas altéré, nous hébergeons une copie de 88x31 pixels du badge sur notre propre serveur (images/yandex_metrica_badge.png) et l'activons automatiquement via l'attribut 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 -->

Grâce à cet ajustement, le badge Yandex Metrica situé dans le menu gauche de Mayhem Corporation s'affiche à la fois avec des statistiques en direct sur les navigateurs classiques et sans aucune icône cassée sur les navigateurs équipés d'un AdBlocker :

Badge Yandex Metrica Informer actif dans le menu gauche de mayhemcorporation.com/mayhem/index.php après la mise à jour.

Badge Informer turquoise 88x31 résumant les pages vues, les visites et les visiteurs uniques.

---

3. Notre site web et nos jeux (Arar Games)

Notre site web

• Mayhem Corporation : Notre portail web dédié au développement de jeux et aux articles techniques sur XNA / MonoGame.
  mayhemcorporation.com

Nos jeux

• Blocked: Pixel Panzer : Jeu d'action et d'arcade de chars en pixel art 2D.
  Google Play | Microsoft Store
• Paint Trek : Jeu d'arcade et de puzzle spatial en 2D.
  Google Play | Microsoft Store
• Space Dodger : Jeu d'arcade spatial 2D axé sur les réflexes.
  Google Play

Réseaux sociaux

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