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?

Join Our Community

See us at ProductCon in SF on Oct. 8th! Check out #03_resources-and-events channel for more info.

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

12 comments

Alden Q.
·
·
🙌 thank you
Abby B.
·
·
hey! yes Alden Q. good call. can add
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
Enkhtur B.
·
·
I see. That sounds like a bug though, please consider fixing it. Thank you so much anyway for the investigation and support.
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.
·
·
Hello Abby B. , what's the status about this? we are still blocked and can't move forward.
Abby B.
·
·
hello! sorry for the delay -- still digging into it
❤️1
Enkhtur B.
·
·
Hi Abby B.. Sorry, do you have any updates on this?
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?
Abby B.
·
·
hey Enkhtur B. -- Abby here from Mixpanel -- looking into this for you now

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
}

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>
  )

Loading comments

Alden Q.
·
·
🙌 thank you
Abby B.
·
·
hey! yes Alden Q. good call. can add
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
Enkhtur B.
·
·
I see. That sounds like a bug though, please consider fixing it. Thank you so much anyway for the investigation and support.
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.
·
·
Hello Abby B. , what's the status about this? we are still blocked and can't move forward.
Abby B.
·
·
hello! sorry for the delay -- still digging into it
❤️1
Enkhtur B.
·
·
Hi Abby B.. Sorry, do you have any updates on this?
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?
Abby B.
·
·
hey Enkhtur B. -- Abby here from Mixpanel -- looking into this for you now

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
}

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>
  )