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

Enkhtur B. · 2025-01-09 09:19:00.871101+00

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?

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

12 comments

· Sorted by Oldest

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?
Enkhtur B.
·
·
Hi Abby B.. Sorry, do you have any updates on this?
Abby B.
·
·
hello! sorry for the delay -- still digging into it
❤️1
Enkhtur B.
·
·
Hello Abby B. , what's the status about this? we are still blocked and can't move forward.
Abby B.
·
·
Hey Enkhtur B. just checked with our team -- the pageview tracking code registers page title when the page loads but not on every pageview tracking call, so this is expected behavior. You'd need to set up additional tracking if you wanted a different behavior
Enkhtur B.
·
·
I see. That sounds like a bug though, please consider fixing it. Thank you so much anyway for the investigation and support.
Alden Q.
·
·
We just setup Mixpanel with Next.js for the first time and ran into this. Abby B. would you consider updating the docs on https://docs.mixpanel.com/docs/tracking-methods/integrations/nextjs to clarify that autocapture pageview does not work for next.js applications, and should be implemented manually? That would've sped up our debugging quite a bit
Abby B.
·
·
hey! yes Alden Q. good call. can add
Alden Q.
·
·
🙌 thank you

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?
Enkhtur B.
·
·
Hi Abby B.. Sorry, do you have any updates on this?
Abby B.
·
·
hello! sorry for the delay -- still digging into it
❤️1
Enkhtur B.
·
·
Hello Abby B. , what's the status about this? we are still blocked and can't move forward.
Abby B.
·
·
Hey Enkhtur B. just checked with our team -- the pageview tracking code registers page title when the page loads but not on every pageview tracking call, so this is expected behavior. You'd need to set up additional tracking if you wanted a different behavior
Enkhtur B.
·
·
I see. That sounds like a bug though, please consider fixing it. Thank you so much anyway for the investigation and support.
Alden Q.
·
·
We just setup Mixpanel with Next.js for the first time and ran into this. Abby B. would you consider updating the docs on https://docs.mixpanel.com/docs/tracking-methods/integrations/nextjs to clarify that autocapture pageview does not work for next.js applications, and should be implemented manually? That would've sped up our debugging quite a bit
Abby B.
·
·
hey! yes Alden Q. good call. can add
Alden Q.
·
·
🙌 thank you