Use Beam to create and track custom events

Introducing custom events on Beam Analytics

Since launching Beam, the ability to track custom events has been one of the most asked for product features. So we’re really happy to be able to announce today that it is now available in Beam.

This means you’ll now be able to track not just the pages that your users visit, but also specific actions that they take. This could include:

• a specific button that is important for your business
• whether they scroll down as least some percentage of a page
• if they stay on a specific page for at least a certain amount of time
• form submissions
• and more!

How do you track custom events with Beam?

The way we have implemented custom events on Beam is to allow you to make each custom event its own page view. We think this leads to easier implementation and data interpretation for you. We’ll first talk about how to implement it, and then talk about the trade-offs for users in this approach.

Implementing it is a simple two step process:

In your code, find where the custom event would take place Then add the code window.beam("[some path]") where ‘some path’ is the page that you define for this custom event.

Recommendation: Use a prefix in the path like 'custom-events' so you can easily filter out these custom events from your web analytics. This way, you avoid mixing your custom event page views with your actual user page views.

Example 1: How many users stay on the page for at least 5 seconds?

Let’s say I want to use Beam to track a custom event to see what percentage of users stay on a homepage for at least 5 seconds. The code would be

setTimeout(() => {
  window.beam("/custom-events/homepage_5_seconds")
}, 5000)

where the path ‘custom-events/homepage_5_seconds’ is the name I’ve chosen for this custom event page.

Example 2: How many hash changes are there on my site?

We at Beam by default don't track hash changes since some sites use hash changes to store access tokens. However, some platforms including carrd heavily make use of hash changes for site navigation. We can use custom events to solve this problem. Here’s an example of how to do it:

function onHashChange() {
  const hash = window.location.hash;
  window.beam(`/custom-events/hashchange/${hash}`);
}

// Listen for hash changes
window.addEventListener('hashchange', onHashChange, false);

In this example, every time the hash changes, it logs the new hash and sends a custom event to Beam using a dedicated path that includes the hash. This way, you can analyze how users navigate your SPA or interact with page elements tied to specific hashes.

What are the trade-offs for users with this approach

One immediate downside is the potential to contaminate your real page views with these custom event pages. But if you use a set prefix for each of your custom events like in the example, you can easily filter these out.

And we think there’s a big advantage with this approach for our users. You can include these custom events in your funnel analysis. So previously, the funnel analysis was limited to tracking how a user moved from page to page. Now you can track how they go from page to custom event. And that could be really insightful for your business.

Conclusion

We’re really excited to launch this for our users. Thank you for your support and feature requests. We’ll keep trying to move as fast as we can to respond to your suggestions. Any questions or issues, please email us at hi@beamanalytics.io.