From 9165d753d06e578dbcb26b4877dcb19eb7bbec35 Mon Sep 17 00:00:00 2001 From: Stephen Mathieson Date: Wed, 31 Jan 2018 04:35:27 -0500 Subject: [PATCH] Add an example using analytics (#3580) This patch adds an example of a Next.js app using analytics. A custom document injects the [Segment](https://segment.com) bootstrapping snippet into the ``, allowing "page" and "track" calls to be made. An issue came up in CNA asking how we handle this in our apps (see https://github.com/segmentio/create-next-app/issues/24), so I figure an "official example" could help. NOTE: I am affiliated with Segment. --- examples/with-analytics/README.md | 40 +++++++++++++++ examples/with-analytics/components/Header.js | 14 ++++++ examples/with-analytics/package.json | 14 ++++++ examples/with-analytics/pages/_document.js | 44 +++++++++++++++++ examples/with-analytics/pages/about.js | 9 ++++ examples/with-analytics/pages/contact.js | 51 ++++++++++++++++++++ examples/with-analytics/pages/index.js | 9 ++++ 7 files changed, 181 insertions(+) create mode 100644 examples/with-analytics/README.md create mode 100644 examples/with-analytics/components/Header.js create mode 100644 examples/with-analytics/package.json create mode 100644 examples/with-analytics/pages/_document.js create mode 100644 examples/with-analytics/pages/about.js create mode 100644 examples/with-analytics/pages/contact.js create mode 100644 examples/with-analytics/pages/index.js 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 */} +