Skip to content
CustomerLabs Docs

Tracking CashFree One-click Checkout Events in CustomerLabs

Cashfree One-click Checkout 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 Cashfree One-click Checkout’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 Fastrr’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

Section titled “Prerequisites”
  • GTM container is installed on the website
  • Publish Access to Google Tag Manager container which is installed on your website.
  • CashFree OCC 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

Section titled “Verifying if events are pushed into the datalayer”
  1. Visit your website and right-click anywhere on your website and select Inspect.
  2. Go to the Console tab.
  3. Perform all the website actions like adding products to cart, checkout, and purchase.
  1. After completing the test, type dataLayer (case-sensitive) and press Enter.
dataLayer
checking customerlabs events in datalayer
checking customerlabs events in datalayer-2
  1. 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:
    • cf_checkout_cart_load
    • cf_checkout_login
    • cf_checkout_address_collected
    • cf_checkout_transaction_initiate
    • purchase

Verification of Google Tag Manager Installation on your website

Section titled “Verification of Google Tag Manager Installation on your website”
  1. Visit your website and right-click anywhere on your website and select Inspect.
  2. Go to the Console tab.
  3. Type google_tag_manager (case-sensitive) and press Enter.
  4. Click the small arrow to open the object.
  5. Check the object to find if any key matches with your GTM container ID GTM-XXXXXXX.
google_tag_manager
customerlabs google-tag-manager installation

Setting up of CustomerLabs Events in GTM

Section titled “Setting up of CustomerLabs Events in GTM”

Configuring the Checkout made event

Section titled “Configuring the Checkout made event”

Configuring the tag

Section titled “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:
<script>
function clProductsConversion(productsData) {
    var products = [];
    for (var i in productsData) {
        var product = productsData[i];
        var newProduct = {};


        for (var key in product) {
            switch (key) {
                case "item_id":
                    newProduct["product_id"] = { t: "string", v: product[key] };
                    break;
                case "item_name":
                    newProduct["product_name"] = { t: "string", v: product[key] };
                    break;
                case "price":
                    newProduct["product_price"] = { t: "number", v: Number(product[key]) };
                    break;
                case "quantity":
                    newProduct["product_quantity"] = { t: "number", v: Number(product[key]) };
                    break;
                case "variant_id":
                    newProduct["product_variant"] = { t: "string", v: product[key] };
                    break;
            }
        }
        products.push(newProduct);
    }
    return products;
}


// Extract from GTM DataLayer
var ecommerceData = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce") || {};
var totalDiscount = 0;
if (Array.isArray(ecommerceData.cart_discounts)) {
    ecommerceData.cart_discounts.forEach(function(d) {
        if (d.amount) totalDiscount += Number(d.amount);
    });
}


// Build properties
var properties = {
    "customProperties": {
        "currency": { t: "string", v: ecommerceData.currency || "INR" },
        "value": { t: "number", v: Number(ecommerceData.value) || 0 },
        "total_discount": { t: "number", v: totalDiscount || 0 },
        "content_type": { t: "string", v: "product_group" }
    },
    "productProperties": clProductsConversion(ecommerceData.items || [])
};


// Fire "Checkout made" event
_cl.trackClick("Checkout made", properties);
</script>

Configuring the trigger

Section titled “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 cf_checkout_cart_load.
  • Set the trigger to fire on All Custom Events → Click Save.
  • Click Save in the tag section.

Configuring the Login event

Section titled “Configuring the Login event”

Configuring the tag

Section titled “Configuring the tag”
  • Open Google Tag Manger and click Tags → New Tag.
  • Enter Tag Name: “CL - checkout_login” and click on the tag configuration.
  • Choose custom HTML and paste the code given below:
<script>
// Extract phone number directly from GTM dataLayer
var phone = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.phone_number") || "";


// Remove spaces and non-digit characters (like + or spaces)
phone = phone.replace(/\s+/g, "").trim();


// Build user_traits object
var userTraitsObj = { "t": "Object", "v": {} };
if (phone) userTraitsObj.v["phone"] = { "t": "string", "v": phone };


// Construct identify payload
var userProperties = {
    "customProperties": {
        "user_traits": userTraitsObj
    }
};


// Identify by phone only (since no email)
if (phone) {
    userProperties["customProperties"]["identify_by_phone"] = {
        "t": "string",
        "v": phone,
        "ib": true
    };


    _cl.identify(userProperties);
    _cl.trackClick("cl_checkout_login", userProperties);
}
</script>

Configuring the trigger

Section titled “Configuring the trigger”
  • Click the triggering section → click on the + icon
  • Enter the trigger name: “cl_checkout_login” and click the trigger configuration.
  • Choose the trigger type as Custom event and enter the event name as cf_checkout_login.
  • Set the trigger to fire on All Custom Events → Click Save.
  • Click Save in the tag section.

Configuring the Add payment info event

Section titled “Configuring the Add payment info event”

Configuring the tag

Section titled “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:
<script>
var ecommerceData = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce") || {};
var totalDiscount = 0;
if (Array.isArray(ecommerceData.cart_discounts)) {
    ecommerceData.cart_discounts.forEach(function (d) {
        if (d.amount) totalDiscount += Number(d.amount);
    });
}


var properties = {
    "customProperties": {
        "currency": { t: "string", v: ecommerceData.currency || "INR" },
        "value": { t: "number", v: Number(ecommerceData.value) || 0 },
        "shipping_tier": { t: "string", v: ecommerceData.shipping_tier || "STANDARD" },
        "total_discount": { t: "number", v: totalDiscount || 0 },
        "content_type": { t: "string", v: "product_group" }
    }
};


// Track Add Payment Info
_cl.trackClick("AddPaymentInfo", properties);
</script>

Configuring the trigger

Section titled “Configuring the trigger”
  • Click the triggering section → click on the + icon
  • Enter the trigger name: “cl_add_payment_info” and click the trigger configuration.
  • Choose the trigger type as Custom event and enter the event name as cf_checkout_address_collected.
  • Set the trigger to fire on All Custom Events → Click Save.
  • Click Save in the tag section.

Configuring the Payment Initiated event

Section titled “Configuring the Payment Initiated event”

Configuring the tag

Section titled “Configuring the tag”
  • Open Google Tag Manger and click Tags → New Tag.
  • Enter Tag Name: “CL - Payment Initiated” and click on the tag configuration.
  • Choose custom HTML and paste the code given below:
<script>
function calculateTotalDiscount(discounts) {
    var total = 0;
    if (Array.isArray(discounts)) {
        discounts.forEach(function (disc) {
            if (disc.amount) total += Number(disc.amount);
        });
    }
    return total;
}


// Extract ecommerce data safely from GTM
var ecommerceData = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce") || {};
var amount = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("amount") || 0;


var value = Number(ecommerceData.value) || Number(amount) || 0;
var currency = ecommerceData.currency || "INR";
var paymentMode = ecommerceData.payment_mode || "";
var shippingFee = Number(ecommerceData.shipping_fee) || 0;
var totalDiscount = calculateTotalDiscount(ecommerceData.cart_discounts);


// Build event properties
var properties = {
    "customProperties": {
        "currency": { t: "string", v: currency },
        "value": { t: "number", v: value },
        "payment_mode": { t: "string", v: paymentMode },
        "shipping_fee": { t: "number", v: shippingFee },
        "total_discount": { t: "number", v: totalDiscount },
        "content_type": { t: "string", v: "transaction" }
    }
};


// Fire event
_cl.trackClick("cl_payment_initiated", properties);
</script>

Configuring the trigger

Section titled “Configuring the trigger”
  • Click the triggering section → click on the + icon
  • Enter the trigger name: “cl_payment_initiated” and click the trigger configuration.
  • Choose the trigger type as Custom event and enter the event name as cf_checkout_transaction_initiate.
  • Set the trigger to fire on All Custom Events → Click Save.
  • Click Save in the tag section.

Configuring the Purchased event

Section titled “Configuring the Purchased event”

Configuring the tag

Section titled “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:
<script>
function clProductsConversion(productsData) {
    var products = [];
    for (var i in productsData) {
        var product = productsData[i];
        var newProduct = {};


        for (var key in product) {
            switch (key) {
                case "item_id":
                case "variant_id":
                    newProduct["product_id"] = { t: "string", v: product[key] };
                    break;
                case "item_name":
                    newProduct["product_name"] = { t: "string", v: product[key] };
                    break;
                case "price":
                    newProduct["product_price"] = { t: "number", v: Number(product[key]) };
                    break;
                case "quantity":
                    newProduct["product_quantity"] = { t: "number", v: Number(product[key]) };
                    break;
                default:
                    if (typeof product[key] !== "object") {
                        newProduct["product_" + key] = { t: "string", v: String(product[key]) };
                    }
                    break;
            }
        }
        products.push(newProduct);
    }
    return products;
}


// Extract ecommerce data safely
var ecommerceData = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("ecommerce") || {};


var transactionId = ecommerceData.transaction_id || "";
var value = Number(ecommerceData.value) || 0;
var currency = ecommerceData.currency || "INR";
var paymentMode = ecommerceData.payment_mode || "";
var financialStatus = ecommerceData.financial_status || "";
var shippingTier = ecommerceData.shipping_tier || "";
var tax = Number(ecommerceData.tax) || 0;


// Calculate total discount if cart_discounts exist
var totalDiscount = 0;
if (Array.isArray(ecommerceData.cart_discounts)) {
    ecommerceData.cart_discounts.forEach(function (d) {
        if (d.amount) totalDiscount += Number(d.amount);
    });
}


// Build customProperties
var properties = {
    "customProperties": {
        "transaction_id": { t: "string", v: transactionId },
        "currency": { t: "string", v: currency },
        "value": { t: "number", v: value },
        "payment_mode": { t: "string", v: paymentMode },
        "financial_status": { t: "string", v: financialStatus },
        "shipping_tier": { t: "string", v: shippingTier || "Standard" },
        "tax": { t: "number", v: tax },
        "total_discount": { t: "number", v: totalDiscount },
        "content_type": { t: "string", v: "product_group" }
    },
    "productProperties": clProductsConversion(ecommerceData.items || [])
};


// Fire Purchased event
_cl.trackClick("Purchased", properties);
</script>

Configuring the trigger

Section titled “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 purchase.
  • Set the trigger to fire on All Custom Events → Click Save.
  • Click Save in the tag section.

Configuring the Create User event

Section titled “Configuring the Create User event”

Configuring the tag

Section titled “Configuring the tag”
  • Open Google Tag Manger and click Tags → New Tag.
  • Enter Tag Name: CL-CreateUser and click on the tag configuration.
  • Choose custom HTML and paste the code given below:
<script>
// Extract values from dataLayer
var customer_name = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.customer_name") || "";
var email         = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.email") || "";
var phone         = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.phone_number") || "";
var city          = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.city") || "";
var state         = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.state") || "";
var pincode       = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.pincode") || "";
var country       = window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("address.country") || "";


phone = phone.replace(/\s+/g, "").trim();


// Split full name into first and last
var first_name = "";
var last_name = "";
if (customer_name) {
    var nameParts = customer_name.trim().split(" ");
    first_name = nameParts[0] || "";
    last_name = nameParts.slice(1).join(" ") || "";
}


// Build user_traits dynamically
var userTraitsObj = { "t": "Object", "v": {} };


if (first_name) userTraitsObj.v["first_name"] = { "t": "string", "v": first_name };
if (last_name)  userTraitsObj.v["last_name"]  = { "t": "string", "v": last_name };
if (email)      userTraitsObj.v["email"]      = { "t": "string", "v": email };
if (phone)      userTraitsObj.v["phone"]      = { "t": "string", "v": phone };
if (city)       userTraitsObj.v["city"]       = { "t": "string", "v": city };
if (state)      userTraitsObj.v["state"]      = { "t": "string", "v": state };
if (pincode)    userTraitsObj.v["pincode"]    = { "t": "string", "v": pincode };
if (country)    userTraitsObj.v["country"]    = { "t": "string", "v": country };


// Wrap inside identify properties
var userProperties = {
    "customProperties": {
        "user_traits": userTraitsObj
    }
};


// Identification priority: email → phone
if (email) {
    userProperties["customProperties"]["identify_by_email"] = {
        "t": "string",
        "v": email,
        "ib": true
    };


    if (phone) {
        userProperties["customProperties"]["external_ids"] = {
            "t": "Object",
            "v": {
                "identify_by_phone": { "t": "string", "v": phone }
            }
        };
    }
} else if (phone) {
    userProperties["customProperties"]["identify_by_phone"] = {
        "t": "string",
        "v": phone,
        "ib": true
    };
}


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

Configuring the trigger

Section titled “Configuring the trigger”
  • The Create User event should be triggered to capture the user traits from payload. Therefore, it is triggered in Purchased and AddPaymentInfo events.
  • Click the triggering section.
  • Choose the trigger cl_purchase from the list of triggers.
  • Click the + icon to add another trigger.
  • Choose the trigger cl_add_payment_info from the list of triggers.
  • Click Save in the tag section.

Testing and Publishing the Code

Section titled “Testing and Publishing the Code”

Testing the GTM configuration

Section titled “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 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

Section titled “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

Section titled “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.