feat: GA cookies

.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

components/CookieConsent.js → 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:

pages/_app.js

@@ -1,11 +1,51 @@
 import { useEffect } from 'react';
+import Script from 'next/script';
 import Layout from '../components/Layout';
 import '../styles/globals.css';
 import { DefaultSeo } from 'next-seo';
 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} />

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;
+}