How to track button clicks in Webflow (the easy way)

Why track button clicks in Webflow?

Firstly, why would you even want to track clicks?

It's likely that you have a specific purpose in mind when people land on your site. Whether you run a newsletter, a community, marketplace, marketing site (for your SaaS), e-commerce (etc.), you want users to achieve a specific goal when they visit your site.

When they achieve that goal (i.e. convert) you know that something is working.

One type of conversion is when someone clicks on an important button on your site. Another might be when they complete a form, such as buying a product or subscribing for a newsletter. But what if only a tiny portion of your users actually convert? You'd be missing out on a ton of value for your users.

The only way to know how well you're doing is to track those conversions. Once you're tracking those conversions, you can get a baseline and then experiment with your site to make improvements to increase conversions.

Tracking button clicks is also a great way to see if people are actually interacting with your site, beyond just page views. For example, let's say you want to know if people are interested in a new idea but don't want to fully build it. You could add a button and track clicks on it to see if people are actually interested in that. If enough people are then you can build it!

How to track button clicks in Webflow

Tracking button clicks in Webflow is really simple with Nocodelytics.

1. Decide what you want to track

It helps to know which buttons you want to track.

How do you know what to track? Think of any important call to actions on your site. It might be your main conversion action like a"Buy Now" button, a secondary action like a "Learn More" button or something else that you're curious to track.

Let's run through an example.

In this case, we have this website which is a directory of space startups. If someone wants to join the list, they click the "Submit Yours" button below which takes them to an Airtable form.

Wouldn't it be great to know how many people actually clicked the button? That way, we'll get a picture of how much interest there actually is. Then we can compare this number to how many end up completing the form to get a conversion rate. Neat!

So now that we know what we want to track, let's set it up in Nocodelytics.

2. Track the button in Nocodelytics

Now let's go to the dashboard in Nocodelytics and add a new "Click" metric. We'll need the ID of the button we want to track.

How do you find this ID in Webflow? It's simple!

1. Go to the Designer and select the "Settings" tab in the Right Side Panel.
2. Below "Section Settings" you'll see an ID field. This is what you need to use.

If you don't see any value in the ID field, this means an ID does not exist yet. No problem! Just enter a new ID here. Use something that is both unique and descriptive.

Then just give your new metric a name so you know what it's for then hit "Save to dashboard".

Haven't added your site yet? just follow the instructions on your dashboard. It's a simple 30 second process!

3. See results

Once you've saved your metric, you'll see it added to your dashboard.

We've set up the metric for this button and we can immediately start seeing how many clicks it has. Bonus! We can see historical data because this particular button had an ID already.

That's it! (No need to waste time testing if tags are being triggered here.)

‍