From 7b62184c0b2e8f24aca7730c103238453098ae74 Mon Sep 17 00:00:00 2001
From: Vinay Puppal <me@vinaypuppal.com>
Date: Sat, 10 Jun 2017 03:14:26 +0530
Subject: [PATCH] Add with-react-ga example (#2225)

* add with-react-ga example

* fix title in Readme
---
 examples/with-react-ga/README.md            | 29 +++++++++++++++++++++
 examples/with-react-ga/components/Layout.js | 19 ++++++++++++++
 examples/with-react-ga/package.json         | 17 ++++++++++++
 examples/with-react-ga/pages/about.js       |  7 +++++
 examples/with-react-ga/pages/index.js       |  6 +++++
 examples/with-react-ga/utils/analytics.js   | 24 +++++++++++++++++
 6 files changed, 102 insertions(+)
 create mode 100644 examples/with-react-ga/README.md
 create mode 100644 examples/with-react-ga/components/Layout.js
 create mode 100644 examples/with-react-ga/package.json
 create mode 100644 examples/with-react-ga/pages/about.js
 create mode 100644 examples/with-react-ga/pages/index.js
 create mode 100644 examples/with-react-ga/utils/analytics.js

diff --git a/examples/with-react-ga/README.md b/examples/with-react-ga/README.md
new file mode 100644
index 0000000000..f37b9c679c
--- /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 `<Layout/>` component with NextJs. You can also use an HOC instead of `<Layout/>` 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 0000000000..94dac8fd18
--- /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 (
+      <div>
+        {this.props.children}
+      </div>
+    )
+  }
+}
diff --git a/examples/with-react-ga/package.json b/examples/with-react-ga/package.json
new file mode 100644
index 0000000000..e200bbb4b5
--- /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 0000000000..e4b6d1d5e0
--- /dev/null
+++ b/examples/with-react-ga/pages/about.js
@@ -0,0 +1,7 @@
+import Layout from '../components/Layout'
+
+export default () => (
+  <Layout>
+    <div>About us</div>
+  </Layout>
+)
diff --git a/examples/with-react-ga/pages/index.js b/examples/with-react-ga/pages/index.js
new file mode 100644
index 0000000000..281025fdb7
--- /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 () => (
+  <Layout><div>Hello World. <Link href='/about'><a>About</a></Link></div></Layout>
+)
diff --git a/examples/with-react-ga/utils/analytics.js b/examples/with-react-ga/utils/analytics.js
new file mode 100644
index 0000000000..61bb596a16
--- /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 })
+  }
+}
-- 
GitLab