Usage in redirect routes

[SevenOutman]

Hi, thanks for providing this convenient SDK and I enjoy using it in my Next.js projects. I'm just wondering how am I supposed to use it in routes that redirects (so that the <Analytics /> component won't render)? FYI in my case I'm doing redirects in getServerSideProps, and I want to track visitors and views to this /some-route path.

// pages/some-route.js

export async function getServerSideProps() {
  if (await shouldRedirect()) {
    return {
      destination: 'https://my.destination',
      permanent: false
    }
  }

  return {
    props: {}
  }
}

[tobiaslins]

Hey! We're currently working on server-side events and they are already available on the beta package. npm i @vercel/analytics@beta.

After that it should work like that:

import { track } from "@vercel/analytics/server"
// pages/some-route.js

export async function getServerSideProps(ctx) {
  if (await shouldRedirect()) {

    await track("Redirecting", {
       destination: "",
    }, {
       headers: ctx.req.headers
    })

    return {
      destination: 'https://my.destination',
      permanent: false
    }
  }

  return {
    props: {}
  }
}

Be sure to pass the headers to track, this will link the custom event to the pageviews from the users before.

Let me know if that works!

[SevenOutman]

After that it should work like that:

@tobiaslins Thanks for your reply! The track feature looks good, but let me be more clear about my question. I'm not trying to track a "Redirecting" event, but to track the visit to this "/some-route" path, so that it's counted in the Web Analytics visitors/pageviews chart.

How am I supposed to do that?

[tobiaslins]

Oh sorry, I misunderstood this. The visit to the /some-route path is automatically tracked by Web Analytics (we track all pages that are visited by the client automatically) Are you not seeing it on the dashboard?

[SevenOutman]

Are you not seeing it on the dashboard?

No, I'm not seeing it on the dashboard.

The visit to the /some-route path is automatically tracked by Web Analytics (we track all pages that are visited by the client automatically)

Let me make this clear...IIUC the tracking is done by using @vercel/analytics in Next.js app. Do you mean that it's actually handled by the Vercel server so using Vercel Analytics SDK is not even required? (That doesn't explain me not seeing it on dashboard though)

[tobiaslins]

Sorry for not being clear. @vercel/analytics is still required and does the automatic pageview tracking when adding <Analytics /> component to your layout/app.tsx. Where have you placed the component?

[SevenOutman]

Sorry for not being clear. @vercel/analytics is still required and does the automatic pageview tracking when adding <Analytics /> component to your layout/app.tsx. Where have you placed the component?

I placed <Analytics /> in pages/_app.tsx as the documentation says (I'm not using app dir) and it tracks pageviews as expected. What I'm looking for with this issue is how to track pageview in redirect routes, where the client React app does not even render?

[tobiaslins]

Oh, so instead of

await track("Redirecting", {
  destination: "",
}, {
  headers: ctx.req.headers
})

you would want to do something like pageview("/redirected-route") from the server?

We don't support this yet, but could also be added most probably!

[SevenOutman]

you would want to do something like pageview("/redirected-route") from the server?

That's right. I want to track users' visits to this /some-route path, where they will be redirected to another destination - this is done in getServerSideProps thus /some-route does not render a client-side page. Not to track the destinations they are redirected to.

We don't support this yet, but could also be added most probably!

Alright I'll keep an eye on this.

[asibs]

Would also be interested in this functionality. Assume it's still not available?