diff --git a/examples/with-segment-analytics/README.md b/examples/with-segment-analytics/README.md index a0683ac7..15731349 100644 --- a/examples/with-segment-analytics/README.md +++ b/examples/with-segment-analytics/README.md @@ -41,4 +41,4 @@ now ## The idea behind the example -This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the `` and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions. +This example shows how to use Next.js along with [Segment Analytics](https://segment.com). A custom document is used in inject the [Segment snippet](https://github.com/segmentio/snippet) into the ``. Page views are tracked on both the server and client side and components fire ["track"](https://segment.com/docs/spec/track/) events based on user actions (see `contact.js` for example). diff --git a/examples/with-segment-analytics/components/Page.js b/examples/with-segment-analytics/components/Page.js new file mode 100644 index 00000000..f98df124 --- /dev/null +++ b/examples/with-segment-analytics/components/Page.js @@ -0,0 +1,16 @@ +import React from 'react' +import Router from 'next/router' +import Header from './Header' + +// Track client-side page views with Segment +Router.events.on('routeChangeComplete', url => { + window.analytics.page(url) +}) + +const Page = ({ children }) => +
+
+ {children} +
+ +export default Page diff --git a/examples/with-segment-analytics/pages/_app.js b/examples/with-segment-analytics/pages/_app.js new file mode 100644 index 00000000..e1101c32 --- /dev/null +++ b/examples/with-segment-analytics/pages/_app.js @@ -0,0 +1,27 @@ +import React from 'react' +import Page from '../components/Page' +import App, { Container } from 'next/app' + +export default class MyApp extends App { + static async getInitialProps ({ Component, router, ctx }) { + let pageProps = {} + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx) + } + + return { pageProps } + } + + render () { + const { Component, pageProps } = this.props + + return ( + + + + + + ) + } +} diff --git a/examples/with-segment-analytics/pages/_document.js b/examples/with-segment-analytics/pages/_document.js index b212c2d1..bb97a9c3 100644 --- a/examples/with-segment-analytics/pages/_document.js +++ b/examples/with-segment-analytics/pages/_document.js @@ -17,7 +17,9 @@ export default class extends Document { renderSnippet () { const opts = { apiKey: ANALYTICS_WRITE_KEY, - page: true // Set this to `false` if you want to manually fire `analytics.page()` from within your pages. + // note: the page option only covers SSR tracking. + // Page.js is used to track other events using `window.analytics.page()` + page: true } if (NODE_ENV === 'development') { diff --git a/examples/with-segment-analytics/pages/about.js b/examples/with-segment-analytics/pages/about.js index 89404810..f65b0b22 100644 --- a/examples/with-segment-analytics/pages/about.js +++ b/examples/with-segment-analytics/pages/about.js @@ -1,9 +1,7 @@ import React from 'react' -import Header from '../components/Header' export default () => (
-

This is the About page

) diff --git a/examples/with-segment-analytics/pages/contact.js b/examples/with-segment-analytics/pages/contact.js index d2751589..9ef7e506 100644 --- a/examples/with-segment-analytics/pages/contact.js +++ b/examples/with-segment-analytics/pages/contact.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import Header from '../components/Header' export default class extends Component { state = { message: '' } @@ -7,12 +6,11 @@ export default class extends Component { render () { return (
-

This is the Contact page