Renseignez ici vos attentes par rapport à cette formation

Téléchargez ici le support de la Cegos

Retrouvez ici le dossier partagé

Slides de la formation

Retrouvez ci-dessous le support développé spécialement pour Sapeso (formation de novembre 2023)

Fichier de suivi pour Sapeso

Retrouvez ici le lien vers le fichier de suivi (document téléchargeable)

Menu principal

---

Théorie et principe

 

Retour au menu principal

Composants de Google Tag Manager

Retour au menu principal

Actualité

Ce que change l’abandon des cookies tiers par les navigateurs

• Le mode ‘debug’ de Google Tag Manager. En effet, ce mode fonctionnait sur la base d’un cookie tiers. Voir ici pour plus de détails.
• L’adoption du mode ‘Server to server’ de Google Tag Manager, pour contourner cette difficulté. En effet, de nombreuses régies, agences d’affiliation ou partenaires publicitaires s’appuient sur des cookies 3rd parties. La pose des tags partenaires doit donc être repensée. Voir ici pour plus de détails

Retour au menu principal

L’aspect légal

Rien ne doit être déclenché tant que le recueil du consentement utilisateur n’est pas avéré. Chaque entreprise doit mettre en place sur son site son propre outil de CMP, en s’assurant de la conformité avec la CNIL. Le déclenchement des tags sera réalisé sur la base de ce consentement uniquement. Pour exemple, sur ce site, nous utilisons l’outil de CMP Cookiebot.

Pour en savoir plus : https://formation.dibenn.com/contexte-enjeux-et-principes-du-web-analytics/#enjeuxLegal

Retour au menu principal

Les outils dont vous aurez besoin

Je vous conseille d’installer l’extension adswerve , pour visualiser plus facilement dans la console de votre navigateur les éléments passés dans le dataLayer et les tags GA et FB déclenchés.

 

Retour au menu principal

Illustrations

Les variables GA4 nécessaires :

• Variable ‘Measurement ID’
• Variable ‘Google tag Configuration Settings’

Les tags

• tag Google Analytics de Page vue
• Formulaire
• Custom tag
• Custom dimension
• Tag e-commerce
• Tracking multi-sites
• Evénements
• Lecture d’une vidéo Youtube
• A/B tests (avec Google Optimize )
• Pixels FB

---

Variable ‘Measurement ID’

C’est la variable qui contiendra l’identifiant du flux de données dans lequel les informations de navigation seront enregistrées.

Type de variable : constant.

Intérêts

• Permettre la ré-utilisation de cette information, en évitant toute éventuelle faute de frappe
• Donner un nom parlant à cette variable, plus explicite que G-XXXXX

---

Variable ‘Google Tag : Configuration settings’

C’est la variable qui va contenir tous les paramètres communs aux tags GA que l’on va utiliser.

Elle contiendra :

• Des ajustements sur le cookie _ga (limitation de la durée de vie à 13 mois)
• L’identifiant de la propriété GA (intégré dans une variable)

---

tag Google Analytics (UA) de page vue

C’est en général le premier tag que l’on pose. Comme son nom l’indique ; il va enregistrer tous les chargements de pages.

Pour ce faire, on sélectionne le tag pré-défini de Google Analytics (nous allons ici prendre le tag UA), et on renseigne :

• La propriété GA correspondante (directement dans le tag), ou dans une variable ‘settings’ (bonne pratique). Idéalement, la variable UA est elle-même contenue dans une variable.
• Trigger positif -> page vue
• Trigger négatif -> si nécessaire : absence de consentement client pour les cookies statistiques (valeur contenue dans un cookie). Dans notre exemple, nous utilisons CookieBot, qui va déclencher un événement ‘cookie-consent_marketing’ dans le dataLayer à chaque fois qu’une nouvelle page est chargée et que le consentement utilisateur est avéré. Nous n’avons donc pas besoin de trigger négatif.

Tester l’implémentation du tag GA de Page vue

---

Formulaire

Pourquoi c’est utile :

Dans certains cas, il faut récupérer les paramètres contenus dans l’url pour adapter le contenu de la page en conséquence.

Examinons dans un premier temps un formulaire qui renvoie vers le page d’accueil de ce site :

Premier paramètre:

Deuxième paramètre:

Maintenant, observons ce qui se produit lorsque le formulaire renvoie vers un autre site.

Premier paramètre:

Deuxième paramètre:

Mode opératoire :

Dans la variable ‘settings’, cochez le paramètre ‘decorate form’.

---

Custom tag

Dans quel cas est-ce utile ?

Lorsque vous devez placer le script ‘brut’ d’un partenaire media sur votre site par exemple.

Mode opératoire :

Dans GTM, choisir le type de tag ‘custom html’. Ne pas oublier de placer le code entre les balises <script> </script>.

Voici un exemple de code, qui va se déclencher lorsque l’on va cliquer sur ce bouton :

<script>
alert('Vous avez posé un custom tag avec succès, félicitations !'); 
</script>

Tester le tracking du custom tag

---

Custom dimension

Quelquefois, on souhaite enrichir les informations collectées par défaut par l’outil de tracking avec des informations spécifiques à notre activité. Dans cet exemple, nous allons recueillir une variable ‘prénom’ collectée ‘en live’ via un pop-up. Variable qui sera ensuite poussée dans le dataLayer. Ensuite, on pourra l’ajouter aux hits de pagesvues ou d’événement, pour récolter une information plus granulaire que ce qui est collecté par défaut. Une variable que l’on ajoute ainsi est appelée ‘dimension personnalisée’.

<script>
  
var demoCustomDim= prompt('Bonjour \n Nous allons aborder le sujet passionnant des custom dim \n Pour cela, pouvez-vous renseigner votre prénom ?')
dataLayer.push({
  'event':'firstNameEntered',
  'firstName':demoCustomDim
});
  
</script>  

Tester la création de la custom dim et son envoi dans le dataLayer

---

Variable

La valeur de la variable ‘cookieConsent’ lue dans le 1rst party cookie et stockée dans le dataLayer est :

pas de valeur

Tag e-commerce

Voir le détail sur le site de démonstration dédié au tracking du e-commerce

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->