Integrate Mixpanel with Webflow

Lack of documentation on integrating Mixpanel with Webflow led me to write this blog.

After you have launched your website you would want to analyze how users interact with your Internet-connected product. Mixpanel is a product analysis tool that captures user data and interactions with your website and provides you with valuable customer insights which can help you customize your product.

Many of you might be familiar with Google Analytics(GA). Mixpanel is similar to GA, but it focuses more on tracking User Actions rather than Page Views (It has the capability of doing both things).

No Code Website — Webflow

So while building our website we decided to go with No-Code development platform webflow.com. According to me, webflow is the most advanced No-Code platform for building intuitive customizable websites and it gives you immense power with CSS customization. If you are a developer and have done web development in past, you’ll love webflow given the way you build your website is exactly like you would have coded but just with clicks and drags.

Integration of Webflow w/ Mixpanel

Analytics tools are easy to integrate on your platform if you are coding it using Javascript. The problem with No-Code platform is there is no straightforward way to add Javascript on your website or install easy-to-go npm packages.

Mixpanel has these amazing developer documentation which once could refer while integrating their website — https://developer.mixpanel.com/docs/what-is-mixpanel. But they don’t have a way to directly integrate it with No-code platform without any custom Javascript.

Webflow has direct integration support for Google Analytics. For Mixpanel one would have to add custom javascript to their webflow website. In order to add custom code on Webflow one would need to purchase at least their basic plan and then head over to

Project → Settings →Custom code

Integration is done in 2 steps :

Step 1: Initialization of Mixpanel SDK

1. Login to Mixpanel.com and open your project settings (Click on Settings gear icon at the top right of your screen → Select the Project Name→ Projects)
2. Click on the Project Name and copy the Project Token
3. Copy the script containing Webflow JS bundle from the snippet posted after step 4.
4. Replace the “YOUR_TOKEN” with Project Token copied from step 2

Copy Project Token from Mixpanel

Step 2: Add trackers for capturing custom actions

Initialization of Mixpanel is done, and now we want to primarily add two trackers.

Page View — The below Snippet will add a page view tracker on all the pages of your website which will help you get insights on user integration and page views.

If you want to add tracker only on certain pages you can create multiple function calls of “mixpanel.track” like above replacing it with intended page “Url” and “Page name”

Data Tracker on Click event — The below snippet will capture user clicks and action. The following Vanilla JS code can be extended to capture custom trackers as per requirement.

After adding this snippet to the custom code of webflow, you need to add “data-tracker” custom attributes on the element you want to capture the click event.

Here the Name attribute should be “data-tracker” as this is what we are looking for in the code, and the value should be Action|Page eg: “HOME_SIGNIN|HOME” as we split based on “|” on line 15 of the code and set the action part as Mixpanel tracker.

That’s about it. Once you save these changes and publish them to the selected domain you should be able to see these events registered in Mixpanel, with the help of these added events, you can create flow, funnel and dashboards as per your requirement.

Feel free to contact me on Linkedin or Twitter to talk about code :)