Naar de hoofdinhoud

Ticketwinkel in je website inbouwen

Verkoop tickets rechtstreeks op je eigen website. Met de EventSquare-embed plaats je je ticketshop op eender welke pagina. De shop past zijn hoogte aan de inhoud aan, volgt de scrollpositie van je pagina en werkt op desktop en mobiel.

Tip: je hoeft de code niet zelf te schrijven. Open in de EventSquare-admin je shop en ga naar Insluiten op je website. Daar vind je een codefragment dat al voor jouw shop is ingevuld en dat je zo kunt kopiëren.

Snel starten

Plak deze code op de plek waar de ticketshop moet verschijnen:

<div id="eventsquare-store"></div>
<script>
    window.EventSquare =
        window.EventSquare ||
        function () {
            (EventSquare.q = EventSquare.q || []).push(arguments);
        };
    EventSquare("init", {
        store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
        target: "#eventsquare-store",
    });
</script>
<script src="https://jouwevent.eventsquare.store/embed/v1.js" async></script>

Klaar. Vervang de store-URL door de link naar je eigen shop (die vind je in de admin).

Wat deze code doet:

  1. De <div> duidt de plek op je pagina aan waar de shop verschijnt.

  2. Het eerste <script> stelt de shop in. Het mag uitgevoerd worden voordat het EventSquare-script geladen is: de oproepen worden in een wachtrij gezet en daarna uitgevoerd.

  3. Het laatste <script> laadt het EventSquare-embedscript. Door async vertraagt het je pagina nooit.

Embed met alleen HTML (websitebouwers)

Sommige websitebouwers (WordPress-paginabouwers, Wix, Squarespace, …) staan geen inline JavaScript toe of verwijderen het. Gebruik dan deze versie, zonder JavaScript-configuratie:

<div data-eventsquare-store="https://jouwevent.eventsquare.store/nl/editie/kanaal"></div>
<script src="https://jouwevent.eventsquare.store/embed/v1.js" async></script>

Opties stel je in met data--attributen:

<div
    data-eventsquare-store="https://jouwevent.eventsquare.store/nl/editie/kanaal"
    data-background="opaque"
    data-scroll-offset="80"
    data-title="Tickets voor mijn festival"
></div>

Opties

Optie

Data-attribuut

Standaard

Beschrijving

store

data-eventsquare-store

—

Verplicht. De URL van je ticketshop.

target

—

—

Verplicht (JavaScript-embed). CSS-selector of element waarin de shop komt, bv. '#eventsquare-store'.

background

data-background

'transparent'

'transparent': de shop gaat op in je pagina. 'opaque': de shop krijgt een eigen achtergrondkleur, handig op donkere of drukke achtergronden.

scrollOffset

data-scroll-offset

16

Ruimte in pixels boven de shop wanneer die in beeld scrollt (zie Scrollen). Stel dit in op de hoogte van je vaste (sticky) header.

minHeight

—

450

Hoogte in pixels die vrijgehouden wordt terwijl de shop laadt, en de kleinste hoogte die de shop krijgt.

title

data-title

'Ticket shop'

Titel van het ingesloten kader, voorgelezen door schermlezers.

checkout

data-checkout

'inline'

'inline': het afrekenen gebeurt in de ingesloten shop (zie Afrekenen en betalen). 'window': bezoekers gaan verder naar de afrekenpagina van EventSquare in het volledige browservenster.

tickets

data-tickets

'button'

Na de bestelling:
​'button' toont een bedankbericht met een knop die de tickets in een nieuw venster opent.
​'redirect' toont de tickets automatisch in de ingesloten shop.
​'none' toont niets: de ingesloten shop verdwijnt en je toont je eigen bevestiging. Zie Na de bestelling.

tracking

data-tracking

'host'

'host': je trackingtags (Google Analytics, Google Tag Manager, Meta, TikTok) werken op jouw pagina, met de tracking-events; de integraties die je in de EventSquare-admin koppelde, werken niet in de ingesloten shop.
​'frame': ze werken ook in de ingesloten shop, zoals op je gewone shoppagina. Zie Tracking en cookietoestemming.

Taal

De taal zit in de URL van de shop: https://jouwevent.eventsquare.store/nl/... (Nederlands), /fr/... (Frans), /en/... (Engels). Laat je de taal weg (https://jouwevent.eventsquare.store/editie/kanaal), dan kiest de shop de taal van de browser van je bezoeker.

Heb je een meertalige website? Gebruik dan op elke taalversie van je pagina de shop-URL in de overeenkomstige taal.

Lay-out en stijl

  • De shop vult altijd 100% van de breedte van zijn container. Wil je de breedte beperken, geef de container dan een width of max-width:

    <div id="eventsquare-store" style="max-width: 800px; margin: 0 auto"></div>

  • De hoogte gaat automatisch. Geef de container geen vaste height.

  • De shop heeft afgeronde hoeken en een eigen opmaak, en gebruikt de merkkleur die je in de EventSquare-admin instelde. Extra CSS is niet nodig.

  • Op donkere achtergronden of foto's gebruik je background: 'opaque', zodat alle tekst leesbaar blijft.

Scrollen

Gaat een bezoeker naar de volgende stap (bijvoorbeeld van Tickets naar Winkelmand) en is de bovenkant van de shop niet in beeld, dan scrollt je pagina de shop vloeiend terug in beeld. Heeft je website een vaste (sticky) header, stel scrollOffset dan in op de hoogte ervan, zodat de shop er niet achter verdwijnt:

EventSquare("init", {
  store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
  target: "#eventsquare-store",
  scrollOffset: 80, // hoogte van je sticky header in px
});

Afrekenen en betalen

De volledige ticketaankoop gebeurt in de ingesloten shop, en bezoekers blijven op je website:

  1. Bezoekers kiezen hun tickets en vullen hun gegevens in de ingesloten shop in.

  2. Alleen de betaling zelf opent in een klein pop-upvenster, omdat banken en betaalproviders geen betalingen in ingesloten kaders toelaten. Intussen toont de shop een bericht met een knop om het betaalvenster opnieuw te openen, voor het geval het gesloten werd. Wordt de pop-up geblokkeerd (bijvoorbeeld in sommige in-app-browsers), dan opent de betaling in het volledige browservenster.

  3. Gratis bestellingen en uitnodigingen hebben geen betaling nodig, dus dan is er geen pop-up.

  4. Na de bestelling toont de shop een bedankbericht met een knop die de tickets in een nieuw venster opent. Bezoekers krijgen hun tickets ook per e-mail.

Na de bestelling

Kies wat er na de bestelling gebeurt met de optie tickets (of data-tickets):

tickets

Wat bezoekers zien

'button' (standaard)

Een bedankbericht met een knop die de tickets in een nieuw venster opent.

'redirect'

Meteen de tickets, in de ingesloten shop.

'none'

Niets van EventSquare: de ingesloten shop verdwijnt en je toont je eigen bevestiging met het tickets-event.

EventSquare("init", {
  store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
  target: "#eventsquare-store",
  tickets: "redirect", // of 'none'
});

Je eigen bevestiging met tickets: 'none':

// Eerst luisteren, dan init (zie "Listeners instellen" bij Events)
EventSquare("on", "tickets", function (order) {
  // De ingesloten shop heeft zich verborgen: toon je eigen bericht
  var link = document.createElement("a");
  link.href = order.url;
  link.target = "_blank";
  link.textContent = "Download je tickets";
  document
    .getElementById("eventsquare-store")
    .replaceChildren(
      "Bedankt voor je bestelling " + order.transaction_id + "! ",
      link,
    );
});

EventSquare("init", {
  store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
  target: "#eventsquare-store",
  tickets: "none",
});

Bezoekers krijgen hun tickets altijd ook per e-mail.

Events (voor ontwikkelaars)

Luister naar wat er in de shop gebeurt, bijvoorbeeld om een bericht te tonen of statistieken bij te houden.

Event

Gegevens

Wanneer

ready

—

De shop is geladen.

resize

{ height }

De hoogte van de shop is veranderd (in px).

navigate

{ path }

De bezoeker ging naar een andere stap of pagina in de shop.

add_to_cart

zie Tracking-events

Er werden tickets aan de winkelmand toegevoegd.

remove_from_cart

zie Tracking-events

Er werden tickets uit de winkelmand verwijderd.

begin_checkout

zie Tracking-events

De bezoeker begon met afrekenen (één keer per winkelmand).

purchase

zie Purchase-event

Een bestelling werd afgerond (betaald, gratis of uitnodiging).

tickets

zie Tickets-event

De tickets van de afgeronde bestelling zijn klaar.

Callbacks krijgen (data, instance). Events bevatten nooit persoonsgegevens van je bezoekers (geen namen, e-mailadressen of andere klantgegevens).

Listeners instellen

Voeg je listeners toe vóór EventSquare('init', …), in hetzelfde script, meteen na de eerste regel (de loader). De loader zet elke oproep in een wachtrij tot het embedscript geladen is en voert ze dan in volgorde uit. Zo staan je listeners klaar voordat de shop start en mis je geen enkel event:

<div id="eventsquare-store"></div>
<script>
  // 1. Loader: altijd eerst
  window.EventSquare =
    window.EventSquare ||
    function () {
      (EventSquare.q = EventSquare.q || []).push(arguments);
    };
  // 2. Listeners
  EventSquare("on", "ready", function () {
    console.log("De ticketshop is geladen");
  });
  EventSquare("on", "navigate", function (event) {
    console.log("Bezoeker ging naar", event.path);
  });
  // 3. De shop
  EventSquare("init", {
    store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
    target: "#eventsquare-store",
  });
</script>
<script src="https://jouwevent.eventsquare.store/embed/v1.js" async></script>

  • EventSquare('on', …) luistert naar alle shops op de pagina, ook shops die met data-eventsquare-store zijn ingesloten: zet de loader en je listeners dan in een script vóór het embedscript.

  • Gebruik je een tagmanager of een apart script? Zorg dat het zelf de loader-regel uitvoert (dat mag meerdere keren) en de listeners toevoegt voordat de shop gebruikt kan worden. Events die plaatsvonden voordat een listener werd toegevoegd, worden niet herhaald, behalve ready: een ready-listener die later wordt toegevoegd, wordt toch nog aangeroepen.

  • De voorbeelden hieronder laten de loader en init weg om ze kort te houden.

Tracking-events

De shop meldt dezelfde stappen die EventSquare naar Google Analytics, Meta en TikTok stuurt wanneer je die in de EventSquare-admin koppelt. Zo kun je ze meten met je eigen tags op je website (zie Tracking en cookietoestemming voor het waarom):

Event

Google Analytics 4

Meta Pixel

TikTok Pixel

Verstuurd door

add_to_cart

add_to_cart

AddToCart

AddToCart

Shop

remove_from_cart

remove_from_cart

—

—

Shop

begin_checkout

begin_checkout

InitiateCheckout

InitiateCheckout

Afrekenen (inline)

purchase

purchase

Purchase

PlaceAnOrder

Afrekenen (inline)

Alle tracking-events gebruiken de velden van de e-commerce-events van Google Analytics 4: currency, value (het totaal van de wijziging, de winkelmand of de bestelling), items (zie Purchase-event), plus event, edition en channel. begin_checkout en purchase worden alleen verstuurd wanneer het afrekenen in de ingesloten shop gebeurt (checkout: 'inline', de standaard).

Zo stuur je ze allemaal in één keer door:

var metaEvents = {
    add_to_cart: 'AddToCart',
    begin_checkout: 'InitiateCheckout',
    purchase: 'Purchase'
};
var tiktokEvents = {
    add_to_cart: 'AddToCart',
    begin_checkout: 'InitiateCheckout',
    purchase: 'PlaceAnOrder'
};
['add_to_cart', 'remove_from_cart', 'begin_checkout', 'purchase'].forEach(function(name) {
    EventSquare('on', name, function(data) {
        // Google Tag Manager: maak eerst het vorige ecommerce-object leeg (aanbevolen door Google)
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            ecommerce: null
        });
        window.dataLayer.push({
            event: name,
            ecommerce: data
        });

        // Of Google Analytics 4 (gtag.js)
        gtag('event', name, data);
        var summary = {
            value: data.value,
            currency: data.currency,
            content_ids: data.items.map(function(item) {
                return item.item_id;
            }),
            content_type: 'product',
        };

        if (window.fbq && metaEvents[name]) {
            // eventID: laat Meta dit combineren met hetzelfde event van een andere pixel (niet dubbel tellen)      
            fbq('track', metaEvents[name], summary, name === 'purchase' ? {
                eventID: data.order_id
            } : undefined);
        }
        if (window.ttq && tiktokEvents[name]) ttq.track(tiktokEvents[name], summary);
    });
});

Tracking en cookietoestemming

Standaard (tracking: 'host') voeren de ingesloten shop en het afrekenen zelf geen tracking uit: niet de Google Analytics, Google Tag Manager, Meta Pixel, TikTok Pixel of conversietag die je in de EventSquare-admin koppelde, en ook niet de eigen statistieken van EventSquare. Je pagina ontvangt in de plaats de tracking-events en geeft ze door aan je tags. Zo werken de meeste ingesloten afrekenmodules, omdat:

  • Cookietoestemming: je cookiebanner geldt alleen voor je eigen pagina. Tags in de ingesloten shop zouden werken zonder de toestemming van je bezoeker; tags op je pagina volgen die toestemming, net als de rest van je website.

  • Betrouwbaar meten: browsers (Safari, Firefox, en Chrome met privacy-instellingen) blokkeren of scheiden cookies in ingesloten kaders, waardoor tags daar je bezoekers uit het oog verliezen. Tags op je pagina niet.

  • Attributie: klik-ID's van advertenties en UTM-tags (gclid, fbclid, utm_…) staan in het adres van je pagina, waar je tags ze kunnen zien.

  • Niet dubbel tellen: elke conversie wordt één keer geteld, door jouw tags.

Wil je toch de integraties uit de EventSquare-admin in de ingesloten shop gebruiken? Stel dan tracking: 'frame' in (of data-tracking="frame"). Stuur dezelfde events dan niet ook vanaf je pagina door naar dezelfde pixels, of ontdubbel ze (bv. met de eventID van Meta), om conversies niet dubbel te tellen.

Bezoekers die je shop rechtstreeks openen (niet ingesloten), en oudere embedcodes zonder het embedscript, gebruiken de integraties uit de EventSquare-admin zoals voorheen. Met checkout: 'window' opent het afrekenen zelf in het volledige browservenster en gebruikt het ze ook.

Purchase-event

Eén keer per bestelling verstuurd, zodra de bestelling bevestigd is, terwijl de bezoeker het bedankbericht ziet. Beschikbaar wanneer het afrekenen in de ingesloten shop gebeurt.

De velden volgen het purchase-event van Google Analytics 4, dus je kunt de gegevens ongewijzigd doorgeven:

EventSquare("on", "purchase", function (purchase) {
  // Google Analytics 4 (gtag.js)
  gtag("event", "purchase", purchase);
  // Google Tag Manager
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: "purchase", ecommerce: purchase });
  // Meta Pixel
  fbq(
    "track",
    "Purchase",
    { value: purchase.value, currency: purchase.currency },
    { eventID: purchase.order_id },
  );
});

Veld

Voorbeeld

Beschrijving

transaction_id

"HRG66616"

Bestelreferentie, zoals de bezoeker die ziet en in de bevestigingsmail.

order_id

"05ab4e26-e168-…"

Unieke bestel-ID. Gebruik die om een bestelling niet dubbel te tellen.

value

22.28

Totaal betaald bedrag, inclusief kosten. 0 bij gratis bestellingen.

currency

"EUR"

Valutacode volgens ISO 4217.

invitation

false

true als de bestelling een uitnodiging is.

items

zie hieronder

De tickets en producten in de bestelling.

event

{ "id": "682075652458", "name": "Demo" }

Het evenement.

edition

{ "id": "059710758584", "name": "2027" }

De editie van het evenement.

channel

{ "id": "620258808826" }

Het verkoopkanaal (shop).

Elk item in items:

Veld

Voorbeeld

Beschrijving

item_id

"451871480410"

ID van het tickettype of product.

item_name

"Toegangsticket"

Naam van het tickettype of product.

item_category

"ticket"

"ticket" of "product".

price

10

Prijs per stuk, zonder kosten.

quantity

2

Aantal stuks.

discount

0

Korting per stuk.

fee

1.14

Servicekosten per stuk.

show

null

Bij voorstellingen (data / tijdsloten): { id, name }.

Tickets-event

Verstuurd wanneer de bevestiging van een afgeronde bestelling getoond wordt, meteen na het purchase-event, met de link naar de tickets van de bezoeker. Gebruik het om je eigen bevestiging te tonen met tickets: 'none' (zie Na de bestelling).

EventSquare("on", "tickets", function (order) {
  console.log(order.url); // https://tickets.eventsquare.io/…
});

Veld

Voorbeeld

Beschrijving

url

"https://tickets.eventsquare.io/10c1b57b-…"

Link naar de tickets van de bezoeker (bekijken en downloaden).

order_id

"05ab4e26-e168-…"

Unieke bestel-ID (dezelfde als in het purchase-event).

transaction_id

"HRG66616"

Bestelreferentie (dezelfde als in het purchase-event).

Behandel de ticketlink als een wachtwoord. Iedereen met de link kan de tickets openen. Toon hem aan de bezoeker, maar stuur hem nooit naar statistiektools, tagmanagers of andere derden. Daarom is het een apart event: de purchase-gegevens kun je ongewijzigd naar je statistieken doorsturen.

Je tracking testen

Je hoeft geen bestelling te plaatsen om je instellingen te testen. EventSquare('test', event) verstuurt een voorbeeldevent op je pagina, met dezelfde velden als een echt event en test: true:

EventSquare('test', 'purchase');     // één event EventSquare('test');

// alle tracking-events: add_to_cart, remove_from_cart, begin_checkout, purchase, tickets

Voer het uit in de ontwikkelaarsconsole van je browser op de pagina met de ingesloten shop, of vanuit je eigen code. Het event gaat alleen naar de listeners op je pagina (EventSquare('on', ...)): er wordt niets naar EventSquare verstuurd, er wordt geen bestelling aangemaakt en er hoeft geen shop geladen te zijn. De voorbeeldaankoop heeft een transaction_id die met TEST begint en een waarde van 50 EUR.

Houd testgegevens uit je rapporten door de vlag te controleren:

EventSquare("on", "purchase", function (purchase) {
  if (purchase.test) return console.log("EventSquare testaankoop", purchase);
  gtag("event", "purchase", purchase);
});

Of stuur ze tijdens het testen met de voorbeeldmodus van Google Tag Manager (Tag Assistant) gewoon door en controleer of je tags afgaan. Plaats daarna één echte bestelling om het volledige verloop te testen: een gratis ticket, of een betaald ticket via de previewlink van de shop in testmodus (geen echte betaling).

JavaScript-API (voor ontwikkelaars)

Zodra het embedscript geladen is, kun je de API ook rechtstreeks gebruiken. Voeg listeners voor een instance meteen na init toe, in hetzelfde script (de shop laadt asynchroon, dus je mist niets):

var store = EventSquare.init({
  store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
  target: "#eventsquare-store",
});

store.on("navigate", function (event) {
  /* ... */
});
store.off("navigate", handler);
store.destroy(); // verwijdert de shop van de pagina

Opdracht

Beschrijving

EventSquare('init', options)

Een shop insluiten. EventSquare.init(options) geeft de instance terug.

EventSquare('on', event, callback)

Luisteren naar een event van alle ingesloten shops.

EventSquare('off', event, callback)

Stoppen met luisteren.

EventSquare('destroy')

Alle ingesloten shops verwijderen.

EventSquare('test', event)

Een voorbeeld-tracking-event (test: true) op je pagina versturen, zie Je tracking testen. Zonder event: alle tracking-events.

EventSquare.scan()

Zoeken naar nieuwe data-eventsquare-store-elementen (nadat je ze dynamisch hebt toegevoegd).

Instance

Beschrijving

instance.on(event, callback)

Alleen naar events van deze shop luisteren.

instance.off(event, callback)

Stoppen met luisteren.

instance.destroy()

Deze shop van de pagina verwijderen.

instance.iframe

Het <iframe>-element.

Single-page apps (React, Vue, Angular, …)

Laad het embedscript één keer, bijvoorbeeld in je index.html. Maak de shop aan wanneer je component gemount wordt, en verwijder hem wanneer die unmount:

// React-voorbeeld
useEffect(() => {
  const store = window.EventSquare.init({
    store: "https://jouwevent.eventsquare.store/nl/editie/kanaal",
    target: containerRef.current,
  });
  return () => store && store.destroy();
}, []);

target aanvaardt zowel een element als een CSS-selector.

Content Security Policy

Gebruikt je website een Content Security Policy (CSP)? Laat EventSquare dan toe (de shop, en de afreken- en ticketpagina's op eventsquare.io die erin openen):

script-src https://*.eventsquare.store;
frame-src  https://*.eventsquare.store https://*.eventsquare.io;

Problemen oplossen

De shop verschijnt niet.

  • Open de ontwikkelaarsconsole van je browser. Het embedscript toont duidelijke berichten die beginnen met [EventSquare], bijvoorbeeld wanneer de store-URL of target ontbreekt.

  • Controleer of je websitebouwer de <script>-tags niet verwijderd heeft. Is dat wel zo, gebruik dan de embed met alleen HTML.

  • Controleer je Content Security Policy.

  • Cookiebanners en tagmanagers blokkeren soms scripts van onbekende domeinen. Het embedscript is nodig om de shop te laten werken, dus laat het toe.

De shop wordt afgesneden of heeft een scrollbalk.

  • Verwijder een vaste height op de container of op de <iframe>.

  • Controleer of je de nieuwste embedcode uit de admin gebruikt (met embed/v1.js).

De shop verdwijnt achter mijn sticky header bij het wisselen van stap.

  • Stel scrollOffset (of data-scroll-offset) in op de hoogte van je header.

Tekst is moeilijk leesbaar op mijn achtergrond.

  • Gebruik background: 'opaque' (of data-background="opaque").

Listeners krijgen geen purchase-events (of andere tracking-events).

  • Test eerst je listener-code met EventSquare('test', 'purchase') in de ontwikkelaarsconsole (zie Je tracking testen).

  • Voeg de listeners toe vóór EventSquare('init', …) (zie Listeners instellen).

  • begin_checkout, purchase en tickets werken alleen als het afrekenen in de ingesloten shop gebeurt: stel geen checkout: 'window' in.

  • Test op een webserver (http:// of https://), net als je echte website, en niet met een HTML-bestand dat je vanaf je computer opent (file://).

Kom je er niet uit? Neem contact op met de support van EventSquare en vermeld de URL van de pagina waarop je de shop hebt ingesloten.

Was dit een antwoord op uw vraag?