100% van je eCommerce conversies meten via Webhooks

Tobias Pennings
August 19, 2024

Introductie

Het meten van conversies is cruciaal voor leadgen websites en eCommerce webshops om het succes van marketingcampagnes te analyseren. Traditionele trackingmethoden zijn ondertussen al een tijdje niet meer praktisch, en ook een standaard Server-Side Tagging tracking setup kan geen 1-op-1 conversiemetingen garanderen. Deze gemiste kansen en inefficiënties in je tracking kunnen opgelost worden met behulp van webhooks. Door webhooks te gebruiken op het moment van een conversie, kun je real-time data rechtstreeks naar je server versturen vanuit de backend van je website, wat 1-op-1 metingen mogelijk maakt in je marketing en analytische platformen. In dit artikel leggen we uit wat webhooks zijn, hoe je deze inzet voor nauwkeurige online tracking en wat de voor- en nadelen van deze aanpak zijn.

Wat zijn webhooks?

Webhooks zijn HTTP-callbacks die real-time communicatie tussen verschillende webapplicaties mogelijk maken. In Jip-en-Janneke taal betekent dit dat webhooks ervoor zorgen dat systemen automatisch berichten sturen naar andere systemen wanneer bepaalde gebeurtenissen plaatsvinden. Het versturen van die berichten gaat direct van systeem naar systeem waardoor informatie direct en efficiënt kan worden uitgewisseld.

In het geval van online tracking worden webhooks voornamelijk gebruikt om belangrijke gebeurtenissen zoals aankopen en refunds van gebruikers op de backend een webshop te detecteren en door te sturen naar een externe tracking- of analytics-tool via je server. Wanneer er een specifieke gebeurtenis plaatsvindt op de backend van je webshop wordt er een HTTP-verzoek genereert met alle relevante gegevens en verzonden naar de vooraf geconfigureerde URL van je server container. In het geval van een webshop kan je dus instellen dat op het moment dat er een order aangemaakt wordt in de backend, dat er dan ook direct een webhook gevuld met eCommerce-, gebruikers- en marketinginformatie naar je server verstuurd wordt. Vanuit je GTM server container kan je die binnengekomen data in die webhook transformeren naar de juiste gebeurtenissen en parameters die je marketing en analytische platformen kunnen ontvangen en verwerken.

Om een marketingalgoritme zo goed mogelijk te voeden met data over converterende sitebezoekers en om een zo accuraat mogelijk overzicht van conversies per campagne of per marketingplatform te realiseren wil je zo accuraat mogelijk deze data verzamelen, alleen kunnen webhooks ook je verzamelde data vertroebelen. Wanneer is het zinvol om webhooks in te zetten voor je online tracking setup?

Wanneer gebruik je webhooks?

Webhooks voor het meten van je conversies gebruik je als je tracking setup een te grote foutmarge heeft in het aantal gemeten conversies. Je wilt je marketingalgoritmes zo uitgebreid mogelijk voeden met complete data en een zo uitgebreid mogelijk overzicht in je rapportages zien, en met webhooks neem je die extra stap richting volledige nauwkeurigheid en datagestuurde besluitvorming. In onderstaand voorbeeld zal er uitgelegd worden hoe webhooks werken in combinatie met een Server-Side Tagging tracking setup.

Een veelvoorkomend misverstand over Server-Side Tagging is de aanname dat het een 100% nauwkeurige manier van tracking biedt. Hoewel het zeker nauwkeuriger is dan trackingoplossingen zoals Third-Party Script of Client-Side Tagging, blijft er altijd een kleine marge voor gemiste bezoekers of gebeurtenissen. Server-Side Tagging vormt een solide basis voor nauwkeurige tracking, maar het is belangrijk te begrijpen dat het slechts één onderdeel is van een bredere strategie om zo accuraat mogelijk te meten.

Hoewel Server-Side Tagging een betrouwbare basis biedt voor nauwkeurige tracking, is er toch een bepaalde foutmarge in conversiemetingen. Dit komt omdat het aanmaken en versturen van gebeurtenissen naar de server gebeurt via de webcontainer van Google Tag Manager, die binnen de browser van de gebruiker draait. En jij hebt zelf geen controle over wat er in die browser van je bezoekers gebeurt.

Er zijn verschillende redenen waarom deze foutmarge kan optreden.

  • Redirects: Soms belandt een gebruiker op een andere pagina dan de bedankpagina, waar bijvoorbeeld de datalayer niet actief is. Het redirecten van site-bezoekers is niet stabiel genoeg dat dit nooit fout kan gaan.
  • Het laden van een script: Het kan voorkomen dat scripts, zoals het datalayer script of de tagging pixel, niet correct ingeladen worden op de bedankpagina. Websites zijn meestal een mengelmoes van inhoud afkomstig van verschillende aanbieders: advertenties, analyses, tracking, widgets, sociale media, enz. Afhankelijk van het ontwerp van de website kan elk van deze aanbieders elkaars prestaties beïnvloeden.
  • Latentie: Latentie (de vertraging tussen het moment waarop een verzoek ingediend wordt via een webapplicatie en het ontvangen van een reactie) kan een grote rol spelen in de prestaties van een website. Onder andere voor je zoekmachineoptimalisatie (SEO) is dit een belangrijk onderdeel, maar een sloom ladende website kan ook betekenen dat bezoekers afhaken voordat een pagina en haar scripts volledig geladen zijn.
  • Standaardbrowsers van gebruikers: Een andere veelvoorkomende situatie is wanneer een bezoeker vanuit de checkout-pagina, bijvoorbeeld in Google Chrome, naar de betaal-applicatie gaat en daarna de bedankpagina standaard geopend wordt in de standaardbrowser van hun apparaat, zoals Safari of Samsung Internet.

In essentie gaat het erom dat client-side tracking kwetsbaar is voor dit soort kleine, maar impactvolle fouten. Webhooks bieden hier een uitkomst, omdat je (behalve in geval van een technische fout) altijd kunt vertrouwen op de nauwkeurigheid van de binnenkomende events, zonder de risico's die het tracken via Client-Side met zich meebrengt.

In onderstaande visualisaties kan je zien hoe de communicatiestroom werkt bij een Server-Side Tagging setup met en zonder webhooks.

Server-Side Tagging zonder webhooks

Server-Side Tagging met webhooks

Naast de fouten die in de browsers van je bezoekers plaats kunnen vinden, kan je de conversies in je analytische platform zoals Google Analytics ook niet zien van bezoekers die via de cookiebanner aangeven niet getrackt te willen worden (voor analytische doeleinden). Met webhooks heb je wel de mogelijkheid om die conversie te meten zodat je een accuraat overzicht hebt in je analytische platform, alleen kan je die conversie niet toekennen aan een eerdere sessie of aan een gebruiker. Die gebruiker en sessie heb je namelijk niet mogen meten, dus de gebruiker van de conversie kan en mag je ook niet herleiden. Wel wordt de eCommerce-data meegestuurd zodat je een goed overzicht hebt van het aantal conversies en de conversiewaardes.

Om webhooks dus effectief te kunnen gebruiken voor het toeschrijven van conversies aan je gebruiker of aan je campagnes, moet je de user- en marketinginfo van je bezoekers meesturen. Anders kan je de conversies alsnog niet herleiden aan je bezoekers en vanuit welke marketingcampagnes ze op je site belandt zijn. Webhooks kan je niet zomaar instellen, er zijn bepaalde technische en marketing benodigdheden van belang in het opzetten van deze webhooks zodat je marketing en analytische platformen de ontvangen conversiedata kan verwerken.

Wat heb je nodig om webhooks te gebruiken?

Om webhooks effectief in te zetten, zijn er zowel technische als inhoudelijke vereisten waaraan voldaan moet worden. Allereerst is het essentieel om een endpoint te configureren dat in staat is om webhook-verzoeken te ontvangen en te verwerken. Dit betekent dat je een server moet hebben die HTTP-verzoeken kan accepteren en de gegevens in de juiste volgorde kan verwerken. Bij de servers van AdPage hoef je zelf in ieder geval niet in te stellen dat de HTTP-verzoeken geaccepteerd moeten worden, maar het transformeren van de verzamelde data om dit door te sturen naar je marketing en analytische platformen wel. Maar er zitten ook vereisten aan de data die je meestuurt met je webhooks en dus gaat transformeren in je Google Tag Manager server container.

De inhoud van de JSON payload (het marketing object) die met de webhook wordt verstuurd moet diverse soorten informatie bevatten, zoals gebruikersgegevens en marketinginformatie. Het belangrijkste aan de webhook is dat die hetzelfde marketing object bevat die ook in de front-end gebruikt wordt. In de AdPage plugins voor WooCommerce, Shopify en Magento wordt dit marketing object opgeslagen bij een order zodat dit marketing object altijd beschikbaar is om meegestuurd te worden. Onderstaand kan je een voorbeeld van een marketing object voor webhooks vinden:

{
  "event": "trytagging_purchase",
  "ecommerce": {
    "transaction_id": "43",
    "affiliation": "",
    "value": "45.00",
    "tax": "0.00",
    "shipping": "0.00",
    "currency": "EUR",
    "coupon": "",
    "items": [
      {
        "item_name": "test product",
        "item_brand": "",
        "item_id": "23",
        "item_sku": "",
        "price": "45.00",
        "item_category": "Clothing",
        "quantity": 1,
        "index": 1
      }
    ]
  },
  "user_data": {
    "customer_id": 1,
    "billing_first_name": "Jeroen",
    "billing_last_name": "Test",
    "billing_address": "Velmolenweg 54a",
    "billing_postcode": "5404 LD",
    "billing_country": "NL",
    "billing_state": "",
    "billing_city": "Uden",
    "billing_email": "jeroen@adpage.io",
    "billing_phone": "0612345678",
    "shipping_first_name": "Jeroen",
    "shipping_last_name": "Test",
    "shipping_company": "",
    "shipping_address": "Velmolenweg 54a",
    "shipping_postcode": "5404 LD",
    "shipping_country": "NL",
    "shipping_state": "",
    "shipping_city": "Uden",
    "shipping_phone": "",
    "email": "support@adpage.io",
    "first_name": "Jeroen",
    "last_name": "Test",
    "new_customer": "false"
  },
  "marketing": {
    "_ga": "GA1.1.1818643883.1707129196",
    "_ga_LZN92VD7GK": "GS1.1.1711477035.19.0.1711477041.0.0.462628796",
    "user_id": "6fa957c2-52d9-905a-94fe-dfc53b5cef72",
    "client_id": "4132502f-435b-32c1-eaa4-84b37b95f846",
    "session_id": "1711477035",
    "session_count": 19,
    "fbp": null,
    "fbc": null,
    "gclid": null,
    "gbraid": null,
    "wbraid": null,
    "referrer": "",
    "utm_source": null,
    "utm_medium": null,
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36",
    "ip": "127.0.0.1"
  }
}

Hoewel webhooks zeer krachtig zijn in het bieden van real-time data en automatisering, is hun succes sterk afhankelijk van hoe ze worden ingesteld binnen het specifieke platform. Dit brengt ons bij het volgende onderdeel, waarin we dieper ingaan op het configureren van webhooks in verschillende eCommerce-platformen, en hoe je ervoor zorgt dat ze optimaal presteren binnen jouw specifieke omgeving.

Webhooks instellen voor WooCommerce, Magento en Shopify webshops

De webhooks voor onder andere aankopen kunnen in verschillende eCommerce-platformen worden ingesteld via de oplossingen van AdPage. Elk platform heeft zijn eigen unieke kenmerken en vereisten voor het configureren van webhooks, wat betekent dat de aanpak enigszins varieert afhankelijk van het platform waar je webshop op draait.

WooCommerce

Via de Wordpress plugin van AdPage wordt de functionaliteit voor WooCommerce webhooks automatisch ingeladen, naast de DataLayer, de tagging pixel en de cookie herstel functie. Deze webhooks worden bij een WooCommerce aankoop direct verstuurd naar dezelfde server waar de tagging pixel voor ingesteld staat. Alleen wordt er niks met die webhooks gedaan totdat je in de Google Tag Manager server container de volgende instellingen toepast: WooCommerce webhooks instellen.

Magento

Via de Magento module van AdPage wordt de functionaliteit voor webhooks automatisch ingeladen, naast de DataLayer en tagging pixel. Deze webhooks worden bij een aankoop direct verstuurd naar dezelfde server waar de tagging pixel voor ingesteld staat. Alleen wordt er niks met die webhooks gedaan totdat je in de Google Tag Manager server container de volgende instellingen toepast: Magento webhooks instellen.

Shopify

Binnen Shopify zijn er al Notification settings aanwezig in de instellingen van je store. Hiermee wordt het instellen van Shopify webhooks eenvoudig gemaakt. Hier kan je op verschillende backend gebeurtenissen, zoals een aangemaakte order of een gecancelde order, een webhook instellen richting een specifieke URL. Dus voor een nieuwe order die aangemaakt wordt in de backend, stel je in dat deze naar de URL van je server gaat met /order_created er achter: tagging.domeinnaam.nl/order_created.

Webhook instellingen in Shopify

Dit werkt wel alleen maar als je ook de AdPage DataLayer en tagging pixel gebruikt. Zonder deze onderdelen wordt het marketing object niet automatisch gevuld met de benodigde marketing- en userinfo.

Om daarna de ontvangen webhooks via de Google Tag Manager server container te verwerken naar een purchase- of bijvoorbeeld een refund-gebeurtenis, voer je de volgende stappen uit: Shopify Webhooks instellen.

Maatwerk

Maak je geen gebruik van Shopify, Magento of WooCommerce maar wil je wel webhooks gebruiken voor je conversiemetingen? Dan kan je dit ook maatwerk instellen. In dit helpdesk-artikel staat uitgelegd hoe je de AdPage DataLayer in kan stellen, hoe je het marketing object kan vullen en hoe je de webhooks instelt: Maatwerk Webhooks instellen.

Conclusie

Webhooks zijn een waardevolle toevoeging voor eCommerce-webshops die streven naar efficiëntie en nauwkeurigheid in hun communicatie en dataverwerking. Ze bieden de mogelijkheid om automatisch en real-time te reageren op gebeurtenissen, wat niet alleen tijd bespaart, maar ook de klanttevredenheid kan verhogen. Hoewel de implementatie wat technische kennis vereist, zijn de voordelen vaak aanzienlijk. Of je nu gebruik maakt van WooCommerce, Magento, of Shopify, het instellen van webhooks kan je helpen om je webshop naar een hoger niveau te tillen. Probeer het uit en ontdek hoe webhooks jouw bedrijfsvoering kunnen verbeteren.