Comment installer Clarity sur ma boutique Shopify ?

C'est quoi, Microsoft Clarity ?

Clarity est un outil web gratuit développé par Microsoft (ce n'est pas une application à télécharger). Il vous permet de voir concrètement comment les visiteurs interagissent avec votre boutique :

• Heatmaps : les zones de la page où les visiteurs cliquent, survolent et scrollent le plus
• Enregistrements de session : des vidéos anonymisées du parcours réel d'un visiteur sur votre site
• Rage clicks : clics répétés de frustration (un bouton qui ne répond pas, par exemple)
• Dead clicks : clics sur des éléments qui ne sont pas cliquables
• Quick backs : visiteurs qui quittent une page presque immédiatement après y être arrivés

C'est particulièrement utile avant de lancer du trafic payant (Google Shopping, Meta Ads) : ça permet de repérer les problèmes d'expérience utilisateur avant même que les clics coûtent de l'argent.

Méthode 1 — Via l'App Store Shopify (recommandée)

1. Dans votre admin Shopify, allez dans Apps → Shopify App Store
2. Cherchez "Microsoft Clarity: AI Insights"
3. Cliquez sur Installer
4. Une fois installée, allez dans les réglages de l'app (App settings)
5. Assurez-vous que le Clarity Script est activé, puis cliquez sur Save

Si vous aviez déjà un projet Clarity existant (créé avant d'installer l'app), vous devrez le connecter manuellement via le bouton "Connect Project". Un courriel de confirmation sera envoyé à l'adresse administrateur du compte.

Prévoyez quelques heures avant que le tableau de bord commence à afficher des données, Clarity a besoin d'un peu de trafic pour générer les premiers enregistrements et heatmaps.

Méthode 2 — Installation manuelle via le code du thème

Si vous préférez ne pas passer par l'app (ou si vous voulez plus de contrôle) :

1. Connectez-vous à clarity.microsoft.com et copiez le code de suivi (tracking script) de votre projet
2. Dans Shopify, allez dans Boutique en ligne → Thèmes
3. Cliquez sur Actions → Modifier le code
4. Ouvrez le dossier Layout, puis le fichier theme.liquid
5. Collez le code juste avant la balise </head>   
6. Cliquez sur Sauvegarder

Étape optionnelle — suivi jusqu'au paiement

Pour voir le comportement des visiteurs jusqu'à la page de commande (utile si vous préparez une demande Google Merchant Center et voulez repérer les points de friction au checkout) :

1. Allez dans Réglages → Paiement
2. Trouvez le champ "Scripts additionnels"
3. Collez-y le même code de suivi
4. Sauvegardez

Questions fréquentes

Est-ce payant? Non, Clarity est entièrement gratuit, sans limite de trafic ou de fonctionnalités.

Est-ce que ça ralentit ma boutique? L'impact est minime — c'est un script léger conçu pour ne pas nuire à la vitesse de chargement.

Combien de temps avant de voir des données? Quelques heures suffisent généralement, mais il faut un minimum de trafic réel sur la boutique pour que les heatmaps et enregistrements soient représentatifs.