Tracking Gokwik Checkout Events in CustomerLabs

Gokwik 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 Gokwik’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 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.
Gokwik 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-initiated
- 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 productsConversion(productsArr) {
        var products = [];

        for (var i = 0; i < productsArr.length; i++) {
            var productsStructure = {};

            for (key in productsArr[i]) {
                switch (key) {
                    case "item_name":
                        productsStructure["product_name"] = {
                            t: "string",
                            v: productsArr[i][key],
                        };
                        break;

                    case "item_id":
                        productsStructure["product_id"] = {
                            t: "string",
                            v: (productsArr[i] || {})[key],
                        };
                        break;

                    case "price":
                        productsStructure["product_price"] = {
                            t: "number",
                            v: productsArr[i][key],
                        };
                        break;

                    case "category":
                        productsStructure["product_category"] = {
                            t: "string",
                            v: productsArr[i][key],
                        };
                        break;

                    case "quantity":
                        productsStructure["product_quantity"] = {
                            t: "number",
                            v: productsArr[i][key],
                        };
                        break;

                    case "variant":
                        productsStructure["product_variant"] = {
                            t: "string",
                            v: productsArr[i][key],
                        };
                        break;

                    case "brand":
                        productsStructure["product_brand"] = {
                            t: "number",
                            v: productsArr[i][key],
                        };
                        break;

                    default:
                        if (productsArr[i][key]) {
                            var isNum = /^\d+$/.test(productsArr[i][key]);
                            var type =
                                Number.isFinite(productsArr[i][key]) || isNum
                                    ? "number"
                                    : typeof productsArr[i][key];

                            productsStructure["product_" + key] = {
                                t: type,
                                v: productsArr[i][key],
                            };
                        }
                }
            }

            products.push(productsStructure);
        }

        return products;
    }

    var data =
        window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("eventData");

    var productProps = data["ecommerce"] || {};
    var properties = {};

    if (productProps) {
        properties["customProperties"] = {
            currency: {
                t: "string",
                v: productProps.currency,
            },
            content_type: {
                t: "string",
                v: "product_group",
            },
            coupon: {
                t: "string",
                v: productProps.coupon,
            },
            total_discount: {
                t: "number",
                v: productProps.total_discount,
            },
            value: {
                t: "number",
                v: productProps.value,
            },
        };

        properties["productProperties"] = productsConversion(productProps.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-initiated.
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 "discount":
                        newproduct["coupon"] = {
                            t: "string",
                            v: product[prodkey],
                        };
                        break;

                    default:
                        if (typeof product[prodkey] !== "object") {
                            newproduct["product_" + prodkey] = {
                                t: "string",
                                v: product[prodkey],
                            };
                        }
                        break;
                }
            }

            products.push(newproduct);
        }

        return products;
    }

    var data =
        window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("eventData");

    var productProps = data["ecommerce"] || {};
    var properties = {};

    properties["customProperties"] = {
        currency: {
            t: "string",
            v: productProps.currency,
        },
        coupon: {
            t: "string",
            v: productProps.coupon,
        },
        total_discount: {
            t: "number",
            v: productProps.total_discount,
        },
        shipping_tier: {
            t: "number",
            v: productProps.shipping_tier,
        },
        content_type: {
            t: "string",
            v: "product_group",
        },
        value: {
            t: "string",
            v: productProps.value,
        },
    };

    properties["productProperties"] = clProductsConversion(
        productProps["items"] || []
    );

    _cl.trackClick("AddPaymentInfo", 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: "string",
                            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":
                    case "qty":
                        newproduct["product_quantity"] = {
                            t: "string",
                            v: product[prodkey],
                        };
                        break;

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

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

                    case "mrp_price":
                        console.log("mrp_price", product[prodkey]);
                        newproduct["mrp_price"] = {
                            t: "string",
                            v: product[prodkey],
                        };
                        break;

                    default:
                        newproduct["product_" + prodkey] = {
                            t: "string",
                            v: product[prodkey],
                        };
                        break;
                }
            }

            products.push(newproduct);
        }

        return products;
    }

    var data =
        window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("eventData");

    var productProps = data["ecommerce"] || {};
    var properties = {};

    var transactionId =
        productProps.transaction_id ||
        Math.floor(10000000 + Math.random() * 90000000);

    properties["customProperties"] = {
        currency: {
            t: "string",
            v: productProps.currency,
        },
        content_type: {
            t: "string",
            v: "product_group",
        },
        value: {
            t: "string",
            v: productProps.value,
        },
        coupon: {
            t: "string",
            v: productProps.coupon,
        },
        shipping_tier: {
            t: "string",
            v: productProps.shipping_tier,
        },
        payment_type: {
            t: "string",
            v: productProps.payment_type,
        },
        discount: {
            t: "string",
            v: productProps.discount,
        },
        tax: {
            t: "string",
            v: productProps.tax,
        },
        subtotal: {
            t: "string",
            v: productProps.subtotal,
        },
        shipping: {
            t: "string",
            v: productProps.shipping,
        },
        total_discount: {
            t: "string",
            v: productProps.total_discount,
        },
        transaction_id: {
            t: "string",
            v: transactionId,
        },
        transaction_number: {
            t: "string",
            v: transactionId,
        },
    };

    properties["productProperties"] = clProductsConversion(
        productProps.items || []
    );

    _cl.trackClick("Purchased", 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.

Configuring the Create User event

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:

HTML

<script>
    var obj =
        window.google_tag_manager["GTM-XXXXXXX"].dataLayer.get("eventData") || {};

    var email = obj["email"];
    var phone = obj["phone_num"];

    var userProperties = {
        customProperties: {
            user_traits: {
                t: "Object",
                v: {
                    firstname: {
                        t: "string",
                        v: obj["first_name"],
                    },
                    lastname: {
                        t: "string",
                        v: obj["last_name"],
                    },
                    email: {
                        t: "string",
                        v: email,
                    },
                    phone: {
                        t: "string",
                        v: phone,
                    },
                    city: {
                        t: "string",
                        v: obj["city"],
                    },
                    state: {
                        t: "string",
                        v: obj["state"],
                    },
                    country: {
                        t: "string",
                        v: obj["country"],
                    },
                    zip: {
                        t: "string",
                        v: obj["pincode"],
                    },
                },
            },
        },
    };

    if (email && email != null && email != "") {
        userProperties["customProperties"]["identify_by_email"] = {
            t: "string",
            v: email,
            ib: true,
        };

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

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

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_payment_screen from the list of triggers.
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 Gokwik 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

Configuring the Create User 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