Widget Osmopolis - Google Tag Manager et Meta Pixel

Avant de commencer

Installez Google Tag Manager ou le Meta Pixel sur votre site. Le widget ne les installe pas à votre place : il utilise ceux qu'il trouve sur la page.
Chargez-les avant le script Osmopolis. Le widget cherche vos outils une seule fois, à son démarrage. S'ils arrivent après, il ne leur enverra rien. Placez donc GTM et le Pixel dans le <head> de la page, et le script Osmopolis après eux.
Le consentement reste géré par votre site. Le widget envoie toujours ses événements. C'est votre bandeau cookies et votre configuration GTM (Consent Mode) qui décident ensuite de ce qui part vers Google ou Meta.

Les événements, étape par étape

Ce que fait le visiteur	Google Tag Manager	Meta Pixel
Il change d'écran dans le widget	`page_view`	`PageView`
Il consulte un catalogue	`view_item_list`	`ViewContent`
Il consulte une activité	`view_item`	`ViewContent`
Il commence à réserver (choix du créneau, des tarifs…)	`begin_atc`	`BeginAtc`
Il ajoute au panier	`add_to_cart`	`AddToCart`
Il affiche son panier	`view_cart`	`ViewCart`
Il retire un article du panier	`remove_from_cart`	`RemoveFromCart`
Il clique sur « Commander »	`begin_checkout`	`InitiateCheckout`
Il valide ses coordonnées	`add_shipping_info`	`AddShippingInfo`
Il choisit un moyen de paiement	`add_payment_info`	`AddPaymentInfo`
Il lance le paiement	`payment_initiated`	`PaymentInitiated`
Son paiement est refusé	`payment_failed`	`PaymentFailed`
Sa commande est confirmée	`purchase`	`Purchase`

Ce que contient chaque événement

Google Tag Manager

Les événements e-commerce suivent le format GA4 standard de Google (documentation e-commerce GA4, référence des événements). Les données sont placées dans l'objet ecommerce du dataLayer. Avant chaque événement e-commerce, le widget vide l'objet précédent (ecommerce: null), comme le recommande Google :

Champ	Ce que nous y mettons
`currency`	La devise de votre compte, par exemple `EUR`
`value`	Le montant TTC, en euros (par exemple `45.5` pour 45,50 €).
Pour `purchase`, c'est le total de la commande, même si le client n'a payé qu'un acompte
`transaction_id`	Le numéro de la commande Osmopolis.
`payment_type`	Pour `add_payment_info` : le moyen de paiement choisi.
`items`	La liste des articles. Pour chacun :
• `item_id` (identifiant du produit)
• `item_name` (son nom)
• `quantity`
• `price` (prix unitaire TTC en euros)
• `index` (sa position dans la liste)

Événements propres à Osmopolis. Ils n'existent pas dans GA4. Leurs données sont placées directement dans le dataLayer, sans objet ecommerce. Ne cochez donc pas « Envoyer les données d'e-commerce » sur leurs balises : GA4 reprendrait l'objet ecommerce de l'événement précédent, avec son montant.

Événement	Champs envoyés
`begin_atc`	Début d'ajout au panier (« begin add to cart ») : le visiteur commence à réserver une activité.
`element_id`, `element_name` : l'activité réservée
`payment_initiated`	`cart_id`, `payment_method`, `value` (le montant réellement payé, TTC en euros, acompte compris), `currency`
`payment_failed`	`transaction_id`, `error_message`
`page_view`	`page_name` : l'écran du widget, par exemple `osmo-cart` ou `osmo-payment`

⚠️

Notre page_view n'est pas celui que Google Analytics enregistre automatiquement à chaque chargement de page. Il n'apparaît dans GA4 que si vous créez une balise pour lui.

Meta Pixel

Quand Meta prévoit un événement équivalent, nous utilisons son événement standard avec ses paramètres habituels (liste des événements standard Meta) :

ViewContent : content_type, content_ids, content_name, content_category (l'identifiant du catalogue)
AddToCart et Purchase : content_type, content_ids, contents, num_items, currency, value
InitiateCheckout : currency, value, num_items
AddPaymentInfo : content_category, qui contient le moyen de paiement

Les autres événements n'ont pas d'équivalent chez Meta. Ils partent en événements personnalisés (documentation Meta) : BeginAtc, ViewCart, RemoveFromCart, AddShippingInfo, PaymentInitiated, PaymentFailed et PageView. Leurs champs reprennent ceux de GTM.

Notre PageView est lui aussi un événement personnalisé : il ne se mélange pas avec le PageView standard que votre Pixel envoie déjà.

Configurer Google Tag Manager

Créez un déclencheur de type Événement personnalisé (aide Google). Indiquez le nom d'un événement, par exemple purchase. Pour suivre tout le parcours avec un seul déclencheur, cochez « Utiliser la correspondance avec une expression régulière » et collez :
```
^(view_item_list|view_item|add_to_cart|view_cart|remove_from_cart|begin_checkout|add_shipping_info|add_payment_info|purchase)$
```
Créez une balise Google Analytics : Événement GA4 associée à ce déclencheur. Dans « Plus de paramètres », cochez Envoyer les données d'e-commerce et choisissez la source Data Layer.
Publiez le conteneur.

La regex ne reprend que les événements e-commerce GA4. Les événements propres à Osmopolis (begin_atc, payment_initiated, payment_failed, page_view) n'y figurent pas volontairement : pour les suivre, créez un déclencheur et une balise dédiés.

Vérifier que les événements partent bien

1. Regarder la console du navigateur

Ouvrez la console (F12, onglet Console). Le widget y affiche toujours ce qu'il fait, sans rien activer :

au chargement, s'il a trouvé vos outils : (Analytics:GTM) ✓ Detected dataLayer ou, au contraire, ✗ dataLayer not found - GTM events will be skipped. Même chose pour le Pixel avec (Analytics:FBQ) ;
à chaque événement envoyé, une ligne comme (Analytics:GTM) gtm: purchase ou (Analytics:FBQ) fbq track: Purchase, avec les données transmises.

💡

Vous voyez ✗ dataLayer not found ? GTM n'était pas encore chargé au démarrage du widget. Vérifiez l'ordre des scripts dans votre page.

2. Lancer le diagnostic Osmopolis

Toujours dans la console, tapez :

window.osmo.diagnostics().hostPageAnalytics

Le résultat indique ce que le widget voit sur votre page, par exemple { gtm: true, facebookPixel: false }.

Si la console répond gtm: true alors que le widget affichait ✗ dataLayer not found au chargement, GTM est bien présent mais arrive trop tard. Là encore, c'est l'ordre des scripts qui est en cause.

3. Afficher tous les événements, même sans GTM

Ajoutez data-debug="analytics" à la balise du script Osmopolis :

<script src="…/script.js" data-debug="analytics"></script>

La console affiche alors chaque événement du parcours, même si GTM et le Pixel sont absents. C'est utile pour tester une intégration avant de configurer vos outils. Retirez cet attribut une fois les tests terminés.

4. Utiliser les outils de Google et de Meta

Le mode Aperçu de GTM (aide Google) ou Google Tag Assistant : faites une réservation test et suivez les événements un par un.
L'extension Chrome Meta Ads Data Advisor, anciennement Meta Pixel Helper (documentation Meta), ou l'onglet Tester les événements du Gestionnaire d'événements Meta.