Webflow sync, pageviews & more.
NEW

Do I need to add the Mixpanel code to each page in Webflow or just in the project settings?

TL;DR
  • Add Mixpanel's tracking code once in Webflow's Project Settings under the Custom Code tab and publish the site.
  • Use page-specific Custom Code or Embed elements in Webflow Designer to track custom events or interactions.

To install Mixpanel in Webflow, you only need to add the tracking code once in the Project Settings, not on each individual page.

1. Add Mixpanel Code in Project Settings

  • Go to Project Settings in your Webflow dashboard.
  • Click on the Custom Code tab.
  • Paste the Mixpanel tracking snippet into the Header or Footer section—usually Header is recommended.
  • Scroll down and click Save Changes.
  • Then go to the Publish menu and re-publish your site to update the live version.

2. When Page-Specific Tracking Is Needed

  • If you want to track specific events or user interactions on certain pages, you can use Mixpanel’s JavaScript API by adding custom scripts to those pages:
  • Go to the page in the Webflow Designer.
  • Open the Page Settings (gear icon next to the page name).
  • Scroll to the Custom Code area and insert your specific Mixpanel event code under Footer Code.
  • Publish the site again to apply.

3. Use Webflow’s Embed Element for In-Page Events

  • If tracking custom events (e.g., button clicks), use the Embed element to insert Mixpanel function calls where needed.
  • Position the Embed wherever you want the script to run—could be inline or hidden depending on the event logic.

Summary

Add the Mixpanel base tracking code once in Webflow's Project Settings to enable site-wide tracking. Only use page-level or in-page embeds for custom events you want to fire on specific user interactions or pages.

Rate this answer

Other Webflow Questions