1888467696
The with-google-analytics example had the "routeChangeComplete" event listener set up in components/Page.js, but that the event listener would only be set up if the user visited a page using that component. From the example, it's not clear if google analytics can be used without making every page use a component like components/Page.js. Someone following the example may make pages that don't use components/Page.js and fail to have page views reported, or feel compelled to force a shared component into their design unnecessarily, or might even make a mistake by making multiple different components like Page.js which each add a new "routeChangeComplete" event listener, causing page views to be over-reported when the user navigates between pages using the different components. This PR moves the "routeChangeComplete" event listener into _app.js, where it's guaranteed to be executed for every page and is more obviously decoupled from page-layout-related components. This PR also fixes a React warning about the lack of an onChange handler on an input tag, and removes the unnecessary implementation of `getInitialProps` in _document.js (the default implementation is inherited if not present, there's nothing this example needs to do with `getInitialProps` specifically, and the body of the method seems to have been based on an old version of next's internal implementation). This PR also fixes the url being passed to google tag manager incorrectly. It looks like page_path should be used instead of page_location because the `url` value only has the path, not the full url with the domain name, etc. (https://developers.google.com/analytics/devguides/collection/gtagjs/pages) |
||
|---|---|---|
| .. | ||
| components | ||
| lib | ||
| pages | ||
| package.json | ||
| README.md | ||
Example app with analytics
How to use
Using create-next-app
Download create-next-app to bootstrap the example:
npx create-next-app --example with-google-analytics with-google-analytics-app
# or
yarn create next-app --example with-google-analytics with-google-analytics-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-google-analytics
cd with-google-analytics
Install it and run:
yarn
yarn dev
Deploy it to the cloud with now (download)
now
The idea behind the example
This example shows how to use Next.js along with Google Analytics. A custom _document is used to inject tracking snippet and track pageviews and event.