update with-react-ga example (#4816)

Changes:
* updated `react-ga` package
* updated README.md
* Removed `Layout` component and used custom App component
* used `routeChangeComplete` to log route changes.

examples/with-react-ga/README.md

@@ -41,4 +41,5 @@ 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.
+This example shows the most basic way to use [react-ga](https://github.com/react-ga/react-ga) using custom [App](https://github.com/zeit/next.js#custom-app) 
+component with NextJs. Modify `Tracking ID` in `utils/analytics.js` file for testing this example.

examples/with-react-ga/components/Layout.js

@@ -1,19 +0,0 @@
-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>
-    )
-  }
-}

examples/with-react-ga/package.json

@@ -10,7 +10,7 @@
     "next": "latest",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-ga": "2.2.0"
+    "react-ga": "2.5.3"
   },
   "author": "",
   "license": "ISC"

examples/with-react-ga/pages/_app.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import App, { Container } from 'next/app'
+import Router from 'next/router'
+import { initGA, logPageView } from '../utils/analytics'
+
+export default class MyApp extends App {
+  static async getInitialProps ({ Component, router, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  componentDidMount () {
+    initGA()
+    logPageView()
+    Router.router.events.on('routeChangeComplete', logPageView)
+  }
+
+  render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        <Component {...pageProps} />
+      </Container>
+    )
+  }
+}

examples/with-react-ga/pages/about.js

@@ -1,7 +1,3 @@
-import Layout from '../components/Layout'
-
 export default () => (
-  <Layout>
-    <div>About us</div>
-  </Layout>
+  <div>About us</div>
 )

examples/with-react-ga/pages/index.js

@@ -1,6 +1,10 @@
 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>
+  <div>
+    Hello World.{' '}
+    <Link href='/about'>
+      <a>About</a>
+    </Link>
+  </div>
 )