Mixpanel Community Icon

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?

  • Avatar of Enkhtur B.
    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>
      )

  • Avatar of Enkhtur B.
    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
    }
  • Avatar of Abby B.
    Abby B.
    ·
    ·

    hey Enkhtur B. -- Abby here from Mixpanel -- looking into this for you now

  • Avatar of Enkhtur B.
    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?

  • Avatar of Enkhtur B.
    Enkhtur B.
    ·
    ·

    Hi Abby B.. Sorry, do you have any updates on this?

  • Avatar of Abby B.
    Abby B.
    ·
    ·

    hello! sorry for the delay -- still digging into it

  • Avatar of Enkhtur B.
    Enkhtur B.
    ·
    ·

    Hello Abby B. , what's the status about this? we are still blocked and can't move forward.

  • Avatar of Abby B.
    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

  • Avatar of Enkhtur B.
    Enkhtur B.
    ·
    ·

    I see. That sounds like a bug though, please consider fixing it. Thank you so much anyway for the investigation and support.