Watch Now: Best practices for building with GenUI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Watch Now: Best practices for building with GenUI

Announcing Visual Copilot - Figma to production in half the time

Blog

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

With conversion tracking, you can measure and analyze important user actions or events, such as form submissions, purchases, or any other desired conversions.

Tracking conversions with Builder only requires adding a few lines of code to your app, as in the examples below:

There are two ways to track conversions:

  1. builder.trackConversion(): This function is used to track a conversion without specifying an amount. You can call this function whenever a user performs an action that you consider a conversion, such as submitting a form or completing a specific task.
  2. builder.trackConversion(amount): This function allows you to specify an amount associated with the conversion. The amount parameter represents the value of the conversion, typically a numeric value. For example, in an e-commerce application, you can pass the dollar value of an order as the amount to track the conversion along with its monetary value.

To use conversion tracking, call the appropriate builder.trackConversion() function at the point where the conversion occurs in your React application. Builder will then record and track the conversion event, so you can analyze and measure the effectiveness of your application or marketing efforts.

// Requires @builder.io/sdk version >= 1.1.21
import { builder } from '@builder.io/react'

// For conversions without a specified amount
builder.trackConversion();

// OR to specify an amount; for example, a dollar value for the conversion,
// for an ecommerce order
builder.trackConversion(99.99);

When you use cross-domain conversion tracking, such as when your checkout page is on a different domain than your store, you need to associate the session on the store with the conversion on the checkout page.

Pass the sessionId as a query param on the checkout URL as in the following example:

import { builder } from '@builder.io/react';

/**
* append the session to the URL to associate conversions
*/
const Cart = () => {
  ...
   const checkoutUrl = useCheckoutUrl() +
   `&builder.overrideSessionId=${builder.sessionId}`
  ...
}

Builder tracks these interactions using impression data. Ensure that this function is invoked in the same browser environment as the impressions and click events are dispatched. Since this API is designed for browser usage, it may not function as intended if used server-side.

Note that if you are a Shopify store and have installed Builder's Shopify app, the above code is not needed, as it is installed automatically.

Was this article helpful?

Get the latest from Builder.io