diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md
new file mode 100644
index 0000000000000..766aab7a0a295
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..9739e3eae90bd
--- /dev/null
+++ b/examples/with-google-analytics/components/Header.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Link from 'next/link'
+
+export default () => (
+
+)
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
new file mode 100644
index 0000000000000..421c5f2b38764
--- /dev/null
+++ 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 }) => (
+
+
+ {children}
+
+)
diff --git a/examples/with-google-analytics/lib/gtag.js b/examples/with-google-analytics/lib/gtag.js
new file mode 100644
index 0000000000000..3279ca6f77672
--- /dev/null
+++ b/examples/with-google-analytics/lib/gtag.js
@@ -0,0 +1,17 @@
+export const 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
new file mode 100644
index 0000000000000..ba89a7174a6ff
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..cc11155600f32
--- /dev/null
+++ b/examples/with-google-analytics/pages/_document.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+
+import { GA_TRACKING_ID } from '../lib/gtag'
+
+export default class extends Document {
+ static getInitialProps ({ renderPage }) {
+ return renderPage()
+ }
+
+ render () {
+ return (
+
+
+ {/* Global Site Tag (gtag.js) - Google Analytics */}
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/examples/with-google-analytics/pages/about.js b/examples/with-google-analytics/pages/about.js
new file mode 100644
index 0000000000000..a340e5920c5cf
--- /dev/null
+++ b/examples/with-google-analytics/pages/about.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Page from '../components/Page'
+
+export default () => (
+
+ This is the About page
+
+)
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js
new file mode 100644
index 0000000000000..1d086ce12e6b6
--- /dev/null
+++ 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 (
+
+ This is the Contact page
+
+
+ )
+ }
+}
diff --git a/examples/with-google-analytics/pages/index.js b/examples/with-google-analytics/pages/index.js
new file mode 100644
index 0000000000000..9969504759144
--- /dev/null
+++ b/examples/with-google-analytics/pages/index.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import Page from '../components/Page'
+
+export default () => (
+
+ This is the Home page
+
+)