feat: add basic cookie consent mechanism for analytics (#685)

* feat: add basic cookie consent mechanism for analytics

* npm run format

* ci: attempt linter fix

Author: EPMatt

.github/workflows/ci_pr.yml

@@ -52,9 +52,9 @@ jobs:
           workdir: website
         continue-on-error: true
       - if: ${{ steps.yamllint.outcome == 'failure' }}
-        run: echo "yamllint" >> results.txt
+        run: mkdir -p lint && echo "yamllint" >> lint/results.txt
       - if: ${{ steps.eslint.outcome == 'failure' }}
-        run: echo "eslint" >> results.txt
+        run: mkdir -p lint && echo "eslint" >> lint/results.txt
       - uses: actions/upload-artifact@v4
         with:
           name: lint
@@ -102,7 +102,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.github_token }}
       - if: ${{ always() && steps.prettier.outcome == 'failure' }}
-        run: echo "prettier" >> results.txt
+        run: mkdir -p format-lint && echo "prettier" >> format-lint/results.txt
       - if: ${{ always() && steps.prettier.outcome == 'failure' }}
         uses: actions/upload-artifact@v4
         with:

website/docusaurus.config.js

@@ -9,6 +9,7 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'EPMatt',
   projectName: 'awesome-ha-blueprints',
+  scripts: ['/awesome-ha-blueprints/js/google-tag-manager.js'],
   themeConfig: {
     announcementBar: {
       id: 'support_us',

website/package-lock.json

@@ -20,6 +20,7 @@
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-bootstrap-icons": "^1.11.5",
+    "react-cookie-consent": "^9.0.0",
     "react-dom": "^19.0.0",
     "react-json-view-lite": "^2.3.0"
   },

website/package.json

@@ -5,57 +5,86 @@ import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import styles from './styles.module.css'
+import CookieConsent, { Cookies } from 'react-cookie-consent'
+import { useLocation } from '@docusaurus/router'
 
 export default function Home() {
+  let location = useLocation()
+
+  React.useEffect(() => {
+    // check if dataLayer exists i.e can we track or not?
+    if (typeof dataLayer !== 'undefined') {
+      // send new event to Google Tag Manager
+      dataLayer.push({ event: 'pageview' })
+    }
+  }, [location])
+
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
   return (
-    <Layout title={`${siteConfig.title}`} description={`${siteConfig.tagline}`}>
-      <header
-        className={clsx('hero hero--primary', styles.heroBanner)}
-        style={{ minHeight: '70vh' }}
+    <>
+      <CookieConsent
+        location='bottom'
+        buttonText='Accept cookies'
+        cookieName='AnalyticsConsent'
+        style={{ background: '#2B373B' }}
+        buttonStyle={{ color: '#4e503b', fontSize: '13px' }}
+        expires={150}
+        enableDeclineButton
+        declineButtonText='Reject cookies'
       >
-        <div className='container'>
-          <img
-            alt='Awesome HA Blueprints logo'
-            src={useBaseUrl('img/logo.svg')}
-            className='margin-bottom--lg'
-            style={{ width: 80 }}
-          />
-          <h1 className='hero__title' style={{ color: 'white' }}>
-            {siteConfig.title}
-          </h1>
-          <p className='hero__subtitle' style={{ color: 'white' }}>
-            A curated collection of blueprints for Home Assistant.
-            <br />
-            Reliable, customizable, fully tested by the community.
-          </p>
-          <div className={`row margin-top--xl ${styles.buttons}`}>
-            <div className='col margin-bottom--lg'>
-              <Link
-                className={clsx(
-                  'button button button--secondary button--lg margin-horiz--sm',
-                  styles.getStarted,
-                )}
-                to={useBaseUrl('docs/introduction')}
-              >
-                Get Started
-              </Link>
-            </div>
-            <div className='col margin-bottom--lg'>
-              <Link
-                className={clsx(
-                  'button button button--secondary button--lg margin-horiz--sm',
-                  styles.getStarted,
-                )}
-                to={useBaseUrl('docs/blueprints')}
-              >
-                Browse Blueprints
-              </Link>
+        This website uses cookies to enhance the user experience.
+      </CookieConsent>
+      <Layout
+        title={`${siteConfig.title}`}
+        description={`${siteConfig.tagline}`}
+      >
+        <header
+          className={clsx('hero hero--primary', styles.heroBanner)}
+          style={{ minHeight: '70vh' }}
+        >
+          <div className='container'>
+            <img
+              alt='Awesome HA Blueprints logo'
+              src={useBaseUrl('img/logo.svg')}
+              className='margin-bottom--lg'
+              style={{ width: 80 }}
+            />
+            <h1 className='hero__title' style={{ color: 'white' }}>
+              {siteConfig.title}
+            </h1>
+            <p className='hero__subtitle' style={{ color: 'white' }}>
+              A curated collection of blueprints for Home Assistant.
+              <br />
+              Reliable, customizable, fully tested by the community.
+            </p>
+            <div className={`row margin-top--xl ${styles.buttons}`}>
+              <div className='col margin-bottom--lg'>
+                <Link
+                  className={clsx(
+                    'button button button--secondary button--lg margin-horiz--sm',
+                    styles.getStarted,
+                  )}
+                  to={useBaseUrl('docs/introduction')}
+                >
+                  Get Started
+                </Link>
+              </div>
+              <div className='col margin-bottom--lg'>
+                <Link
+                  className={clsx(
+                    'button button button--secondary button--lg margin-horiz--sm',
+                    styles.getStarted,
+                  )}
+                  to={useBaseUrl('docs/blueprints')}
+                >
+                  Browse Blueprints
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </header>
-    </Layout>
+        </header>
+      </Layout>
+    </>
   )
 }

website/src/pages/index.jsx

@@ -0,0 +1,13 @@
+;(function (w, d, s, l, i) {
+  w[l] = w[l] || []
+  w[l].push({
+    'gtm.start': new Date().getTime(),
+    event: 'gtm.js',
+  })
+  var f = d.getElementsByTagName(s)[0],
+    j = d.createElement(s),
+    dl = l != 'dataLayer' ? '&l=' + l : ''
+  j.async = true
+  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+  f.parentNode.insertBefore(j, f)
+})(window, document, 'script', 'dataLayer', 'GTM-PGF34H9G')