Intégrez-vous à Google Analytics 4
Oui, TicketingHub est intégré à Google Analytics 4
Pourquoi ?
Le contenu de l'iframe est une application javascript d'une seule page, sans changement de pages ou d'urls, donc cela ne donnerait pas plus d'avantages que la solution suivante
Nous vous le suggérons ci-dessous :
Ajouter du code GA4 sur vos propres pages avec le widget, puis déclencher des événements GA4 après avoir reçu des événements du widget.
Nous suivons actuellement deux types d'événements :
th:pageview' - déclenché lorsque la vue du widget change.
th:order:confirmed' - déclenché à la fin du widget, lorsque la commande est confirmée.
Vous pouvez suivre ces événements en javascript, en utilisant le code ci-dessous, bien que je suppose que vous écoutez déjà certains événements sur vos pages.
<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>L'objet de la commande, fourni par l'événement "th:order:confirmed", comporte quatre propriétés : id, référence, total et devise.
E.g. {id: "3c4af46b-bef7-4023-9fee-09d35feebbd3", reference: "OR-61E", total: "GBP 10.00", currency: "GBP"}
L'événement 'pageview' fournit le chemin d'accès à la page actuelle du widget, par exemple '/tickets', '/calendar', '/customer' ou '/success'.
-
Vue d'ensemble
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
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: <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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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_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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| value | number | Oui | 7.7 | The monetary value of the event |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | Standard Tour | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 35.57 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| value | number | Oui | 7.7 | The monetary value of the event |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
The products (tickets) of the event
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | Standard Tour | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 23.72 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| value | number | Oui | 7.7 | The monetary value of the event |
| coupon | string | Non | The coupon name associated with the event (the gift card code) | |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | Standard Tour | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 23.72 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| value | number | Oui | 7.7 | The monetary value of the event |
| coupon | string | Non | The coupon name associated with the event (the gift card code) | |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | Standard Tour | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 23.72 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| value | number | Oui | 7.7 | The monetary value of the event |
| payment_type | string | Non | Pay by Card | The chosen method of payment |
| coupon | string | Non | The coupon name associated with the event (the gift card code) | |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | Standard Tour | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 23.72 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| store_name | string | Oui | SupplierName | The name of the client’s website |
| widget_name | string | Oui | embedded | The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| transaction_id | string | Oui | RKT23EB | The unique identifier of the transaction |
| value | number | Oui | 7.7 | The monetary value of the event |
| taxe | number | Non | 1 | Tax cost associated with transaction |
| coupon | string | Non | The coupon name associated with the event (the gift card code) | |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| items | Array (see item parameters below) | Oui | The products (tickets) of the event |
Item parameters
| Nom | Type | Required | Example Value | Description |
|---|---|---|---|---|
| item_name | string | Oui | Example Family | The name of the product (ticket) |
| affiliation | string | Oui | SupplierName | The name of the client’s website |
| currency | string | Oui | EUR | The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format) |
| item_category | string | Non | billet | The ticket category |
| item_variant | string | Non | billet | The type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’ |
| price | number | Non | 23.72 | The monetary price of the product (ticket), in units of the specified currency parameter. |
| quantity | number | Non | 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
Merci !