Comment intégrer Hotjar à votre boutique Shopify

Lorsque vous optimisez votre boutique Shopify pour des conversions plus élevées, il est essentiel de comprendre comment les visiteurs interagissent avec vos pages.

Hotjar vous aide à visualiser le comportement des utilisateurs via des cartes thermiques, un suivi de défilement et des enregistrements de session, afin que vous puissiez prendre des décisions éclairées en matière de conception et de contenu.

À propos de Hotjar

Hotjar est un outil d'analyse du comportement et de rétroaction populaire qui aide les marchands Shopify à comprendre comment les visiteurs interagissent avec leurs magasins.

Il fournit des cartes thermiques, un suivi de défilement, des enregistrements de session et des widgets de commentaires, vous permettant d'identifier les points faibles et d'améliorer le parcours client.

Hotjar vous permet de :

• Visualisez où les utilisateurs cliquent ou passent le plus de temps sur vos pages de destination.
• Détectez les problèmes de conception ou de mise en page susceptibles d’affecter les conversions.
• Optimisez des éléments tels que les CTA, les bannières et les sections de produits en fonction des données réelles des utilisateurs.

Avant de commencer

Avant de commencer, assurez-vous d’avoir :

• Un compte Hotjar (avec votre code de suivi prêt).
• Accédez à votre administrateur Shopify.
• Une boutique Shopify publiée (pas une version de développement ou sandbox).

Comment ajouter le code de suivi Hotjar à votre Shopify ?

Suivez ces étapes pour connecter Hotjar à votre boutique Shopify :

Étape 1 : Connectez-vous à votre Compte Hotjar.

Étape 2 : Depuis la barre latérale gauche, accédez à Préparez-vous, puis clique Copier le code.

Étape 3 : Dans votre Administrateur Shopify, aller vers Boutique en ligne > Thèmes, cliquez sur l'icône à trois points et sélectionnez Modifier le code de la liste déroulante.

Étape 4 : Ouvrez votre theme.liquid fichier.

Étape 5 : Collez le code de suivi Hotjar juste avant la clôture </head> Étiquette.

Une fois terminé, cliquez sur Enregistrer.

Comment ajouter le code de suivi Hotjar à GemPages ?

Si vous avez déjà ajouté le code Hotjar à votre thème Shopify, le suivi s'appliquera également automatiquement à tous Construit par GemPages pages publiées sous le même domaine.

Si vous souhaitez suivre le comportement des visiteurs sur des pages spécifiques créées par GemPages, vous pouvez ajouter votre script Hotjar à l'aide de l' Élément de code personnalisé.

Voici comment le faire:

Étape 1 : Depuis le tableau de bord GemPages, accédez à Pages et cliquez sur la page cible pour l'ouvrir dans l'éditeur.

Étape 2 : Dans l' Éditeur GemPagesUtilisez la barre de recherche pour localiser l'élément de code personnalisé. Ensuite, glissez-déposez-le sur votre page.

Étape 3 : Dans la barre latérale gauche, cliquez sur le Code sous le Code personnalisé section pour ouvrir le panneau de code.

Étape 4 : En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). HTML / CSS , collez votre code de suivi Hotjar.

Une fois terminé, cliquez sur Enregistrer et frapper Publier pour republier votre page avec les mises à jour.

Vérifiez votre intégration avec Hotjar

Pour confirmer que Hotjar fonctionne correctement :

Étape 1 : Accédez à votre Tableau de bord Hotjar pour vérifier l'état du site.

Étape 2 : Vous devriez voir un vert « Suivi actif » indicateur une fois que votre magasin reçoit du trafic.

Si le statut indique «Pas de suivi,” passez en revue les points ci-dessous :

• Le magasin est toujours dans un Bac à sable Shopify environnement : Hotjar ne suit pas les aperçus ni les magasins de développement.
• Le script de suivi n'est pas placé correctement : assurez-vous qu'il est ajouté avant dans votre thème ou dans l'élément de code personnalisé dans GemPages.
• Votre page n'a pas encore reçu de trafic réel de visiteurs.
• Mise en cache du navigateur : vider le cache ou vérifier à nouveau Mode de navigation privée.

Pour plus de détails, reportez-vous à la documentation de Hotjar : Comment installer Hotjar sur votre site Shopify.

FAQ sur l'intégration de Hotjar

1. Puis-je utiliser Hotjar dans le mode sandbox ou aperçu de Shopify ?

Non, Hotjar le fait. ne prend pas en charge les environnements Shopify Sandbox, y compris les boutiques d'aperçu ou de développement. Vous devez avoir un magasin en direct et accessible au public pour que le suivi fonctionne correctement.

2. Hotjar suit-il automatiquement les pages GemPages ?

Si le code de suivi Hotjar est ajouté à votre thème Shopify theme.liquid, il se chargera également sur Construit par GemPages pages publiées sous le même domaine.

Cependant, si votre page utilise un domaine personnalisé, sous-domaine, ou édition indépendante configuration, vous devez ajouter manuellement le code en utilisant GemPages» Élément de code personnalisé pour assurer un suivi précis.

3. Que faire si Hotjar ne détecte pas mon site ?

Veiller à ce que:

• Votre magasin est le travail (pas de bac à sable).
• Le script est placé avant la clôture </head> Étiquette.
• Vous avez vidé votre cache ou testé en mode navigation privée.

Si le problème persiste, reportez-vous à Guide de configuration Shopify de Hotjar.

4. Quelle est la différence entre Hotjar et Microsoft Clarity ?

• Hotjar propose des outils de feedback plus avancés (enquêtes, suivi des clics) et des informations détaillées pour les forfaits payants.
• Microsoft Clarity est complètement gratuitement, avec des cartes thermiques et des enregistrements de session illimités.

Reportez-vous à cet article pour plus de détails sur l'intégration de Microsoft Clarity avec Shopify.