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
diff --git a/examples/with-segment-analytics/pages/index.js b/examples/with-segment-analytics/pages/index.js
index 1b6956aa..ac192567 100644
--- a/examples/with-segment-analytics/pages/index.js
+++ b/examples/with-segment-analytics/pages/index.js
@@ -1,9 +1,7 @@
import React from 'react'
-import Header from '../components/Header'
export default () => (
-
This is the Home page
)