Dans ce billet nous allons voir comment mettre en oeuvre un mini-CRM dans WordPress coupl\u00e9 \u00e0 Google Analytics. C’est facile, il suffit de suivre la recette!<\/p>\n
Au pr\u00e9alable:<\/strong><\/p>\n Vous \u00eates pr\u00eat(e)? Vous allez voir, c’est d\u00e9licieux! \ud83d\ude42<\/p>\n <\/p>\n Avant de commencer, v\u00e9rifions quelques points de d\u00e9tails:<\/p>\n C’est fait? Excellent, passons aux choses s\u00e9rieuses.<\/p>\n Commen\u00e7ons par le formulaire:<\/p>\n Vous allez voir de vous m\u00eames qu’on peut rapidement cr\u00e9er un formulaire assez puissant – en deux coups de cuiller \u00e0 pot.<\/p>\n Vous pouvez aussi sp\u00e9cifier qui est le destinataire des mails envoy\u00e9s par le formulaire. Pour la documentation compl\u00e8te de Contact Form 7, reportez vous au site de l’extension<\/a>.<\/p>\n Premi\u00e8re astuce du chef:<\/strong> Pour tracker la conversion (soumission) du formulaire, Contact Form 7 propose un \u00ab\u00a0hook\u00a0\u00bb (fonction d’int\u00e9gration) qui d\u00e8s la soumission du formulaire permet d’\u00e9x\u00e9cuter du code suppl\u00e9mentaire gr\u00e2ce au callback on_sent_ok<\/em>. Et on peut y \u00e9x\u00e9cuter du Javascript. Une fois que le web analyste en vous est bien \u00e9moustill\u00e9, deux options s’offrent \u00e0 vous: le suivi de la soumission telle quelle (gr\u00e2ce \u00e0 une page vue virtuelle ou un \u00e9v\u00e9nement).<\/p>\n En fin de formulaire de on trouve une section R\u00e9glages compl\u00e9mentaires dans laquelle nous allons appeler on_sent_ok<\/em>:<\/p>\n F\u00e9licitations, vous avez d\u00e9fini comme un chef une URL de succ\u00e8s que vous n’aurez qu’\u00e0 reporter dans la construction d’un objectif dans Google Analytics.<\/strong><\/p>\n Si vous pr\u00e9f\u00e9rez, utilisez un \u00e9v\u00e9nement:<\/p>\n Faites commes vous pr\u00e9f\u00e9rez, mais je recommande une page vue virtuelle (_trackPageview<\/em>) car elle s’int\u00e8gre mieux dans la continuit\u00e9 d’une visite alors que l’\u00e9v\u00e8nement est plus spontan\u00e9 et n’est pas corr\u00e9l\u00e9 au flux de la visite (il fait l’objet d’une cuisine toute diff\u00e9rente.)<\/p>\n Les novices se rueront sur la solution de l’appel de _trackPageview\/_trackEvent<\/em> directement dans on_sent_ok<\/em>. Les plus exp\u00e9riment\u00e9s se souviendront que malgr\u00e9 tous les efforts de Google pour rendre son code asynchrone de plus en plus rapide (et c’est valable pour les autres \u00e9diteurs soit dit en passant), la rapidit\u00e9 des interactions peut parfois court-circuiter les appels de pixels analytics. Ces cuistots de la donn\u00e9e savent faire mijoter le processus et savent aussi qu’utiliser des artifices comme des retardateurs Javascript ne r\u00e8glent pas le probl\u00e8me.<\/p>\n On pr\u00e9f\u00e8rera passer \u00e0 on_sent_ok<\/em> une redirection Javascript vers une page de succ\u00e8s. Les vieux pots, la meilleure soupe, vous connaissez la recette.<\/p>\n Exemple:<\/p>\n Il ne vous reste plus qu’\u00e0 cr\u00e9er une page de confirmation \u00e0 cette adresse (configurable dans les options de la page) et \u00e0 d\u00e9finir cette URL comme page de succ\u00e8s. C’est bon, c’est fin, ca se mange sans fin.<\/p>\n Bon, \u00e0 ce stade l\u00e0, en admettant que les visiteurs remplissent votre formulaire<\/a> et le soumettent avec succ\u00e8s, vous avez des conversions.<\/p>\n En regardant un exemple de mail de soumission envoy\u00e9 avec Contact Form 7, on trouve les choses suivantes:<\/p>\n Vous aurez remarqu\u00e9 qu’on retrouve les \u00e9l\u00e9ments d\u00e9finis dans l’interface de construction du formulaire et du mail. Jusque l\u00e0 tout va bien.<\/p>\n Si vous avez bien suivi la recette, vous aurez install\u00e9 Contact Form 7 to DB, qui vous permet de stocker vos donn\u00e9es de formulaires dans un base de donn\u00e9es MySQL et de les consulter via requ\u00eate Excel (IQY), API, etc.<\/p>\n Vous devriez obtenir un fichier ressemblant \u00e9trangement \u00e0 \u00e7\u00e0:<\/p>\n mais comment diable cette information a t’elle bien pu se retrouver dans mon formulaire?<\/p><\/blockquote>\n Alimentaire, mon cher Watson! Cela dit, je vais quand m\u00eame dire aux Kevins qui ont tenu \u00e0 rester avec nous jusqu’\u00e0 pr\u00e9sent de quitter ce billet.<\/p>\n Pour capturer votre provenance Google Analytics dans Contact Form 7, vous allez devoir manipuler le cookie __utmz<\/em> de Google Analytics, celui-l\u00e0 m\u00eame qui g\u00e8re les sources de trafic. Pour capturer __utmz<\/em>, on peut proc\u00e9der de plusieurs fa\u00e7ons mais je vous propose la suivante: modifier le fichier de fonctions de votre th\u00e8me WordPress (functions.php<\/em>). A ce stade je vous recommande d’utiliser un th\u00e8me enfant. Si vous ne savez pas ce qu’est un th\u00e8me enfant WordPress, renseignez-vous.<\/p>\n Mais ouvrons functions.php<\/em> et ajoutons le bloc de code suivant en queue de fichier: Regardez bien ci-dessus, on retrouve, source, support, campagne, etc. Oh et tant qu’on y est,\u00a01342624308 devrait vous plaire pour la partie CRM mais parlons en plus tard.<\/p>\n Si la fonction ne trouve pas de valeur pour le cookie __utmz<\/em>, on a affaire \u00e0 une nouvelle visite. On va donc avoir recours \u00e0 du Javascript pour capturer d’\u00e9ventuels param\u00e8tres de provenance: utm_source, utm_medium, utm_campaign et utm_content<\/em> pour ne citer que les plus usit\u00e9s.<\/p>\n Pour le Javascript, retournons dans notre \u00e9diteur de formulaire Contact Form 7 et ins\u00e9rons un champ texte appel\u00e9 cf7cookie<\/strong>.<\/p>\n Ins\u00e9rons dans la foul\u00e9e du CSS pour cacher ce champ de formulaire, un peu de code pour traiter les param\u00e8tres UTM derri\u00e8re le point d’interrogation ou derri\u00e8re le di\u00e8se (#), on saupoudre de PHP et au prochain formulaire rempli, magique!<\/p>\n Voici le code que j’utilise sur un des formulaires chez Hub’Sales<\/a>:<\/p>\n Et voil\u00e0, avec \u00e7\u00e0 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\u00e9es par canal d’acquisition. N’oubliez pas de tagguer vos liens de provenance!<\/p>\n Avec ce syst\u00e8me 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 \u00e9galement utiliser une variable personnalis\u00e9e Google Analytics pour capturer un ID visiteur et corr\u00e9ler cet ID lors d’appel \u00e0 l’API Google Analytics. Ensuite,\u00a0imaginez\u00a0ce que \u00e7a donne en terme d’analyse des ventes et du\u00a0comportment\u00a0une fois ces donn\u00e9es crois\u00e9es et pass\u00e9es dans un Tableau ou un QlikView \ud83d\ude09<\/p>\n Vous avez encore faim? N’oubliez pas de d\u00e9vorer mon DVD de formation \u00e0 Google Analytics<\/a> et contactez moi au sujet des services web analytics, business intelligence, CRM et eR\u00e9putation propos\u00e9s par Hub’Sales<\/a> au sein du group Business & D\u00e9cision<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Vous avez un site ou un blog propuls\u00e9 par WordPress? C’est notre cas chez Hub’Sales \u00e9galement \ud83d\ude42 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\u00e9 un module de formulaire et vous recevez (le plus souvent […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"fr_FR","_original_post":"1283","footnotes":""},"categories":[],"tags":[],"class_list":["post-1283","post","type-post","status-publish","format-standard","hentry","fr-FR"],"yoast_head":"\n\n
Ingr\u00e9dients<\/h2>\n
\n
Instructions<\/h2>\n
![\"\"](\"\/\/www.hub-sales.fr\/blog\/wp-content\/uploads\/2012\/07\/cf7-menu-WP.png\" "\\"Contact")
<\/a>Dans Contact Form 7, d\u00e9finissez votre formulaire. Utilisez le menu de droite pour construire les diff\u00e9rents champs de formulaire et leurs attributs (nom, ID, classe CSS, obligatoire oui\/non, etc.)<\/p>\n
\nle suivi des conversions de Contact Form 7 dans Google Analytics<\/p>\non_sent_ok: \"_gaq.push(['_trackPageview','\/wordpress\/objectif\/contact']);\"<\/pre>\n
on_sent_ok: \"_gaq.push(['_trackEvent','Formulaires','Succ\u00e8s','Contact']);\"<\/pre>\n
on_sent_ok: \"location.href='\/formulaire\/succes';\"<\/pre>\n
Le plat de r\u00e9sistance<\/h2>\n
De : Jean Aymard <tartempion@sa.fr>\r\nSujet : Inscription au webinar HubScan du 27 ao\u00fbt\r\nInformations du formulaire :\r\nDate choisie: 27 ao\u00fbt\r\nNom: Jean Aymard\r\nE-mail: tartempion@sa.fr\r\nEntreprise: Tartempion SA\r\nT\u00e9l.: 01 23 45 67 89\r\nPerception Hub'Scan: bouche \u00e0 oreille<\/pre>\n
![\"\"](\"\/\/www.hub-sales.fr\/blog\/wp-content\/uploads\/2012\/07\/cf7-database.png\" "\\"cf7")
<\/a>Mais quel est ce champ myst\u00e9rieux \u00e0 droite du tableau? Eh oui, c’est bien la f\u00e8ve: la provenance (utm_source<\/em> dans Google Analytics). Et l\u00e0 je sens votre excitation, tel un \u00e9colier devant un Kinder Surprise:<\/p>\n
\nfunction getCF7Cookie( $form_tag )
\n{
\nif ( $form_tag['name'] == 'cf7cookie' ) {
\nif (isset($_COOKIE['__utmz'])){
\n$form_tag['values'][] = $_COOKIE['__utmz'];
\n} else {
\n$form_tag['values'][] = 'hashed';
\n}
\n}
\nreturn $form_tag;
\n}
\nif ( !is_admin() ) {
\nadd_filter( 'wpcf7_form_tag', 'getCF7Cookie' );
\n}<\/code>
\nEn gros, cette fonction permet de remplir automatiquement un champ Contact Form 7 avec la valeur du cookie __utmz<\/em> qui en temps normal ressemble \u00e0 \u00e7\u00e0:<\/p>\n78813325.1342624308.5.2.
<style type=\"text\/css\">\r\ninput.cf7cookie { display:none; }\r\n<\/style>\r\n[text 1=\"class:cf7cookie\" 2=\"id:cf7cookie\" language=\"cf7cookie\"][\/text]\r\n<script type=\"text\/javascript\">\r\nvar dlh = document.location.hash;\r\nvar dls = document.location.search;\r\nfunction cf7UTM(field) {\r\n\/\/ les param\u00e8tres UTM sont ils derri\u00e8re le point d'interrogation ou le di\u00e8se?\r\nif (dls.indexOf('utm_source') > -1) {\r\n\/\/ trouv\u00e9 derri\u00e8re le point d'interrogation\r\nvar cf7cookieparams = dls.substr(1).split('&');\r\n} else if (dlh.indexOf('utm_source') > -1) {\r\n\/\/ trouv\u00e9 derri\u00e8re le di\u00e8se\r\nvar cf7cookieparams = dlh.substr(1).split('&');\r\n}\r\nif (typeof(cf7cookieparams) != \"undefined\" && cf7cookieparams[0].indexOf('utm_source') > -1) {\r\nvar gaSource = cf7cookieparams[0].substr(cf7cookieparams[0].indexOf('=') + 1);\r\nfield = gaSource;\r\nreturn field;\r\n}\r\n}\r\nvar cf7cookiefield = document.getElementById('cf7cookie');\r\nvar cf7v = cf7cookiefield.value;\r\n\r\n\/\/ Nouvelle visite Google Analytics?\r\nif (cf7cookiefield.value == \"hashed\" || dls.indexOf('utm_source') > -1 || dlh.indexOf('utm_source') > -1) {\r\n\/\/ Pas de cookie de provenance GA, on teste la pr\u00e9sence de param\u00e8tres d'URL (UTM)\r\ncf7cookiefield.value = cf7UTM(cf7v);\r\n} else {\r\n\/\/ si cookie de provenance GA, on peuple automatiquement le champ en r\u00e9\u00e9crivant le cookie UTMZ\r\nvar vpos1 = cf7v.indexOf('=') + 1;\r\nvar vpos2 = cf7v.indexOf('|') + 1\r\nvar gaSource = cf7v.substr(vpos1, vpos2 - vpos1 - 1);\r\ncf7cookiefield.value = gaSource;\r\n}\r\n<\/script><\/pre>\nEncore un peu de place pour le dessert?<\/h2>\n