Si integra con Google Analytics 4

Sì, TicketingHub è integrato con Google Analytics 4

Perché?
Il contenuto dell'iframe è un'applicazione javascript a pagina singola, senza pagine o url che cambiano, quindi non darebbe alcun beneficio in più rispetto alla soluzione

Suggeriamo di seguito:

Aggiungere il codice GA4 sulle proprie pagine con il widget, e poi attivare gli eventi GA4 dopo aver ricevuto gli eventi dal widget.

Attualmente tracciamo due tipi di eventi:

'th:pageview' - attivato quando la vista del widget cambia
'th:order:confirmed' - attivato alla fine del widget, quando la conferma dell'ordine.

Potete tracciare questi eventi in javascript, usando il codice qui sotto, anche se immagino che ascoltiate già alcuni eventi nelle vostre pagine.

<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'oggetto ordine, fornito dall'evento 'th:order:confirmed', ha 4 proprietà supportate: id, reference, total e currency.
E.g. {id: "3c4af46b-bef7-4023-9fee-09d35feebbd3", reference: "OR-61E", total: "GBP 10.00", currency: "GBP"}

L'evento 'pageview' fornisce il percorso della pagina corrente del widget, ad esempio '/tickets', '/calendar', '/customer' o '/success'.

-

Panoramica

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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
value	number	Sì	7.7	The monetary value of the event
items	Array (see item parameters below)	Sì		The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	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	biglietto	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
value	number	Sì	7.7	The monetary value of the event
items	Array (see item parameters below)	Sì		The products (tickets) of the event

The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	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	biglietto	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
value	number	Sì	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)	Sì		The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	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	biglietto	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
value	number	Sì	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)	Sì		The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	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	biglietto	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
value	number	Sì	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)	Sì		The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	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	biglietto	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

Nome	Tipo	Required	Example Value	Descrizione
store_name	string	Sì	SupplierName	The name of the client’s website
widget_name	string	Sì	embedded	The name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
transaction_id	string	Sì	RKT23EB	The unique identifier of the transaction
value	number	Sì	7.7	The monetary value of the event
tassa	number	No	1	Tax cost associated with transaction
coupon	string	No		The coupon name associated with the event (the gift card code)
affiliation	string	Sì	SupplierName	The name of the client’s website
items	Array (see item parameters below)	Sì		The products (tickets) of the event

Item parameters

Nome	Tipo	Required	Example Value	Descrizione
item_name	string	Sì	Example Family	The name of the product (ticket)
affiliation	string	Sì	SupplierName	The name of the client’s website
currency	string	Sì	EUR	The currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_category	string	No	biglietto	The ticket category
item_variant	string	No	biglietto	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

Questo articolo è stato utile?

Grazie!