Google Analytics GA4

Notis!
Denna artikel finns endast på engelska

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.

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". We can also 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 teams can configure what marketing tools, tags & trackers are used on what pages. This can be a chatbot, google analytics, facebook trackers etc. It is pictured as the blue tilted square in this drawing. Those trackers can use the information and the events from the 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 the 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.

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 should now 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. 

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.

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. They might be presented with an option to select a delivery method. If the customer 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.

{
"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 customer clicks to pay, to go to a payment provider the event add_payment_info is fired.

{
"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. 

{
"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

1. item_name

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

2. item_id

   1. When the item is a ticket, this has the Tixly event Id
   2. 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. 

3. price

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

4. original price

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

5. item_brand

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

6. item_category

   1. Eventname 
   2. Empty for non ticket items.

7. item_category2

   1. Venue Id - Hall name
   2. Empty for non ticket items.

8. item_category3

   1. Hall Id
   2. Empty for non ticket items.

9. item_category4

   1. Event group Id
   2. Empty for non ticket items.

10. item_variant

    1. 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 switching it on on your live sales skin. An 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).

1. Organisation

   1. Your organisation or empty.

2. SkinUrl

   1. Test1 (or some other name, you need this in the url).

3. Hosted Skin

   1. No

4. Position

   1. A high number, so it will not be on top of the selection lists in Box Office.

5. DisableTixlyTracker

   1. Set to yes if you like to test if no tracking cookies are set.

6. Web trackers

   1. Select the [GTM and DataLayer] tracker.

7. Custom login

   1. Yes.

8. CustomLoginSkinId

   1. 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 a GTM / GA Debugger

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