Analytics added

php1301 · php1301 · commit 54ccad9eb88a · 2020-09-04T23:10:43.000+07:00
diff --git a/library/helpers/gtag.jsx b/library/helpers/gtag.jsx
@@ -0,0 +1,18 @@
+export const GA_TRACKING_ID = process.env.G_ID; // GA_Tracking ID
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: 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,
+  });
+};
diff --git a/next.config.js b/next.config.js
@@ -15,6 +15,7 @@ const nextConfig = {
   env: {
     API: process.env.API || 'https://api.hotel-prisma.ml/graphql',
     WS_API: process.env.WS_API || 'wss://api.hotel-prisma.ml/graphql',
+    G_ID: process.env.G_ID || ' ',
     PUBLIC_STRIPE: process.env.PUBLIC_STRIPE,
     SECRET_STRIPE: process.env.SECRET_STRIPE,
     GOOGLE_API_KEY: process.env.GOOGLE_API_KEY,
diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -2,12 +2,14 @@ import App from 'next/app';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import 'react-toastify/dist/ReactToastify.min.css';
 import 'react-dates/lib/css/_datepicker.css';
+import Router from 'next/router';
 import { ThemeProvider } from 'styled-components';
 // import { appWithTranslation } from '../i18n';
 import AppLocale from 'translations/index';
 import theme from 'themes/default.theme';
 import GlobalStyles from 'assets/style/Global.style';
 import { withData } from 'library/helpers/restriction';
+import * as gtag from 'library/helpers/gtag';
 // Chỉ trong development
 import whyDidYouRender from '@welldone-software/why-did-you-render';
 import { LanguageProvider } from 'context/LanguageProvider';
@@ -53,6 +55,13 @@ class CustomApp extends App {
     this.setState({
       currentSelectedLanguage: language,
     });
+    const handleRouteChange = (url) => {
+      gtag.pageview(url)
+    }
+    Router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange)
+    }
   }
 
 
diff --git a/pages/_document.jsx b/pages/_document.jsx
@@ -2,6 +2,7 @@ import Document, {
   Html, Head, Main, NextScript,
 } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
+import { GA_TRACKING_ID } from 'library/helpers/gtag';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -36,7 +37,26 @@ export default class MyDocument extends Document {
           <meta name="theme-color" content="#008489" />
           <meta name="description" content="React next listing." />
           <meta name="keywords" content="React, React js, Next, Next js" />
-
+          {process.env.NODE_ENV === 'production' && (
+          <>
+          <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}', {
+              page_path: window.location.pathname,
+            });
+          `,
+            }}
+          />
+          </>
+          )}
           <link
             rel="icon"
             // href="../static/images/favicon.png"
@@ -48,6 +68,7 @@ export default class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i"
           />
+
         </Head>
         <body>
           <Main />
