Skip to content

BigCommerce + CustomerLabs 1PD Ops Integration Guide

BigCommerce is an e-commerce platform that allows users to set up and manage an online store. By connecting your BigCommerce store with CustomerLabs 1PD Ops, you can start tracking the behavioral events of your website visitors and customers without writing any code.

  • Admin access to your BigCommerce Store
  • Active CustomerLabs account

Section 1: Add CustomerLabs Tracking Script to BigCommerce

Section titled “Section 1: Add CustomerLabs Tracking Script to BigCommerce”
  1. Log in to your CustomerLabs account.
  2. On the Home page, click Connect Your Website.
  3. Copy the CustomerLabs tracking code snippet.
    CustomerLabs connect website tracking code
  1. Log in to your BigCommerce Admin.

  2. Navigate to Storefront → Script Manager.

  3. Click Create Script.

    BigCommerce Script Manager
  4. Fill in the script details as follows:

    FieldValue
    Script Namecl_tracking_script
    DescriptionCustomerLabs tracking script
    Location on pageHead
    Select pagesAll Pages
    Script categoryEssential
    Script typeScript
  5. Paste the copied CustomerLabs tracking code into the Script Contents field and click Save.

    BigCommerce tracking script configuration

Section 2: Add Default E-Commerce Events Script

Section titled “Section 2: Add Default E-Commerce Events Script”

CustomerLabs provides a default e-commerce events script to automatically capture standard storefront events such as product views, cart additions, and purchases.

  1. In Script Manager, click Create Script again.

  2. Fill in the script details as follows:

    FieldValue
    Script Namecl_default_ecommerce_events
    Location on pageHead
    Select pagesAll Pages
    Script categoryEssential
    Script typeScript
  3. Copy the following cl_default_ecommerce_events script and paste it into the Script Contents field.

    <script id="clabs_bc_tracking" type="text/javascript">
    /**
    * Customerlabs ecommerce event tracking js helper for Bigcommerce
    */
    window.clShopifyTrack = function() {
    function htmlDecode(input) {
    if (!input) return '';
    var parsedInput = input.replace(/(\r\n|\n|\r)/gm, '');
    var doc = new DOMParser().parseFromString(parsedInput, 'text/html');
    return JSON.parse(doc.documentElement.textContent);
    }
    function escapeHtml(str) {
    return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&#039;/g, "\'");
    }
    function getURLParams(name, url){
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
    };
    function set_cookie(name, value) {
    document.cookie = name +'='+ value +'; Path=/;';
    };
    function get_cookie(name) {
    return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
    };
    function get_cookie_startwith(key) {
    var regex = new RegExp('(^|;)\\s*' + key + '\\w*\\s*=\\s*([^;]+)', 'g');
    var matches = document.cookie.matchAll(regex);
    var match = matches.next();
    var values = []
    while(!match.done){
    values.push(match.value[2]);
    match = matches.next();
    }
    return values;
    }
    function delete_cookie(name) {
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    };
    __BC__ = {
    pageType: '{{page_type}}',
    categoryName: escapeHtml('{{category.name}}'),
    currency: '{{currency_selector.active_currency_code}}',
    analyticsData: window.analyticsData || {},
    cartItems: htmlDecode("{{json cart.items}}"),
    checkoutId: '{{checkout.id}}' || 0,
    orderId: '{{checkout.order.id}}' || 0,
    mainPageAjaxAddButton: false, // set true if the products list has ajax "add to cart" button
    fb_skip_contents: false,
    }
    /**
    * Custom configuration should be edit here
    */
    var customBindings = {
    mainPageAddButton: [],
    productPageAddButton: [],
    cartPageRemoveButton: [],
    searchTermQuery: [],
    searchPage: [],
    quickViewModal: [],
    quickViewCartButtonId: [],
    modalHiddenProductId: [],
    };
    var defaultBindings = {
    mainPageAddButton: ["[data-button-type='add-cart']"],
    productPageAddButton: ["#form-action-addToCart"],
    cartPageRemoveButton: [".cart-remove"],
    searchTermQuery: [getURLParams('search_query')],
    searchPage: ['search'],
    quickViewModal: ["#modal"],
    quickViewCartButtonId: ["form-action-addToCart"],
    modalHiddenProductId: ["#modal .productView-details.product-options [name='product_id']"]
    }
    // stitch bindings
    objectArray = customBindings;
    outputObject = __BC__;
    applyBindings = function(objectArray, outputObject){
    for (var x in objectArray) {
    var key = x;
    var objs = objectArray[x];
    values = [];
    if(objs.length > 0){
    values.push(objs);
    if(key in outputObject){
    values.push(outputObject[key]);
    outputObject[key] = values.join(", ");
    }else{
    outputObject[key] = values.join(", ");
    }
    }
    }
    };
    applyBindings(customBindings, __BC__);
    applyBindings(defaultBindings, __BC__);
    /*
    Product Event listener
    */
    function addProductEventListeners() {
    var mainPageAddButton = Czzle(__BC__.mainPageAddButton) || [];
    var productPageAddButton = Czzle(__BC__.productPageAddButton) || [];
    var quickViewModal = Czzle(__BC__.quickViewModal) || [];
    // Main Page - Add to Cart click
    if (mainPageAddButton.length > 0) {
    for(var i = 0; i < mainPageAddButton.length; i++) {
    const el = mainPageAddButton[i];
    el.addEventListener('click', (event) => {
    var index = event.target.href.indexOf('product_id');
    var productId = event.target.href.slice(index).split('=')[1];
    onAddToCart(productId, undefined);
    })
    }
    }
    // Product Page - Add to Cart click
    if (productPageAddButton.length > 0) {
    for(var j = 0; j < productPageAddButton.length; j++) {
    const el = productPageAddButton[j];
    el.addEventListener('click', () => {
    onAddToCart('{{product.id}}', {
    "product_name": '{{product.title}}', // Name or ID is required.
    "product_id": '{{product.id}}',
    "product_price": '{{product.price.without_tax.value}}',
    "product_category": escapeHtml('{{product.category}}'),
    "product_variant": '{{product.sku}}',
    "product_sku": '{{product.sku}}'
    });
    });
    }
    }
    // Remove from Cart click
    setRemoveCartListener();
    if (quickViewModal.length > 0) {
    for(var l = 0; l < quickViewModal.length; l++) {
    const el = quickViewModal[l];
    el.addEventListener('click', (e) => {
    if(e.target && e.target.id == __BC__.quickViewCartButtonId) {
    const productId = document.querySelector(__BC__.modalHiddenProductId).value;
    onAddToCart(productId, undefined);
    }
    });
    }
    }
    }
    function setRemoveCartListener() {
    var cartPageRemoveButton = Czzle(__BC__.cartPageRemoveButton) || [];
    if (cartPageRemoveButton.length > 0) {
    for(var k = 0; k < cartPageRemoveButton.length; k++) {
    const el = cartPageRemoveButton[k];
    el.addEventListener('click', () => {
    onRemoveFromCart(el.attributes[1].nodeValue);
    });
    }
    }
    }
    /***
    * Customerlabs default Ecommerce vents
    */
    /**
    * Tracks category views
    *
    * @param {string} categoryName
    */
    function onCategoryView(categoryName) {
    _cl.pageview("Category viewed", {"customProperties": {"category_name": categoryName}})
    }
    /**
    * Tracks Product views
    */
    function onProductDetailsView() {
    var cust_prop = {
    "content_type": "product_group",
    "content_category": escapeHtml("{{product.category}}"),
    "currency": __BC__.currency
    }
    if(__BC__.fb_skip_contents){
    cust_prop["skip_contents"] = true;
    }
    _cl.pageview("Product viewed", {
    "customProperties": cust_prop,
    "productProperties": [{
    "product_name": '{{product.title}}', // Name or ID is required.
    "product_id": '{{product.id}}',
    "product_price": '{{product.price.without_tax.value}}',
    "product_category": escapeHtml('{{product.category}}'),
    "product_variant": '{{product.sku}}',
    "product_sku": '{{product.sku}}'
    }]
    })
    }
    /**
    * This function handles cart visits and send it to clabs
    */
    function onViewCart() {
    var products = __BC__.analyticsData.products || __BC__.cartItems || []
    var cust_prop = {
    "product_category": "product_group",
    "currency": __BC__.currency
    }
    if(__BC__.fb_skip_contents){
    cust_prop["skip_contents"] = true;
    }
    var propertiesToSend = {
    'customProperties': cust_prop,
    'productProperties': products.map(function (product) {
    return {
    "product_name": product.name, // Name or ID is required.
    "product_id": product.product_id,
    "product_quantity": product.quantity,
    "product_price": product.price.value,
    "product_category": escapeHtml(product.category || ""),
    "product_variant": product.sku,
    "product_sku": product.sku
    }
    })
    };
    _cl.pageview("Cart viewed", propertiesToSend)
    }
    /**
    * This function taks 2 arguments productId and product object
    * If product object present will send added to cart event
    * else this function called from product list with product id
    * so we add a cookie and wait
    * some times the list product button will be ajax in that time
    * will invoke the function findATCAndSend that will get data from
    * cart and send added to cart event to clabs
    * @param {string} productId
    * @param {object} product
    */
    function onAddToCart(productId, product) {
    if(product){
    var cust_prop = {
    "product_category": "product_group",
    "currency": __BC__.currency
    }
    if(__BC__.fb_skip_contents){
    cust_prop["skip_contents"] = true;
    }
    propertiesToSend = {
    'customProperties': cust_prop,
    'productProperties': [product]
    };
    _cl.trackClick("Added to cart", propertiesToSend)
    }else{
    set_cookie("cl_bc_ajax_atc_" + productId, productId);
    if(__BC__.mainPageAjaxAddButton){
    findATCAndSend();
    }
    }
    }
    /**
    * This function handles remove from cart event
    * @param {string} cartItemId
    */
    function onRemoveFromCart(cartItemId) {
    var products = __BC__.analyticsData.products || __BC__.cartItems || []
    for(var id in products){
    var product = products[id];
    if(product.id == cartItemId){
    var cust_prop = {
    "product_category": "product_group",
    "currency": __BC__.currency
    }
    if(__BC__.fb_skip_contents){
    cust_prop["skip_contents"] = true;
    }
    var propertiesToSend = {
    'customProperties': cust_prop,
    'productProperties' : [{
    "product_id": product.product_id,
    "product_name": product.name,
    "product_quantity": product.quantity,
    "product_sku": product.sku,
    "product_price": product.price.value,
    }]
    };
    _cl.trackClick('Removed from cart', propertiesToSend);
    }
    }
    }
    /**
    * This function invoke when a checkout initated
    */
    function onCheckoutStarted() {
    var props = {};
    var analyticsData = __BC__.analyticsData;
    for(var k in analyticsData){
    if(k != "products" && analyticsData[k]){
    props[k] = analyticsData[k];
    }
    }
    if(__BC__.fb_skip_contents){
    props["skip_contents"] = true;
    }
    var propertiesToSend = {
    "customProperties": props,
    "productProperties": analyticsData.products
    }
    _cl.pageview("Checkout made", propertiesToSend)
    }
    /**
    * This function is triggered on the order confirmation page
    */
    function onPurchase() {
    var customProps = {};
    var analyticsData = __BC__.analyticsData;
    for(var k in analyticsData){
    if(k != "products" && k != "billingInfo" && analyticsData[k]){
    customProps[k] = analyticsData[k];
    }
    }
    if(__BC__.fb_skip_contents){
    customProps["skip_contents"] = true;
    }
    var propertiesToSend = {
    "customProperties": customProps,
    "productProperties": analyticsData.products
    }
    if(analyticsData.order_id && window.localStorage){
    var purchases_str = localStorage.getItem('cl_past_purchases') || "{}";
    var purchases = JSON.parse(purchases_str);
    if(!purchases[""+analyticsData.order_id]){
    _cl.trackClick('Purchased', propertiesToSend);
    purchases[""+analyticsData.order_id] = "true";
    window.localStorage.setItem("cl_past_purchases", JSON.stringify(purchases));
    }
    }else{
    _cl.trackClick('Purchased', propertiesToSend);
    }
    if(analyticsData.billingInfo){
    var userAttributes = {};
    var billingInfo = analyticsData.billingInfo;
    if(billingInfo.email){
    for(var k in billingInfo){
    if(k != "customFields" && billingInfo[k]){
    userAttributes[k] = {
    "t": "string",
    "v": billingInfo[k]
    };
    }
    }
    var props = {
    "customProperties": {
    "user_traits": {
    "t": "Object",
    "v": userAttributes
    },
    "identify_by_email": {
    "t":"string",
    "v": userAttributes["email"].v,
    "ib": true
    }
    }
    }
    _cl.identify(props)
    }
    }
    }
    function onSearchPage() {
    var customProperties = {
    'search_string': {
    't': 'string',
    'v': __BC__.searchTermQuery
    }
    };
    _cl.pageview("Search made", {"customProperties": customProperties});
    }
    /*
    View cart, Checkout & Purchased events helper
    */
    const mailSelector = document.getElementsByClassName('customerView-body');
    const products = [];
    async function getData(url) {
    const response = await fetch(url, {
    method: 'GET',
    cache: 'no-cache',
    headers: {
    'Content-Type': 'application/json',
    },
    });
    return response.json();
    }
    async function getPurchaseData(callback) {
    if(__BC__.orderId){
    getData(`/api/storefront/order/${__BC__.orderId}`).then((data) => {
    if(data.lineItems.physicalItems.length) {
    for (const product of data.lineItems.physicalItems) {
    products.push({
    product_id: product.productId,
    product_sku: product.sku,
    product_name: product.name,
    product_brand: product.brand,
    product_price: product.salePrice,
    product_quantity: product.quantity
    });
    }
    __BC__.analyticsData = {
    order_id: data.orderId,
    value: data.orderAmount,
    revenue: data.orderAmount,
    shipping: data.shippingCostTotal,
    tax: data.taxTotal,
    discount: data.discountAmount,
    currency: data.currency.code,
    status: data.status,
    products: products,
    billingInfo: data.billingAddress
    };
    if(callback){
    callback();
    }
    }
    })
    }
    }
    function getCheckoutData(callback) {
    if(__BC__.checkoutId){
    getData(`/api/storefront/checkouts/${__BC__.checkoutId}`).then((data) => {
    if (data.cart && data.cart.lineItems.physicalItems.length) {
    for (const product of data.cart.lineItems.physicalItems) {
    products.push({
    product_id: product.productId,
    product_sku: product.sku,
    product_name: product.name,
    product_brand: product.brand,
    product_price: product.salePrice,
    product_quantity: product.quantity
    });
    }
    __BC__.analyticsData = {
    checkout_id: data.id,
    order_id: data.orderId,
    value: data.grandTotal,
    revenue: data.subtotal,
    shipping: data.shippingCostTotal,
    tax: data.taxTotal,
    discount: data.cart.discountAmount,
    currency: data.cart.currency.code,
    products: products,
    };
    if(callback){
    callback();
    }
    }
    });
    if (mailSelector && mailSelector[0]) {
    userEmail = mailSelector[0].innerHTML;
    }
    }
    }
    function findATCAndSend(){
    var pendingList = get_cookie_startwith("cl_bc_ajax_atc_");
    if(pendingList.length > 0){
    getProductAndSend(pendingList);
    }
    }
    function getProductAndSend(productIds) {
    getData(`/api/storefront/carts`).then((data) => {
    var cart = data[0];
    if (cart && cart.lineItems.physicalItems.length) {
    for (const product of cart.lineItems.physicalItems) {
    if(productIds.includes(""+product.productId)){
    onAddToCart(product.productId, {
    "product_name": product.name,
    "product_id": product.productId,
    "product_quantity": product.quantity,
    "product_price": product.salePrice,
    "product_category": escapeHtml(product.category || ""),
    "product_sku": product.sku
    });
    delete_cookie("cl_bc_ajax_atc_" + product.productId);
    }
    }
    }
    });
    }
    function initRemoveFromCartObserver() {
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    function checkChanges(mutations) {
    for (let mutation of mutations) {
    if (mutation.type === 'childList') {
    mutation.addedNodes.forEach(element => {
    if(element.className == "cart"){
    setRemoveCartListener();
    }
    });
    }
    }
    }
    var observer = new MutationObserver(checkChanges);
    var target = document.querySelector(".body")
    observer.observe(target, {childList: true, subtree: true})
    }
    /*
    BigCommerce Events Manager
    */
    addProductEventListeners();
    var searchPage = new RegExp(__BC__.searchPage, "g");
    findATCAndSend();
    switch (__BC__.pageType) {
    case 'category':
    onCategoryView(__BC__.categoryName);
    break;
    case 'product':
    onProductDetailsView();
    break;
    case 'checkout':
    getCheckoutData(onCheckoutStarted);
    break;
    case 'orderconfirmation':
    getPurchaseData(onPurchase);
    break;
    case 'cart':
    onViewCart();
    initRemoveFromCartObserver();
    break;
    default:
    if (__BC__.pageType === 'search' || document.location.pathname.match(searchPage)){
    onSearchPage();
    }
    break;
    }
    };
    </script>
  4. Click Save.

    BigCommerce default events script configuration
    CustomerLabs create BigCommerce source
  5. Your BigCommerce storefront client-side tracking is now enabled.

Section 3: Create BigCommerce Source in CustomerLabs (Server-Side Tracking)

Section titled “Section 3: Create BigCommerce Source in CustomerLabs (Server-Side Tracking)”

This step enables webhook-based server-side event tracking, which sends order data directly from BigCommerce to CustomerLabs for more reliable purchase attribution.

  1. Log in to your CustomerLabs account.
  2. Navigate to Sources from the left sidebar.
  3. Click Connect Source and select BigCommerce.
    CustomerLabs create BigCommerce source

To connect BigCommerce as a source, you need a Store Hash and an Access Token from your BigCommerce account.

  1. Log in to your BigCommerce Admin.

  2. Navigate to Settings → API Accounts (or go to https://{{your_store}}.mybigcommerce.com/manage/settings/api-accounts).

  3. Click Create API Account.

    BigCommerce create API account scopes
  4. Under OAuth Scopes, grant at least the following permissions:

    ScopeRequired Permission
    OrdersRead-only
    CustomersRead-only
    BigCommerce API credentials download popup
    CustomerLabs adding BigCommerce credentials
  5. Click Save. The credentials file will be downloaded and the Access Token will appear in the confirmation popup.

    CustomerLabs create BigCommerce source
  1. Copy the Access Token from the BigCommerce confirmation popup.
  2. Paste it into the BigCommerce Access Token field in CustomerLabs.
  3. Open the downloaded credentials file, locate the Store Hash, and enter it in CustomerLabs.
    CustomerLabs create BigCommerce source
  4. Click Create Source.
    CustomerLabs create BigCommerce source

When the BigCommerce source is created successfully, CustomerLabs automatically registers a webhook in your BigCommerce account to listen for new order events.

To verify the webhook has been configured correctly:

  1. In your BigCommerce Admin, navigate to Settings → API Accounts and click on the API Account name connected to CustomerLabs.

  2. Go to the Webhooks section.

  3. Confirm that you can see the following webhook listed as ACTIVE:

    EventStatus
    store/order/createdACTIVE
    BigCommerce active webhook configuration

When the BigCommerce source is connected, CustomerLabs provides ready-to-use workflow templates to help you start capturing purchase data immediately without manual configuration.

CustomerLabs BigCommerce workflow templates

Captures all new orders from BigCommerce via the webhook. Once an order is created in BigCommerce, the purchase data is automatically processed and stored in CustomerLabs. This is the primary template to use if you want to send purchase conversion signals to ad platforms.

Tracks and identifies customers who are making their first purchase. This template is useful for:

  • New customer acquisition tracking
  • Optimizing campaigns for first-time buyers

Tracks and identifies customers who have made more than one purchase. This template is useful for:

  • Lifetime value (LTV) tracking
  • Creating loyalty audiences for retention campaigns
  • Running campaigns specifically targeting repeat customers