Votre billetterie est intégrée à votre propre site web, avec le code de Paramètres › Intégrations › Intégration au site web ? C’est alors votre propre site web qui mesure les ventes. Cet article explique comment, avec ou sans Google Tag Manager.
Comment ça fonctionne ?
Aucun tag d’EventSquare ne tourne dans une billetterie intégrée : les intégrations Google Analytics, Google Tag Manager, Meta Pixel et TikTok Pixel de vos paramètres n’y fonctionnent pas. À la place, votre site web reçoit les étapes de chaque vente sous forme d’events et les transmet à vos propres tags. C’est ainsi que fonctionnent la plupart des modules de paiement intégrés, parce que :
votre bannière cookies compte : vos visiteurs donnent leur consentement sur votre site web. Les tags de votre site respectent ce choix, les tags d’une billetterie intégrée non.
vos mesures sont justes : les navigateurs bloquent ou cloisonnent les cookies dans les fenêtres intégrées. Les tags de votre site web n’ont pas ce problème.
les clics sur vos publicités restent visibles : les click IDs et les tags UTM (
gclid,fbclid,utm_…) se trouvent dans l’adresse de votre page, là où vos tags les voient.
Que configurer dans EventSquare ?
Google Analytics, Google Tag Manager, TikTok Pixel : rien. Ces intégrations ne fonctionnent pas dans une billetterie intégrée.
Meta Pixel : configurez l’intégration avec un access token Conversions API (voir Configurer Meta Pixel & Conversions API). Le pixel ne tourne pas dans la billetterie intégrée, mais EventSquare envoie bien chaque achat de nos serveurs à Meta.
Vous vendez aussi la même édition via le lien de votre billetterie (par exemple dans une newsletter) ? Les intégrations d’EventSquare mesurent alors ces ventes. Votre billetterie intégrée reste mesurée par votre site web.
Étape 1 : transmettre les events à votre data layer
Placez ce code dans le code que vous avez collé sur votre site web, entre la première ligne et EventSquare('init', …). Il place les events dans la data layer de votre site web, au même format que dans une billetterie classique.
['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function (name) {
EventSquare('on', name, function (data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null, eventsquare: null });
window.dataLayer.push({
event: name,
ecommerce: {
transaction_id: data.transaction_id,
value: data.value,
currency: data.currency,
items: data.items
},
eventsquare: {
event_id: data.event_id,
order_id: data.order_id,
test: data.test === true,
event: data.event,
edition: data.edition,
channel: data.channel
}
});
});
});
Votre code complet ressemble alors à ceci (indiquez l’adresse de votre propre billetterie) :
<div id="eventsquare-store"></div>
<script>
window.EventSquare = window.EventSquare || function () { (EventSquare.q = EventSquare.q || []).push(arguments); };
// le code de l'étape 1
EventSquare('init', {
store: 'https://votreevenement.eventsquare.store/...',
target: '#eventsquare-store',
});
</script>
<script src="https://votreevenement.eventsquare.store/embed/v1.js" async></script>
Étape 2 : configurer vos tags
Avec Google Tag Manager
Configurez votre conteneur comme dans Connecter Google Tag Manager, à partir de « Configurer votre conteneur » : les mêmes variables, triggers et tags. Ajoutez une condition à chaque trigger pour que les events de test ne comptent pas : créez une Data Layer Variable eventsquare.test et ajoutez la condition does not equal true.
Sans Google Tag Manager
Vous utilisez Google Analytics, Meta ou TikTok directement sur votre site web ? À l’étape 1, transmettez alors les events directement, au lieu de les envoyer vers la data layer :
['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function (name) {
EventSquare('on', name, function (data) {
if (data.test) return; // ne pas mesurer les événements de test
// Google Analytics 4 (gtag.js)
if (window.gtag) gtag('event', name, {
transaction_id: data.transaction_id, value: data.value,
currency: data.currency, items: data.items
});
// Meta Pixel
var meta = { add_to_cart: 'AddToCart', begin_checkout: 'InitiateCheckout', purchase: 'Purchase' };
if (window.fbq && meta[name]) fbq('track', meta[name],
{ value: data.value, currency: data.currency },
name === 'purchase' ? { eventID: data.event_id } : undefined);
// TikTok Pixel
var tiktok = { add_to_cart: 'AddToCart', begin_checkout: 'InitiateCheckout', purchase: 'Purchase' };
if (window.ttq && tiktok[name]) ttq.track(tiktok[name],
{ value: data.value, currency: data.currency });
});
});
Le event_id utilisé comme event ID chez Meta permet à Meta de fusionner l’achat de votre site web et celui de nos serveurs en un seul achat.
Étape 3 : tester
Vous n’avez pas besoin de passer commande pour tester. Ouvrez la page avec votre billetterie, ouvrez la console de votre navigateur (clic droit › Inspecter › Console) et tapez :
EventSquare('test', 'add_to_cart')
Votre page reçoit alors un event de test, avec test: true. Rien n’est envoyé à EventSquare et aucune commande n’est créée. Avec Google Tag Manager, vous voyez l’event dans Tag Assistant (Preview). EventSquare('test') sans event envoie tous les events, dont un achat de 50 EUR.
Attention : ne testez purchase que si vous excluez les events de test (voir l’étape 2). Sinon, l’achat test compte comme une vraie conversion dans Google Ads, Meta ou vos autres outils.
Testez ensuite une fois tout le parcours avec une vraie commande, par exemple avec un billet gratuit.
Est-ce possible autrement ?
Vous voulez quand même faire tourner les intégrations d’EventSquare dans la billetterie intégrée ? Ajoutez alors tracking: 'frame' à EventSquare('init', …). Nous le déconseillons : ces tags ne respectent pas votre bannière cookies et manquent davantage de visiteurs. N’envoyez alors pas aussi les events depuis votre site web vers les mêmes outils, sinon ils sont comptés deux fois.
Toutes les options du code d’intégration se trouvent dans Intégrer votre billetterie à votre site web.