Articles on: New Web Checkout

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
}



View Item

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",
}


Select Unit


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",
}


Select Date


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


Select Time

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
}


Add to Cart


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",
}


Select Pickup


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
}


Select Questions

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",
}


Upgrade Ticket

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
}


View Cart

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
}


Payment


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
}


Purchase


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: 01/03/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!