With custom event tracking, you can register specific interaction on your website or web app with Flowpoint. This is helpful for getting granular insight into how people are interacting with your website and enables you to precisely monitor conversion between user journey steps.

Once you start tracking custom events, you'll be able to reference them in the Flow Builder, in the Session Log, and in Page Exploration. Custom events can also be exported from your account.

Tracking Custom Events

Data Layer Script

To track custom events, you first need to add the Data Layer Script to the <head> section of your website. This script enables you to send custom events from your website to the Flowpoint data layer.

Add the following script to the <head> section of your website. Place it directly below the Flowpoint tracking script.

<script>
    window.fpDataLayer = window.fpDataLayer || [];
    flowpoint = {
      disable: () => window.flowpointDisabled = true,
      enable: () => window.flowpointDisabled = false,
    }
    'track setUserAttributes'.split(' ').forEach(m => flowpoint[m] = (e, d) => window.fpDataLayer.push({ method: m, data: [e, d] }))
</script>

Event Tracking Function

Once you've implemented the Data Layer Script, you can add the Event Tracking Function to any interaction on your website. Here's the script:

window.flowpoint.track("My custom event")

When you use the code above, replace My custom event with the reference you want to track in Flowpoint. Make sure you maintain the single quotes surrounding the reference.

Example Events

In the code example below, you can see some of the use cases for custom event tracking.

// Event to track a newsletter subscription
window.flowpoint.track("Subscribed to newsletter")

// Event to track a resource download
window.flowpoint.track("Downloaded ebook")

// Event to track a webinar registration
window.flowpoint.track("Registered for the webinar")

Including Additional Parameters

For more advanced custom event use cases, you can include additional parameters in the Event Tracking Function code. This is useful for tracking interactions like purchases where you want to include details like the product price, modifiers, or the SKU.

Below is an example of a custom event that includes additional parameters. You can include virtually any type of data as log as it's formatted as a key-value pair.

window.flowpoint.track("Purchase", {
    "price": 177,
    "productId": "V3GNNMPkB0",
    "currency": "USD"
});

In the following example, you can see how you might dynamically add values based on data from another source on your website or web app.

window.flowpoint.track("Purchase", {
    "price": data.price,
    "productId": data.productId,
    "currency": data.currency
});

Additional E-Commerce Examples

Track many types of e-commerce-specific events:

Purchases
Product views
Add-to-cart
Remove-from-cart
Cart view
Add to wishlist/favorite

Purchase Event Example

window.flowpoint.track("purchase", {
    transaction_id: "transactionId",
    value: 14.20,
    tax: 4.90,
    shipping: 5.99,
    currency: "GBP",
    coupon: "SUMMER_SALE",
    items: [
    // You can add multiple purchased items here
      {
      item_id: "SKU_12345",
      item_name: "Happy shirt",
      affiliation: "Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Brand 1",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 9.99,
      quantity: 1
    }]
})

Testing & Troubleshooting

To confirm your custom events are being tracked in Flowpoint, first fire the event by triggering the associated interaction on your website. Then, view the Sessions Log for your project and select your session. If your custom event was successfully tracked, you'll see it referenced in the session details.

If you don't see your custom events in the Session Log, check your browser's console when triggering an interaction on your website that fires a custom event — there may be errors you need to resolve.

Tip: It's often best to start with a simple, straightforward implementation of the custom event tracking. Once you understand the basics, you can proceed with a more-involved implementation. To help you get started, we've put together a simple demo on CodePen that you can reference and copy.

Path Explorer

Flows

On this page

Get Help

Legal & Compliance

Get Help

Legal & Compliance

Get Help

Legal & Compliance

Docs

Search the docs

Dashboard

What's new