terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add with-google-analytics example (#4036)

Browse source 
* Rename example with-analytics to with-segment-analytics

* Add with-google-analytics example
This commit is contained in:
Pavel Prichodko 2018-03-29 17:03:28 +02:00 committed by Tim Neutkens
parent 341c34d4bf
commit 2ba8ad9760
16 changed files with 215 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
examples/with-google-analytics/README.md Normal file
View file

@ -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).

26
examples/with-google-analytics/components/Header.js Normal file
View file

@ -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>
)

16
examples/with-google-analytics/components/Page.js Normal file
View file

@ -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>
)

17
examples/with-google-analytics/lib/gtag.js Normal file
View file

@ -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,
})
}

13
examples/with-google-analytics/package.json Normal file
View file

@ -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"
}
}

41
examples/with-google-analytics/pages/_document.js Normal file
View file

@ -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>
)
}
}

8
examples/with-google-analytics/pages/about.js Normal file
View file

@ -0,0 +1,8 @@
import React from 'react'
import Page from '../components/Page'
export default () => (
<Page>
<h1>This is the About page</h1>
</Page>
)

39
examples/with-google-analytics/pages/contact.js Normal file
View file

@ -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>
)
}
}

8
examples/with-google-analytics/pages/index.js Normal file
View file

@ -0,0 +1,8 @@
import React from 'react'
import Page from '../components/Page'
export default () => (
<Page>
<h1>This is the Home page</h1>
</Page>
)

10
examples/with-analytics/README.md → examples/with-segment-analytics/README.md
View file

@ -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,9 +9,9 @@
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
@ -19,8 +19,8 @@ yarn create next-app --example with-analytics with-analytics-app
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:

0
examples/with-analytics/components/Header.js → examples/with-segment-analytics/components/Header.js
View file

2
examples/with-analytics/package.json → examples/with-segment-analytics/package.json
View file

@ -1,5 +1,5 @@
{
"name": "with-analytics",
"name": "with-segment-analytics",
"scripts": {
"dev": "next",
"build": "next build",

0
examples/with-analytics/pages/_document.js → examples/with-segment-analytics/pages/_document.js
View file

0
examples/with-analytics/pages/about.js → examples/with-segment-analytics/pages/about.js
View file

0
examples/with-analytics/pages/contact.js → examples/with-segment-analytics/pages/contact.js
View file

0
examples/with-analytics/pages/index.js → examples/with-segment-analytics/pages/index.js
View file