Google Analytics 4 - GA4

Introduction

Tixly has support for Google Analytics 4 ecommerce tracking. This works in combination with your google tag manager code and your own cookie solution.

The solution can be described as:

On your skin we place a GA4 compatible data layer with order details and we fire ecommerce events and place a google tag manager (GTM) container. 

Your marketing team, or external agency, configures a GTM container that uses this data layer information and events. You can give the GTM code of this container to Tixly support, who can place this on your skin.

 

Explanation of the elements involved:

GA4 is version 4 of google analytics. GA3 will be deprecated in July 2023. We have been using version 3 up till now. All google codes that start with UA- are version 3

The data layer is a place in the memory of the browser of the visitor where the basket is available in a format that marketing tools can use.  From Tixly pages we push data to the data layer, like what is in the basket "2 tickets to Concert X in the basket with a total value of € 60". Also we can push events to the data layer, to inform the marketing tools that things have happened, like: “something is added to the order” or “sale was completed”. 

Google Tag Manager is a system from google that we can see as a "content management system for marketing tags" where marketing people can configure what marketing tools, tags & trackers are used on what pages. This can be a chatbot, google analytics, facebook trackers etc. Is is pictured as the blue tilted square in this drawing. Those trackers can use the information and the events from data layer.

The GA4 and the older GA 3 both can work with a data layer. But the data layer setup and events are not completely the same in 3 and 4.  Therefore we needed to create a GA4 version of the data layer.  The combination of the two is not supported and can have undesired results. 

Preparation by the client

What the client has to do: Create a GTM container that is responsible for the following elements:

  • Loading a cookie manager, for example cookie bot or cookie hub and act on the answers of the visitors. By using your own cookie manager, you can use the same solution as used on your primary website. This should result in the visitor having to answer only once to the “Can we use cookies?” question. 
  • Placing GA4 code to send tracking data to GA, including the pageviews or other events that we don’t send from Tixly. 
  • Load any other marketing tool, for example Facebook pixels, surveys or chatbots that you want. 

Give the GTM code of this container to Tixly support.

Setting it up in Tixly

What Tixly does: On your skin we place the GA4 compatible data layer with order details and we fire ecommerce events and place your google tag manager container. 

In tixly trackers module, create a new web tracker of the type “GTM and DataLayer” and as tracker ID you set the Google Tag Manager from the client. For example GTM-NQK7R5  (Yes this naming is a bit confusing)

Then on the skin: 

  • Disable tixly trackers
  • Disable any cookie warning
  • Remove other existing trackers
  • Add the newly created “GTM and DataLayer” tracker

This GA4 dataLayer now should be the only google tracker on the skin.

And because there are no other trackers Tixly does not load any marketing scripts that use cookies.

All trackers such as Google analytics, but also facebook and others, have to be managed by the client through the google tag manager. 

And to be in line with GDPR it has to provide a cookie manager solution to request the customers' permissions to load these trackers. The advantage is that the client can use the same cookie solution as they use on the venue website on the tixly pages

We basically give the customer the power and responsibility to do this all themselves.

 

 

Data layer details

On all pages of the skin a data layer is loaded and on several places in the buying flow we fire e-commerce events. 

On the  Tixly View event group page

The event view_item_list is fired. With the Tixly event group Id and the event group name
An “items” object with all items on the page is included.

 

{
"event": "view_item_list",
"event_group_id": "22587",
"event_group_name": "Slapstick - The roaring twenties",
"item_list_id": "event_group",
"item_list_name": "event group",
"ecommerce": {
"value": 0,
"currency": "EUR",
"items": [
{
"item_name": "Slapstick - The roaring twenties-17-1-2023 20:00:00",
"item_id": 66939,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 0,
"item_category4": null,
"price": 22.5
},
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 0,
"item_category4": null,
"price": 22.5
},
{
"item_name": "Slapstick - The roaring twenties-19-1-2023 20:00:00",
"item_id": 66943,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 0,
"item_category4": null,
"price": 22.5
}
]
}
}

When selecting one of the dates an  event : "view_item" is fired, with the “items” object containing the item that is viewed. 

When the website directly links to a specific date both view_item_list and "view_item" are fired shortly after each other. 

 

When adding tickets to an order

When the user adds the tickets to his order the  add_to_cart event is fired. 

This also pushes an ecommerce object that shows what is added.


{
event : "add_to_cart",
ecommerce : {
value : 65
currency : "EUR",
items : [
{
item_name : "Slapstick - The roaring twenties-18-1-2023 20:00:00",
item_id : 66941,
price : 32.5,
original_price : null,
item_brand : "Senf Theaterpartners",
item_category : "Slapstick - The roaring twenties",
item_category2 : "Mary Dresselhuys",
item_category3 : 661,
item_category4 : 22587,
item_variant : "Regulier"
},
{
item_name : "Slapstick - The roaring twenties-18-1-2023 20:00:00",
item_id : 66941,
price : 32.5,
original_price : null,
item_brand : "Senf Theaterpartners",
item_category : "Slapstick - The roaring twenties",
item_category2 : "16 - Mary Dresselhuys",
item_category3 : 661,
item_category4 : 22587,
item_variant : "Regulier"
}
]
}
}

Viewing cart 

On /buyingflow/order/ the user sees the order. This fires "view_cart" with the ecommerce object containing all items in the order. This includes also default delivery method and transaction fees that Tixly has put on the order.

 

Continue to checkout

When the user continues to checkout we fire the “begin_checkout” event. He might be presented with an option to select a delivery method.

If he does that, and continues an “add_shipping_info” event is fired.  Note that when a user comes back to these pages multiple times in one session, these events are fired multiple times.

Example datalayer

{
"event": "add_shipping_info",
"ecommerce": {
"value": 72.7,
"currency": "EUR",
"items": [
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Transactiekosten",
"item_id": "SERVICES-0",
"price": 3.5,
"item_variant": 5
},
{
"item_name": "Postbezorging",
"item_id": "DELIVERY-82",
"price": 4.2,
"item_variant": 82
}
]
}
}

 

Going to external payment provider

When the user clicks to pay, to go to a payment provider the 'event': 'add_payment_info' is fired.

Example datalayer

{
"event": "add_payment_info",
"ecommerce": {
"value": 72.7,
"currency": "EUR",
"transaction_id" : 118781,
"items": [
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Transactiekosten",
"item_id": "SERVICES-0",
"price": 3.5,
"item_variant": 5
},
{
"item_name": "Postbezorging",
"item_id": "DELIVERY-82",
"price": 4.2,
"item_variant": 82
}
]
}
}

 

Complete the order

When the payment is received and the receipt page is opened the “purchase” event is fired.   An ecommerce object containing all that has been ordered is also pushed. 

Example datalayer

{
"event": "purchase",
"ecommerce": {
"value": 72.7,
"currency": "EUR",
"transaction_id" : 118781,
"items": [
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Slapstick - The roaring twenties-18-1-2023 20:00:00",
"item_id": 66941,
"price": 32.5,
"original_price": null,
"item_brand": "Senf Theaterpartners",
"item_category": "Slapstick - The roaring twenties",
"item_category2": "16 - Mary Dresselhuys",
"item_category3": 661,
"item_category4": 22587,
"item_variant": "Regulier"
},
{
"item_name": "Transactiekosten",
"item_id": "SERVICES-0",
"price": 3.5,
"item_variant": 5
},
{
"item_name": "Postbezorging",
"item_id": "DELIVERY-82",
"price": 4.2,
"item_variant": 82
}
]
}
}

Explanation of item properties in the data layer

item_name
For tickets: ”Event name - Date Time”.
Other items show the name of the item


item_id
When the item is a ticket, this has the Tixly event Id
For other items, the item type is prepended the Id. For example DELIVERY-82 is the delivery option with ID 82. Or DONATION-12 for a donation type id 12. 


price
The price the customer has to pay for this item.


original price
Shows the original price of tickets when a basket rule change the price.


item_brand
For tickets: The name of the promoter of the event
For other items this has the item type name: gift card, product, subscription


item_category
Eventname 

Empty for non ticket items. 


item_category2
Venue Id - Hall name

Empty for non ticket items.


item_category3
Hall Id

Empty for non ticket items.


item_category4
Event group Id

Empty for non ticket items.


item_variant
Ticket type name, or for non ticket items this is the item ID

 

Testing

Setting up the GTM container and your GA environment is something you probably want to test before witching it on on your live sales skin.

A easy approach is to use a temporary second skin in Tixly for testing. 

Create a new skin, with these properties. All fields not mentioned here can be left empty or to its default values.

Information tab

Organisation = your organisation or empty

SkinUrl = Test1 (or some other name, you need this in the url)

Hosted Skin = No

Position = a high number, so it will not be on top of the selection lists in backoffice

Advanced tab

DisableTixlyTracker = set to yes if you like to test if no tracking cookies are set.

Web trackers = select the [GTM and DataLayer] tracker 

Custom login = yes

CustomLoginSkinId = set this to the same as your live skin. This makes that you can use the same login on the test as on live.

 

Now you can use this skin with all your events that are also sold live. For example like this https://tix.se/sv/Test1/buyingflow/tickets/12877/61741

Here you can test your GTM setup.

If you use Triggers in GTM to fire some tags only on some website url's, make sure they fire also on the Test skin URL.  

GTM has a good debugging mode (see example), but an easy check can also be done with for example with a GTM / GA Debugger

 

If the test is successful the [Ga4 datalayer] can be placed on the live skin, the other live trackers removed and the test skin deleted.