Staat je ticketwinkel ingesloten in je eigen website, met de code uit Instellingen › Integraties › Website-integratie? Dan meet je eigen website de verkoop. Dit artikel legt uit hoe, met of zonder Google Tag Manager.

Hoe werkt het?

In een ingesloten ticketwinkel draaien geen tags van EventSquare: de integraties voor Google Analytics, Google Tag Manager, Meta Pixel en TikTok Pixel uit je instellingen werken daar niet. Je website ontvangt in de plaats de stappen van elke verkoop als events, en stuurt ze door naar je eigen tags. Zo werkt dat bij de meeste ingesloten betaalmodules, omdat:

je cookiebanner telt: je bezoekers geven toestemming op je website. Tags op je website volgen die keuze, tags in een ingesloten winkel niet.
je metingen kloppen: browsers blokkeren of scheiden cookies in ingesloten vensters. Tags op je website hebben daar geen last van.
advertentieklikken zichtbaar blijven: click ID's en UTM-tags (gclid, fbclid, utm_…) staan in het adres van je pagina, waar je tags ze zien.

Wat stel je in EventSquare in?

Google Analytics, Google Tag Manager, TikTok Pixel: niets. Die integraties werken niet in een ingesloten winkel.
Meta Pixel: stel de integratie in met een Conversions API access token (zie Meta Pixel & Conversions API instellen). De pixel draait niet in de ingesloten winkel, maar EventSquare stuurt elke aankoop wel van onze servers naar Meta.

Verkoop je via dezelfde editie ook via de link van je ticketwinkel (bijvoorbeeld in een nieuwsbrief)? Dan meten de integraties in EventSquare die verkoop. Je ingesloten winkel blijft door je website gemeten.

Stap 1: de events doorsturen naar je data layer

Zet deze code in de code die je op je website plakte, tussen de eerste regel en EventSquare('init', …). Ze zet de events in de data layer van je website, in hetzelfde formaat als in een gewone ticketwinkel.

['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
      }
    });
  });
});

Je volledige code ziet er dan zo uit (vul je eigen winkeladres in):

<div id="eventsquare-store"></div>
<script>
  window.EventSquare = window.EventSquare || function () { (EventSquare.q = EventSquare.q || []).push(arguments); };

  // de code van stap 1

  EventSquare('init', {
    store: 'https://jouwevenement.eventsquare.store/...',
    target: '#eventsquare-store',
  });
</script>
<script src="https://jouwevenement.eventsquare.store/embed/v1.js" async></script>

Stap 2: je tags instellen

Met Google Tag Manager

Stel je container in zoals in Google Tag Manager koppelen, vanaf "Je container instellen": dezelfde variables, triggers en tags. Voeg aan elke trigger een voorwaarde toe zodat testevents niet meetellen: maak een Data Layer Variable eventsquare.test en activeer de trigger alleen als die niet gelijk is aan true.

Zonder Google Tag Manager

Gebruik je Google Analytics, Meta of TikTok rechtstreeks op je website? Stuur de events dan in stap 1 rechtstreeks door, in plaats van naar de data layer:

['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function (name) {
  EventSquare('on', name, function (data) {
    if (data.test) return; // testevents niet meten

    // 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 });
  });
});

Het event_id als event ID bij Meta zorgt dat Meta de aankoop van je website en die van onze servers samenvoegt tot één aankoop.

Stap 3: testen

Je hoeft geen bestelling te plaatsen om te testen. Open de pagina met je ticketwinkel, open de console van je browser (rechtermuisknop › Inspecteren › Console) en typ:

EventSquare('test', 'add_to_cart')

Je pagina krijgt dan een test event, met test: true. Er wordt niets naar EventSquare gestuurd en er wordt geen bestelling gemaakt. Met Google Tag Manager zie je het event in Tag Assistant (Preview). EventSquare('test') zonder event stuurt alle events, ook een aankoop van 50 EUR.

Let op: test purchase alleen als je testevents uitsluit (zie stap 2). Anders telt de testaankoop als echte conversie in Google Ads, Meta of je andere tools.

Test daarna één keer de volledige weg met een echte bestelling, bijvoorbeeld met een gratis ticket.

Kan het ook anders?

Wil je de integraties uit EventSquare toch in de ingesloten winkel laten draaien? Voeg dan tracking: 'frame' toe aan EventSquare('init', …). Dat raden we af: die tags volgen je cookiebanner niet en missen meer bezoekers. Stuur de events dan niet ook vanop je website naar dezelfde tools, anders tellen ze dubbel.

Alle opties van de insluitcode staan in Ticketwinkel insluiten op je website.

Tracking bij een ingesloten ticketwinkel