Blijf je bezoekers in Google Analytics volgen, ook wanneer ze wisselen tussen je website en je Stager ticketshop. Heb jij Google Analytics gekoppeld aan je Google Tag Manager en je Stager ticketshop? Dan kun je vervolgens cross-domain tracking instellen. Cross-domain tracking maakt het mogelijk om de bron van het verkeer te blijven herkennen, ook als er tussen domeinen wordt gewisseld.
In dit artikel beschrijven we hoe je dit instelt wanneer je de ticketshop hebt geïntegreerd op je eigen website. Verwijs je vanaf je website door met een ticket link naar de ticketshop? Lees dan het algemene artikel over cross-domain tracking instellen.
Cross-domain tracken met een geïntegreerde ticketshop
Heb je je jouw ticketshop in je eigen website geïntegreerd middels de basic of advanced integratie? Dan ben je nog niet helemaal klaar. Je krijgt namelijk te maken met dat de ticketshop niet kan uitlezen vanuit welke link de bezoeker heeft doorgeklikt naar je website. Bij gebruik van Google Analytics en in geval van conversie tracking, is dit onhandig omdat je zo inzicht verliest in het koopgedrag van je ticket kopers. Om dit goed te laten verlopen, moet je het volgende doen:
Gebruik UTM codes bij het tracken
Voeg een script toe aan je website
UTM codes gebruiken bij het tracken
Met UTM-codes kun je een URL decoreren met extra stukjes informatie voor Google Analytics. Deze extra stukjes informatie zorgen ervoor dat jij in Google Analytics beter kunt zien waar je verkeer en verkopen exact vandaan zijn gekomen. In totaal bestaan er vijf UTM-codes die je aan een URL kunt toevoegen, waarvan ‘bron’ en ‘medium’ verplicht zijn.
Bron (utm_source)
De bron is een verplicht element in een UTM-code, die je vertelt wat de herkomst is van bezoekersverkeer. Dit kan bijvoorbeeld een zoekmachine zoals Google zijn of een sociaal platform als Facebook, Instagram, Twitter of LinkedIn.
Medium (utm_medium)
Het medium in de code doelt op het marketingmedium dat bezoekers heeft weten te verleiden om door te klikken. Het medium kan bijvoorbeeld een betaalde advertentie zijn of een organisch zoekresultaat in Google. De opties zijn hier zeer divers.
Campagne (utm_campaign)
De campagne vertelt je van welke marketingcampagne de aangeklikte URL met UTM-code onderdeel is. Bijvoorbeeld de campagnenaam bij een voorstelling, of de start van het culturele seizoen.
Content (utm_content)
De content beschrijft de inhoud van het medium dat bezoekers heeft overgehaald om te klikken. Dit kan bijvoorbeeld het onderwerp van een blogartikel zijn, de invalshoek van een advertentie of de stijl van een banner.
Term (utm_term)
De term in een UTM-code is van oorsprong de zoekterm die bezoekers op je link laat klikken. Deze UTM-code wordt niet vaak gebruikt, omdat Google Ads deze informatie zelf al meestuurt naar Google Analytics en je op andere plaatsen vaak niet de zoekopdracht kunt achterhalen.
Zelf URL’s voorzien van UTM-codes
Nu je weet wat UTM-codes zijn, wil je ze waarschijnlijk zelf ook gebruiken. Hiervoor hoef je gelukkig niet handmatig je URL’s aan te passen, want Google heeft hiervoor een tool ontwikkeld. Met de Campaign URL Builder vul je eenvoudig een URL aan met UTM-codes. Google geeft zelfs voorbeeldwaarden die je zou kunnen gebruiken. Enkele zaken waar je nog op dient te letten:
De bron schrijf je voor Google Analytics altijd met kleine letters, bijvoorbeeld google of facebook.
Het medium schrijf je voor Google Analytics altijd met kleine letters, bijvoorbeeld cpc, advertentie of organisch.
URL’s gaan niet fijn om met spaties. Vervang daarom spaties altijd met een liggend streepje ( _ ), bijvoorbeeld kaartverkoop_stagerfest.
Script voor je web developer om op je website te plaatsen
Door de Stager ticketshop in je eigen website te integreren door middel van de basic of advanced integratie kunnen bezoekers in veel gevallen vanuit jouw eigen website tickets selecteren en bestellen. De Stager ticketshop maakt gebruik van cookies om de winkelwagens aan de bezoekers te koppelen. Nu zijn browsers in de afgelopen tijd steeds strenger geworden met het accepteren van 'third-party cookies' om de privacy te verbeteren. Stager wordt gezien als third-party, of secundair domein, omdat Stager een ander domein heeft dan jouw website. Eigenlijk is Stager wel degelijk een onderdeel van jouw website wanneer men een ticket koopt. Als we detecteren dat onze cookies niet werken, dan leiden we een bezoeker automatisch om naar jouw Stager ticketshop op het stager.co domein.
Ook voor andere zetters van 3rd party cookies is het moeilijk om cookies te gebruiken met de steeds strenger wordende browsers. Zo kan het moeilijk zijn voor tools als Google Analytics om bezoekers te volgen wanneer ze van je eigen website naar jouw ticketshop op het stager.co domein worden door verwezen. We hebben twee scripts geschreven die je web developer zo op je website kan plakken, zodat het tracken van bezoek en conversie goed blijft lopen.
Welk probleem lossen de scripts op?
Een probleem waar embedded webshops mee te maken hebben, is dat een iframe niet kan uitlezen vanuit welke link de bezoeker heeft doorgeklikt naar je website. Bij gebruik van Google Analytics (en in geval van conversie tracking) is dit onhandig, omdat je zo inzicht verliest in het koopgedrag van je ticket kopers.
Omdat het iframe geen URL meegeeft, denkt Analytics dat de ticket koper rechtstreeks via je eigen website is binnen gekomen in plaats van bijvoorbeeld via een Facebook advertentie. Dit zorgt ervoor dat het verkeer wordt aangemerkt als Source 'Direct'. We hebben een script geschreven dat ervoor zorgt dat de URL wel uitgelezen kan worden.
Het iframe heeft in het script geen url, bij de url staat about:blank. Bij het opvragen van de url wordt er dus geen url ontvangen en hierdoor wordt de bron niet doorgegeven. Het script gooit de url erin waar de bezoeker vandaan komt en geeft ook de utm parameters mee. Als dat is gebeurd, wordt de geïntegreerde ticketshop in de pagina geladen en kan Stager campaign informatie doorgeven die wij voor jou in de sessie opslaan.
Het tweede script lost het probleem op dat het iframe waar de ticketshop in staat niet kan communiceren met jouw website. Dit komt ook doordat het beide op een ander domein draait. Het script maakt een connectie tussen de ticketshop en jouw website en kunnen zo met elkaar communiceren en data doorgeven aan elkaar, zoals bijvoorbeeld welke en hoeveel tickets er zijn gekocht.
Belangrijk om hierbij te vermelden is dat je deze informatie alleen door mag geven wanneer je website bezoeker cookies heeft geaccepteerd. Zo'n cookiemelding op je website verzorg je zelf, daarna kun je met Google Tag Manager de cookiewall ook instellen voor je ticketshop. Vraag hiervoor eventueel je webbouwer of marketing partner om de triggers in Google Tag Manager aan te passen conform je gebruikte cookiewall. Kom je er toch niet uit? Of heb je nog een vraag? Neem dan contact op met Stager en wij zullen je in contact brengen met onze marketingpartner, Afdeling Online.
Utm source voor embedded ticketshops
Je werkt met utm_codes om te weten wat de bron is van je bezoekersverkeer, ofwel via welk kanaal je ticket koper in de ticketshop komt. De bron, ofwel 'source' is een verplicht element in de utm code en daarom hebben we de ‘utm_source’ in de data layer toegevoegd om de herkomst van je bezoeker, bijvoorbeeld Google search, door te geven. Wanneer naar de ticketshop wordt gelinkt met bijvoorbeeld ?utm_source=campagnenaam, wordt dit in deze property ook via de data layer doorgegeven aan de GTM.
Script 1
Script voor de basic geïntegreerde ticketshop
Voor de basisintegratie van de Stager ticketshop met je eigen website moet een webdeveloper onderstaand script in het javascript van je website plakken om cross-domain tracking te laten werken.
setTimeout(function() {
const params = window.location.search;
const ticketshopUrl = '<<<plak hier de ticketshop url>>>';
const src = ticketshopUrl + params;
const ifrm = document.querySelector('iframe#ticketshop-iframe');
ifrm.setAttribute('src', src);
}, 1000);
Zet het iframe er vervolgens op deze manier in:
<iframe id="ticketshop-iframe" height="800" width="650" frameborder="0" src="about:blank" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Script voor de advanced geïntegreerde ticketshop
Werk je met de advanced geïntegreerde ticketshop? Dan werkt het net even anders.
setTimeout(function () {
const params = window.location.search;
const ticketshopUrl = '<<<plak hier de ticketshop link laat de '' staan>>>';
let minimal = (!params ? '?' : '&') + 'minimal=true';
const src = ticketshopUrl + params + minimal;
const ifrm = document.querySelector('iframe#ticketshop-iframe');
ifrm.setAttribute('src', src);
}, 500);
En het iframe zet je er vervolgens op deze manier in:
<iframe id="ticketshop-iframe" data-stager-ticketshop="[eventid]" height="650" width="400" frameborder="0" src="about:blank" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Script 2
Dit script is nodig voor zowel de basic geïntegreerde ticketshop als de advanced geïntegreerde ticketshop. Dit script kan je webdeveloper onderaan de pagina zetten waar de ticketshop zicht bevindt.
(function () {
var maxTime = 2000;
var childOrigin;
var pollInterval = 200;
var pollCallback = function () {
if (document.getElementById("ticketshop-iframe")) {
maxTime -= pollInterval;
if (maxTime <= 0) window.clearInterval(poll);
childOrigin = new URL(document.getElementById("ticketshop-iframe").src).origin;
}
};
var postCallback = function (event) {
if (event.origin !== childOrigin) return;
if (event.data !== 'childReady' && !event.data.event) return;
if (event.data === 'childReady') {
// Send event that parent is ready
event.source.postMessage('parentReady', event.origin);
}
// Push dataLayer message from iframe to dataLayer of parent
if (event.data.event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(event.data);
}
};
var poll = window.setInterval(pollCallback, pollInterval);
// Start listening for messages from child frame
window.addEventListener('message', postCallback);
})();