vercel · timneutkens · Mar 29, 2018 · Mar 15, 2018 · Mar 20, 2018
diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md
@@ -0,0 +1,41 @@
+[![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-google-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:
+
+```bash
+npx create-next-app --example with-google-analytics with-google-analytics-app
+# or
+yarn create next-app --example with-google-analytics with-google-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-google-analytics
+cd with-google-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](https://github.com/zeit/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_document](https://github.com/zeit/next.js/#custom-document) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
diff --git a/examples/with-google-analytics/components/Header.js b/examples/with-google-analytics/components/Header.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default () => (
+  <header>
+    <nav>
+      <ul>
+        <li>
+          <Link href='/'>
+            <a>Home</a>
+          </Link>
+        </li>
+        <li>
+          <Link href='/about'>
+            <a>About</a>
+          </Link>
+        </li>
+        <li>
+          <Link href='/contact'>
+            <a>Contact</a>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  </header>
+)
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import Router from 'next/router'
+import Header from './Header'
+
+import * as gtag from '../lib/gtag'
+
+Router.onRouteChangeComplete = url => {
+  gtag.pageview(url)
+}
+
+export default ({ children }) => (
+  <div>
+    <Header />
+    {children}
+  </div>
+)
diff --git a/examples/with-google-analytics/lib/gtag.js b/examples/with-google-analytics/lib/gtag.js
@@ -0,0 +1,17 @@
+export const GA_TRACKING_ID = '<YOUR_GA_TRACKING_ID>'
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = url => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_location: url,
+  })
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}
diff --git a/examples/with-google-analytics/package.json b/examples/with-google-analytics/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "with-google-analytics",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  }
+}
diff --git a/examples/with-google-analytics/pages/_document.js b/examples/with-google-analytics/pages/_document.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import flush from 'styled-jsx/server'
+
+import { GA_TRACKING_ID } from '../lib/gtag'
+
+export default class extends Document {
+  static getInitialProps ({ renderPage }) {
+    const { html, head, errorHtml, chunks } = renderPage()
+    const styles = flush()
+    return { html, head, errorHtml, chunks, styles }
+  }
+
+  render () {
+    return (
+      <html>
+        <Head>
+          {/* Global Site Tag (gtag.js) - Google Analytics */}
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', '${GA_TRACKING_ID}');
+          `}}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-google-analytics/pages/about.js b/examples/with-google-analytics/pages/about.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Page from '../components/Page'
+
+export default () => (
+  <Page>
+    <h1>This is the About page</h1>
+  </Page>
+)
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import Page from '../components/Page'
+
+import * as gtag from '../lib/gtag'
+
+export default class extends Component {
+  state = { message: '' }
+
+  handleInput = e => {
+    this.setState({ message: e.target.value })
+  }
+
+  handleSubmit = e => {
+    e.preventDefault()
+
+    gtag.event({
+      action: 'submit_form',
+      category: 'Contact',
+      label: this.state.message
+    })
+
+    this.setState({ message: '' })
+  }
+
+  render () {
+    return (
+      <Page>
+        <h1>This is the Contact page</h1>
+        <form onSubmit={this.handleSubmit}>
+          <label>
+            <span>Message:</span>
+            <textarea onInput={this.handleInput} value={this.state.message} />
+          </label>
+          <button type='submit'>submit</button>
+        </form>
+      </Page>
+    )
+  }
+}
diff --git a/examples/with-google-analytics/pages/index.js b/examples/with-google-analytics/pages/index.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Page from '../components/Page'
+
+export default () => (
+  <Page>
+    <h1>This is the Home page</h1>
+  </Page>
+)
diff --git a/examples/with-analytics/README.md → examples/with-segment-analytics/README.md b/examples/with-analytics/README.md → examples/with-segment-analytics/README.md
@@ -1,4 +1,4 @@
-[![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)
+[![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
 
@@ -9,18 +9,18 @@
 Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-analytics with-analytics-app
+npx create-next-app --example with-segment-analytics with-segment-analytics-app
 # or
-yarn create next-app --example with-analytics with-analytics-app
+yarn create next-app --example with-segment-analytics with-segment-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
+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:

diff --git a/examples/with-analytics/components/Header.js → ...th-segment-analytics/components/Header.js b/examples/with-analytics/components/Header.js → ...th-segment-analytics/components/Header.js
diff --git a/examples/with-analytics/package.json → examples/with-segment-analytics/package.json b/examples/with-analytics/package.json → examples/with-segment-analytics/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "with-analytics",
+  "name": "with-segment-analytics",
   "scripts": {
     "dev": "next",
     "build": "next build",

diff --git a/examples/with-analytics/pages/_document.js → ...with-segment-analytics/pages/_document.js b/examples/with-analytics/pages/_document.js → ...with-segment-analytics/pages/_document.js
diff --git a/examples/with-analytics/pages/about.js → ...les/with-segment-analytics/pages/about.js b/examples/with-analytics/pages/about.js → ...les/with-segment-analytics/pages/about.js
diff --git a/examples/with-analytics/pages/contact.js → ...s/with-segment-analytics/pages/contact.js b/examples/with-analytics/pages/contact.js → ...s/with-segment-analytics/pages/contact.js
diff --git a/examples/with-analytics/pages/index.js → ...les/with-segment-analytics/pages/index.js b/examples/with-analytics/pages/index.js → ...les/with-segment-analytics/pages/index.js