Artículos sobre: Integraciones

¿Se integra con Google Analytics 4

Sí, TicketingHub integrado con Google Analytics 4



¿Por qué?
El contenido del iframe es una aplicación javascript de una sola página, sin que cambien las páginas ni las urls, por lo que no daría más beneficio, que la solución

Sugerimos a continuación:


Añadir código GA4 en sus propias páginas con el widget, y luego activar los eventos GA4 después de recibir los eventos del widget.

Actualmente hacemos un seguimiento de dos tipos de eventos:


th:pageview' - se activa cuando cambia la vista del widget
th:order:confirmed' - se activa al final del widget, cuando se confirma el pedido.

Puedes seguir estos eventos en javascript, usando el código de abajo, aunque supongo que ya escuchas algunos eventos en tus páginas.

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



El objeto pedido, proporcionado por el evento 'th:order:confirmed', tiene 4 propiedades soportadas: id, referencia, total y moneda.
E.g. {id: "3c4af46b-bef7-4023-9fee-09d35feebbd3", reference: "OR-61E", total: "GBP 10.00", currency: "GBP"}

El evento 'pageview' proporciona la ruta a la página actual del widget. Por ejemplo, '/tickets', '/calendar', '/customer' o '/success'



-

Resumen



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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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


NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
valuenumber7.7The monetary value of the event
itemsArray (see item parameters below)The products (tickets) of the event






Item parameters

NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNoStandard TourThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo35.57The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo1Item 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
valuenumber7.7The monetary value of the event
itemsArray (see item parameters below)The products (tickets) of the event




The products (tickets) of the event


Item parameters

NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNoStandard TourThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo23.72The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo2Item 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
valuenumber7.7The monetary value of the event
cupónstringNoThe coupon name associated with the event (the gift card code)
itemsArray (see item parameters below)The products (tickets) of the event




Item parameters

NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNoStandard TourThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo23.72The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo2Item 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
valuenumber7.7The monetary value of the event
cupónstringNoThe coupon name associated with the event (the gift card code)
itemsArray (see item parameters below)The products (tickets) of the event





Item parameters

NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNoStandard TourThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo23.72The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo2Item 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
valuenumber7.7The monetary value of the event
payment_typestringNoPay by CardThe chosen method of payment
cupónstringNoThe coupon name associated with the event (the gift card code)
itemsArray (see item parameters below)The products (tickets) of the event




Item parameters

NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNoStandard TourThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo23.72The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo2Item 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

NombreTipoRequiredExample ValueDescripción
store_namestringSupplierNameThe name of the client’s website
widget_namestringembeddedThe name of the widget according to https://dashboard.ticketinghub.com/supplier/widgets settings
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
transaction_idstringRKT23EBThe unique identifier of the transaction
valuenumber7.7The monetary value of the event
impuestonumberNo1Tax cost associated with transaction
cupónstringNoThe coupon name associated with the event (the gift card code)
affiliationstringSupplierNameThe name of the client’s website
itemsArray (see item parameters below)The products (tickets) of the event





Item parameters


NombreTipoRequiredExample ValueDescripción
item_namestringExample FamilyThe name of the product (ticket)
affiliationstringSupplierNameThe name of the client’s website
currencystringEURThe currency of the products (tickets) associated with the event (in 3-letter ISO 4217 format)
item_categorystringNobilleteThe ticket category
item_variantstringNobilleteThe type of the product - ticket or upsell (extra). Possible values: ‘ticket’ or ‘extra’
pricenumberNo23.72The monetary price of the product (ticket), in units of the specified currency parameter.
quantitynumberNo2Item 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

¿Le ha resultado útil este artículo?

Comparte tu opinión

Cancelar

Gracias.