Setting Up Webflow Tracking in Mixpanel: A Step-by-Step Guide
I want to start tracking some of my pages hosted on Webflow in our Mixpanel account. How do I set this up?
Hi Lara M., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> đź‘‹
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
To set up tracking for your Webflow pages in Mixpanel, you can use Mixpanel's JavaScript SDK. Here's how you can get started: 1. Install the Mixpanel JavaScript SDK: Add the following code snippet just before the closing </head> tag in your Webflow site's custom code settings:
html <script type="text/javascript"> (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" "); for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL? MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]); </script>
2. Initialize Mixpanel: After adding the SDK, you need to initialize Mixpanel with your project token. Add the following code to your site's custom code, replacing YOUR_TOKEN with your actual Mixpanel project token:
html <script> mixpanel.init("YOUR_TOKEN", {debug: true, track_pageview: true, persistence: "localStorage"}); </script>This configuration will automatically track page views and use localStorage for persistence, which is recommended for web tracking. By following these steps, you'll have basic page view tracking set up for your Webflow site in Mixpanel. You can then use Mixpanel's reports and dashboards to analyze your page views and other events.
For more detailed information on setting up and configuring the JavaScript SDK, you can refer to the Mixpanel JavaScript SDK documentation.Mixpanel SDKs: Javascript provides additional details on advanced configuration options and tracking methods if you need to customize your implementation further.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Let me check the knowledge base for you again. One moment! đź“š
No, for step 1 you don't need to put in your Mixpanel project token at all. The code snippet in step 1 is just the Mixpanel JavaScript SDK installation code, which is the same for all Mixpanel users. Your project token is only needed in step 2, where you initialize Mixpanel. This is where you replace "YOUR_TOKEN" with your actual Mixpanel project token.To clarify: 1. The first code snippet (step 1) is just to load the Mixpanel library. It doesn't require any customization.2. The second code snippet (step 2) is where you initialize Mixpanel with your specific project token:
LBKSmixpanel.init("YOUR_TOKEN", {debug: true, track_pageview: true, persistence: "localStorage"});LBKSHere, you would replace "YOUR_TOKEN" with your actual Mixpanel project token.You can find your project token in your Mixpanel project settings, as mentioned in the Mixpanel JavaScript SDK documentation: "You can find your token here."Remember, it's important to keep your project token secure, as it's used to authenticate your project when sending data to Mixpanel.kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.