Formulaires de contact dans WordPress avec Contact Form 7 et Google Analytics

Vous avez un site ou un blog propulsé par WordPress? C’est notre cas chez Hub’Sales également 🙂

Evidemment, vous avez envie que les visiteurs vous laissent un petit mot ou vous contactent pour vous demander votre avis d’expert ou vos services.

Vous avez donc installé un module de formulaire et vous recevez (le plus souvent possible idéalement) dans votre boîte mail un message correspondant aux informations saisies par les internautes dans votre formulaires. Ô joie.

Maintenant se pose la question de l’exploitation des données collectées par ce formulaire: qu’allez-vous en faire et comment allez-vous « retrouver vos petits » dans ce bazar d’e-mails et de fichiers Excel?

Questions bonus: d’où viennent les internautes qui vous ont écrit? Google Analytics vous donnera facilement le nombre de conversions du formulaire (nombre de visites ayant abouti à une vue de la page de confirmation du formulaire) par provenance. Mais comment allez-vous rattacher une provenance à un formulaire en particulier? Comment relancer ces visiteurs en fonction de ce critère?

Dans ce billet nous allons voir comment mettre en oeuvre un mini-CRM dans WordPress couplé à Google Analytics. C’est facile, il suffit de suivre la recette!

Au préalable:

  • Temps de préparation: 30 minutes
  • Temps de cuisson: ad vitam
  • Nombre de personnes: un e-marketeur affamé
  • Degré de technicité: Kevins s’abstenir

Vous êtes prêt(e)? Vous allez voir, c’est délicieux! 🙂

Ingrédients

Avant de commencer, vérifions quelques points de détails:

C’est fait? Excellent, passons aux choses sérieuses.

Instructions

Commençons par le formulaire:

Dans Contact Form 7, définissez votre formulaire. Utilisez le menu de droite pour construire les différents champs de formulaire et leurs attributs (nom, ID, classe CSS, obligatoire oui/non, etc.)

Vous allez voir de vous mêmes qu’on peut rapidement créer un formulaire assez puissant – en deux coups de cuiller à pot.

Vous pouvez aussi spécifier qui est le destinataire des mails envoyés par le formulaire. Pour la documentation complète de Contact Form 7, reportez vous au site de l’extension.

Première astuce du chef:
le suivi des conversions de Contact Form 7 dans Google Analytics

Pour tracker la conversion (soumission) du formulaire, Contact Form 7 propose un « hook » (fonction d’intégration) qui dès la soumission du formulaire permet d’éxécuter du code supplémentaire grâce au callback on_sent_ok. Et on peut y éxécuter du Javascript. Une fois que le web analyste en vous est bien émoustillé, deux options s’offrent à vous: le suivi de la soumission telle quelle (grâce à une page vue virtuelle ou un événement).

En fin de formulaire de on trouve une section Réglages complémentaires dans laquelle nous allons appeler on_sent_ok:

on_sent_ok: "_gaq.push(['_trackPageview','/wordpress/objectif/contact']);"

Félicitations, vous avez défini comme un chef une URL de succès que vous n’aurez qu’à reporter dans la construction d’un objectif dans Google Analytics.

Si vous préférez, utilisez un événement:

on_sent_ok: "_gaq.push(['_trackEvent','Formulaires','Succès','Contact']);"

Faites commes vous préférez, mais je recommande une page vue virtuelle (_trackPageview) car elle s’intègre mieux dans la continuité d’une visite alors que l’évènement est plus spontané et n’est pas corrélé au flux de la visite (il fait l’objet d’une cuisine toute différente.)

Les novices se rueront sur la solution de l’appel de _trackPageview/_trackEvent directement dans on_sent_ok. Les plus expérimentés se souviendront que malgré tous les efforts de Google pour rendre son code asynchrone de plus en plus rapide (et c’est valable pour les autres éditeurs soit dit en passant), la rapidité des interactions peut parfois court-circuiter les appels de pixels analytics. Ces cuistots de la donnée savent faire mijoter le processus et savent aussi qu’utiliser des artifices comme des retardateurs Javascript ne règlent pas le problème.

On préfèrera passer à on_sent_ok une redirection Javascript vers une page de succès. Les vieux pots, la meilleure soupe, vous connaissez la recette.

Exemple:

on_sent_ok: "location.href='/formulaire/succes';"

Il ne vous reste plus qu’à créer une page de confirmation à cette adresse (configurable dans les options de la page) et à définir cette URL comme page de succès. C’est bon, c’est fin, ca se mange sans fin.

Le plat de résistance

Bon, à ce stade là, en admettant que les visiteurs remplissent votre formulaire et le soumettent avec succès, vous avez des conversions.

En regardant un exemple de mail de soumission envoyé avec Contact Form 7, on trouve les choses suivantes:

De : Jean Aymard <tartempion@sa.fr>
Sujet : Inscription au webinar HubScan du 27 août
Informations du formulaire :
Date choisie:   27 août
Nom:   Jean Aymard
E-mail:  tartempion@sa.fr
Entreprise:  Tartempion SA
Tél.:  01 23 45 67 89
Perception Hub'Scan:  bouche à oreille

Vous aurez remarqué qu’on retrouve les éléments définis dans l’interface de construction du formulaire et du mail. Jusque là tout va bien.

Si vous avez bien suivi la recette, vous aurez installé Contact Form 7 to DB, qui vous permet de stocker vos données de formulaires dans un base de données MySQL et de les consulter via requête Excel (IQY), API, etc.

Vous devriez obtenir un fichier ressemblant étrangement à çà:

Mais quel est ce champ mystérieux à droite du tableau? Eh oui, c’est bien la fève: la provenance (utm_source dans Google Analytics). Et là je sens votre excitation, tel un écolier devant un Kinder Surprise:

mais comment diable cette information a t’elle bien pu se retrouver dans mon formulaire?

Alimentaire, mon cher Watson! Cela dit, je vais quand même dire aux Kevins qui ont tenu à rester avec nous jusqu’à présent de quitter ce billet.

Pour capturer votre provenance Google Analytics dans Contact Form 7, vous allez devoir manipuler le cookie __utmz de Google Analytics, celui-là même qui gère les sources de trafic. Pour capturer __utmz, on peut procéder de plusieurs façons mais je vous propose la suivante: modifier le fichier de fonctions de votre thème WordPress (functions.php). A ce stade je vous recommande d’utiliser un thème enfant. Si vous ne savez pas ce qu’est un thème enfant WordPress, renseignez-vous.

Mais ouvrons functions.php et ajoutons le bloc de code suivant en queue de fichier:
function getCF7Cookie( $form_tag )
{
if ( $form_tag['name'] == 'cf7cookie' ) {
if (isset($_COOKIE['__utmz'])){
$form_tag['values'][] = $_COOKIE['__utmz'];
} else {
$form_tag['values'][] = 'hashed';
}
}
return $form_tag;
}
if ( !is_admin() ) {
add_filter( 'wpcf7_form_tag', 'getCF7Cookie' );
}

En gros, cette fonction permet de remplir automatiquement un champ Contact Form 7 avec la valeur du cookie __utmz qui en temps normal ressemble à çà:

78813325.1342624308.5.2.utmcsr=google|utmccn=(not set)|utmcmd=organic|utmctr=webinar

Regardez bien ci-dessus, on retrouve, source, support, campagne, etc. Oh et tant qu’on y est, 1342624308 devrait vous plaire pour la partie CRM mais parlons en plus tard.

Si la fonction ne trouve pas de valeur pour le cookie __utmz, on a affaire à une nouvelle visite. On va donc avoir recours à du Javascript pour capturer d’éventuels paramètres de provenance: utm_source, utm_medium, utm_campaign et utm_content pour ne citer que les plus usités.

Pour le Javascript, retournons dans notre éditeur de formulaire Contact Form 7 et insérons un champ texte appelé cf7cookie.

Insérons dans la foulée du CSS pour cacher ce champ de formulaire, un peu de code pour traiter les paramètres UTM derrière le point d’interrogation ou derrière le dièse (#), on saupoudre de PHP et au prochain formulaire rempli, magique!

Voici le code que j’utilise sur un des formulaires chez Hub’Sales:

<style type="text/css">
input.cf7cookie { display:none; }
</style>

<script type="text/javascript">
var dlh = document.location.hash;
var dls = document.location.search;
function cf7UTM(field) {
// les paramètres UTM sont ils derrière le point d'interrogation ou le dièse?
if (dls.indexOf('utm_source') > -1) {
// trouvé derrière le point d'interrogation
var cf7cookieparams = dls.substr(1).split('&');
} else if (dlh.indexOf('utm_source') > -1) {
// trouvé derrière le dièse
var cf7cookieparams = dlh.substr(1).split('&');
}
if (typeof(cf7cookieparams) != "undefined" && cf7cookieparams[0].indexOf('utm_source') > -1) {
var gaSource = cf7cookieparams[0].substr(cf7cookieparams[0].indexOf('=') + 1);
field = gaSource;
return field;
}
}
var cf7cookiefield = document.getElementById('cf7cookie');
var cf7v = cf7cookiefield.value;

// Nouvelle visite Google Analytics?
if (cf7cookiefield.value == "hashed" || dls.indexOf('utm_source') > -1 || dlh.indexOf('utm_source') > -1) {
// Pas de cookie de provenance GA, on teste la présence de paramètres d'URL (UTM)
cf7cookiefield.value = cf7UTM(cf7v);
} else {
// si cookie de provenance GA, on peuple automatiquement le champ en réécrivant le cookie UTMZ
var vpos1 = cf7v.indexOf('=') + 1;
var vpos2 = cf7v.indexOf('|') + 1
var gaSource = cf7v.substr(vpos1, vpos2 - vpos1 - 1);
cf7cookiefield.value = gaSource;
}
</script>

Encore un peu de place pour le dessert?

Et voilà, avec çà vous allez pouvoir enregistrer la conversion pour votre formulaire de contact WordPress avec Contact Form 7 mais aussi traquer la provenance de vos visiteurs qui remplissent le formulaire et par la suite mener des actions davantage ciblées par canal d’acquisition. N’oubliez pas de tagguer vos liens de provenance!

Avec ce système vous aller pouvoir mettre en place un CRM de base que vous pourrez exploiter avec Excel ou une autre API de votre choix. Vous pouvez également utiliser une variable personnalisée Google Analytics pour capturer un ID visiteur et corréler cet ID lors d’appel à l’API Google Analytics. Ensuite, imaginez ce que ça donne en terme d’analyse des ventes et du comportment une fois ces données croisées et passées dans un Tableau ou un QlikView 😉

Vous avez encore faim? N’oubliez pas de dévorer mon DVD de formation à Google Analytics et contactez moi au sujet des services web analytics, business intelligence, CRM et eRéputation proposés par Hub’Sales au sein du group Business & Décision

Formulaires de contact dans WordPress avec Contact Form 7 et Google Analytics was last modified: juillet 19th, 2012 by Julien Coquet

Julien Coquet

Expert de la mesure d’audience sur Internet depuis plus de 15 ans, Julien Coquet est consultant senior digital analytics et responsable produit et évangélisation pour Hub’Scan, une solution d’assurance qualité du marquage analytics.

A propos de Julien Coquet

Loading Facebook Comments ...
Loading Disqus Comments ...

12 réflexions au sujet de « Formulaires de contact dans WordPress avec Contact Form 7 et Google Analytics »

  1. Daniel Roch

    J’avoue avoir trouvé pas mal de tutoriels qui permettent de traquer une conversion lors du remplissage correct d’un formulaire, mais je ne crois pas avoir vu d’articles aussi poussés pour associer une provenance à un formulaire précis.

    Bravo pour le travail accompli et pour le tutoriel didactique.

    Après, je ne suis pas sûr que cela sera utile pour tous : dans certains secteurs d’activité, la provenance du visiteur n’influera pas sur le traitement de la vente ou du service qui en découle.

    1. Julien Coquet Auteur de l’article

      Bonjour Daniel, et merci pour le bon mot 😉

      Concernant l’utilisation, plusieurs niveaux d’appreciation evidemment.
      De mon côté je m’en sers pour alimenter un fichier Salesforce qui à son tour sert à alimenter des listes de distribution dans Mailchimp, basés sur la provenance.

  2. benoit | Info-ecommerce

    C’est très intéressant comme technique, par exemple pour un site de devis ça peut être bien de faire remonter ces infos dans le CRM.

    Tiens petite question si tu as plusieurs choix dans le formulaire , type « contacter la direction », « contacter la compta » avec un menu déroulant, comment tu ferais pour déclencher des objectifs différents dans Analytics ?

    1. Julien Coquet Auteur de l’article

      Bonjour Benoit,

      résponse courte: on change le code du drop down pour déclencher une page vue virtuelle sur onChange. Pas top mais jouable.

  3. JB Gabellieri

    Intéressante technique de récupération du cookie. 🙂

    Je trouve cependant l’opération un poil alambiquée, car on peut facilement obtenir le referer des visiteurs et le stocker en base avec un simple formulaire en php (+ quelques règles pour nettoyer les résultats obtenus avec des expressions régulières).

    1. JB Gabellieri

      Je viens de trouver un intérêt à la technique plus « poussée » proposée ici : si le visiteur a consulté d’autres pages du site avant de remplir le formulaire. 🙂

      1. JB Gabellieri

        C’est en se trompant qu’on apprend (et c’est d’ailleurs tout le problème :p). ^^

  4. Florian Giudicelli

    Merci Julien pour cette copieuse recette ! J’ai adoré le plat de résistance et je ne parle même pas du dessert 😉

    Une question me vient sur les données personnellement identifiables (PII). En théorie, faut-il un GA premium pour faire du CRM ?

    1. Julien Coquet Auteur de l’article

      Bonjour Florian,

      en l’occurence, on aurait besoin de GA Premium si on passait en clair le nom d’un utilisateur, une adresse e-mail, un numéro de carte de crédit ou de sécurité sociale.

      Ici on ne passe qu’un identifiant propre à GA donc « ca passe ». En règle générale, tant que l’information passée dans GA n’est pas directement rattachable à de la PII, on est bons.

      Note d’ailleurs que dans cette « recette » on se contente d’insérer des données GA dans un formulaire tiers, pas directement de stocker de la donnée formulaire dans GA.

Les commentaires sont fermés.

No Trackbacks.