diff --git a/examples/with-react-ga/README.md b/examples/with-react-ga/README.md new file mode 100644 index 00000000..f37b9c67 --- /dev/null +++ b/examples/with-react-ga/README.md @@ -0,0 +1,29 @@ +[![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-react-ga) + +# React-GA example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-ga +cd with-react-ga +``` + +Install it and run: + +```bash +npm install +npm run 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 the most basic way to use [react-ga](https://github.com/react-ga/react-ga) using `` component with NextJs. You can also use an HOC instead of `` component. Modify `Tracking ID` in `utils/analytics.js` file for testing this example. diff --git a/examples/with-react-ga/components/Layout.js b/examples/with-react-ga/components/Layout.js new file mode 100644 index 00000000..94dac8fd --- /dev/null +++ b/examples/with-react-ga/components/Layout.js @@ -0,0 +1,19 @@ +import React from 'react' +import { initGA, logPageView } from '../utils/analytics' + +export default class Layout extends React.Component { + componentDidMount () { + if (!window.GA_INITIALIZED) { + initGA() + window.GA_INITIALIZED = true + } + logPageView() + } + render () { + return ( +
+ {this.props.children} +
+ ) + } +} diff --git a/examples/with-react-ga/package.json b/examples/with-react-ga/package.json new file mode 100644 index 00000000..e200bbb4 --- /dev/null +++ b/examples/with-react-ga/package.json @@ -0,0 +1,17 @@ +{ + "name": "hello-world", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "*", + "react": "^15.4.2", + "react-dom": "^15.4.2", + "react-ga": "2.2.0" + }, + "author": "", + "license": "ISC" +} diff --git a/examples/with-react-ga/pages/about.js b/examples/with-react-ga/pages/about.js new file mode 100644 index 00000000..e4b6d1d5 --- /dev/null +++ b/examples/with-react-ga/pages/about.js @@ -0,0 +1,7 @@ +import Layout from '../components/Layout' + +export default () => ( + +
About us
+
+) diff --git a/examples/with-react-ga/pages/index.js b/examples/with-react-ga/pages/index.js new file mode 100644 index 00000000..281025fd --- /dev/null +++ b/examples/with-react-ga/pages/index.js @@ -0,0 +1,6 @@ +import Link from 'next/link' +import Layout from '../components/Layout' + +export default () => ( +
Hello World. About
+) diff --git a/examples/with-react-ga/utils/analytics.js b/examples/with-react-ga/utils/analytics.js new file mode 100644 index 00000000..61bb596a --- /dev/null +++ b/examples/with-react-ga/utils/analytics.js @@ -0,0 +1,24 @@ +import ReactGA from 'react-ga' + +export const initGA = () => { + console.log('GA init') + ReactGA.initialize('UA-xxxxxxxxx-1') +} + +export const logPageView = () => { + console.log(`Logging pageview for ${window.location.pathname}`) + ReactGA.set({ page: window.location.pathname }) + ReactGA.pageview(window.location.pathname) +} + +export const logEvent = (category = '', action = '') => { + if (category && action) { + ReactGA.event({ category, action }) + } +} + +export const logException = (description = '', fatal = false) => { + if (description) { + ReactGA.exception({ description, fatal }) + } +} diff --git a/examples/with-socket.io/pages/index.js b/examples/with-socket.io/pages/index.js index 578fb9e3..80251f54 100644 --- a/examples/with-socket.io/pages/index.js +++ b/examples/with-socket.io/pages/index.js @@ -22,7 +22,7 @@ class HomePage extends Component { // connect to WS server and listen event componentDidMount () { - this.socket = io('http://localhost:3000/') + this.socket = io() this.socket.on('message', this.handleMessage) } diff --git a/yarn.lock b/yarn.lock index 570b13af..2f0922f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4330,11 +4330,11 @@ public-encrypt@^4.0.0: parse-asn1 "^5.0.0" randombytes "^2.0.1" -punycode@1.3.2: +punycode@1.3.2, punycode@^1.2.4: version "1.3.2" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" -punycode@^1.2.4, punycode@^1.4.1: +punycode@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"