-
Notifications
You must be signed in to change notification settings - Fork 26.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add with-google-analytics example (#4036)
* Rename example with-analytics to with-segment-analytics * Add with-google-analytics example
- Loading branch information
1 parent
341c34d
commit 2ba8ad9
Showing
16 changed files
with
215 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from 'react' | ||
import Page from '../components/Page' | ||
|
||
export default () => ( | ||
<Page> | ||
<h1>This is the About page</h1> | ||
</Page> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from 'react' | ||
import Page from '../components/Page' | ||
|
||
export default () => ( | ||
<Page> | ||
<h1>This is the Home page</h1> | ||
</Page> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
2 changes: 1 addition & 1 deletion
2
examples/with-analytics/package.json → examples/with-segment-analytics/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.