Suivre les conversions d'achat sur le module de réservation Panier avec Google Tag Manager

Ce tutoriel vise à vous montrer comment configurer Google Tag Manager pour :

• Écouter un événement purchase (c'est l'événement qui est déclenché après le paiement).
• Extraire toutes les informations utiles (transaction_id , value , currency , items , etc.).
• Déclencher une balise (ex. Google Analytics 4) au moment de l’achat.

Introduction

Pour comprendre la suite de cet article il est important de comprendre comment le module de réservation remonte des informations à Google Tag Manager.

Google Tag Manager (et Google Analytics) sont en mesure de suivre ce que fait l'internaute sur votre site une fois que celui-ci a accepté les cookies.

Une fois qu'ils en ont l'autorisation, ile vont pouvoir regarder le comprtement de l'utilisateur, notamment les pages vues.

Mais Guidap va également renseigner dynamiquement certains événements que réalise l'utilisateur, comme par exemple, quand celui-ci commence la réservation, ajoute des éléments au panier, et paye.

Chaque événement a un nom technique particulier. La liste complète des événements est disponible dans l'article : Suivre les conversions dans Google Analytics avec le Module de réservation Panier

Concrètement, quand l'internaute réalise une action, Guidap envoie cet événement et ses détails dans un "fichier" qui va être lu par Google Tag Manager. Ce fichier s'appelle le dataLayer .

Selon l'événement envoyé, Guidap va envoyer des informations de contexte.

Dans le cas d'un paiement, on va par exemple retrouver le montant payé, le contenu du panier, l'identifiant de la commande.

Voici à quoi ça ressemble techniquement pour l'événement de paiement d'une commande purchase :

✅ Exemple d’événement purchase dans le dataLayer

Voici l’objet JSON que Guidap envoie via dataLayer.push()  lors d'un paiement :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "purchase",
  currency: "EUR",
  transaction_id: "R62RPF",
  value: 20,
  items: [
    {
      affiliation: "GUIDAP",
      coupon: undefined,
      item_brand: "GUIDAP",
      item_category: "parapente",
      item_category2: "35min",
      item_category3: "Personne",
      item_id: "voPM5St5JLFkgZupIGzXUYvB04RiQhqKfr",
      item_list_id: "price",
      item_list_name: "price",
      item_name: "Personne",
      price: 150,
      quantity: 1
    },
    {
      affiliation: "GUIDAP",
      coupon: undefined,
      item_brand: "GUIDAP",
      item_category: "Descente en canoë",
      item_category2: "2 heures",
      item_category3: "Adulte",
      item_id: "nGhSfKhMu7P3vgy8r0Jzo8fNAubdD2EBvlT",
      item_list_id: "price",
      item_list_name: "price",
      item_name: "Adulte",
      price: 50,
      quantity: 2
    }
  ]
});

Ici, on a commandé :

• 1 vol en parapente de 35min à 150€
• 2 Adultes pour une descente en canoë de 2h

Découvrons maintenant comment configurer Google Tag Manager pour obtenir et réutiliser cette information technique :

🎯 Créer un Déclencheur d'événement personnalisé

1. Accédez à GTM > Déclencheurs > Nouveau.
2. Type : Événement personnalisé.
3. Nom de l’événement personnalisé : purchase
4. Condition : Toutes les occurrences.
5. Nom du déclencheur : Trigger - Purchase Event

🧩 Créer les variables de couche de données

Allez dans Variables > Nouvelle > Variable de couche de données.

🏷️ Créer une balise GA4 Event (ou autre outil)

Exemple : GA4 Event

1. Balises > Nouvelle > Google Analytics : événement GA4.
2. Configuration de la balise :
   • Nom de l’événement : purchase
   • Paramètres de l’événement :
     • transaction_id  = {{Transaction ID}}
     • value  = {{Value}}
     • currency  = {{Currency}}
     • items  = {{Items}}  (objet complet)
3. Déclenchement : Trigger - Purchase Event.
4. Sauvegarde.

🧪 Tester avec GTM Preview Mode

1. Dans GTM, cliquez sur Aperçu.
2. Connectez votre site à GTM Preview.
3. Dans la console développeur (F12  → onglet Console), collez le script de test suivant :

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "purchase",
  currency: "EUR",
  transaction_id: "R62RPF",
  value: 20,
  items: [
    {
      affiliation: "GUIDAP",
      coupon: undefined,
      item_brand: "GUIDAP",
      item_category: "parapente",
      item_category2: "35min",
      item_category3: "Personne",
      item_id: "voPM5St5JLFkgZupIGzXUYvB04RiQhqKfr",
      item_list_id: "price",
      item_list_name: "price",
      item_name: "Personne",
      price: 150,
      quantity: 1
    },
    {
      affiliation: "GUIDAP",
      coupon: undefined,
      item_brand: "GUIDAP",
      item_category: "Descente en canoë",
      item_category2: "2 heures",
      item_category3: "Adulte",
      item_id: "nGhSfKhMu7P3vgy8r0Jzo8fNAubdD2EBvlT",
      item_list_id: "price",
      item_list_name: "price",
      item_name: "Adulte",
      price: 50,
      quantity: 2
    }
  ]
});

4. Vérifiez que :
   • L’événement purchase apparaît dans GTM Debug.
   • Les variables transaction_id  , value  , currency  , items  contiennent les bonnes valeurs.
   • Votre balise se déclenche correctement.

🚀 Publier

Il ne vous reste plus qu'à publier pour que votre configuration soit en production et fonctionnelle.