π‘ Be sure to review the Changelog to ensure that the events you are tracking are up to date.
How Tracking is Implemented
π NOTE
Ventrata Checkout using DataLayer implementation according to Google Documentation.
This article provides a comprehensive guide for setting up event tracking using Google Tag Manager (GTM) and Google Analytics 4 (GA4). You will learn how to configure and track various core and custom events, allowing you to capture meaningful interactions throughout the customer journey in the checkout process.
Ventrata's checkout system allows clients to track customer actions using a combination of Core Events and Custom Events. These events enable data collection and insights into customer behaviour, enabling clients to optimise the checkout process.
Core Events
Events that are always triggered regardless of the product or checkout configuration.
Event | Description |
| fired when the customer views an initial or subsequent items |
| triggered when the customer adds a product to the cart |
| sent when the customer views their cart, reviewing items before proceeding to checkout |
| fired when the customer starts the checkout process |
| sent when the customer enters their payment information |
| triggered when the customer enters their payment information |
| fired when the transaction is completed and payment is confirmed |
Custom Events
Optional events that are fired based on specific configurations, product features, and customer interactions.
Event | Description |
| fired when the customer selects Buy as a Gift Card option |
| triggered when a gift item is added to the cart |
| fired when the customer selects a specific unit or category, such as |
| sent when the customer selects a date for their booking |
| fired when the customer chooses a specific time slot for their booking |
| triggered when the customer opts to be notified about availability for a sold-out product |
| sent when the customer confirms their place on a waitlist |
| triggered when the customer upgrades their ticket |
| fired when the customer selects an additional product to purchase |
| triggered when the customer selects a pickup point for their booking |
| fired when the customer edits their booking |
| sent when the customer removes a booking from their cart |
GTM Setup
Prerequisites:
A website where you have access to add GTM and GA4 tracking codes.
A Google Tag Manager account and container set up for your website.
A Google Analytics 4 property created in the Google Analytics admin console.
β
Install GTM
If you haven't installed GTM on your website, follow the instructions provided by Google.
Set up GA4 Configuration Tag
Create a new tag in GTM of type "Google Analytics: GA4 Configuration." Configure the tag with your GA4 Measurement ID.
Set up GA4 Event Tags
Create tags for each event you want to track (View Item, Custom Event, Add To Cart, View Cart, Begin Checkout, Add Payment Info, Purchase). For each tag, set the 'Event Name' and any additional 'Event Parameters' required.
Set up Triggers
Create triggers that will fire the respective tags based on user interactions or events on your website.
β
Each recommended event by Google has an example tag configuration as shown in this Purchase event example.
β
Glossary
π TIP
We recommended you also check this documentation from Google.
Global Parameters
Parameter | Description | Example |
| name of the event being tracked |
|
| default value |
|
| timestamp when the event was triggered |
|
E-commerce Object Parameters
Parameter | Description | Example |
| name of the event being tracked |
|
| information associated with the event, especially with custom events |
|
| name of the promotion / coupon |
|
| currency of the items associated with the event |
|
| detailed information about products / options | See Item Parameters Table below |
| detailed information about extras | See Extra Parameters Table below |
| monetary value of the event - revenue (tax excluded) |
|
| tax applied to the booking |
|
| unique identifier assigned to the transaction |
|
| detailed information about the contact details filled in by the customer | See Customer Parameters Table below |
| quantity of the product selected |
|
| mode of the checkout, which can be either |
|
| timestamp when the event was triggered |
|
| language selected by the customer |
|
| type of payment method used |
|
Item Parameters
Parameter | Description | Example |
| unit ID |
|
| product name in the default language |
|
| option name in the default language |
|
| unit name in the default language |
|
| travel date |
|
| travel time |
|
| tour group type in the default language |
|
| unique identifier assigned to the product |
|
| unique identifier assigned to the product option |
|
| boolean value indicating whether cross-sell was enabled |
|
| product price |
|
| product discount |
|
| product quantity |
|
| tax applied to the booking |
|
| boolean value indicating whether the product can be booked on multiple dates |
|
| if the product is a package, an array of products will be listed here | See Packages Parameters Table below |
| if pickup is available to the customer, its details will be listed here | See Packages Parameters Table below |
Extra Parameters
Parameter | Description | Example |
| extra ID |
|
| extra name in the default language |
|
| extra price |
|
| extra quantity |
|
Customer Parameters
Parameter | Description | Example |
| name entered in the contact form |
|
| last name entered in the contact form |
|
| email entered in the contact form | |
| phone number entered in the contact form |
|
| country picked from the list in the contact form |
|
| postal code entered in the contact form |
|
Packages Parameters
Parameter | Description | Example |
| product name of an include within a package in the default language |
|
| option name of an included product within a package in the default language |
|
| unit name of an included product within a package in the default language |
|
| travel date within a package |
|
| travel time within a package |
|
| tour group type within a package in the default language |
|
Questions Parameters
Parameter | Description | Example |
| question asked of the customer in the default language |
|
| answer provided by the customer the question |
|
Pickups Parameters
Parameter | Description | Example |
| information associated with the event, especially with custom events in the default language |
|
| pickup name in the default language |
|
| option name for the pickup in the default language |
|
β
Test Checkout
π TIP
You can test the checkout with a fictional product and use Adyen test cards for card payments.
Event Tracking Implementation
View Item
Triggered when a customer views a product within the Ventrata checkout widget.
This event is fired as soon as the checkout window opens (either in pop-up or embedded mode)
In embedded mode, this event fires every time the customer visits the page with the checkout embedded, which can result in multiple
view_item
events during a single sessionIn pop-up mode, this event is fired when the customer actively clicks on the Book Now button or does an equivalent action to open the checkout
Event Body
Event Body
Execute the following code to track the Tickets step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "view_item",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"item_category": "6 seater car",
"price": 400,
"tax": 0,
"discount": 0,
"quantity": 1,
"extras": [],
"crossSell": false
}
],
"extras": []
},
"custom_timestamp": "2024-09-13T10:42:23.616Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 26
})
View_gift_item
Tracks when the customer buys a gift using the widget.
Event Body
Event Body
Execute the following code when the customer clicks on the Buy as a gift card link:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "view_gift_item",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"item_category": "6 seater car",
"price": 400,
"tax": 0,
"discount": 0,
"quantity": 1,
"extras": [],
"crossSell": false
}
],
"extras": []
},
"custom_timestamp": "2024-09-13T10:44:36.549Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 31
})
Gift_added_to_cart
Triggered when a customer adds a gift item or gift card to their cart.
Event Body
Event Body
Execute the following code when the customer clicks on the Continue button (after unit or amount selected) in the Gift step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "gift_added_to_cart",
"ecommerce": {
"checkout_mode": "popup",
"currency": "EUR",
"items": [
{
"item_id": "d75fb204-9bbe-465f-95a2-21945553c95e",
"item_name": "Gift card",
"item_variant": "",
"item_category": "",
"price": 400,
"gift_value": 400,
"gift": true,
"quantity": 1,
"extras": [],
"packages": []
}
],
"value": 400,
"tax": 0
},
"custom_timestamp": "2024-09-13T10:45:49.204Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 34
})
Select_unit
This event is triggered when the customer selects a unit (for example, a specific ticket type or package) during the checkout process.
Event Body
Event Body
Execute the following code when the customer clicks on the plus (+) button in the Tickets step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "select_unit",
"label": "6 seater car",
"checkout_mode": "popup",
"crossSell": false,
"custom_timestamp": "2024-09-13T10:43:29.796Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 27
})
Select_date
Tracks when the customer selects a date for their booking.
Event Body
Event Body
Execute the following code when the customer selects a date:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "select_date",
"label": "2024-09-17",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"checkout_mode": "popup",
"crossSell": false,
"custom_timestamp": "2024-09-13T10:43:30.060Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 28
})
Select_time
Tracks when the customer selects a time slot for their booking.
Event Body
Event Body
Execute the following code when the customer selects a time slot:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "select_time",
"label": "15:30:00",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"checkout_mode": "popup",
"crossSell": false,
"custom_timestamp": "2024-09-13T10:43:30.060Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 29
})
Notify_me
This event can be used to measure the demand for certain dates or products, and helps avoid lost sales. This event tracks when the customer opts to be notified about product availability for a date or time that is currently unavailable.
Event Body
Event Body
Execute the following code when the customer clicks the Notify me button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "notify_me",
"ecommerce": {
"checkout_mode": "popup",
"currency": "CZK",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"item_name": "Kathmandu",
"item_variant": "Kathmandu",
"item_category": "Adult",
"item_category2": "2024-09-30",
"price": 0,
"quantity": 1,
"extras": []
}
],
"value": 0,
"tax": 0
},
"gtm.uniqueEventId": 31
})
Wait_list_confirmed
Triggered when a customer confirms their spot on a waitlist for a sold-out product.
Event Body
Event Body
Execute the following code when the customer click on the Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "wait_list_confirmed",
"ecommerce": {
"checkout_mode": "popup",
"currency": "CZK",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"item_name": "Kathmandu",
"item_variant": "Kathmandu",
"item_category": "Adult",
"item_category2": "2024-09-30",
"price": 0,
"quantity": 1,
"extras": []
}
],
"value": 0,
"tax": 0
},
"customer": {
"firstName": "Karel",
"lastName": "Fisher",
"emailAddress": "[email protected]"
},
"gtm.uniqueEventId": 36
})
Add_to_cart
Tracks when the customer clicks on the Continue button (after unit, date and time is selected) identifying the action that corresponds to adding an item to the cart in the Tickets step.
Event Body
Event Body
Execute the following code when the customer clicks on the Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "add_to_cart",
"ecommerce": {
"checkout_mode": "popup",
"currency": "EUR",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"item_category": "6 seater car",
"item_category2": "2024-09-17",
"item_category3": "15:30:00",
"price": 400,
"tax": 0,
"discount": 0,
"quantity": 1,
"extras": []
}
],
"value": 400,
"tax": 0
},
"custom_timestamp": "2024-09-13T10:52:26.206Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 48
})
Upgrade_ticket
This event tracks when the customer decides to upgrade their product.
Event Body
Event Body
Execute the following code when the customer clicks the Upgrade button in the Upgrade Your Experience step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "upgrade_ticket",
"label": "Kathmandu",
"checkout_mode": "popup",
"custom_timestamp": "2024-09-13T10:55:54.310Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 49
})
π NOTE
In case of an upgrade, all subsequent item_name
variables must contain the upgraded ticket information instead of the original one.
Cross-sell
Triggers when the customer selects additional products or services (cross-sell) during the booking process.
Event Body
Event Body
Execute the following code when the customer clicks on the Book now button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "cross-sell",
"label": "Mount Everest - Breathing course",
"checkout_mode": "popup",
"custom_timestamp": "2024-09-13T10:59:54.062Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 72
})
Select_question
This event is triggered when the customer answers any question(s) at the Questions step.
Event Body
Event Body
Execute the following code when the customer answers a question(s) and clicks on the Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "select_question",
"crossSell": false,
"questions": [
{
"question": "Feedback",
"answer": "Good"
}
],
"custom_timestamp": "2024-09-13T10:56:45.071Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 58
})
Select_pickup
This event is triggered when the customer selects a pickup locations at the Select Pickup step.
Event Body
Event Body
Execute the following code when the customer selects a pickup location for their booking and clicks on Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "select_pickup",
"label": "Hotel Bishram",
"pickups": [
{
"label": "Hotel Bishram",
"item_name": "Mount Everest",
"item_variant": "Mount Everest - Ascent to Camp 3"
}
],
"checkout_mode": "popup",
"crossSell": false,
"custom_timestamp": "2024-09-13T10:59:01.871Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 70
})
View_cart
Identify the event on your website that corresponds to viewing the cart or basket.
Event Body
Event Body
Execute the following code to track the Cart Summary section in the Checkout step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "view_cart",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"item_category": "6 seater car",
"item_category2": "2024-09-13",
"item_category3": "15:30:00",
"price": 400,
"tax": 0,
"discount": 0,
"quantity": 1
}
],
"value": 400,
"tax": 0
},
"custom_timestamp": "2024-09-13T11:01:48.869Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 85
})
π NOTE
Note that in the desktop version, both the view_cart
event and the begin_checkout
event must be fired from the Checkout page. In the mobile version, these two sections are on separate screens, so the view_cart
and begin_checkout
events are also triggered from different screens.
Begin_checkout
Identify the event on your website that corresponds to initiating the checkout process.
Event Body
Event Body
Execute the following code to track the Checkout step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "begin_checkout",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
"product_id": "69f07800-0b30-4824-b462-09a7f195295b",
"item_name": "Chitwan National Park",
"option_id": "DEFAULT",
"item_variant": "Chitwan National Park",
"item_category": "6 seater car",
"item_category2": "2024-09-18",
"item_category3": "14:30:00",
"price": 400,
"tax": 0,
"discount": 0,
"quantity": 1
}
],
"value": 400,
"tax": 0
},
"custom_timestamp": "2024-09-13T11:01:48.870Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 86
})
π NOTE
Note that in the desktop version, both the view_cart
event and the begin_checkout
event must be fired from the Checkout page. In the mobile version, these two sections are on separate screens, so the view_cart
and begin_checkout
events are also triggered from different screens.
Edit_booking
Triggered when the customer edits their booking.
Event Body
Event Body
Execute the following code when the customer clicks on the Edit button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "edit_booking",
"label": "Mount Everest",
"checkout_mode": "popup",
"custom_timestamp": "2024-09-13T11:03:14.478Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 105
})
Remove_booking
Triggered when the customer deletes their booking.
Event Body
Event Body
Execute the following code when the customer clicks on the Remove button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "remove_booking",
"label": "Mount Everest",
"checkout_mode": "popup",
"custom_timestamp": "2024-09-13T11:05:18.045Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 111
})
Create_or_update_order
Triggered when the customer filled in all essential contact details, ticked off all mandatory fields and continues to payment.
Event Body
Event Body
Execute the following code when the customer clicks on the Pay Now button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "create_or_update_order",
"ecommerce": {
"coupons": [],
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_2e1348c9-32c3-478a-9983-395bdd0267c8",
"product_id": "d60965be-a76a-410f-8e88-2f839aeecfbd",
"item_name": "Mount Everest - Breathing course",
"option_id": "1e143307-1ef3-4d3a-8005-b9adb3e54d5b",
"item_variant": "Camp 2",
"item_category": "Adult",
"item_category2": "2024-09-19",
"item_category3": "00:00:00",
"crossSell": false,
"multidate": false,
"price": 5,
"tax": 0,
"discount": 0,
"quantity": 1,
"extras": [],
"packages": []
}
],
"quantity": 1,
"extras": [],
"value": 5,
"tax":
},
"custom_timestamp": "2024-09-13T11:05:48.573Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 117
})
Add_payment_info
Determine the event on your website that corresponds to the customers adding their payment information during checkout.
Event Body
Event Body
If it is not an external page, execute the following code when the user selects the payment method on the Payment page:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "add_payment_info",
"payment_type": "Cards",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_2e1348c9-32c3-478a-9983-395bdd0267c8",
"product_id": "d60965be-a76a-410f-8e88-2f839aeecfbd",
"item_name": "Mount Everest - Breathing course",
"option_id": "1e143307-1ef3-4d3a-8005-b9adb3e54d5b",
"item_variant": "Camp 2",
"item_category": "Adult",
"item_category2": "2024-09-19",
"item_category3": "00:00:00",
"price": 5,
"tax": 0,
"discount": 0,
"quantity": 1
}
],
"value": 5,
"tax": 0
},
"custom_timestamp": "2024-09-13T11:05:52.151Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 118
})
Purchase
Identify the event on your website that corresponds to completing a purchase.
Event Body
Event Body
Use the code below when the Thank you page is displayed to trace a successful purchase:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
"event": "purchase",
"ecommerce": {
"currency": "EUR",
"checkout_mode": "popup",
"items": [
{
"item_id": "unit_2e1348c9-32c3-478a-9983-395bdd0267c8",
"product_id": "d60965be-a76a-410f-8e88-2f839aeecfbd",
"item_name": "Mount Everest - Breathing course",
"option_id": "1e143307-1ef3-4d3a-8005-b9adb3e54d5b",
"item_variant": "Camp 2",
"item_category": "Adult",
"item_category2": "2024-09-19",
"item_category3": "00:00:00",
"price": 5,
"tax": 0,
"discount": 0,
"quantity": 1
}
],
"value": 5,
"tax": 0,
"transaction_id": "89f95f70-76e1-4ad1-bb87-64ec957a52b2",
"transaction_type": "ventrata"
},
"customer": {
"first_name": "Karel",
"last_name": "Fisher",
"email": "[email protected]",
"mobile": "+4201234567899",
"country": "CZ"
},
"custom_timestamp": "2024-09-13T11:09:22.706Z",
"preferred_locale": "en",
"gtm.uniqueEventId": 119
})
π NOTE
The 'Transaction ID' is the precise unique identifier assigned to each order. On the Bookings > Orders page, press the Show Columns button and add 'ID' to your view. The 'Order ID' is the same as the 'Transaction ID' (Transaction ID = Order ID
).
How do you Know if the Web Checkout is Sending Data
You can use a browser extension which is capable of checking the data layer, for example, Datalyer checker.
β
Publish and Test
After configuring all the tags, triggers, and parameters, save and publish your GTM container to make the changes live on your website.
β
Test the tracking implementation by performing the relevant actions on your website and verifying whether the events are being tracked in GA4.
β
Verify Data in GA4
Once the data is being sent to GA4, log in to your GA4 property and navigate to the reporting section.
β
Use Event reports to analyse and verify that the tracked events are being recorded correctly.
β
Regularly review and update your GTM container as needed to ensure accurate tracking and accommodate any changes in your website or event tracking requirements.
Changelog
Last update | Changelog |
17.9.2024 | 2.0.2 - updated list of events and event bodies |
18.12.2023 | 2.0.1 - added quantity under e-commerce |
12.12.2023 | 2.0.0 - new items structure added + questions, pickups, extras |
4.8.2023 | 1.0.4 - added to docs concrete json examples |
20.7.2023 | 1.0.3 - added customer information into purchase event |
29.6.2023 | 1.0.2 - price for an item is shown per unit (not a total) |
28.6.2023 | 1.0.1 - added 1 count to quantity for view_item event |
22.5.2023 | 1.0.0 - First Version |
β