Is your ticket store embedded in your own website, with the code from Settings › Integrations › Website integration? Then your own website tracks the sales. This article explains how, with or without Google Tag Manager.
How does it work?
No EventSquare tags run in an embedded ticket store: the integrations for Google Analytics, Google Tag Manager, Meta Pixel and TikTok Pixel in your settings don't work there. Instead, your website receives the steps of every sale as events, and forwards them to your own tags. That's how most embedded payment modules work, because:
your cookie banner counts: your visitors give consent on your website. Tags on your website follow that choice, tags in an embedded store don't.
your measurements are right: browsers block or partition cookies in embedded frames. Tags on your website aren't affected.
ad clicks stay visible: click IDs and UTM tags (
gclid,fbclid,utm_…) are in your page's address, where your tags see them.
What do you set up in EventSquare?
Google Analytics, Google Tag Manager, TikTok Pixel: nothing. Those integrations don't work in an embedded store.
Meta Pixel: set up the integration with a Conversions API access token (see Set up Meta Pixel & Conversions API). The pixel doesn't run in the embedded store, but EventSquare does send every purchase from our servers to Meta.
Do you also sell the same edition through the link to your ticket store (for example in a newsletter)? Then the integrations in EventSquare track those sales. Your embedded store is still tracked by your website.
Step 1: forward the events to your data layer
Put this code in the code you pasted on your website, between the first line and EventSquare('init', …). It puts the events in your website's data layer, in the same format as in a regular ticket store.
['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
}
});
});
});
Your full code then looks like this (fill in your own store address):
<div id="eventsquare-store"></div>
<script>
window.EventSquare = window.EventSquare || function () { (EventSquare.q = EventSquare.q || []).push(arguments); };
// the code from step 1
EventSquare('init', {
store: 'https://yourevent.eventsquare.store/...',
target: '#eventsquare-store',
});
</script>
<script src="https://yourevent.eventsquare.store/embed/v1.js" async></script>
Step 2: set up your tags
With Google Tag Manager
Set up your container as in Connect Google Tag Manager, from "Set up your container": the same variables, triggers and tags. Add a condition to every trigger so test events don't count: create a Data Layer Variable eventsquare.test and only fire the trigger when it does not equal true.
Without Google Tag Manager
Do you use Google Analytics, Meta or TikTok directly on your website? Then in step 1, forward the events directly instead of to the data layer:
['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function (name) {
EventSquare('on', name, function (data) {
if (data.test) return; // don't track test events
// 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 });
});
});
Using the event_id as event ID in Meta lets Meta merge the purchase from your website and the one from our servers into one purchase.
Step 3: test it
You don't need to place an order to test. Open the page with your ticket store, open your browser's console (right-click › Inspect › Console) and type:
EventSquare('test', 'add_to_cart')
Your page then gets a test event, with test: true. Nothing is sent to EventSquare and no order is created. With Google Tag Manager, you see the event in Tag Assistant (Preview). EventSquare('test') without an event sends all events, including a purchase of 50 EUR.
Note: only test purchase if you exclude test events (see step 2). Otherwise the test purchase counts as a real conversion in Google Ads, Meta or your other tools.
Then test the full path once with a real order, for example with a free ticket.
Is there another way?
Do you still want the EventSquare integrations to run in the embedded store? Then add tracking: 'frame' to EventSquare('init', …). We advise against it: those tags don't follow your cookie banner and miss more visitors. In that case, don't also send the events from your website to the same tools, or they count twice.
All options of the embed code are in Embed your ticket store on your website.