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 */} +