Fixing Page Title Issues in Next.js App with Mixpanel Events

Hello, team! Our next.js app is having a problem where [Auto] Page View event sent to mixpanel are showing the page title incorrectly. So for example I am looking at a page with the meta title jobs, the mixpanel event correctly shows the URL but the page_title is incorrect and mostly show the page title from the previous page. Does anyone know what's going on?

4 comments

Enkhtur B.

Here is how I initialized the mixpanel in the next.js.

-> layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja-JP">
      <body>
        <Mixpanel token={process.env.MIXPANEL_TOKEN ?? ''} />
        {children}
      </body>
    </html>
  )

Enkhtur B.

-> mixpanel.tsx

'use client'

import mixpanel from 'mixpanel-browser'
import { useEffect } from 'react'
import { getCookie } from '@/lib/utils'
import {
  MIXPANEL_EVENT_ID,
  MIXPANEL_SUPER_PROPERTY_KEY,
  MIXPANEL_PROFILE_PROPERTY_KEY,
} from '@/constants/mixpanel'

export const Mixpanel = ({ token }: { token: string }) => {
  useEffect(() => {
    mixpanel.init(token, {
      track_pageview: 'full-url',
      persistence: 'localStorage',
    })
    const userId = getCookie('user-id')
    if (userId) {
      mixpanel.identify(userId)
      mixpanel.people.set_once({
        [MIXPANEL_PROFILE_PROPERTY_KEY.USER_ID]: userId,
        registered: true,
        $name: userId,
      })
      mixpanel.track(MIXPANEL_EVENT_ID.USER_LOGGED_IN)
    }
  }, [token])

  return null
}

Abby B.
·
·
hey Enkhtur B. -- Abby here from Mixpanel -- looking into this for you now
Enkhtur B.
·
·
Hello Abby B., Thanks for checking. I also confirmed this bug from debug mode. As you can see from the following image, the title mixpanel sending is different than title in the browser tab. This is urgent and preventing us from moving forward. Could you please address it as a priority?