Contexte
HubSpot met à disposition des formulaires que vous pouvez utiliser dans le cadre d’actions marketing telles que l’inscription à des événements, le téléchargement de document, la prise de contact telle qu’une demande spécifique comme une présentation de produit.
Il est très facile de paramétrer le suivi de conversion des formulaires HusbSpot dans Matomo et également d’alimenter la rubrique Objectifs. Mais du coup, comment fait-on pour faire la distinction entre les différentes demandes ?
C’est ce que nous allons aborder dans cet article.
Balisage des formulaires HubSpot
Libre à vous de composer le formulaire avec les champs que vous souhaitez, mais il s’agit de remplir une base de contacts, donc il faut penser au minimum à un nom et une adresse e-mail.
Lorsque vous créez un formulaire HubSpot, vous pouvez soit l’utiliser directement depuis un sous-domaine HubSpot soit en l’intégrant sur votre site à l’aide d’un code Javascript. C’est ce second cas qui nous intéresse.
Nous allons différencier trois types de formulaires :
- La demande de contact ;
- La demande de livre blanc ;
- La demande de présentation (démo).
Pour distinguer les formulaires sur le site, nous allons ajouter une classe CSS différenciante.
| Formulaire | Classe CSS |
|---|---|
| Demande de contact | hsform_contact |
| Demande de livre blanc | hsform_livreblanc |
| Demande de présentation | hsform_demo |
Pour ajouter cette classe, il faudra le faire via le code d’intégration Javascript. Pour le trouver, allez dans l’éditeur de formulaire, par exemple la demande de livre blanc, cliquez sur le bouton Embed.
Le code devrait ressembler à minima à ça :
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "254XXXXX",
formId: "0114XXXX-cXXc-4d19-15ab-76zcd2413h37"
});
</script>
Le paramètre pour ajouter une classe CSS est cssClass. Pour identifier le formulaire comme une demande de livre blanc, nous aurons donc ce code :
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
cssClass: "hsform_livreblanc"
portalId: "254XXXXX",
formId: "0114XXXX-cXXc-4d19-15ab-76zcd2413h37"
});
</script>
Configuration du conteneur Matomo Tag Manager
La plupart de mes tutoriels se baseront sur le gestionnaire de tag de Matomo. Mais sachez qu’il est tout à fait possible de gérer les conversions d’objectifs autrement.
Accédez au conteneur actif. Nous allons mettre en place le suivi de conversion de l’objectif de demande de livre blanc à l’aide d’un déclencheur et d’une balise qui va envoyer un événement. Je choisis ici de ne pas activer directement l’objectif depuis la balise.
Création du déclencheur
Identifiez le déclencheur avec un nom et une description explicites.
Ensuite, il faut lister les conditions d’exécutions :
- L’ID du formulaire HubSpot doit commencer par hsForm_ ;
- la classe CSS hsform_livreblanc que vous avez ajouté dans le code d’intégration doit se trouver l’attribut class.
Sauvegardez le déclencheur.
Création de la balise pour la conversion du formulaire
Créez une balise de Statistiques Matomo.
Et décrivez là de façon explicite.
Dans la rubrique Configurez ce que cette balise doit faire, remplissez les valeurs comme suit :
- Tracking Type : Evènement ;
- Catégorie d’évènement : Conversion.
Il est possible que dans votre stratégie d’analyse, vous ayez déjà opté une autre catégorie, et en ce cas, ne changez pas vos habitudes. - Action de l’évènement : Formulaire. Pareil que pour la catégorie.
- Nom d’évènement : Livre Blanc.
Indiquez ensuite quand la balise doit effectuer l’action, choisissez le déclencheur que vous avez créé et soigneusement nommé : Soumission formulaire demande de livre blanc.
Sauvegardez la balise et publiez le conteneur, nommez la version Conversion livre blanc.
Configuration de l’objectif de conversion
Retournez sur le tableau de bord Matomo de votre site Internet. En dessous des rubriques Visiteurs, Comportement et Aquisitions, vous trouverez la rubrique Objectifs. Cliquez sur Ajouter un nouvel objectif.
Nommez votre objectif : Demande de livre blanc et configurez le comme suit :
- Le déclencheur doit être l’évènement qui sera envoyé par la balise créée plus haut ;
- L’action de l’évènement doit être exactement Livre Blanc. C’est une sécurité au cas où d’autres action d’événement aurait une valeur similaire.
Sauvegardez l’objectif. Matomo est désormais prêt à collecter les conversions de l’objectif Demande de livre blanc.
Pour aller plus loin
Création des objectifs Demande de contact et présentation (démo)
Sur le même principe que nous venons de voir, c’est à vous de créer les autres déclencheurs et balises pour pouvoir obtenir des objectifs différenciés pour les demandes de contact et de démo. Il vous suffit juste de faire attention aux nommages et valeurs à saisir.
Limiter les conversions
Alors, ce n’est pas applicable forcément dans tous les cas de figure, mais pour une demande de contact ou de démo, vous pourriez limiter le nombre de fois où une balise peut être lancé, et donc une conversion comptabilisée, pour éviter des fakes.
Dans le cas de livre blanc, il se peut que vous en partagiez plusieurs, et en cas, il faudrait pouvoir comptabiliser toutes les demandes.
Vous n’êtes cependant jamais à l’abris de fausses demandes.
Adaptez le principe
Bien entendu, la mécanique est simple et nous le voyons, tout est basé sur une classe CSS. Libre à vous d’adapter le tutoriel quel que soit le type de formulaire que vous utilisez, que ça soit du Gravity Forms, du CF7, du Brevo etc
