How to Add User Events for User Journey

Last updated 12/21/2022

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 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 element that you want to trigger the user event.

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 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:

BreadButter.events.custom("CUSTOM_EVENT", callback);

More details on this are available on our Github.