Implementing Mixpanel on Static Pages: A Guide
How can I implement Mixpanel on pages that are loaded in a static way? It seems that Mixpanel only works with dynamic pages.
How can I implement Mixpanel on pages that are loaded in a static way? It seems that Mixpanel only works with dynamic pages.
Hi Moritz H., 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
Mixpanel works perfectly well with static pages! The implementation is actually straightforward and doesn't require dynamic page loading.For static websites, you can implement Mixpanel by adding the JavaScript snippet directly to your HTML pages. Simply paste the Mixpanel JavaScript code snippet right before your closing </head> tag on each page where you want to track events.Here's the basic implementation: ```
html
});
</script> LBKS```LBKSLBKSAccording to the [JavaScript SDK documentation](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#track-page-views), you can enable automatic page view tracking by setting `track_pageview: true` in the initialization. This will automatically track a page view event every time a page loads - which is exactly what you need for static pages.LBKSThe knowledge sources also mention that this approach works well for [CMS and E-Commerce sites](https://docs.mixpanel.com/docs/tracking-methods/integrations/cms-ecommerce), which often have static or semi-static pages. The default `track_pageview` setting is specifically designed for traditional multi-page websites (static pages), while single-page applications require different configuration options.
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! 📚
Yes, you can absolutely track page views server-side for static pages! However, it requires a different approach than client-side tracking.According to the Server-Side Best Practices documentation, page view tracking must be done manually for server-side implementations. Here are the key guidelines: General Approach:
- Track page views as a single event type by using a constant event_name
- Track different pages as an event property (not as different events) for better analysis
- Fire page view events only on successful responses to the client
- Parse headers and the request URL for common web analytics properties such as referrer and UTM parameters**Implementation Considerations:When you implement server-side tracking, you'll need to handle a few things manually that client-side SDKs do automatically: 1. : According to the Server-Side Identity Management guide, you'll need to generate a unique ID (like a UUIDv4) and store it in a cookie to track anonymous users across page views.2. : You'll need to parse the User-Agent header yourself, as described in the Server-Side Best Practices.3. : You'll need to pass the client's IP address (not your server's IP) to ensure accurate geolocation data.Example using Node.js:**LBKSconst Mixpanel = require('mixpanel'); const mp = Mixpanel.init('YOUR_PROJECT_TOKEN');LBKS// track "some_event" for distinct_id 12345 // with "plan" event prop mp.track('some_event', { distinct_id: '12345', plan: 'premium' });LBKSYou can use any of Mixpanel's server-side SDKs including Python, Node.js, PHP, Go, Ruby, or Java. The Choosing the Right Method guide notes that server-side tracking is reliable and not susceptible to ad-blockers, though it does require custom code to track anonymous users across requests.
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! 📚
Based on the knowledge sources provided, I don't have specific information about Mixpanel's support for Vercel's Incremental Static Regeneration (ISR) feature.However, I can share what the knowledge sources do mention about Mixpanel and static/server-side implementations: The knowledge sources include documentation for Next.js integration, which is commonly deployed on Vercel. The Next.js guide shows how to implement Mixpanel with both page router and app router configurations, using client-side tracking with the JavaScript SDK.For the specific scenario you're describing with ISR, the implementation would likely follow standard patterns: 1. Client-side tracking: You can use the JavaScript SDK as shown in the Next.js integration guide, which would work regardless of whether pages are statically generated, incrementally regenerated, or server-rendered.2. Server-side tracking: As mentioned in our previous discussion, you can implement server-side tracking manually using Mixpanel's server-side SDKs (like Node.js), which would work during the ISR process.The knowledge sources don't explicitly mention ISR compatibility or any limitations with it. Since Mixpanel supports both client-side JavaScript tracking and server-side Node.js tracking (which Next.js uses), there shouldn't be inherent incompatibility with ISR. However, I cannot definitively confirm native ISR-specific support as the knowledge sources don't explicitly address this feature.
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.