Note: We advise to not embed the legacy ticket shop if you haven’t already done so. For the new ticket shop, we’re actively working on an improved embed feature. This article is only relevant for those who are already using an embedded ticket shop. We’ll keep you updated as soon as the new feature becomes available.
Continue tracking your visitors in Google Analytics; even when they switch between your website and the Stager ticket shop. Have you linked Google Analytics to your Google Tag Manager and your Stager ticket shop? Then you can then set up cross-domain tracking. Cross-domain tracking makes it possible to continue to recognize the source of the traffic, even when switching between domains.
This article explains how to set this process up with an integrated ticket shop on your own website. Does your website refer using a ticket link to the ticket shop? Then read the general article about setting up cross-domain tracking.
Cross-domain tracking with an integrated ticket shop
Is your ticket shop integrated into your own website using the basic or advanced integration? Then you're not quite done. You will have to deal with the fact that the ticket shop cannot read from the link the visitor clicked through to your website. When using Google Analytics and in the case of conversion tracking, this is inconvenient because you lose insight into the purchasing behaviour of your ticket buyers. For this to run smoothly, you need to do the following:
Use UTM codes when tracking
Add a script to your website
Use UTM codes when tracking
UTM codes allow you to embellish a URL with additional bits of information for Google Analytics. These extra snippets of information ensure you can better see in Google Analytics where exactly your traffic and sales have come from. There are a total of five UTM codes that you can add to a URL, of which 'source' and 'medium' are mandatory.
Source (utm_source)
The source is a required element in a UTM code, which tells you the origins of visitor traffic. This could be, for example, a search engine such as Google or a social platform such as Facebook, Instagram, Twitter or LinkedIn.
Medium (utm_medium)
The medium in the code refers to the marketing medium that entices visitors to click through. For example, the medium can be a paid advertisement or an organic search result in Google. There are many options here.
Campaign (utm_campaign)
Campaign tells you which marketing campaign the clicked URL - with the UTM code - is part of. For example, the campaign name for a performance, or the start of the cultural season.
Content (utm_content)
The content describes the content of the medium that persuaded visitors to click. For example, this could be the subject of a blog article, an advertisement or the style of a banner.
Term (utm_term)
The term in a UTM code is originally the search term that makes visitors click on your link. This UTM code is not often used, because Google Ads itself already sends this information to Google Analytics and the search query can’t be retrieved elsewhere.
Provide URLs with UTM codes yourself
Now that you know what UTM codes are, you probably want to use them yourself. Fortunately, you do not have to manually adjust your URLs, because Google has developed a tool for this. With the Campaign URL Builder you can easily complete a URL with UTM codes. Google even gives sample values you could use. A few things you should pay attention to:
For Google Analytics, you always write the source in lower case, for example google or facebook.
You always write the medium for Google Analytics in lowercase, for example cpc, advertisement or organic.
URLs don't handle spaces very well. Therefore always replace spaces with an underscore ( _ ), for example ticketsales_stagerfest.
Scripts for your web developer to place on your website
By integrating the Stager ticket shop into your own website through the basic or advanced integration, visitors can order tickets there. The Stager ticket shop uses cookies to link the shopping carts to the visitors. Recently browsers have become increasingly strict about accepting 'third party cookies' to improve privacy. Stager is considered a third party, or secondary domain, because Stager has a different domain than your website. Actually, Stager is a part of your website when people buy a ticket. If we detect that our cookies are not working, we will automatically redirect a visitor to your Stager ticket shop on the stager.co domain.
It is also difficult for other third party cookie setters to use cookies with increasingly stricter browsers. For example, it can be difficult for tools such as Google Analytics to track visitors when they are referred from your own website to your ticket shop on the stager.co domain. We have written two scripts that your web developer can paste directly onto your website, so that the tracking of visits and conversions continues to run smoothly.
What problems do the scripts solve?
A problem that embedded webshops have to deal with is that an iFrame cannot read the link the visitor used to click through to your website. This is inconvenient when using Google Analytics (and in the case of conversion tracking), because you lose insight into the purchasing behaviour of your ticket buyers.
Because the iFrame does not provide a URL, Analytics thinks that a ticket buyer came in directly via your own website instead of, for example, a Facebook advertisement. This ensures that the traffic is marked as Source 'Direct'. We have written a script that ensures that any URL can be read.
The iframe has no url in the script, the url says about:blank. When requesting the url, therefore, no url is received and the source is therefore not passed on. The script throws in the url where the visitor comes from and also passes the UTM parameters. Once that's done, the integrated ticket shop will load into the page and Stager can pass campaign information that we store for you in the session.
The second script solves the problem where the iframe containing the ticket shop cannot communicate with your website. This is also because both run on a different domain. The script makes a connection between the ticket shop and your website and can communicate with each other and pass on data to each other, such as what tickets have been purchased.
It is important to mention that you may only pass on this information if your website visitor has accepted cookies. You take care of the cookie notification on your website yourself, after which you can also set the cookie wall for your ticket shop with Google Tag Manager. If necessary, ask your web builder or marketing partner to adjust the triggers in Google Tag Manager in accordance with the cookie wall you use. Can't figure it out? Or do you have another question? Please contact Stager and we will put you in touch with our marketing partner, Afdeling Online.
UTM source for embedded ticket shops
You work with utm_codes to know the source of your visitor traffic, or the path your ticket buyer used to enter the ticket shop. The source is a mandatory element in the UTM code and that is why we have added the 'utm_source' in the data layer to pass on the origin of your visitor. When a link is made to the ticket shop with, for example, ?utm_source=campaign name, this is also passed on to the GTM via the data layer in this property.
Script 1
Script for the basic integrated ticket shop
For the basic integration of the Stager ticket shop with your website, a web developer needs to paste the script below into the javascript of your website for cross-domain tracking to work.
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 for the advanced integrated ticket shop
Do you work with an advanced integrated ticket shop? Then it works slightly differently.
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
This script is required for both the basic integrated ticket shop and the advanced integrated ticket shop. Your web developer can place this script at the bottom of the page where the ticket shop is located.
(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);
})();