How to Add User Events for User Journey

Last updated 02/08/2024

Before adding user events, make sure you have added the initialization script tag.

User events are used to define your website’s user journey, as milestones are reached for each user on your website. You can create a user event for when a user does an action you are interested in monitoring, such as unlocking pricing, starting a free trial or downloading a coupon, discount code, or a (content gated) white paper or eBook. In this way, you can see where users are in their progression through your website’s journey as a customer.

To add user events to any page you just need to follow these few steps:

Step 1

First, create your user event under User Events in Bread & Butter. For steps on how to do this, check out our User Events page.

Make sure you take note of the event code when you create it, so you can use it below.

Step 2

Identify the button or link that you want to trigger the user event. Add an ID attribute to the corresponding HTML element and make a note of it, e.g.

<button id="learn-more">Learn More</button>

Step 3

Find the initialization script you have added to your webpage (see initialization script if you have not added it already)

Step 4

In the initialization script, find the line:

BreadButter.configure({app_id: "[APP_ID]"});

Step 5

Add the following line under BreadButter.configure();

BreadButter.ui.addEventToLink('LINK_ID', 'CUSTOM_EVENT');
Step 5

Step 6

  • Replace CUSTOM_EVENT with the user event code you created from Step 1.
  • Replace LINK_ID with the ID of the button or element that you want to trigger the user event.

Step 7

You can also add a user event call to any scenario programmatically by adding this line:"CUSTOM_EVENT", callback);

More details on this are available on our GitHub.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data