Configuration de Google Tag Manager

By mars 27, 2017Guides

L’objectif de cet article est de vous présenter comment configurer Google Tag Manager avec différents modules, y compris Google Analytics et Zendesk Chat.

Création de votre compte Google Tag Manager

Connectez vous sur Google Tag Manager. Cliquez sur Créer un compte et renseignez par exemple le nom de votre société puis dans Conteneur de configuration tapez votre nom de domaine puis sélectionnez Web. Votre compte est créé et en haut à droite de l’écran vous devriez voir le numéro de votre compte sous la forme GTM-XXXXXXX.

Vous devez ajouter ce code sur DRYVER sur la page suivante : https://secure.dryver.fr/createWebsiteWorkflow

Google Tag Manager

Attention : Pour la suite de l’article, à chaque fois que vous effectuez des modifications dans Google Tag Manager, vous devrez les publier pour qu’elles apparaissent en ligne. Le bouton Publier se trouve en haut à droite de la console de Google Tag Manager :

Google Tag Manager

 

Configuration initiale

Afin d’utiliser Google Tag Manager, vous devez créer deux déclencheurs pour déclencher vos scripts.

Cliquez sur Déclencheurs dans le menu à gauche puis Nouveau. Choisissez comme type de déclencheur Page View et nommez-le Global.PageView puis cliquez sur Enregistrer. Votre écran doit ressembler à la capture suivante :

Google Tag Manager

Pour créer votre second déclencheur, faites les mêmes actions mais choisissez comme type de déclencheur History Change et nommez-le Global.HistoryChange puis cliquez sur Enregistrer. Votre écran doit ressembler à la capture suivante :

Google Tag Manager

 

Configuration de Google Analytics

Vous devez tout d’abord vous connecter à Google Analytics pour créer un nouveau compte si vous n’en avez pas un. Vous pourrez alors récupérer votre numéro de compte qui est sous la forme UA-XXXXXX-XX.

Depuis Google Tag Manager, vous pouvez alors ajouter une nouvelle balise en cliquant sur Balises puis Nouvelle et sélectionnez Universal Analytics comme balise. Vous pouvez ensuite ajouter vos deux déclencheurs précédemment définis Global.HistoryChange et Global.PageView comme suit :

Google Analytics

C’est tout, n’oubliez pas de cliquer sur Publier.

 

Configuration de Zendesk Chat

Vous devez tout d’abord vous connecter à Zendesk Chat pour créer un nouveau compte si vous n’en avez pas un. Vous pourrez alors récupérer votre numéro de compte qui est sous la forme VOTRECODE.zendesk.com.

Depuis Google Tag Manager, vous pouvez alors ajouter une nouvelle balise en cliquant sur Balises puis Nouvelle et sélectionnez Custom HTML comme balise. Vous pouvez ensuite ajouter vos deux déclencheurs précédemment définis Global.HistoryChange et Global.PageView comme suit :

Google Tag Manager

Le code que vous devez inclure dans le formulaire est le suivant. Attention de bien remplacer VOTRECODE par votre propre code Zendesk.

<script>
 window.zEmbed||(function(){
 var queue = [];

window.zEmbed = function() {
 queue.push(arguments);
 }
 window.zE = window.zE || window.zEmbed;
 document.zendeskHost = 'VOTRECODE.zendesk.com';
 document.zEQueue = queue;
 }());
</script>
<script src="https://assets.zendesk.com/embeddable_framework/main.js" data-ze-csp="true" async defer></script>

 

C’est tout, n’oubliez pas de cliquer sur Publier.

 

Autres scripts

Si vous souhaitez ajouter d’autres scripts, vous avez deux options : soit il existe déjà une balise dans Google Tag Manager qui correspond à ce que vous voulez ajouter (par exemple Adwords), soit vous devez copier et coller votre script comme précédemment dans une balise Custom HTML. N’oubliez pas d’ajouter vos deux déclencheurs habituels.