rsnext/examples/with-segment-analytics/README.md

# Example app with analytics

## Deploy your own

Deploy the example using [ZEIT Now](https://zeit.co/now):

[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-segment-analytics)

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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 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 10:35:27 +01:00			`# Example app with analytics`

Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00			`## Deploy your own`

			`Deploy the example using [ZEIT Now](https://zeit.co/now):`

			`[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/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 10:35:27 +01:00			`## How to use`

			### Using `create-next-app`

Replace the deprecated Create Next App URL (#9032) 2019-10-11 05:34:14 +02:00			Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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 10:35:27 +01: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 09:09:46 +01:00			```bash
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 17:03:28 +02: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 09:09:46 +01:00			`# or`
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 17:03:28 +02: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 10:35:27 +01: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 23:56:15 +02: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 10:35:27 +01:00
			```bash
Add with-google-analytics example (#4036) * Rename example with-analytics to with-segment-analytics * Add with-google-analytics example 2018-03-29 17:03:28 +02: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 10:35:27 +01: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 14:19:05 +02: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 10:35:27 +01:00			`yarn`
			`yarn dev`
			```

Add the deploy button to compatible examples (#9547) 2019-11-27 17:40:58 +01:00			`Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):`
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 10:35:27 +01:00
			```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 20:40:23 +01: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).