Tracking Manual
How is tracking implemented?
Ventrata Checkout using DataLayer implementation according to Google Documentation.
This article outlines the process of setting up tracking via Google Tag Manager (GTM) into Google Analytics 4 (GA4). You will learn how to implement various events, including
View Item
Custom Events
Add to Cart
View Cart
Begin Checkout
Add Payment Info
Purchase
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.
GTM Setup
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
We recommended you also check this documentation from Google.
Test Checkout
You can test the checkout with a fictional product and use Adyen test cards for card payments.
Event Tracking Implementation
View Item
Identify the event on your website that corresponds to viewing an item, such as a product detail page.
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",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 2",
item_category: "Adult - Unskilled",
item_category2: "",
item_category3: "",
item_category4: "",
price: 55,
discount: 0,
quantity: 1,
extras: []
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 2",
item_category: "Adult - Skilled",
item_category2: "",
item_category3: "",
item_category4: "",
price: 30,
discount: 0,
quantity: 1,
extras: []
},
{
item_id: "unit_7b4d30e3-82de-4828-9ded-54836f4c522a",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 2",
item_category: "Group - Private",
item_category2: "",
item_category3: "",
item_category4: "",
price: 50,
discount: 0,
quantity: 1,
extras: []
}
]
},
gtm.uniqueEventId: 9
}
Custom Events - Select Unit
Execute the following code when the user clicks on the plus (+) button in the Tickets step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_unit",
label: "Adult - Skilled",
}
Custom Event - Select Date
Execute the following code when the user selects a date:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_date",
label: "2023-12-12",
}
Custom Event - Select Time
Execute the following code when the user selects the time:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_time",
label: "09:00:00"
}
Add To Cart
Identify the event on your website that corresponds to adding an item to the cart.
Execute the following code when the user clicks on the Continue button (after unit, date and time is selected) in the Tickets step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "add_to_cart",
ecommerce: {
currency: "EUR",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 2",
item_category: "Adult - Unskilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 55,
discount: 0,
quantity: 2,
extras: [
{
id: "extra_330c1c32-cd9d-4c7c-b216-04857e514c68",
name: "Crampons and Ice-Axe",
price: 2,
quantity: 2
}
]
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 2",
item_category: "Adult - Skilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 30,
discount: 0,
quantity: 1,
extras: []
}
],
value: 144,
extras: []
},
gtm.uniqueEventId: 27
}
Custom Event - Select Pickup
Execute the following code when the user selects a pickup and clicks the Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_pickup",
label: "Lukla-Airport",
}
Custom Event - Select Questions
Execute the following code when the user selects a pickup and clicks the Continue button:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "select_question",
questions: [
{
question: "Confirmation that you are in good health is required.",
answer: "I understand",
unit_name: null
},
{
question: "Please select how you wish to travel to Base Camp",
answer: "With a tour guide on foot",
unit_name: null
},
{
question: "Do you have any special dietary requirements or do you suffer from any allergies?",
answer: "vegetarian",
unit_name: null
},
{
question: "How did you hear about our travel agency?",
answer: "Google",
unit_name: null
}
],
gtm.uniqueEventId: 16
}
Custom Event - Upgrade Ticket
Execute the following code when the user 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: "Mount Everest - Ascent to Camp 3",
}
Note that in case of an Upgrade, all subsequent item_name variables must contain the upgraded ticket information instead of the original one.
View Cart
Identify the event on your website that corresponds to viewing the cart or basket. 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: {
coupons: [],
currency: "EUR",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Unskilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 70,
discount: 0,
quantity: 2,
extras: [
{
id: "extra_330c1c32-cd9d-4c7c-b216-04857e514c68",
name: "Crampons and Ice-Axe",
price: 2,
quantity: 2
}
]
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Skilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 55,
discount: 0,
quantity: 1,
extras: []
}
],
extras: [],
value: 199
},
gtm.uniqueEventId: 42
}
Note that in the desktop version, both the “view_cart” event and the “begin_checkout” event must be fired on 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. Execute the following code to track the Checkout step:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "begin_checkout",
ecommerce: {
coupons: [],
currency: "EUR",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Unskilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 70,
discount: 0,
quantity: 2,
extras: [
{
id: "extra_330c1c32-cd9d-4c7c-b216-04857e514c68",
name: "Crampons and Ice-Axe",
price: 2,
quantity: 2
}
]
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Skilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 55,
discount: 0,
quantity: 1,
extras: []
}
],
extras: [],
value: 199
},
gtm.uniqueEventId: 48
}
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.
Add Payment Info
Determine the event on your website that corresponds to users adding their payment information during checkout. 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({
payment_type: "Cards",
event: "add_payment_info",
ecommerce: {
coupons: [],
currency: "EUR",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Unskilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 70,
discount: 0,
quantity: 2,
extras: [
{
id: "extra_330c1c32-cd9d-4c7c-b216-04857e514c68",
name: "Crampons and Ice-Axe",
price: 2,
quantity: 2
}
]
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Skilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 55,
discount: 0,
quantity: 1,
extras: []
}
],
extras: [],
value: 199
},
gtm.uniqueEventId: 49
}
Purchase
Identify the event on your website that corresponds to completing a purchase. To trace the successful purchase, use the code below when the Thank you page is displayed:
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
coupons: [],
currency: "EUR",
items: [
{
item_id: "unit_2b1e6f4e-c69b-40d1-bc2e-31872df4d535",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Unskilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 70,
discount: 0,
quantity: 2,
extras: [
{
id: "extra_330c1c32-cd9d-4c7c-b216-04857e514c68",
name: "Crampons and Ice-Axe",
price: 2,
quantity: 2
}
]
},
{
item_id: "unit_463310ca-f53d-4e98-8ba3-dbc78a765932",
item_name: "Mount Everest",
item_variant: "Mount Everest - Ascent to Camp 3",
item_category: "Adult - Skilled",
item_category2: "2023-12-12",
item_category3: "09:00:00",
item_category4: "",
price: 55,
discount: 0,
quantity: 1,
extras: []
}
],
quantity: 3,
extras: [],
value: 199,
tax: 18.08,
transaction_id: "3918ba5e-3da8-45ac-8fa1-23fb3949983d"
},
customer: [
{
first_name: "Test",
last_name: "Ventrata",
email: "jan@ventrata.com",
mobile: "+420123456789",
country: "CZ",
postal_code: null,
type: "Order"
}
],
gtm.uniqueEventId: 50
}
The 'Transaction ID' is the precise unique identifier for 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.
Updated on: 02/05/2024
Thank you!