Articles on: Integrations

Do you integrate with Google Analytics 4




Yes, TicketingHub integrated with Google Analytics 4


__Why? __

  • The content of the iframe is a single page javascript application, without pages or urls changing, therefore it wouldn't give any more benefit, than the solution


We suggest below:



  1. Adding GA4 code on your own pages with the widget, and then triggering GA4 events after receiving events from the widget.


We currently track two types of events:

  • 'th:pageview' - triggered when the widget view changes
  • 'th:order:confirmed' - triggered at the end of the widget, when the order confirmation.


You can track these events in javascript, using the code below, though I guess you already listen to some events on your pages already.


<script>
document.body.addEventListener('th:order:confirmed', function(event) {
var order = event.detail;
console.log(order)
});

document.body.addEventListener('th:pageview', function(event) {
var currentWidgetPagePath = event.detail;
console.log(currentWidgetPagePath)
});
</script>



The order object, provided by 'th:order:confirmed' event, has 4 supported properties: id, reference, total and currency.

E.g. {id: "3c4af46b-bef7-4023-9fee-09d35feebbd3", reference: "OR-61E", total: "GBP 10.00", currency: "GBP"}


The 'pageview' event provides the path to the current widget page. e.g. '/tickets', '/calendar', '/customer' or '/success'






-


Overview


This document shows how to set up tracking events for ticketinghub widget so you can measure when someone makes a certain action. The document includes the dimensions, metrics, and reports that Google Analytics populates with data from the event.


You should send the corresponding event on the page of your website where someone makes a certain action. For example, you could add the event on the confirmation page that appears when someone makes a purchase.


Measurement protocol (Google Analytics 4) - https://developers.google.com/analytics/devguides/collection/protocol/ga4
Events builder and validator - https://ga-dev-tools.web.app/ga4/event-builder/
Sending Events
To send an event, make an HTTP POST request to the following endpoint:


POST /mp/collect HTTP/1.1
HOST: www.google-analytics.com
Content-Type: application/json
<payload_data>


A valid request requires two sets of parameters:


1. URL parameters


api_secret - Required. An API SECRET generated in the Google Analytics UI. To create a new secret, navigate to:
Admin > Data Streams > choose your stream > Measurement Protocol > Create (e.g.


measurement_id - Required. The measurement ID associated with a stream. Found in the Google Analytics UI under:
Admin > Data Streams > choose your stream > Measurement ID


Note: measurement_id is not your Stream ID.
See query parameters for the full reference - https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference#payload_query_parameters


2. JSON body


client_id - Required. A unique identifier for a client.


The method to get the client_id:


gtag('get', 'YOUR_MEASUREMENT_ID', 'client_id', (client_id) => {
// do something with client_id, e.g.
// console.log(clientID)
})


where
YOUR_MEASUREMENT_ID - GA4 measurement id, e.g. G-4KM9TQ60EJ
See the documentation for ‘get’ in the official Gtag.js docs - https://developers.google.com/gtagjs/reference/api#get



events - Required. An array of event items.


See JSON POST BODY for the full reference - https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference#payload_post_body


Example
const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: <event name>', // see ‘The list of GA4 events for the widget’ below for details
params: {}, // see ‘The list of GA4 events for the widget’ below for details
}]
})
});


The List of Google Analytics 4 Events for the Widget


view_calendar

This event signifies that the calendar was shown to the user.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings




Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret



     
fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_calendar,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});


select_date

This event signifies that the user selected (clicked) the date of the event.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings




Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: select_date,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});



select_purchase_gift

This event signifies that the user clicked on 'Purchase as a Gift Voucher'.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings




Example

const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: select_purchase_gift,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});



view_times

This event signifies that the calendar was shown to the user.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings




Example

const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_times,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});



select_time

This event signifies that the user selected (clicked) the time of the event.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings




Example
const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: select_time,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});



view_item

This event signifies that the products (tickets or extra) were shown to the user






Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

value

number

Yes

7.7

The monetary value of the event

items

Array (see item parameters below)

Yes

The products (tickets) of the event






Item parameters


Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

Standard Tour

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

35.57

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

1

Item quantity






Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_item,
params: {
store_name: "secretfoodtours",
widget_name: “embeded”,
currency:EUR,
value:59.29, // the monetary value of all products (tickets) viewed by the user
items: [
{
item_name: "Standard tour",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 23.72,
quantity: 1
},
{
item_name: "Example Family",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 35.57,
quantity: 1
}
]
},
}]
})
});



add_to_cart

This event signifies that the products (tickets) or extra were added to cart by the user (the user selected the quantity for specific tickets and clicked on ‘Next’ or the user added the extra to cart).






Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

value

number

Yes

7.7

The monetary value of the event

items

Array (see item parameters below)

Yes

The products (tickets) of the event




The products (tickets) of the event



Item parameters


Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

Standard Tour

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

23.72

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

2

Item quantity




Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: add_to_cart,
params: {
store_name: "SupplierName",
widget_name: “embeded”,
currency:EUR,
value:47.44., // the monetary value of all products (tickets) viewed by the user
items: [
{
item_name: "Example Family",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 23.72,
quantity: 2
}
]
},
}]
})
});


view_shipping

This event signifies that the shipping fields (full name, email, phone number, etc.) were shown to the user




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings






Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_shipping,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});




add_shipping_info

This event signifies a user has submitted their shipping information.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

value

number

Yes

7.7

The monetary value of the event

coupon

string

No

The coupon name associated with the event (the gift card code)

items

Array (see item parameters below)

Yes

The products (tickets) of the event




Item parameters


Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

Standard Tour

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

23.72

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

2

Item quantity





Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: add_shipping_info,
params: {
store_name: "SupplierName",
widget_name: “embeded”,
currency:EUR,
value:47.44., // the monetary value of all products (tickets) viewed by the user
items: [
{
item_name: "Example Family",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 23.72,
quantity: 2
}
]
},
}]
})
});



view_cart

This event signifies that the order summary was shown to the user.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

value

number

Yes

7.7

The monetary value of the event

coupon

string

No

The coupon name associated with the event (the gift card code)

items

Array (see item parameters below)

Yes

The products (tickets) of the event





Item parameters


Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

Standard Tour

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

23.72

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

2

Item quantity






Example


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_cart,
params: {
store_name: "SupplierName",
widget_name: “embeded”,
currency:EUR,
value:47.44., // the monetary value of all products (tickets) viewed by the user
items: [
{
item_name: "Example Family",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 23.72,
quantity: 2
}
]
},
}]
})
});



view_payment_info

This event signifies that the checkout payment details were shown to the user.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings





Example

const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: view_payment_info,
params: {
store_name: "SupplierName",
widget_name: “embeded”
},
}]
})
});



add_payment_info

This event signifies a user has submitted their payment information.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

value

number

Yes

7.7

The monetary value of the event

payment_type

string

No

Pay by Card

The chosen method of payment

coupon

string

No

The coupon name associated with the event (the gift card code)

items

Array (see item parameters below)

Yes

The products (tickets) of the event




Item parameters


Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

Standard Tour

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

23.72

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

2

Item quantity






Example

This example shows when the user selected ‘Pay by Card’ and submitted their payment information.
const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: add_payment_info,
params: {
store_name: "SupplierName",
widget_name: “embeded”,
currency:EUR,
value:47.44, // the monetary value of all products (tickets) which were added to cart by the user
coupon: “”,
payment_type: “Pay by Card”
items: [
{
item_name: "Example Family",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 23.72,
quantity: 2
}
]
},
}]
})
});


purchase

This event signifies when one or more items is purchased by a user.




Parameters


Name

Type

Required

Example Value

Description

store_name

string

Yes

SupplierName

The name of the client’s website

widget_name

string

Yes

embedded

The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

transaction_id

string

Yes

RKT23EB

The unique identifier of the transaction

value

number

Yes

7.7

The monetary value of the event

tax

number

No

1

Tax cost associated with transaction

coupon

string

No

The coupon name associated with the event (the gift card code)

affiliation

string

Yes

SupplierName

The name of the client’s website

items

Array (see item parameters below)

Yes

The products (tickets) of the event





Item parameters



Name

Type

Required

Example Value

Description

item_name

string

Yes

Example Family

The name of the product (ticket)

affiliation

string

Yes

SupplierName

The name of the client’s website

currency

string

Yes

EUR

The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)

item_category

string

No

ticket

The ticket category

item_variant

string

No

ticket

The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’

price

number

No

23.72

The monetary price of the product (ticket), in units of the specified currency parameter.

quantity

number

No

2

Item quantity






Example

This example shows a transaction when 1 ticket (‘Adult’) of ‘Standard tour’ category plus an extra ‘Upgraded Drink Package’ is purchased by a user.


const measurement_id = G-XXXXXXXXXX; // GA4 measurement id
const api_secret = <secret_value>; // api secret


fetch(`https://www.google-analytics.com/mp/collect?measurement_id=${measurement_id}&api_secret=${api_secret}`, {
method: "POST",
body: JSON.stringify({
client_id: 'XXXXXXXXXX.YYYYYYYYYY',
events: [{
name: purchase,
params: {
store_name: "SupplierName",
affiliation: “SupplierName”,
widget_name: “embedded”,
currency:EUR,
transaction_id:RKT23EB,
value:50, // the monetary value of all products (tickets) which were added to cart by the user
coupon: “”,
items: [
{
item_name: "Adult",
affiliation: "SupplierName",
currency: "EUR",
item_category: "Standard tour",
item_variant: "ticket",
price: 30,
quantity: 1
},
{
item_name: "Upgraded Drink Package",
affiliation: "SupplierName",
currency: "EUR",
item_variant: "extra",
price: 20,
quantity: 1
}
]
},
}]
})
});



Updated on: 24/01/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!