Analytics Tracking and The Data Layer

The Thirstie EComm Vue components push structured events to window.dataLayer automatically at key points in the shopping flow. The table below lists every event name and the moment it is triggered.

Event Name	When the event is triggered	Data tracked
age_gate	user passes age gate	age gate type ("dob" vs "yesno")
enter_address	user enters an address	zipcode for address
validate_address	user valid address is validated and in coverage	zipcode for address
unavailable_address	user enters an unavailable address	zipcode for address
enter_promo_code	valid promo code is entered	promo_code entered
remove_promo_code	valid promo code is removed	promo_code removed
invalid_promo_code	an invalid promo code is entered during payment	promo_code entered
view_item_list	product list is shown on the page	ecommerce payload
view_item	product detail page (PDP) is shown	ecommerce payload
cart_loaded	on each page load if the user has an active shopping cart	ecommerce payload
add_to_cart	product is added to the cart	ecommerce payload
remove_from_cart	product is removed from the cart	ecommerce payload
view_cart	user views their shopping cart	ecommerce payload
begin_checkout	the checkout process starts	ecommerce payload
add_shipping_info	shipping information is completely entered	ecommerce payload
add_payment_info	user submits payment details	ecommerce payload
purchase	user completes a purchase	ecommerce payload

Ecommerce Payload Schema

ecommerce: {
    currency: "USD",
    value: 79.98, // Total cart value
    cart_id: "CART12345",
    items: [
      {
        item_id: "SKU_12345",
        item_name: "Example Product 1",
        affiliation: "Example Store",
        price: 29.99,
        quantity: 1,
        item_brand: "Brand A",
        item_category: "Category A",
        item_variant: "Variant 1"
      },
      {
        item_id: "SKU_12346",
        item_name: "Example Product 2",
        affiliation: "Example Store",
        price: 49.99,
        quantity: 1,
        item_brand: "Brand B",
        item_category: "Category B",
        item_variant: "Variant 2"
      }
    ]
  }

About Google Tag Manager (GTM)

Google Tag Manager (GTM) is a tag management system that lets you add and update tracking scripts on your site without modifying code directly. It works through a JavaScript array called the data layer — a shared communication channel between your site and GTM. When something meaningful happens (a product is viewed, an item is added to cart, a purchase completes), your site pushes an event object onto the data layer. GTM listens for those events and uses them to fire the appropriate tags, such as Google Analytics or Meta Pixel, based on rules you define in the GTM interface.