Two problems with using Mixpanel

[TimToshiro]

Hello. I have two problems related to work with Mixpanel.

The first one:
When I use function call at page opening - then event comes out incorrectly and has extremely inconvenient name among events on Mixpanel site itself.

const analytics = Analytics({
app: 'Test',
plugins: [
mixpanelPlugin({
token: 'test',
}),
googleAnalytics({
measurementIds: ['G-TEST'],
})
]
})

analytics.page({
url: pageUrl,
});

Second:
When I add information to a user, I see the name as a built-in parameter, but the email address is passed as custom and initially I don't see it in the table in the list of users. But I can see it inside properties of the user if I open full information. I don't have this problem with the name.

analytics.identify('testID', {
email: email,
name: name,
})

[DavidWells]

Hello there. I'm not using mixpanel myself. Double check the network calls in the browser dev tools to ensure the values being sent are defined and not null

[ousmaneNdiaye]

I have the same problem about wrong naming of the "page_view" event.
By activating the debug in mixpanel plugin I can clearly see that the page url is sent as event_name (instead of "page_view").

[ousmaneNdiaye]

@TimToshiro I think your second problem comes from the missing $ prefix for some reserved properties...

A temporary fix could be :

analytics.page({
url: pageUrl,
$email: "[email protected]"
});

You can find the list of mixpanel reserved properties here : https://docs.mixpanel.com/docs/tracking/how-tos/user-profiles#reserved-user-properties

[fotoflo]

I noticed the same problem with page views on mixpanel as well.

Sounds like the email property has to be changed to $email and that transformation should happen at the plugin

I also noticed some related PRs that are old but haven't been pulled. Is this library still under active maintance?

#115
#116

[fotoflo]

Update - solved.

I took a look at the mixpanel plugin and there's a way to override the page event:
https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-mixpanel/src/browser.js

So this is how i configured my analytics.tsx

import type { ReactNode } from "react";
import React, { useEffect } from "react";
import Analytics from "analytics";
import { AnalyticsProvider } from "use-analytics";
import mixpanelPlugin from "@analytics/mixpanel";
import { useRouter } from "next/router";
import { env } from "src/env/client.mjs"; // Make sure this module is typed

const analyticsInstance = Analytics({
  app: "fastmonitor",
  plugins: [
    mixpanelPlugin({
      token: env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN as string, // Type casting as string, assuming it's always defined
      track_pageview: true,
      pageEvent: "page_view",
    }),
  ],
  debug: env.NEXT_PUBLIC_HOST.includes("localhost"),
});

export default function AnalyticsHOC({ children }: { children: ReactNode }) {
  const { pathname, query, asPath } = useRouter();

  useEffect(() => {
    analyticsInstance.page({
      path: pathname,
      query: query as { [key: string]: string },
      host: window.location.origin,
    });
  }, [pathname, query, asPath]);

  return (
    <AnalyticsProvider instance={analyticsInstance}>
      {children}
    </AnalyticsProvider>
  );
}

And this is how it's rendering in mixpanel:

and for reference, in my _app.tsx (im using pages router)

  return (
    <>
        <SessionProvider session={session}>
            <AnalyticsHOC>
              <Component {...pageProps} />
            </AnalyticsHOC>
        </SessionProvider>
    </>
  );
};