Next.js Discord

Discord Forum

Integrating MixPanel with CSR and SSR

Unanswered
West African Lion posted this in #help-forum
Open in Discord
Avatar
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:
"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

Avatar
Ray
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;
Avatar
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?
Avatar
Ray
use Script from next/script
Avatar
West 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
Avatar
Ray
oh wait, mixpanel is a client?
create a client component and initialize it in a useEffect
Avatar
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
Avatar
Ray
I thought it need to load a third party script
Avatar
West African LionOP
Well that is one way some people have solved it with the _app.jsx pattern
Avatar
Ray
oh wait its for node?
I think you should use this?
https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript
Avatar
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?