next.js/examples/with-segment-analytics/README.md

[![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-segment-analytics)

# Example app with analytics

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example with-segment-analytics with-segment-analytics-app
# or
yarn create next-app --example with-segment-analytics with-segment-analytics-app
```

### Download manually

Download the example:

```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-segment-analytics
cd with-segment-analytics
```

Install it and run:

```bash
npm install
npm run dev
# or
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 `<head>`. 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).
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 15:03:28 +00:00			`[![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-segment-analytics)`
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00
			`# Example app with analytics`

			`## How to use`

			### Using `create-next-app`

Examples: stabalise README format and create-next-app usage (#4009) * Examples: clarify language around Yarn create & npx * add missing READMEs and create-next-app usage * suggest people tag jthegedus in firebase related issues * add yarn alt instructions * cerebraljs example readme & fixes 2018-04-03 12:19:05 +00:00			Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 08:09:46 +00:00			```bash
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 15:03:28 +00:00			`npx create-next-app --example with-segment-analytics with-segment-analytics-app`
Examples: use npx and yarn create to run create-next-app on examples (#4002) * remove global npm install of create-next-app * add npx to create-next-app command in examples * add bash to shell snippets * add yarn create to next-app command in examples * fix READMEs named with lowercase * change READMEs to use UPPERCASE 2018-03-14 08:09:46 +00:00			`# or`
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 15:03:28 +00:00			`yarn create next-app --example with-segment-analytics with-segment-analytics-app`
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00			```

			`### Download manually`

#4751 - Explicitly mention install when cloning examples (#4758) Preferably this installation wouldn't be necessary, but in lieu of a fix... #4751 2018-07-11 21:56:15 +00:00			`Download the example:`
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00
			```bash
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 15:03:28 +00:00			`curl https://codeload.github.com/zeit/next.js/tar.gz/canary \| tar -xz --strip=2 next.js-canary/examples/with-segment-analytics`
			`cd with-segment-analytics`
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00			```

			`Install it and run:`

			```bash
Examples: stabalise README format and create-next-app usage (#4009) * Examples: clarify language around Yarn create & npx * add missing READMEs and create-next-app usage * suggest people tag jthegedus in firebase related issues * add yarn alt instructions * cerebraljs example readme & fixes 2018-04-03 12:19:05 +00:00			`npm install`
			`npm run dev`
			`# or`
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 `<head>`, 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. 2018-01-31 09:35:27 +00:00			`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`

With segment (#6060) RE: https://github.com/zeit/next.js/issues/4587, this pull request improves the with-segment example. Previously, only SSR page loads were tracked. This pull request adds manual page view logging via `Router.events.on('routeChangeComplete')` in `Page.js`. There is also a minor bug fix on the textarea to remove a console error. 2019-01-18 19:40:23 +00:00			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 `<head>`. 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).