From b92742260639122a75eb96483a0b9620edaed544 Mon Sep 17 00:00:00 2001
From: Anurag Gupta <me@anuragxd.com>
Date: Mon, 18 Sep 2023 12:28:28 +0530
Subject: [PATCH] feat: GA cookies

---
 .sample.env                                   |  3 +-
 .../{CookieConsent.js => CookieConsent.jsx}   | 25 +++++++++--
 pages/_app.js                                 | 42 +++++++++++++++++++
 styles/globals.css                            |  6 +++
 4 files changed, 71 insertions(+), 5 deletions(-)
 rename components/{CookieConsent.js => CookieConsent.jsx} (76%)

diff --git a/.sample.env b/.sample.env
index 025a4c5..c651d82 100644
--- a/.sample.env
+++ b/.sample.env
@@ -1,2 +1,3 @@
 # example .env.local file; replace values with your own
-NOTION_TOKEN=secret_rrmXXXxxxXXXxxxXXXxxxXXXxxxXXXxxxXXXxxxXXXx
+NOTION_TOKEN=secret_xxxx
+GA_MEASUREMENT_ID=G-xxxx
\ No newline at end of file
diff --git a/components/CookieConsent.js b/components/CookieConsent.jsx
similarity index 76%
rename from components/CookieConsent.js
rename to components/CookieConsent.jsx
index bf722f4..476a7ae 100644
--- a/components/CookieConsent.js
+++ b/components/CookieConsent.jsx
@@ -5,16 +5,24 @@ const pluginConfig = {
   current_lang: 'en',
   autoclear_cookies: true,
   page_scripts: true,
-  test: 'ciao',
   force_consent: true,
   gui_options: {
     consent_modal: {
       layout: 'bar',
       position: 'bottom center',
       transition: 'slide',
-      swap_buttons: false,
+      swap_buttons: true,
     },
   },
+  onAccept: function (cookie) {
+    // check for production environment
+    if (process.env.NODE_ENV === 'production') {
+      // handle analytics cookies
+      if (cookie.categories.includes('analytics')) {
+        window.GAConsentGranted();
+      }
+    }
+  },
   languages: {
     en: {
       consent_modal: {
@@ -44,9 +52,9 @@ const pluginConfig = {
         ],
         blocks: [
           {
-            title: 'Cookie usage 📢',
+            title: 'Cookie usage',
             description:
-              'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full <a href="/policy" class="cc-link">privacy policy</a>.',
+              'We use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want.',
           },
           {
             title: 'Strictly necessary cookies',
@@ -58,6 +66,15 @@ const pluginConfig = {
               readonly: true,
             },
           },
+          {
+            title: 'Anylatics cookies',
+            description:
+              'These cookies are used to collect information about how you use our website. The information collected includes the number of visitors, the source of traffic, and the pages visited anonymously.',
+            toggle: {
+              value: 'analytics',
+              enabled: true,
+            },
+          },
           {
             title: 'More information',
             description:
diff --git a/pages/_app.js b/pages/_app.js
index 33a2401..0f1dce8 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import Script from 'next/script';
 import Layout from '../components/Layout';
 import '../styles/globals.css';
 import { DefaultSeo } from 'next-seo';
@@ -6,6 +7,45 @@ import SEO from '../next-seo.config';
 import 'vanilla-cookieconsent/dist/cookieconsent.css';
 import CookieConsent from '../components/CookieConsent';
 
+function GAScript() {
+  return (
+    <>
+      <Script id="google-analytics-consent">
+        {`
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('consent', 'default', {
+        'ad_storage': 'denied',
+        'analytics_storage': 'denied'
+      });
+    `}
+      </Script>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_MEASUREMENT_ID}`}
+      />
+      <Script id="google-analytics">
+        {`
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '${process.env.GA_MEASUREMENT_ID}');
+    `}
+      </Script>
+      <Script id="google-analytics-consent-granted">
+        {`
+      function GAConsentGranted() {
+        gtag('consent', 'update', {
+          'ad_storage': 'granted',
+          'analytics_storage': 'granted'
+        });
+      }
+    `}
+      </Script>
+    </>
+  );
+}
+
 function MyApp({ Component, pageProps }) {
   useEffect(() => {
     if ('serviceWorker' in navigator) {
@@ -24,8 +64,10 @@ function MyApp({ Component, pageProps }) {
       });
     }
   }, []);
+
   return (
     <>
+      {process.env.NODE_ENV === 'production' && <GAScript />}
       <DefaultSeo {...SEO} />
       <Layout>
         <Component {...pageProps} />
diff --git a/styles/globals.css b/styles/globals.css
index 6bce3f9..02a2977 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,3 +10,9 @@ ion-icon {
   font-size: 24px;
   pointer-events: none;
 }
+
+/* Cookie Consent Styles */
+
+:root {
+  --cc-btn-primary-bg: #3da9f6 !important;
+}