How To

Track Button Clicks In Webflow

Easily track and visualize clicks on buttons, links and more in Webflow.
Learn how to do it

Why track button clicks in Webflow?

Firstly, why would you even want to track button 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".

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.)

Example

When you've set up your metric in Nocodelytics, you'll see a chart like the one below in your dashboard.

Now every time any user clicks on the button in your Webflow site, you'll see it visualized in this chart.

Try it yourself! Click this button and watch the chart below update.

<a id="trackConversionsDemoBtn" href="#" class="button w-button">Try it now →</a>

<canvas id="trackConversionsChart" width="1000" height="600"></canvas>

Ready to get insights?

Join others using Nocodelytics to get insights from Webflow.
Track Button Clicks →

What else can you track?

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.