How To

Track Link Clicks In Webflow

Easily track and visualize engagement on link clicks in Webflow.
Learn how to do it

Why track link clicks in Webflow?

Tracking link clicks is a great way to know how people are actually interacting with your site. This gives you an insight into if people are using your site the way you want them to or if they're doing something else.

What kind of link clicks might be useful to track in your Webflow site?

  • Links to sections on the same page (e.g. "Learn more")
  • Sponsor/affiliate links
  • Share to social media/view social profile links
  • Other links to 3rd party sites
  • Actions that lead to an interaction or animation

Why is it useful to track these links?

By tracking link clicks on the above,  you can find ways to improve conversion and even the user experience of your site. For example, if you track your sponsor links, you can see which sponsors are getting the most clicks. You can even experiment with placing sponsor links in different places to see if that improves conversion.

Another example is with tracking links to sections on the same page. For example, if you track a "Learn more" link and see that very few people actually click it, then you can find ways to either make it more useful or remove it entirely.

One other cool use for tracking link clicks is to test feature ideas before you build them! Let's say you run a marketplace for freelancers and want to expand to new cities, you could test interest in a new city. If they do click on the link for a new city, you can show them a message to say it's not ready yet. Meanwhile, as you're tracking how many people actually click on it, you can decide if it's worth committing to or not.

How to track link clicks in Webflow

Tracking link clicks in Webflow is really simple with Nocodelytics.

1. Decide what you want to track

To start with, think of an important link on your site that you want to track. It might be a "Learn more" type of link, a sponsor link or something else entirely. Once you know which link you want to track, it's time to track it.

Let's run through an example.

In this case, we have this website which is a directory of space startups. In the footer of that site there's a link to the Instagram page. 

It might be worth tracking that link to see how much interest there is in both that content as well as Instagram in general. That way, we'll know if it's worth investing some time in growing that page with content from the site.

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

2. Track the link in Nocodelytics

Now let's go to the dashboard in Nocodelytics and add a new "Click" metric. We'll need the ID of the link 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 link 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 link in your Webflow site, you'll see it visualized in this chart.

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

<a style="display: block"  id="trackConversionsDemoLink" href="#" class="_1upinteraction">Click me!</a>

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

Ready to get insights?

Join others using Nocodelytics to get insights from Webflow.
Track Link 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.