Integrate with a BigCommerce Catalyst store

The concepts in this article apply for any setup where you are using BigCommerce to power your ecommerce store’s backend, but have a custom storefront (a “headless” setup). This integration requires 2 main steps:

1. Connect your BigCommerce store via Klaviyo’s native integration to sync order, catalog, and subscriber data.
2. Set up code snippets to enable onsite tracking functionality.

Key integration components

The key components of integrating this type of ecommerce solution are:

• Customer data
  Syncing information such as name, email, phone number, and other profile attributes.
• Subscribers
  Tracking who opts in and to what marketing channel (e.g., your email newsletter subscribers).
• Order activity
  Syncing when a customer places an order, what products are ordered, etc.
• Products
  Syncing the items in your catalog.
• Onsite activity
  Tracking who is active on your site, what products they view, etc.

With the exception of onsite activity, Klaviyo’s native BigCommerce integration will sync all of the above data for a BigCommerce Catalyst store because this data is fetched server-side via API. 

Integrate your store

1. Connect your BigCommerce store via Klaviyo’s native integration

The first step is to integrate your BigCommerce store via Klaviyo’s native integration. Follow the Enable the BigCommerce integration steps in our Getting started with BigCommerce guide through step 11. 

🚧

Do not check the setting Automatically add Klaviyo onsite JavaScript; you’ll add onsite tracking manually in step 2.

2. Enable onsite tracking

For Catalyst stores, you will need to use the repository provided by BigCommerce (detailed below) to install Klaviyo's onsite tracking JavaScript, which includes the following:

• Active on Site
  Also known as Klaviyo.js. Klaviyo.js tracks when users are active on your site and enables Klaviyo forms.
• Viewed Product
  Tracks when users view specific products on your site (which can be leveraged in a browse abandonment flow).
• Added to Cart
  Tracks when users add items to a cart, which allows you to send cart abandonment flows. 

The instructions detailed below will set up tracking for Active on Site, Viewed Product, and Added to Cart events:

1. Clone the repository provided by BigCommerce and install its dependencies:
   git clone [email protected]:bigcommerce-labs/catalyst-klaviyo.git && cd catalyst-klaviyo && pnpm i
2. Copy the environment variable template and enter values for each variable. To help with the BigCommerce variables, you can run the create-catalyst CLI's init command:
   pnpm create @bigcommerce/catalyst@latest init
3. The .env.local file created by the init command above will not create the NEXT_PUBLIC_KLAVIYO_PUBLIC_KEY variable, so we'll need to add that. Copy your Klaviyo Public API Key, and then run the command below replacing YOUR_PUBLIC_KEY with the value retrieved from your account:
   echo "\nNEXT_PUBLIC_KLAVIYO_PUBLIC_KEY=YOUR_PUBLIC_KEY" >> .env.local

You’ve now set up Klaviyo onsite tracking for BigCommerce Catalyst.

Server-side metrics

Now that you've connected your store, the following metrics will sync through Klaviyo’s native BigCommerce integration:

• Started Checkout
  When customers start a checkout and a cart is created.
• Placed Order
  When a customer checks out and an order is created on your store.
• Ordered Product
  An event for each item in a processed order.
• Fulfilled Order
  When an order's status updates to either Shipped or Completed.
• Canceled Order
  When an order is canceled.
• Refunded Order
  When a customer’s order is refunded.

Additional resources

Klaviyo resources

• Getting started with BigCommerce
• BigCommerce data reference

BigCommerce resources

• Overview of BigCommerce Catalyst
• Catalyst docs