with-segment-analytics example reports incorrect data on client-side transitions

[pjaws]

Bug report

Describe the bug

Following the example for client-side analytics.page() calls results in data from the previous page being sent.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install Segment in a Next.js project according to the example repo
2. Click a "next/link", resulting in a client-side route change
3. analytics.page() is called with path, url, etc. from the previous page

Expected behavior

analytics.page() should be called with the current page info

Screenshots

In this screenshot I called analytics.page(url) inside of Router.on('routeChangeComplete', (url) => {...}) as per the example. Path should be /start, but instead is /. Also worth noting the /start page event you see at the bottom of the screenshot was from a full page refresh, not a client-side transition. You can clearly see the difference.

System information

• OS: macOS
• Browser: Chrome
• Version of Next.js: 9.3.3

Additional context

In my case I fixed the issue by overriding the default Segment properties with properties I parsed from the url in the callback (using new URL()). This is a little tricky and hard to generalize, since it can depend on whether or not you're using absolute or relative paths in your asPaths.

The real solution is probably figuring out how Segment determines these values and why there is an inconsistency between those and the values in next/router when routeChangeComplete is fired.

[dsbrianwebster]

@pjaws have you tried wrapping window.analytics.page(url) in requestAnimationFrame?

export const useAnalytics = () => {
  React.useEffect(() => {
    const handleRouteChange = (url: string) => {
      requestAnimationFrame(() => window.analytics.page(url))
    }
    Router.events.on('routeChangeComplete', handleRouteChange)
    return () => Router.events.off('routeChangeComplete', handleRouteChange)
  }, [])
}

[benjaminhoffman]

I'm not 100% certain but after testing locally, I found inconsistencies with data being reported in Segment (similar to @pjaws example) based on the current with-segment-analytics example. Let me report what I've found and I'm curious to see what others may be finding.

TLDR:

1. name value was being reported as the url
2. url was always the homepage, even if I loaded a test page first (in incognito)
3. path was always / (same as url issue described above)

I'd be willing to bet many folks get similar behavior if they follow the example repo exactly. Here's why:

1. According to the Segment docs: "if you pass only one string to page it is assumed to be name." In the nextjs example, we are passing url but Segment is interpreting that as name.

2. Unless you explicitly set page canonical, Segment will report only the homepage (or maybe only the first page you load — please test to confirm)

3. Not really related to this issue/bug but in the example repo, we use Segment snippet. As instructed in the docs: "The recommended way to use analytics.js is to follow the analytics.js quickstart guide. If you absolutely need to generate a snippet dynamically, this is an alternate solution." ... it would be helpful if we could update the example to discourage the use of this snippet.

I am still testing so please take this with a grain of salt, but so far I think this solution works pretty well:

1. always set page canonical tag (I used next-seo)
2. do NOT pass url like in the next example
3. here is my code:

const trackPageView = (
  category: string = null,
  name: string = null,
  properties: object = {},
  options: object = {},
  callback?: () => void,
) => {
  window.analytics.page(category, name, properties, options, callback);
};

[shihfu]

Hi @benjaminhoffman,

I'm just following up on your comment here, which lead me to this Github issue.

Did you get it all up and running with expected behaviour? I am in the process of setting up Segment with a new Next.js app and am a little confused as to what the latest official recommended approach is.

Should I be using @segment/analytics-next or @segment/snippet?

As noted by you earlier, I also noticed this excerpt:

The recommended way to use analytics.js is to follow the analytics.js quickstart guide. If you absolutely need to generate a snippet dynamically, this is an alternate solution. Note that when using this in-browser, the global analytics object will not be defined until the snippet is rendered and executed.

Do we even need to install any of these dependencies? If we just copy and paste the generated snippet created by Segment, it should just load the latest version from the CDN right?

[benjaminhoffman]

@shih-js im using snippet bc i couldn't figure out why it was bad not to use it. if you can get the quickstart snippet working, go for it! lemme know your implementation bc i'd love to refactor mine. (i never bothered to even try).

where i think you'll have the most issue is with analytics.page. i removed it from mine bc i don't use pageviews w segment (yet) but ive read a bunch and others are experiencing a bit of a headache i believe

[gbsimon87]

Hey @benjaminhoffman @shih-js
Great info above - first time I'm setting up Segment in a NextJS App for the same time and I had the exact same questions/concerns as to which approach to take.

I believe the 'headaches' being experienced with analytics.page are mentioned here.

TL/DR: "to avoid event duplication in Segment, do not forget to turn of the automatic page call from the _document.js snippet like"