❗️

This only applies to Non-Shopify checkouts. Any merchants using Shopify’s checkout have these events handled automatically by Elevar.

Checkout Funnel Events

What you’ll need to implement and push into the data layer at the correct times are the following events. Keep in mind that these events can fire multiple times if a user abandons the checkout funnel and returns to resume their checkout journey.

1. Begin Checkout: The dl_begin_checkout event will need to be sent when a user begins the checkout funnel.
2. Add Shipping Info: The dl_add_shipping_info event will need to be sent when a user chooses their shipping method.
3. Add Payment Info: The dl_add_payment_info event will need to be sent when a user completes adding their payment info.
4. Purchase: The dl_purchase event will need to be sent when a user completes their purchase.

Base Event

• User Data dl_user_data: The base event that should be fired before any other event, and on all virtual page changes.

Checkout Steps

• The Begin checkout event dl_begin_checkout: Should fire when a user enters the checkout funnels. This event can be sent multiple times if the user leaves and revisits the first checkout step.
• The Add Shipping Info event dl_add_shipping_info : Should fire when a user chooses their shipping method. This event can be sent multiple times if a user leaves the checkout and comes back to the shipping method step and completes it.
• The Add Payment Info event dl_add_payment_info: Should fire when a user completes adding their payment info. This event can be sent multiple times if a user leaves the checkout and comes back to the payment method step and completes it.

Purchase Event

• The Purchase event dl_purchase: Should fire when a user completes their purchase. This event should only ever be sent once for each purchase.

Event Examples:

let products = [];
let userProperties = {};

/** Elevar Base Data Layer **/
// Should be fired before all other events and on virtual page change
window.ElevarDataLayer.push({
	event: "dl_user_data",
	cart_total: "100.00",
	user_properties: userProperties, // See user properties object below
	ecommerce: {
		currencyCode: "USD",
		cart_contents: {
			products: products // See the products array below
		}
	}
});

/** Begin Checkout **/
window.ElevarDataLayer.push({
    event: "dl_begin_checkout",
    user_properties: userProperties,
    marketing: {
        landing_site: "https://example.com/store/product-a?utm_source=web&utm_campaign=spring" // The first page that the user landed on when they visited your site with query parameters
    },
    ecommerce: {
        currencyCode: "USD",
        checkout: {
            actionField: {
                step: "1"
            },
            products: products,
        }
    }
});

/** Add Shipping Info **/
window.ElevarDataLayer.push({
    event: "dl_add_shipping_info",
    marketing: {
        landing_site: "https://example.com/store/product-a?utm_source=web&utm_campaign=spring"// The first page that the user landed on when they visited your site with query parameters,
    },
    user_properties: userProperties,
    ecommerce: {
        currencyCode: "USD",
        checkout: {
            actionField: {
                step: "2"
            },
            products: products,
        }
    }
});

/** Add Payment Info **/
window.ElevarDataLayer.push({
    event: "dl_add_payment_info",
    marketing: {
        landing_site: "https://example.com/store/product-a?utm_source=web&utm_campaign=spring"// The first page that the user landed on when they visited your site with query parameters,
    },
    user_properties: userProperties,
    ecommerce: {
        currencyCode: "USD",
        checkout: {
            actionField: {
                step: "3"
            },
            products: products,
        }
    }
});

/** Purchase **/
window.ElevarDataLayer.push({
    event: "dl_purchase",
    marketing: {
        landing_site: "https://example.com/store/product-a?utm_source=web&utm_campaign=spring"// The first page that the user landed on when they visited your site with query parameters,
    },
    user_properties: userProperties,
    ecommerce: {
        currencyCode: "USD",
        purchase: {
            actionField: {
                id: "4835925655784", // Order ID
                order_name: "#1005", // Order User-Friendly ID
                revenue: "185.3", // Revenue
                tax: "15.3",
                shipping: "0.0",
                affiliation: "staging-fully-managed-ga4-all-events", // Store name
                sub_total: "170.0", // Sub total
                product_sub_total: "170.0", // Product Sub total
                discount_amount: "0.0"
            },
            products: products
        }
    }
});

Reference:

/** Products Array **/
const products = [
	{
		id: "LB00161-34689553170476", // SKU
    name: "Lovebox Original Color & Photo", // Product title
    brand: "Lovebox INC",
    category: "Home,Living,Art & Objects,Tabletop",
    variant: "USA wall plug",
    price: "119.99",
    quantity: "1", // Not required for dl_select_item & dl_view_item
		position: "1", // Position in checkout starting at 1
    list: "/art/wallhangings", // The list the product was discovered from
    product_id: "6979886940352", // The product_id
    variant_id: "41141193965760", // id or variant_id
    compare_at_price: "139.99", // If available on dl_view_item & dl_add_to_cart otherwise use "0.0"
    image: "//cdn.shopify.com/small.png", // If available, otherwise use an empty string
		inventory: "5" // If available, only required on dl_view_item
	},
  ...
]

/** User Properties Object **/
// The majority of this information can only be retrieved for a logged in user
const userProperties = {
	// The following fields aren't required if unavailable
  customer_address_1: "1 Hills Plantation Drive",
	customer_address_2: "",
	customer_city: "Charleston",
	customer_country: "United States",
	customer_email: "[email protected]",
	customer_first_name: "Bill",
	customer_id: "5928549548188",
	customer_last_name: "Call",
	customer_order_count: "1",
	customer_phone: "999-999-9999",
	customer_province: "South Carolina",
	customer_province_code: "SC",
	customer_tags: "",
	customer_total_spent: "0.0",
	customer_zip: "22222",

  // The following fields are required 
	user_consent: "", // Use an empty string
	visitor_type: "logged_in" // "logged_in" || "guest"
}