Tracking Breeze Checkout Events in CustomerLabs

Breeze is a popular one-click checkout platform that helps improve eCommerce conversions, but many users face challenges with event tracking and data accuracy on Meta because,

The top-funnel events (Page view, View Content, Add to Cart) are triggered by Shopify’s tracking scripts
The bottom-funnel events (Initiate Checkout, Add Payment Info, and Purchase) are triggered by Breeze’s scripts.

This causes a break in user journey and thus the data feeding the ad platform’s algorithm is incomplete.

By leveraging CustomerLabs’ first-party data (1PD) platform, businesses can implement server-side tracking via Meta’s Conversions API, overcoming Breeze’s native tracking restrictions. This ensures more accurate event data, reduces data loss, and improves ad attribution and campaign optimization on Meta and Google Ads.

Prerequisites

GTM container is installed on the website
Publish Access to Google Tag Manager container which is installed on your website.
Breeze Checkout events (Events for Checkout initiated, Add payment info, and Purchase) should be pushed into the datalayer.

Verifying if events are pushed into the datalayer

Visit your website and right-click anywhere on your website and select Inspect.
Go to the Console tab.
Perform all the website actions like adding products to cart, checkout, and purchase.

After completing the test, type dataLayer (case-sensitive) and press Enter.

JavaScript

dataLayer

checking customerlabs events in datalayer

checking customerlabs events in datalayer-2

Check the console for the events being pushed into the datalayer. You should be able to see the following events being pushed into the datalayer:
- checkout-init
- payment-screen
- order-placed

Verification of Google Tag Manager Installation on your website

Visit your website and right-click anywhere on your website and select Inspect.
Go to the Console tab.
Type google_tag_manager (case-sensitive) and press Enter.
Click the small arrow to open the object.
Check the object to find if any key matches with your GTM container ID GTM-XXXXXXX.

JavaScript

google_tag_manager

customerlabs google-tag-manager installation

Setting up of CustomerLabs Events in GTM

Configuring the Checkout made event

Configuring the tag

Open Google Tag Manger and click Tags → New Tag.
Enter Tag Name: CL_initiate_checkout and click on the tag configuration.
Choose custom HTML and paste the code given below:

HTML

<script>
function clProductsConversion(productsData){
    var products = [];
    for(var cli in  productsData){
        var product = productsData[cli];
        var newproduct = {};
        for(prodkey in product){
            switch(prodkey){
                case "item_id":
                    newproduct["product_id"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_name":
                    newproduct["product_name"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "price":
                    newproduct["product_price"] = {
                        t: "number",
                        v: product[prodkey]
                    };
                    break;

                case "item_brand":
                    newproduct["product_brand"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_category":
                    newproduct["product_category"] ={
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "quantity":
                    newproduct["product_quantity"]= {
                        t: "number",
                        v: product[prodkey]
                    }
                    break;

                case "item_variant":
                    newproduct["product_variant"] = {
                        t: "string",
                        v: product[prodkey]
                    }
                    break;

                case "coupon":
                    newproduct["coupon"] = {
                        t: "number",
                        v: product["coupon"]
                    }
                    break;
            }
        }
        products.push(newproduct);
    }
    return products;
};

if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
    var data = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce");

    var properties = {}
    if (data) {
        properties["customProperties"] = {
            "currency": {
                "t": "string",
                "v": (data.currency || "INR")
            },
            "value":{
                "t": "number",
                "v": data.value,
            },
            "coupon": {
                "t": "string",
                "v": data.coupon,
            },
            "content_type": {
                "t": "string",
                "v": "product_group"
            }
        }
        properties["productProperties"] = clProductsConversion(data.items)
        _cl.trackClick("Checkout made", properties)
    }
}
</script>

Configuring the trigger

Click the triggering section → click on the + icon
Enter the trigger name: cl_initiate_checkout and click the trigger configuration.
Choose the trigger type as Custom event and enter the event name as checkout-init.
Set the trigger to fire on All Custom Events → Click Save.
Click Save in the tag section.

Configuring the Add payment info event

Configuring the tag

Open Google Tag Manger and click Tags → New Tag.
Enter Tag Name: cl_add_payment_info and click on the tag configuration.
Choose custom HTML and paste the code given below:

HTML

<script>
function clProductsConversion(productsData){
    var products = [];
    for(var cli in productsData){
        var product = productsData[cli];
        var newproduct = {};
        for(prodkey in product){
            switch(prodkey){
                case "item_id":
                    newproduct["product_id"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_name":
                    newproduct["product_name"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "price":
                    newproduct["product_price"] = {
                        t: "number",
                        v: product[prodkey]
                    };
                    break;

                case "item_brand":
                    newproduct["product_brand"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_category":
                    newproduct["product_category"] ={
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "quantity":
                    newproduct["product_quantity"]= {
                        t: "number",
                        v: product[prodkey]
                    }
                    break;

                case "item_variant":
                    newproduct["product_variant"] = {
                        t: "string",
                        v: product[prodkey]
                    }
                    break;

                case "coupon":
                    newproduct["coupon"] = {
                        t: "number",
                        v: product["coupon"]
                    }
                    break;
            }
        }
        products.push(newproduct);
    }
    return products;
};

if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
    var data = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce");

    var properties = {}
    if (data) {
        properties["customProperties"] = {
            "currency": {
                "t": "string",
                "v": (data.currency || "INR")
            },
            "value":{
                "t": "number",
                "v": data.value,
            },
            "coupon": {
                "t": "string",
                "v": data.coupon,
            },
            "transaction_id": {
                "t": "string",
                "v" : data.transaction_id,
            },
            "paymentType":{
                "t": "string",
                "v" : data.paymentType,
            },
            "content_type": {
                "t": "string",
                "v": "product_group"
            }
        }
        properties["productProperties"] = clProductsConversion(data.items)
        _cl.trackClick("AddPaymentInfo", properties)
    }
}

var first_name = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("first_name");
var last_name = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("last_name");
var email = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("email");
var city = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("city");
var state = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("state");
var phone = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("phone_num");
var pincode = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("pincode");

var customProperties = {
    user_traits: {
        "t": "object",
        "v": {
            "first_name": {
                "t": "string",
                "v": first_name
            },
            "last_name": {
                "t": "string",
                "v": last_name
            },
            "phone": {
                "t": "string",
                "v": phone
            },
            "email": {
                "t": "string",
                "v": email
            },
            "city":{
                "t": "string",
                "v": city,
            },
            "state":{
                "t": "string",
                "v": state,
            },
            "zip":{
                "t": "string",
                "v": pincode,
            }
        }
    }
}

if(email && email != null && email != ""){
    customProperties["identify_by_email"] ={
        "t":"string",
        "v": email,
        "ib": true
    }
    if(phone && phone != null && phone != ""){
        customProperties["external_ids"] = {
            "t": "Object",
            "v": {
                "identify_by_phone": {
                    "t":"string",
                    "v": phone
                }
            }
        }
    }
}else if(phone && phone != null && phone != ""){
    customProperties["identify_by_phone"] = {
        "t":"string",
        "v": phone,
        "ib": true
    }
}

var properties = {
    customProperties: customProperties
}

if (phone || email) {
    _cl.identify(properties);
}
</script>

Configuring the trigger

Click the triggering section → click on the + icon
Enter the trigger name: cl_payment_screen and click the trigger configuration.
Choose the trigger type as Custom event and enter the event name as payment-screen.
Set the trigger to fire on All Custom Events → Click Save.
Click Save in the tag section.

Configuring the Purchased event

Configuring the tag

Open Google Tag Manger and click Tags → New Tag.
Enter Tag Name: CL-Purchased and click on the tag configuration.
Choose custom HTML and paste the code given below:

HTML

<script>
function clProductsConversion(productsData){
    var products = [];
    for(var cli in productsData){
        var product = productsData[cli];
        var newproduct = {};
        for(prodkey in product){
            switch(prodkey){
                case "item_id":
                    newproduct["product_id"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_name":
                    newproduct["product_name"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "price":
                    newproduct["product_price"] = {
                        t: "number",
                        v: product[prodkey]
                    };
                    break;

                case "item_brand":
                    newproduct["product_brand"] = {
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "item_category":
                    newproduct["product_category"] ={
                        t: "string",
                        v: product[prodkey]
                    };
                    break;

                case "quantity":
                    newproduct["product_quantity"]= {
                        t: "number",
                        v: product[prodkey]
                    }
                    break;

                case "item_variant":
                    newproduct["product_variant"] = {
                        t: "string",
                        v: product[prodkey]
                    }
                    break;

                case "coupon":
                    newproduct["coupon"] = {
                        t: "number",
                        v: product["coupon"]
                    }
                    break;
            }
        }
        products.push(newproduct);
    }
    return products;
};

if (((window.CLabsgbVar || {}).generalProps || {}).uid) {
    var data = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce");

    var properties = {}
    if (data) {
        properties["customProperties"] = {
            "currency": {
                "t": "string",
                "v": (data.currency || "INR")
            },
            "value":{
                "t": "number",
                "v": data.value,
            },
            "transaction_id": {
                "t": "string",
                "v" : data.transaction_id,
            },
            "coupon": {
                "t": "string",
                "v": data.coupon,
            },
            "content_type": {
                "t": "string",
                "v": "product_group"
            }
        }
        properties["productProperties"] = clProductsConversion(data.items)
        _cl.trackClick("Purchased", properties)
    }
}

var first_name = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("first_name");
var last_name = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("last_name");
var email = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("email");
var city = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("city");
var state = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("state");
var phone = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("phone_num");
var zip = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("pincode") || "";

var customProperties = {
    user_traits: {
        "t": "object",
        "v": {
            "first_name": {
                "t": "string",
                "v": first_name
            },
            "last_name": {
                "t": "string",
                "v": last_name
            },
            "phone": {
                "t": "string",
                "v": phone
            },
            "email": {
                "t": "string",
                "v": email
            },
            "city":{
                "t": "string",
                "v": city,
            },
            "state":{
                "t": "string",
                "v": state,
            },
            "zip":{
                "t": "string",
                "v": zip,
            }
        }
    }
}

if(email && email != null && email != ""){
    customProperties["identify_by_email"] ={
        "t":"string",
        "v": email,
        "ib": true
    }
    if(phone && phone != null && phone != ""){
        customProperties["external_ids"] = {
            "t": "Object",
            "v": {
                "identify_by_phone": {
                    "t":"string",
                    "v": phone
                }
            }
        }
    }
}else if(phone && phone != null && phone != ""){
    customProperties["identify_by_phone"] = {
        "t":"string",
        "v": phone,
        "ib": true
    }
}

var properties = {
    customProperties: customProperties
}

if (phone || email) {
    _cl.identify(properties);
}
</script>

Configuring the trigger

Click the triggering section → click on the + icon
Enter the trigger name as cl_purchase and click the trigger configuration.
Choose the trigger type as Custom event and enter the event name as order-placed.
Set the trigger to fire on All Custom Events → Click Save.
Click Save in the tag section.

Testing and Publishing the Code

Testing the GTM configuration

Install the CustomerLabs Pixel Helper Chrome Extension.
In Google Tag Manager, click on the Preview button.
Enter the website URL and click on the Connect button.
Perform actions on the website — from page view to purchase.
This will open GTM in preview mode, where you’ll be able to verify whether the configured tags (like cl_purchase, cl_payment_screen, etc.) are being triggered correctly during user actions on the website.
Using the CustomerLabs Pixel Helper, verify Checkout made, AddPaymentInfo, Purchased, Create User events are triggering.

Publishing the container

After verifying the events, click on the Submit button in the top-right corner of the Google Tag Manager interface.
Enter the version name and description.
Click on the Publish button.

Monitoring the events in CustomerLabs dashboard

To check the events: Go to CustomerLabs → Monitoring → Event Manager – Select the date range and check the events.
Here, you can verify whether the events are successfully received.

1PD Ops Platform

Signal Engineering

Industry solutions

Case studies

Schedule a 1-1 Demo

Tracking Breeze Checkout Events in CustomerLabs

Prerequisites

Verifying if events are pushed into the datalayer

Verification of Google Tag Manager Installation on your website

Setting up of CustomerLabs Events in GTM

Configuring the Checkout made event

Configuring the tag

Configuring the trigger

Configuring the Add payment info event

Configuring the tag

Configuring the trigger

Configuring the Purchased event

Configuring the tag

Configuring the trigger

Testing and Publishing the Code

Testing the GTM configuration

Publishing the container

Monitoring the events in CustomerLabs dashboard