How to integrate Amplitude with Webflow

A step-by-step guide on how to implement Amplitude in Webflow.

Intro

Webflow has become a hugely popular website building platform for the design and no-code communities.

Amplitude is considered the tool-of-choice for product analytics.

This guide outlines how to quickly get Amplitude set up on your Webflow site and start analysing your users.

Steps

Step 1: register for Webflow and Amplitude

Make sure you have registered for both services — you have a Webflow site, and an Amplitude login.

Step 2: copy Amplitude tracking script

You can find this by going to “Sources and Destinations” in the left nav. Make sure you have selected your project and then click “Add Data Source”

Click “JavaScript SDK” then “Next”. You’ll see the below screen, and should copy the whole code snippet, ending with </script>

Step 3: adding the snippet to your Webflow site

You probably want to track visitors across your entire site, so the snippet should be added “globally”. To do this, in Webflow go to your project settings, click the tab “custom code”, paste your code in the box under “Head Code” then click “Save Changes”.

Amplitude is now ready to start receiving tracking events for your site, which we will do in the next step.

Step 4: add tracking events

Tracking events tell Amplitude how your visitors are using your site. To implement events, there are two different methods, but I would recommend method 2 if you have time:

Method 1: global “page:shown” event

This is the quickest way to get event tracking coverage across your site. Very simply, paste the below script below the previous one in the “Head Code” box.

<script>
var eventProperties = {
 'page': window.location.pathname
};
amplitude.track('page:shown', eventProperties);
</script>

This does two things: it gets which page the user is on, and then it sends that along with a “page:shown” event to Amplitude.

Method 2: individual page events

It is better practice to use separate events for each part of your site. To do this, you need to edit each page of your site in Webflow, and put the below tracking script into the custom code box as shown. Make sure to change “home” for whatever the page is related to e.g. pricing, about, login, etc.

<script>
amplitude.track('home:shown');
</script>

Step 5: Check your events are firing

Your tracking should now be set up, and as you visit each page of your site the events will fire. You can check this by going back to Amplitude, and looking in the User Look-Up section. Switch “Live event updates” on and your events will start appearing.

You’re now done with the basics and can track your visitors!

Step 6: More complex tracking

Amplitude and Webflow are both powerful tools, and it won’t be long before you want to start tracking more detailed actions on your site, like button clicks and form submissions, as well as understanding where your traffic comes from and how they behave. You might even want to run A/B tests!

If you’d like support with your Analytics, I run a small agency, and would be interested to help with your implementation or analysis project.

Happy tracking 📈