Setting up Analytics Tracking (GA4)

This document covers how you can add tracking scripts to the online booking process via GemaPark. It covers the general spaces for scripts and specifics about setting up and added GA4 tracking using Google Tag Manager.

GemaPark Settings for adding tracking scripts

Tracking scripts can be added to your booking pages via GemaPark under Admin > [park name] > Park Settings > Web Settings.

On the ‘web settings’ page you have the following boxes you can enter scripts into:

Page Tracking Script (head): These scripts will be added to header of all pages in the booking process including the booking confirmation page.

Page Tracking Script (body start): These scripts will be added at the start of the body tag on all pages in the booking process including the booking confirmation page.

Page Tracking Script (body end): These scripts will be added at the end of the body tag on all pages in the booking process including the booking confirmation page.

Successful Booking Script (head): These scripts will be added to header of the successful booking page after the ‘page tracking script’.

Successful Booking Script (body start): These scripts will be added at the start of the body tag on the successful booking page after the ‘page tracking script’.

To put data in the scripts on the successful booking page from the booking you can use the following special tags:

Tag	Description
{{bookingid}}	unique id for booking
{{bookingtotal}}	total value of booking
{{bookingref}}	booking reference
{{bookingunittotal}}	total value for unit
{{bookingunitid}}	unique id for unit
{{bookingunitname}}	name of unit
{{bookingphysicalunitid}}	unique id for plot
{{bookingphysicalunitname}}	name of plot

Google Tracking

Set up help

If you would like us to help you with the setup of your Google tracking in GemaPark please add our Gmail address netguidesuk@gmail.com as an admin user to your Google Analytics / Tag Manager accounts to enable us to access the scripts and make any changes required.

Multiple websites/parks

You need to use the same analytics/tag manager account on the website and on the bookings pages of any given park. GemaPark allows you to do this because the scripts are added at park level so the relevant script can be loaded into the booking pages.

Integrating Google Analytics GA 4 using Tag Manager

This section assumes you are using Google Tag Manager to add Google Analytics 4 (GA4) to your websites. While you can add GA4 without Tag Manger, if you are using Tag Manager for anything else it is not recommend to have Tag manager and gtag scripts on the same page so it’s better to keep everything in Tag Manager.

Let’s assume you have already created your Google analytics GA4 DataStream for your website and want to add Pageview and Ecommerce tracking to your GemaPark Secure Booking pages.

Set up cross domain measurement

Cross-domain measurement allows activity to be accurately attributed to a single user as they cross domains. For more information see https://support.google.com/analytics/answer/10071811?hl=en

In Google Analytics under: Admin – Data Streams, in the Data Stream details, click ‘Configure Tag settings’.

In the ‘Settings’ section click ‘Configure Your Domains’.

Add gemapark.co.uk and your own website as shown below, Press Save.

Update Tag Manager

General instructions for setting up Tag Manager can be got from Google:

https://support.google.com/tagmanager/answer/9442095?sjid=5126924676985195313-EU

But in summary these are the steps:

Step 1: Create a Google Tag

Start by creating a Google Analytics: Google tag to send data to your Analytics property.

In Google Tag Manager, click Tags > New.
Enter a name for the tag at the top (e.g., "GA4 Tag").
In the Tag Configuration box, select Google Analytics: Google Tag.
Configure your tag:

In the field Tag ID, enter your "G-" ID.

Step 2: Create a trigger

Next, set up a trigger to load the Google Analytics: GA4 Configuration when someone loads your website.

To ensure that the Google Analytics 4 Configuration tag fires before other triggers, click Triggering and use the Initialization - All pages trigger. Learn more about Page triggers.
Save the tag configuration.

Your tag configuration should look like this:

The above tag will track any events set up in your ‘Enhanced Measurement Events’ setting in your DataStream in Analytics, by default this includes pageviews.

To track conversions you will want an Event Tag to record a Booking

Step 1: Create a GA4 Event tag

Start by creating a Google Analytics: GA4 Event tag.

In Google Tag Manager, click Tags > New.
Enter a name for the GA4 Event tag at the top (e.g., "GA4 Event – GemaPark Booking").
Select Google Analytics: GA4 Event as the Tag type.
Enter your Measurement ID.
In Event Name, enter purchase. This is case sensitive so make sure its starts with a lower case p.
Expand ‘more settings’ and tick ‘Send Ecommerce data’ and select the data source as ‘Data Layer’

Step 2: Create a trigger

Next, create a trigger to send the event when someone clicks the button.

Click the Triggering box in your GA4 Event tag.
Click + on the top right.
Enter a name for the trigger (e.g., "Trigger – GemaPark Booking").
Click the Trigger Configuration box in your trigger.
Choose ‘DOM Ready’.
Set fires on ‘some DOM events’, add
[page path] matches RegEx (ignore case) \/secure\/confirmation
and
[Referrer] matches RegEx (ignore case) \/secure\/contactdetails

Note: if your payment provider is PayPal, or if you are not seeing these events, don’t set the referrer restriction above.

Step 3: Save all your changes

Finally

Publish your Tag manager updates by clicking Submit

To add the Google Tag Manager tags to GemaPark

(See Section 2 above for details where to find these settings)

In ‘Tracking Scripts, included on all Secure Booking pages’ ‘Head’ field add the tag manager header script. It will look something like this where GTM-XXXXXXX is your tag manager ID.

new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

In ‘body start’ add the tag manager noscript part, e.g.

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Add the following to the ‘Successful Booking Script’ ‘body start’ box

window.dataLayer = window.dataLayer || [];

dataLayer.push({ ecommerce: null });

dataLayer.push({event : 'purchase',

ecommerce : {

transaction_id: "{{bookingid}}",

affiliation: "GemaPark",

value: {{bookingtotal}},

currency: "GBP",

items: [

{

item_id: "{{bookingphysicalunitid}}",

item_name: "{{bookingunitname}} {{bookingphysicalunitname}}",

item_category: "{{bookingunitname}}",

item_category3: "GemaPark",

price: {{bookingtotal}},

quantity: 1

}]

}

});

</script>

This is loading the data layer with data to push to the conversion event. Tags like {{bookingphysicalunitid}} are special GemaPark tags that get prefilled with the data from the booking, see above.

Note you can add a line to the script to add the park name as a category too if you want:
item_category2: "ParkName",
where ParkName is the name of the park you are adding the script too.

Widget updates

You need to make sure your website is using our latest script and widget updates.

On every page that you include a gemapark widget on you need to make sure our header script is added, that it is at least version 5 and that is passes your cid as a parameter. This include pages with the calendar widget on.

E.g.

If you are using our calendar widgets the script in the widget should look like this:

$p.find('#book').unbind('click').click(function ()

{

var finalUrl = String.format(url, data.date.format('yyyy-MM-dd'), ed.format('yyyy-MM-dd'), data.nights, occ, data.cur.id, extras);

if (typeof (window['nggp_getGALink']) === 'function')

{

var uri = new URL(finalUrl, document.baseURI);

window['nggp_getGALink'](uri.origin).then(function (link)

{

if (link)

{

uri.searchParams.set('_gl', link);

}

window.open(uri.toString(), "_parent");

});

}

else

{

window.open(finalUrl, "_parent");

}

});

Not like:

$p.find('#book').unbind('click').click(function()

{

window.open(String.format(url, data.date.format('yyyy-MM-dd'), ed.format('yyyy-MM-dd'), data.nights, occ, data.cur.id, extras), "_blank");

});

If you are not seeing the source come through on purchase events correctly you may be on an older version of our widgets. In this case you need to ask us to update your widgets.