Google Tag Manager (GTM) : présentation et installation sous WordPress

Tout entrepreneur cherche à savoir si ses efforts en Marketing portent leurs fruits ?

Sur #audreytips, je vous ai déjà parlé :

• De l’importance de l’analyse de votre trafic Web, avec Google Analytics,
• Mais aussi du suivi de vos conversions d’objectifs.

Or il y a un outil pour, entre autres, optimiser et faciliter le travail de cette analyse.

C’est Google Tag Manager (GTM).

Voici ce qu’en pense Laurent :

Chez #audreytips, toute l’équipe garde un oeil en permanence sur les statistiques du site : nombre de visiteurs, taux de rebond, pages les plus visitées. Mais tu n’as pas encore mis en place un suivi précis des conversions. Et, GTM est la bonne solution pour cela !

C’est vrai que je sais plein de choses sur vous, mes visiteurs, grâce à Google Analytics.

Mais comment en savoir plus encore ? Avec Google Tag Manager !

Alors en complément de mon article précédent, voyons à quoi peut vous servir Google Tag Manager, puis comment le mettre en place sur un site Web sous WordPress comme #audreytips.

Et si vous souhaitez un avis plus général sur GTM et son utilité, l’expert Fabien Bourgeois en parle très bien dans cet article 🙂

Présentation de Google Tag Manager

Les conversions, avant tout !

Comme je l’indiquais, il est très facile (avec Analytics ou d’autres outils d’analyse) de savoir combien votre entreprise a de visiteurs par jour ou par mois.

C’est à la portée de tout le monde.

Mais cela n’apporte pas grand-chose en fait.

Imaginez que vous soyez un cabinet d’avocats.

Analytics vous indique que votre site Web reçoit 1.500 visiteurs par mois. Ce sont des français pour 92% d’entre eux et ils sont 34% à utiliser un smartphone pour visiter votre site Internet.

C’est très bien. Mais qu’allez-vous faire de ces informations pour trouver plus de clients et développer votre entreprise ?

Pour cela, il vous faut plus de données et savoir qui sont ceux qui « convertissent ». Par là, entendez les internautes qui :

• S’inscrivent à votre newsletter (et via quel formulaire ou application),
• Prennent contact avec vous, via votre page de contact,
• Renseignent votre formulaire de demande de devis,
• Vous appellent sur votre numéro de téléphone,
• Téléchargent votre livre blanc au format PDF,
• …

En bref, quels sont les visiteurs sur votre site Web qui réalisent une action (un objectif de conversion) dont le but est de conquérir de nouveaux clients. Mais aussi, relier ces visiteurs avec toutes les autres informations utiles fournies gratuitement par Google Analytics.

Par exemple, sur vos 1.500 visiteurs par mois, seulement 20 renseignent un formulaire contact ?

Il est crucial de tout savoir sur ces 20 visiteurs-clés. A la limite, les 1.480 autres visiteurs sont vraiment moins importants.

Les 20 visiteurs-clés sont peut-être des internautes qui :

• Vous ont trouvé via un post LinkedIn,
• Ont cliqué sur une de vos campagnes d’emailing bien spécifique,
• Ou se trouvent en Suisse et non en France !

Qui sait ?

Toutes ces informations sont indispensables pour améliorer la performance de vos actions de Marketing Digital !

Et Google Tag Manager là-dedans ?

Comme déjà précisé, sur #audreytips, j’ai beau constaté que mon trafic augmente régulièrement et fortement, si je ne sais pas d’où viennent les gens qui convertissent, je ne peux pas adapter mes actions pour favoriser ces conversions.

Google Tag Manager, aussi appelé GTM, installe des « tags » (de codes informatiques divers) sur votre site Web.

Avec ces tags, GTM renvoie les informations à Google Analytics sur lesquels il s’appuie pour suivre vos conversions business sur votre site Web.

Et ce de manière plus simple et moins technique qu’avec la méthode « classique » que j’ai déjà décrite dans mon article présentant les objectifs de conversion dans Analytics.

Une fois GTM installé sur votre site Internet, il est facile d’ajouter tous les « Tags » que vous souhaitez pour suivre avec précision les actions prises par vos internautes. A la différence du suivi des conversions classiques, où il faut gérer des codes pour chaque objectif : cela devient vite une usine à gaz !

Pour paramétrer son site pour GTM, ajoutez un seul et unique bout de code sur votre site d’entreprise. Ensuite, l’interface Google Tag Manager gère tous « tags » dont vous avez besoin. En particulier ceux que vous définissez pour les événements déclencheurs de conversions sur votre site.

Explications plus détaillées sur GTM

Commençons par une présentation des concepts-clés de GTM. C’est un peu un cours magistral, mais vous verrez, ça aide à mieux comprendre le système.

Google Tag Manager repose sur 3 concepts :

• Les Tags,
• Les Déclencheurs,
• Les Variables.

Voyons dans le détail ces 3 notions.

Les Tags ou Balises

Aujourd’hui, de nombreux petits bouts de scripts se trouvent dans le code source du site Web de votre entreprise.

Ces scripts sont appelés aussi « Tags » par les experts en Marketing Digital. En français, on les appelle aussi des “Balises”. Mais je vais principalement utiliser le mot “Tags”, car c’est ainsi que GTM les dénomme !

Voici quelques exemples de Tags :

• Le code javascript de suivi de Google Analytics,
• Celui pour le suivi des conversions d’AdWords,
• Ou encore celui d’une extension WordPress que vous avez installée.

Bref, potentiellement des dizaines de « Tags » sont présents sur le site Web de votre entreprise.

L’intérêt de Google Tag Manager est de :

• Regrouper en un seul endroit la gestion de tous ces différents tags mais aussi « compresser » leur génération pour ainsi accélérer le chargement des pages,
• Vous simplifier la tâche : plus besoin de gérer tous ces tags « à la main » dans le code : vous pourrez les gérer de manière centralisée.

Les Déclencheurs

Le rôle des déclencheurs est simple : Décider l’événement qui va exécuter un Tag.

Prenons un exemple.

Créer un déclencheur qui lance le tag « conversion Google Analytics » dès qu’un visiteur valide un formulaire de contact.

Comme GTM est actif sur votre site, il suit en permanence tout ce que les visiteurs sont entrain de faire. Dès que GTM détecte qu’un internaute valide votre formulaire de contact, hop, le déclencheur active le « Tag » (bout de code) correspondant. Et l’action de ce tag est donc réalisée.

Evidemment, les déclencheurs sont paramétrables depuis Google Tag Manager.

Les Variables

Les variables sont des données précises stockées dans les Tags.

Il y a 2 types de variables :

• Les variables dynamiques,
• Et les variables statiques.

Les variables dynamiques

Google Tag Manager propose en standard de nombreuses variables dynamiques, très utiles, de manière pré-paramétrées. Elles sont appelées “variables intégrées”.

Par exemple, dans GTM, « Page URL » est une variable dynamique. « Page URL »  signifie l’URL de la page sur laquelle l’internaute se trouve.

Evidemment, GTM se débrouille pour que cette variable change de valeur à chaque fois qu’un visiteur change de page. D’ailleurs, c’est la raison pour laquelle ces variables sont qualifiées de “dynamiques”.

Les variables statiques

A l’instar des variables dynamique, les variables statiques ont une valeur constante.

Le meilleur exemple de variable statique est votre identifiant “Google Analytics ID”. Avec cet identifiant, GTM fait la connexion avec votre compte Google Analytics. Sa valeur ne change jamais.

Comme vous allez avoir besoin régulièrement de cet identifiant dans GTM. Alors créez une variable qui contient cet identifiant. C’est beaucoup plus simple que de taper le chiffre 123456789 (par exemple) qui correspond à votre ID Analytics.

Pour résumer, les avantages de GTM sont :

• Un outil relativement simple à utiliser, du moins une fois que la structure de base est en place,
• Avec lequel il est très rapide d’ajouter de nouveaux tags.

Alors, ready ? Prêt(e) à mettre en place GTM ?

Comment installer Google Tag Manager dans WordPress ?

Créer un compte Google

Commençons par la base.

Comme d’habitude avec les outils gratuites de Google, pour installer Google Tag Manager, vous avez besoin d’un compte Google.

Pour cela, prenez le compte Google de votre compte AdWords, Analytics, gmail, Youtube ou celui de tout autre service Google que vous utilisez déjà.

Si vous n’avez pas encore de compte Google, commencez simplement par créer une adresse gmail.

Créer un compte GTM

Pour maintenant créer votre compte Google Tag Manager, voici les quelques étapes à suivre :

• D’abord, rendez-vous sur la page d’accueil de GTM.
• Puis cliquez sur « S’inscrire » ou « Sign up » (Bref le gros bouton vert), selon la langue de navigation que vous préférez :

Note : Pour paramétrer la langue, allez tout en bas de la page et choisissez la meilleure langue pour vous.

Si vous êtes déjà connecté à votre compte Google (ce que je préconise), voici la page suivante que vous voyez :

GTM parle de conteneur. Dans la plupart des cas et pour simplifier, retenez qu’un conteneur est le site Web de votre entreprise.

Comme vous pouvez le voir ci-dessus, j’ai déjà un conteneur qui existe :

« www.audreytips.com »

Or l’URL correcte de mon site est https://audreytips.com.

Pour que tout reste bien cohérent, je vais donc créer un nouveau conteneur, sans le « www » en cliquant sur « Créer un compte ».

Si vous gérez plusieurs sites, créez bien un conteneur par site, afin de récupérer un code suivi unique pour chaque site.

Remarquez ci-dessous que vous pouvez aussi utiliser GTM pour vos applications sur iOS et Android, ainsi que pour vos sites mobiles au format AMP.

Une fois que vous cliquez sur « Créer », la page suivante s’affiche :

Acceptez simplement les conditions d’utilisation en cliquant sur « Oui » pour voir la page sur laquelle vous trouvez vos codes de suivi !

OK. Bonne première étape de faite !

Ajouter vos 2 codes Google Tag Manager à votre site WordPress – En Mode Manuel

Maintenant, il faut ajouter ces 2 codes fournis par GTM sur le site Web de votre entreprise. Vous pouvez demander à votre développeur Web de faire cette manipulation qui prend quelques minutes.

Par contre, si comme moi, vous êtes sous WordPress, il est assez facile de coller ces 2 bouts de code dans le thème de votre site WordPress …

Voyons cela de suite.

Ouvrez votre compte WordPress, puis cliquez dans la colonne de gauche de la console WordPress sur la rubrique « Apparence » puis sur « Editeur ».

Une fois cela fait, dans la colonne de droite repérez « header.php », puis cliquez dessus pour voir le code source de votre header.

Recherchez dans le code la balise <Head>. Insérez une ligne juste en dessous puis y coller le premier code de GTM, comme montré avec la partie entourée en rouge.

Un peu plus bas, repérez la première balise Body, insérez de nouveau une ligne juste en-dessous pour y coller le second code de GTM :

Attention : Ne pas oublier d’enregistrer les modifications en cliquant sur le bouton bleu tout en bas « Mettre à jour le fichier ».

Et voilà, c’est tout pour cette partie sur l’installation de GTM dans WordPress, de manière manuelle.

Note : Avant de faire des modifications dans votre thème, je vous conseille de faire un thème enfant. Comme ça, à la prochaine mise à jour de votre thème, vous ne perdrez pas vos modifications. Si vous ne savez pas faire un thème enfant, je vous renvoie vers cet article qui est très didactique, publié sur WP Marmite.

Je vous conseille aussi, avant toute modification, de faire un copier de tout le code de votre header puis de le coller dans un fichier bloc note. Comme ça, si il y a un quelconque souci, c’est facile de revenir en arrière.

Ajouter vos 2 codes Google Tag Manager à votre site WordPress – Grâce à l’Extension Duracell

Mais figurez-vous qu’il existe une extension qui peut vous faciliter le travail ! Et oui, c’est souvent le cas sous WordPress.

L’extension s’appelle : DuracellTomi’s Google Tag Manager for WordPress.

Son avantage majeur est de placer les codes nécessaires à GTM dans votre site WordPress. Sans devoir faire les opérations manuelles décrites plus haut !

Pour installer « Google Tag Manager for WordPress », rien de plus simple. Connectez-vous à votre administration WordPress, cliquez sur Extensions > Ajouter.

Puis tapez « Google Tag Manager for WordPress » dans la recherche, vous verrez apparaître le nom de l’extension, il n’y a plus qu’à cliquer sur « Installer ». Et voici le résultat :

Cliquez alors sur « Réglages » et compléter la partie « Général » comme ceci :

Il faut récupérer le Google Tag Manager ID à partir de votre compte Google Tag Manager.

Il faut aussi cliquer sur « Codeless injection » dans la partie « Container code placement ». C’est simplement la partie de l’extension qui placera de manière appropriée les deux bouts de code GTM dans votre code source.

Et voilà, c’est fait pour l’insertion des codes GTM dans votre site.

Mais tant que nous y sommes, voici un autre paramétrage à réaliser, pour permettre à l’extension de bien fonctionner avec les formulaires contact de type « Contact Form 7 » que j’utilise sur mon site.

Comme vous le voyez ci-dessus, j’ai cliqué sur « Integration », puis sur Contact Form 7. Cela déclenche à présent un événement (récupérable dans Google Analytics) dès qu’un formulaire Contact Form 7 est validé.

De bonnes choses de faites ! Passons maintenant aux choses sérieuses 🙂

Comment ajouter des balises Google Tag Manager sur votre site ?

Pour le besoin de ce tutoriel, nous allons créer une balise pour suivre les conversions sur mon formulaire de contact.

Mais nous allons d’abord ajouter le Tag de Google Analytics de manière générale sur notre site.

Ajouter le Tag de Google Analytics dans GTM

Maintenant que WordPress est équipé du code de suivi GTM (voir partie précédente de ce tutoriel), vous pouvez ajouter des balises dans Google Tag Manager.

Vous avez sûrement déjà intégré le code de suivi Google Analytics dans votre site, soit manuellement dans le code, soit via une extension WordPress.

Note : Pensez bien à supprimer ce code de suivi Analytics après avoir réalisé l’insertion du Tag Analytics dans GTM. Sinon le risque est d’avoir un conflit entre les 2 codes (car ils font la même chose).

Pour rappel, les balises sont des bouts de code JavaScript qui se déclenchent lorsqu’un événement a lieu sur votre site : une page est vue, un click sur un bouton, un achat a lieu sur votre boutique e-commerce, etc.

Ajouter une balise

Rendez-vous tout d’abord dans Google Tag Manager où vous trouverez un lien « Ajouter une balise », comme ci-dessous :

Voici l’écran qui s’affiche ensuite, dans lequel vous devez cliquer sur le bouton rond, au-dessus de « Sélectionnez un type de balise ».

Sur la droite de votre écran, une nouvelle partie s’affiche, dans laquelle vous pourrez sélectionner « Universal Analytics ».

Vous vous retrouvez au même endroit que précédemment mais avec le type de balise à présent renseigné :

J’ai ensuite choisi les paramètres :

• Type de suivi : « Page vue » (pour suivre toutes les pages vues partout sur le site),
• Paramètres Google Analytics : sélectionnez ici {{Paramètres Google Analytics}} pour aller chercher automatiquement les infos nécessaires dans Analytics.

Préciser le déclencheur

Ensuite, GTM vous demande de préciser un déclencheur de cette balise. On souhaite bien sûr que Universal Analytics soit présent dès qu’une page est vue. Voici donc le paramétrage à indiquer :

Cliquez enfin sur le bouton bleu « Enregistrer » en haut à droite et votre code Analytics est maintenant lié à votre compte GTM.

Ce n’est cependant pas terminé. En effet, seul Google Tag Manager est au courant de cette balise.

Publier la balise

Dans GTM, pour qu’une balise, une variable ou un déclencheur soient pris en compte dans votre site, il faut la « Publier », après l’avoir configurée dans GTM.

Pour cela, cliquez simplement sur le bouton bleu « Envoyer » en haut à droite dans votre console GTM :

Un écran comme ci-dessous apparaît dans lequel il suffit de cliquer sur « Publier » :

Validez à nouveau en cliquant une deuxième fois sur Publier, et vos modifications sont maintenant actives sur votre site !

Nous avons donc, en 10 minutes environ, ajouté sur toutes les pages de notre site WordPress la balise Google Analytics, via Google Tag Manager.

Bravo !

Ajouter le Tag Contact Form 7, pour votre formulaire de contact, dans GTM

Créer la balise de formulaire de contact

Poursuivons nos travaux et ajoutons maintenant une balise qui va s’occuper spécifiquement de notre formulaire de contact !

Il s’agit à nouveau d’une balise de type « Universal Analytics ».

Mais il faut à présent modifier un peu le processus de création (bien qu’il reste très proche de celui vu plus haut) :

On choisit dans « Type de suivi » : Événement.

On souhaite en effet que lorsqu’un internaute valide notre formulaire de contact, un événement soit déclenché et récupéré par Google Analytics.

Il convient de préciser pour cet événement les valeurs suivantes :

• Catégorie : Contact Form
• Action : Sent
• Libellé : {{Page Path}}. Nous pourrions choisir une autre valeur, mais comme je compte n’inclure qu’un seul formulaire de contact par page de mon site au maximum, ce libellé est « unique » pour mon site. Ainsi, il est facile de repérer de quel formulaire de contact il s’agit 🙂

Précisez aussi à nouveau le fait de récupérer les paramètres Google Analytics :

Et voilà, cela termine la partie balise. Voyons maintenant le déclencheur !

Créer le déclencheur personnalisé

Il convient par la suite de choisir le déclencheur lié à cette balise. Pour cela, cliquez sur « + » pour visualiser la liste complète des déclencheurs possibles :

Choisissez « Événement personnalisé », tout en bas de la liste.

Vous verrez alors une page de paramétrage du déclencheur :

Lorsque vous utilisez Contact Form 7, il faudra alors donner le nom suivant à l’événement pour que la connexion se réalise bien : gtm4wp.contactForm7Submitted comme vous le voyez dans l’écran ci-dessus.

Cliquez ensuite sur Enregistrer pour sauvegarder cette nouvelle balise et ce nouveau déclencheur.

Pour rappel, nous avons « connecté » dans WordPress (grâce à l’extension Duracell) Contact Form avec GTM. C’est ainsi que le lien peut s’opérer entre GTM et Contact Form 7.

Et voilà le résultat de toutes les opérations précédentes :

Nous avons bien nos 2 balises listées :

• L’une correspond à Google Analytics de manière générale (pour suivre le trafic de votre site Web dans son ensemble),
• La Tag CF7 (c’est le doux nom que je lui ai donné) correspond à l’activation d’un événement lorsqu’un formulaire de type « Contact Form 7 » est validé sur mon site.

Visualiser l’événement dans Google Analytics

OK, maintenant pour vérifier le résultat concret, renseignez puis validez le formulaire de contact. Comme ceci :

Je clique sur « Envoyer ». Maintenant, positionnez-vous dans la partie « Événements » de la rubrique « Temps réel » de Google Analytics, accessible ici :

Et magie, voici ce que je visualise : l’événement est bien déclenché par GTM !

Vous vérifiez bien ci-dessus l’événement avec la bonne catégorie (Contact Form) et la bonne action (Sent), telles que nous avons indiqué dans GTM.

Faire correspondre l’événement avec un objectif de conversion Google Analytics

Pour finir, nous allons boucler la boucle.

Il convient à présent de « prendre » cet événement et le lier avec un objectif de conversion Google Analytics.

Pour cela, rendez-vous sur votre console Google Analytics.

Cliquez tout en bas de la colonne de gauche sur « Administration ». Puis choisissez la vue Analytics sur laquelle vous travaillez principalement.

Cliquez sur Objectifs :

Puis sur le bouton rouge « Nouvel Objectif ».

Dans la partie « Modèle », choisissez « Personnalisé » puis cliquez sur « Continuer » :

Vous devrez ensuite donner un nom à votre objectif, et sélectionner le type « Événement ».

Cliquez sur Continuer puis complétez les informations suivantes, qui sont les mêmes que celles précisées dans la balise GTM !

Et voilà ! Cliquez sur Enregistrer et votre objectif de conversion, lié à votre formulaire de contact est maintenant actif et sera pris en compte par Analytics.

Besoin d’une preuve ?

Voici le jour suivant la page « Conversions » de mon compte Analytics :

On y visualise bien les 2 conversions de mon objectif « Contact Form GTM ». Tout fonctionne donc !

Vous avez plusieurs formulaires de contact ?

Il est possible que le site de votre entreprise dispose de plusieurs formulaires de contact.

Dans ce cas, utilisez le champ « Libellé » ci-dessus, dans le paramétrage de vos objectifs de conversion (1 objectif par formulaire) et indiquer l’URL sur laquelle se trouve le formulaire.

Pourquoi ?

Car rappelez-vous, nous avons indiqué « Page Path » dans GTM pour la partie libellé de l’événement généré.

Pour Conclure sur la Mise en Place de Google Tag Manager

Au cours de cet article assez technique, je vous ai montré comment vous pouvez concrètement mettre en place GTM sur votre site.

Cela vous permet de gérer plus facilement (une fois que la structure est en place) vos codes de suivi, par exemple celui de Google Analytics.

Au final, cela vous permet spécifiquement de paramétrer et suivre vos objectifs de conversion Analytics, ce qui était mon objectif dans cet article 🙂

Si vous avez besoin de donner accès à un développeur Web qui travaille pour votre entreprise, pour vous aider sur ce sujet, n’hésitez pas à consulter mon article sur comment partager les accès à GTM.

Et vous, qu’en pensez-vous ? Est-ce que Google Tag Manager est un outil que vous utilisez, ou souhaitez utiliser ? Cela vous semble-t-il trop technique ou accessible ? Dites-nous tout dans les commentaires ci-dessous !