Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two problems with using Mixpanel #370

Open
TimToshiro opened this issue Mar 22, 2023 · 5 comments
Open

Two problems with using Mixpanel #370

TimToshiro opened this issue Mar 22, 2023 · 5 comments

Comments

@TimToshiro
Copy link

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
Copy link
Owner

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

image

@ousmaneNdiaye
Copy link

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
Copy link

ousmaneNdiaye commented Jul 31, 2023

@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
Copy link

fotoflo commented Mar 22, 2024

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
Copy link

fotoflo commented Mar 22, 2024

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:

image

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants