diff --git a/examples/with-analytics/README.md b/examples/with-analytics/README.md new file mode 100644 index 00000000..ec305fb4 --- /dev/null +++ b/examples/with-analytics/README.md @@ -0,0 +1,40 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-analytics) + +# Example app with analytics + +## How to use + +### Using `create-next-app` + +Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example: + +``` +npm i -g create-next-app +create-next-app --example with-analytics with-analytics-app +``` + +### Download manually + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-analytics +cd with-analytics +``` + +Install it and run: + +```bash +yarn +yarn dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +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. diff --git a/examples/with-analytics/components/Header.js b/examples/with-analytics/components/Header.js new file mode 100644 index 00000000..d5087b9c --- /dev/null +++ b/examples/with-analytics/components/Header.js @@ -0,0 +1,14 @@ +import React from 'react' +import Link from 'next/link' + +export default () => ( +
+ +
+) diff --git a/examples/with-analytics/package.json b/examples/with-analytics/package.json new file mode 100644 index 00000000..c98d38dc --- /dev/null +++ b/examples/with-analytics/package.json @@ -0,0 +1,14 @@ +{ + "name": "with-analytics", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@segment/snippet": "^4.0.1", + "next": "latest", + "react": "^16.2.0", + "react-dom": "^16.2.0" + } +} diff --git a/examples/with-analytics/pages/_document.js b/examples/with-analytics/pages/_document.js new file mode 100644 index 00000000..b212c2d1 --- /dev/null +++ b/examples/with-analytics/pages/_document.js @@ -0,0 +1,44 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' +import * as snippet from '@segment/snippet' + +const { + // This write key is associated with https://segment.com/nextjs-example/sources/nextjs. + ANALYTICS_WRITE_KEY = 'NPsk1GimHq09s7egCUlv7D0tqtUAU5wa', + NODE_ENV = 'development' +} = process.env + +export default class extends Document { + static getInitialProps ({ renderPage }) { + const { html, head, errorHtml, chunks } = renderPage() + return { html, head, errorHtml, chunks } + } + + 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. + } + + if (NODE_ENV === 'development') { + return snippet.max(opts) + } + + return snippet.min(opts) + } + + render () { + return ( + + + {/* Inject the Segment snippet into the of the document */} +