Comment installer le code de suivi HubSpot

Dernière mise à jour: February 23, 2018

Disponible avec :

Marketing: Gratuit, Starter, Basique, Pro, Enterprise
Sales: Gratuit, Starter, Professional
Services: N/A

Si vous n'hébergez pas l'intégralité de votre site sur HubSpot, vous devez installer le code de suivi HubSpot sur vos pages web hébergées par des tiers afin de capturer les données voulues. Cet article explique comment suivre l'activité de votre site dans HubSpot. 

Le code de suivi HubSpot vous permet d'analyser :

  • Les performances de votre site web en matière de génération de trafic et de leads.
  • Les mesures que vous pouvez prendre pour accroître le trafic de votre site.
  • Des données relatives aux leads approfondies, qui vous aident à convertir plus de leads en clients.

Le code de suivi est automatiquement installé sur toutes vos pages hébergées par HubSpot. Si vous n'hébergez pas l'intégralité de votre site sur HubSpot, vous devrez l'installer manuellement en suivant les instructions ci-dessous. Si vous utilisez une application web monopage, reportez-vous à ce manuel tiré du forum des développeurs pour savoir comment configurer le suivi.

1. Attribuer cette tâche à un membre de votre équipe

  • Si vous avez accès au code HTML de votre site (ou à votre système de gestion de contenu), vous pouvez suivre vous-même les étapes ci-dessous.
  • Si vous n'avez pas accès au code HTML de votre site, envoyez l'URL de cet article à votre service informatique ou à votre développeur web. 
Remarque : la personne qui installe le code de suivi doit se connecter à HubSpot pour suivre ces étapes. Elle devra donc disposer d'un compte utilisateur HubSpot. Pour obtenir plus d'informations sur la création de compte utilisateur, cliquez ici.

2. Copier le code de suivi dans votre compte HubSpot

Pour accéder au code de suivi dans votre compte HubSpot :

  • Dans l'angle supérieur droit, cliquez sur votre photo ou sur votre avatar, puis sur Paramètres.

  • Sélectionnez Installer le code et le suivi dans le menu latéral de gauche. Dans l'onglet Code de suivi, cliquez sur Copier sous le champ Code intégré.

  • Si vous utilisez la version gratuite de HubSpot CRM ou la version Pro de HubSpot Sales, et que vous configurez l'outil Prospects, vous pouvez accéder au code de suivi à partir de l'onglet Outils de vente > Prospects. Sélectionnez Personnaliser > Afficher le code de suivi dans l'angle supérieur droit.  

Remarque : le code de suivi est différent pour chaque compte HubSpot et correspond au numéro de votre compte.

3. Coller le code au-dessus de la balise de fermeture sur chaque page web

Pour chacune de vos pages web, collez le code juste avant la balise de fermeture dans le code HTML. Voici à quoi ressemble le code avant la balise dans l'aperçu HTML d'une page : 

Vous pouvez ensuite vous assurer que votre code de suivi fonctionne correctement à l'aide de cette procédure.

Vous trouverez ci-dessous de plus amples instructions pour intégrer le code sur différents hébergeurs de sites web : 

  • WordPress  
    • Cliquez ici pour voir la procédure à suivre si vous utilisez le code de suivi HubSpot spécifique au plug-in WordPress. 
    • Cliquez ici pour voir la procédure à suivre si vous n'utilisez pas le code de suivi HubSpot spécifique au plug-in WordPress.
  • Shopify
  • Drupal 
  • Magento 
  • Wix
  • Joomla 
  • Squarespace 
  • Google Tag Manager
Remarque : chaque site web/CMS étant structuré de manière différente, nous ne pouvons pas vous fournir d'instructions précises concernant l'accès à votre code HTML. Si vous ignorez comment accéder au code HTML de votre site, transmettez cet article à votre webmaster, service informatique ou service technique.

La plupart des CMS et services informatiques disposent d'un système pour procéder à l'import groupé d'un code sur l'ensemble des pages d'un site. Il s'agit parfois d'un fichier de pied de page qui est repris sur toutes les pages. Si vous n'avez pas accès à votre système de gestion de contenu, envoyez ces instructions à la personne qui en a la charge.

Comment installer le code de suivi sur un site WordPress avec le plug-in

Pour intégrer le code de suivi à un site WordPress, installez le plug-in Code de suivi HubSpot dans votre compte WordPress. 

Le plug-in assure les fonctions suivantes :
  • Il installe le code de suivi de HubSpot sur votre site WordPress.
  • Il établit le type de contenu à filtrer entre les pages et les publications dans l'outil Performance des pages.
  • Il crée des contacts intégrant la phase du cycle de vie des abonnés lorsque des formulaires n'étant pas créés avec HubSpot sont remplis sur le site.
Remarque : le plug-in Code de suivi HubSpot pour WordPress remplace le plug-in HubSpot pour WordPress. Contrairement à l'ancienne version, ce plug-in n'utilise pas de fonctionnalités obsolètes. Il offre également une plus grande fiabilité. Les formulaires et CTA doivent désormais être intégrés directement dans l'éditeur WordPress. WordPress ne transmet plus de méta-données comme la date de publication et le nombre de commentaires à l'outil Performance des pages. 

Conditions requises

  • Votre site web ou votre blog doivent avoir une installation WordPress.org. Le plug-in du code de suivi ne peut pas être installé sur des sites WordPress.com, car ces derniers ne vous permettent pas d'ajouter des plug-ins ou du code JavaScript.
  • Vous devez disposer de la version 3.0 de WordPress sur votre serveur (ou d'une version ultérieure, la plus récente étant recommandée).
  • La fonction wp_footer doit être incluse dans le fichier de pied de page de votre thème WordPress (footer.php). Elle est nécessaire pour que le code de suivi soit installé sur toutes les pages de votre site.
  • Vous devez disposer d'un compte administrateur WordPress pour pouvoir installer des plug-ins sur votre site. Dans le cas contraire, veuillez transmettre ces instructions au responsable de votre installation WordPress.

1. Se connecter à WordPress

Connectez-vous à votre compte WordPress. Vous pouvez généralement accéder à l'écran de connexion en ajoutant /wp-admin à l'URL. 

HubSpot Help article screenshot

2. Ajouter un nouveau plug-in

Depuis le menu des plug-ins, ajoutez-en un nouveau.

HubSpot Help article screenshot

3. Rechercher le plug-in HubSpot

Effectuez une recherche pour trouver le plug-in HubSpot.

HubSpot Help article screenshot

4. Installer le plug-in

Installez la dernière version du plug-in sur votre site WordPress.

HubSpot Help article screenshot

5. Activer le plug-in

Cliquez sur le lien d'activation afin d'activer le plug-in pour votre site WordPress.

HubSpot Help article screenshot

Un message de confirmation s'affiche. Ensuite, vous devez configurer le plug-in pour qu'il fonctionne avec votre compte HubSpot.

HubSpot Help article screenshot

6. Modifier les paramètres du plug-in

Dans le menu des paramètres de WordPress, sélectionnez les paramètres HubSpot.

HubSpot Help article screenshot

7. Saisir l'identifiant HubSpot

Entrez votre Hub ID, puis enregistrez les paramètres.

HubSpot Help article screenshot

Comment installer le code de suivi sur un site WordPress dans le plug-in

Bien qu'il vous soit conseillé d'utiliser le plug-in Code de suivi HubSpot pour WordPress, vous pouvez également intégrer le code manuellement. Si vous optez pour une installation manuelle et que vous utilisez les versions Basique, Pro ou Entreprise de HubSpot Marketing, HubSpot ne pourra pas opérer une distinction entre les articles et les pages dans ses rapports. 

Remarque : si votre site est hébergé sur wordpress.com, vous ne pourrez pas y ajouter le code de suivi HubSpot. WordPress ne permet pas à ses utilisateurs d'ajouter du code JavaScript aux sites wordpress.com, car il s'agit d'un environnement partagé. 

Les instructions ci-dessous expliquent comment installer le code de suivi manuellement sur un site WordPress : 

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot. 
  • Connectez-vous à votre compte WordPress, puis accédez à l'éditeur dans la section relative à l'apparence.  

  • Sélectionnez le pied de page dans le menu latéral. Ensuite, collez le code de suivi, puis mettez à jour le fichier

Comment installer le code de suivi sur un site Shopify

Les instructions ci-dessous expliquent comment installer le code de suivi sur un site Shopify :
  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot.  
  • Connectez-vous à votre tableau de bord d'administrateur Shopify. Accédez à la section des thèmes de la boutique en ligne.    

  • Sur la droite de l'écran, sélectionnez Actions pour modifier le code.
  • Sur ce même écran, sélectionnez le fichier theme.liquid pour votre thème.  

  • Collez le code de suivi HubSpot juste avant la balise . Pour finir, enregistrez les modifications apportées.

Comment installer le code de suivi sur un site Drupal

Les instructions ci-dessous expliquent comment installer le code de suivi sur un site Drupal : 

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot.   
  • Connectez-vous à votre tableau de bord d'administrateur Drupal. Dans le menu de navigation principal, sélectionnez l'onglet relatif à la structure. Ensuite, cliquez sur le lien ouvrant la section des blocs.    

  • Ajoutez un bloc
  • Remplissez les champs requis. Collez le code de suivi dans le corps, puis enregistrez les modifications apportées.

Comment installer le code de suivi sur un site Magento

Les instructions ci-dessous expliquent comment installer le code de suivi sur un site Magento :  

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot.  
  • Consultez le guide d'utilisation de Magento pour obtenir des instructions sur l'installation d'un code JavaScript tiers dans le code HTML des en-têtes.

Comment installer le code de suivi sur un site Wix

Pour installer le code de suivi HubSpot sur votre site Wix, vous devez utiliser l'App Market de Wix pour ajouter un widget HTML à votre page. Les instructions ci-dessous expliquent comment installer le code de suivi sur un site Wix :  

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot.   
  • Accédez à l'éditeur de site dans votre compte Wix. Ensuite, cliquez sur App Market à gauche. 
  • Dans cette fenêtre, recherchez html, sélectionnez l'application HTML développée par Wix dans les résultats de recherche, puis cliquez sur + Ajouter.  

  • Une fois le widget ajouté à votre site, cliquez sur l'icône des paramètres (engrenage), puis cochez l'option relative au code. Insérez le code de suivi HubSpot dans la zone de texte de la fenêtre, puis enregistrez les modifications apportées

Remarque : étant donné que Wix ne prend pas en charge le codage personnalisé, le code de suivi HubSpot doit être ajouté à chaque page Wix à l'aide de l'élément HTML iFrame. Comme la plupart des navigateurs utilisent l'emplacement du fichier iFrame comme en-tête HTTP de provenance plutôt que l'URL de la page consultée, il est possible que le rapport sur vos pages web (si vous utilisez la version Basique, Pro ou Entreprise de HubSpot Marketing) n'affiche que les données des URL iFrame plutôt que celles de vos pages.

Comment installer le code de suivi sur un site Joomla

Il existe deux façons d'ajouter le code de suivi HubSpot sur un site Joomla. Dans les deux cas, vous devez d'abord copier le code de suivi HubSpot en suivant les étapes ci-dessus.

Vous pouvez sélectionner une extension dans l'annuaire de Joomla, où vous pourrez coller le code de suivi HubSpot. Vous avez également la possibilité de suivre les étapes ci-dessous pour installer le code de suivi :

  • Connectez-vous à votre compte d'administrateur Joomla. Accédez au menu des extensions puis à la section des modèles.  

  • Cliquez sur le nom du modèle et sélectionnez index.php dans le menu latéral de gauche. 
  • Collez le code de suivi HubSpot directement au-dessus de la balise . Pour finir, enregistrez les modifications apportées

Comment installer le code de suivi sur un site Squarespace

Les instructions ci-dessous expliquent comment installer le code de suivi sur un site Squarespace (vous trouverez également de plus amples informations sur l'injection de code pour Squarespace sur cette page) : 

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot. 
  • Connectez-vous à votre compte Squarespace et accédez à vos paramètres.  

  • Dans la section du site web, accédez aux paramètres avancés puis à la section relative à l'injection de code
  • Collez le code de suivi dans le champ du titre, puis enregistrez les modifications apportées

Comment installer le code de suivi à l'aide de Google Tag Manager

Les instructions ci-dessous expliquent comment ajouter le code de suivi en tant que balise avec Google Tag Manager : 

  • Suivez les étapes ci-dessus pour copier le code de suivi dans votre compte HubSpot.  
  • Dans un nouvel onglet ou une nouvelle fenêtre, connectez-vous à votre compte Google Tag Manager et sélectionnez votre conteneur. 
  • Créez une balise pour le code de suivi HubSpot en cliquant sur Balises dans le menu latéral de gauche, puis sur Nouvelle.  

  • Cliquez sur Configuration de la balise
    • Choisissez Balise HTML personnalisée pour le Type de balise. Indiquez un nom pour votre balise. 
    • Collez le code de suivi dans le champ HTML
  • Sous Configuration de la balise, cliquez sur Déclenchement afin de préciser le moment où la balise doit se déclencher. Si aucune règle de déclenchement n'est définie, la balise ne sera pas déclenchée et les analytics HubSpot ne seront pas collectés. 
  • Afin que la balise soit déclenchée pour toutes les pages où le code Google Tag Manager a été installé (conseillé), sélectionnez l'option Toutes les pages.  

  • Cliquez sur Enregistrer pour enregistrer votre nouvelle balise, puis sur Publier dans l'angle supérieur droit pour enregistrer votre conteneur et vos balises.  

  • Insérez le code Google Tag Manager dans vos pages web sous la balise , s'il n'a pas déjà été installé. Le code Tag Manager se trouve dans votre compte Google Tag Manager dans l'onglet Admin et sous Installer Google Tag Manager

Article précédent:

Article suivant: