From f7cb3c73324e7dd74bcf561dc94c54e752167683 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko Date: Tue, 20 Mar 2018 14:40:41 +0100 Subject: [PATCH] Add with-google-analytics example --- examples/with-google-analytics/README.md | 41 +++++++++++++++++++ .../components/Header.js | 26 ++++++++++++ .../with-google-analytics/components/Page.js | 16 ++++++++ examples/with-google-analytics/lib/gtag.js | 17 ++++++++ examples/with-google-analytics/package.json | 13 ++++++ .../with-google-analytics/pages/_document.js | 38 +++++++++++++++++ examples/with-google-analytics/pages/about.js | 8 ++++ .../with-google-analytics/pages/contact.js | 39 ++++++++++++++++++ examples/with-google-analytics/pages/index.js | 8 ++++ 9 files changed, 206 insertions(+) create mode 100644 examples/with-google-analytics/README.md create mode 100644 examples/with-google-analytics/components/Header.js create mode 100644 examples/with-google-analytics/components/Page.js create mode 100644 examples/with-google-analytics/lib/gtag.js create mode 100644 examples/with-google-analytics/package.json create mode 100644 examples/with-google-analytics/pages/_document.js create mode 100644 examples/with-google-analytics/pages/about.js create mode 100644 examples/with-google-analytics/pages/contact.js create mode 100644 examples/with-google-analytics/pages/index.js diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md new file mode 100644 index 00000000000000..766aab7a0a295f --- /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 00000000000000..9739e3eae90bdc --- /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 00000000000000..421c5f2b387648 --- /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 00000000000000..3279ca6f776725 --- /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 00000000000000..ba89a7174a6ff5 --- /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 00000000000000..cc11155600f327 --- /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 */} +