Integrating MixPanel with CSR and SSR
Unanswered
West African Lion posted this in #help-forum
West African LionOP
I am trying to integrate MixPanel on NextJS but the docs I am able to find are not for App Router. I'm trying to determine where I should initialize the mixpanel to allow for tracking on both the SSR and CSR.
I tried to do this to track page views, but it seems like this is out of date as the router doesn't have 'events' anymore:
I tried to do this to track page views, but it seems like this is out of date as the router doesn't have 'events' anymore:
"use client";
import { useRouter } from "next/router";
import { useEffect } from "react";
const RouterAnalytics = () => {
const router = useRouter();
console.log(router);
useEffect(() => {
const handleRouteChange = (url) => {
// This is a good place to add your analytics tracking code
console.log("Route change", url);
};
router.events.on("routeChangeStart", handleRouteChange);
return () => {
router.events.off("routeChangeStart", handleRouteChange);
};
}, [router.events]);
return null;
};
export default RouterAnalytics;16 Replies
@West African Lion I am trying to integrate MixPanel on NextJS but the docs I am able to find are not for App Router. I'm trying to determine where I should initialize the mixpanel to allow for tracking on both the SSR and CSR.
I tried to do this to track page views, but it seems like this is out of date as the router doesn't have 'events' anymore:
js
"use client";
import { useRouter } from "next/router";
import { useEffect } from "react";
const RouterAnalytics = () => {
const router = useRouter();
console.log(router);
useEffect(() => {
const handleRouteChange = (url) => {
// This is a good place to add your analytics tracking code
console.log("Route change", url);
};
router.events.on("routeChangeStart", handleRouteChange);
return () => {
router.events.off("routeChangeStart", handleRouteChange);
};
}, [router.events]);
return null;
};
export default RouterAnalytics;
try this
"use client";
import { useEffect } from "react";
const RouterAnalytics = () => {
const pathname = usePathname();
console.log(router);
useEffect(() => {
// This is a good place to add your analytics tracking code
console.log("Route change", url);
}, [pathname]);
return null;
};
export default RouterAnalytics;West African LionOP
"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
const RouterAnalytics = () => {
const pathname = usePathname();
console.log(pathname);
useEffect(() => {
// This is a good place to add your analytics tracking code
console.log("Route change", pathname);
}, [pathname]);
return null;
};
export default RouterAnalytics;tried this, and prints on first load, but not when i switch pages.
Nevermind
It's printing in browser console of course 🙂 thanks!
Do you know the best spot to initialize mixpanel in this case?
@West African Lion Do you know the best spot to initialize mixpanel in this case?
use
Script from next/scriptWest African LionOP
return (
<html lang="en">
<head>
<Script>
{mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID, {
debug: true,
track_pageview: true,
persistence: "localStorage",
})}
</Script>
</head>In my root layout.jsx i added this. however i am getting errors
Cannot read properties of undefined (reading 'disable_all_events') which means it didn't get initialized. i confirmed the env var is not null by logging it above the return@West African Lion
return (
<html lang="en">
<head>
<Script>
{mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_ID, {
debug: true,
track_pageview: true,
persistence: "localStorage",
})}
</Script>
</head>
In my root layout.jsx i added this. however i am getting errors `Cannot read properties of undefined (reading 'disable_all_events')` which means it didn't get initialized. i confirmed the env var is not null by logging it above the return
create a client component and initialize it in a useEffect
West African LionOP
Yea they have NodeJS docs but im struggling to convert them https://docs.mixpanel.com/docs/tracking-methods/sdks/nodejs
gotcha, let me try that
I thought it need to load a third party script
West African LionOP
Well that is one way some people have solved it with the _app.jsx pattern
oh wait its for node?
I think you should use this?
https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript
https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript
Polish
how to do it via client ? in client side, mixpanel capture many additional properties like ip address, browser , referrals. What is the best place to initialise and how to include/integrate mix panel?