fix: add consent banner for cookies and google analytics (ory#53)

This patch adds a GDPR compliant consent banner for cookies and Google Analytics:

<img width="1904" alt="Bildschirmfoto 2020-11-06 um 11 37 19" src="https://user-images.githubusercontent.com/3372410/98357364-611b7400-2025-11eb-8a54-e23c8fc82f16.png">

When the user removes "Statistics", Google Analytics **will not be enabled**. Google Analytics is also **not enabled by default** which will imply a significant drop in reported users there.

Closes ory#51

gatsby-config.js

@@ -179,5 +179,28 @@ module.exports = {
       },
     },
     `gatsby-plugin-force-trailing-slashes`,
+    {
+      resolve: `gatsby-plugin-gdpr-cookies`,
+      options: {
+        googleAnalytics: {
+          trackingId: 'UA-71865250-1',
+          cookieName: 'gdpr_cookie_analytics',
+          anonymize: true,
+          allowAdFeatures: false
+        },
+        googleTagManager: {
+          trackingId: 'GTM-MJD22FZ',
+          cookieName: 'gdpr_cookie_analytics'
+        },
+
+        // facebookPixel: {
+        //   pixelId: 'YOUR_FACEBOOK_PIXEL_ID', // leave empty if you want to disable the tracker
+        //   cookieName: 'gatsby-gdpr-facebook-pixel', // default
+        // },
+        // defines the environments where the tracking should be available  - default is ["production"]
+
+        environments: ['production', 'development']
+      },
+    },
   ],
 }

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "dependencies": {
+    "@palmabit/react-cookie-law": "^0.4.0",
     "@raae/gatsby-remark-oembed": "~0.1.1",
     "@types/classnames": "~2.2.10",
     "@types/csv-parse": "~1.2.2",
@@ -26,6 +27,7 @@
     "gatsby": "^2.24.81",
     "gatsby-image": "^2.4.12",
     "gatsby-plugin-force-trailing-slashes": "~1.0.4",
+    "gatsby-plugin-gdpr-cookies": "^1.0.10",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-offline": "^3.2.16",
     "gatsby-plugin-postcss": "^2.3.9",

src/components/adopters.module.css.d.ts

@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "adopters": string;
-  readonly "list": string;
-  readonly "logos": string;
-  readonly "logosInner": string;
-};
-export = styles;
-
+  readonly adopters: string
+  readonly list: string
+  readonly logos: string
+  readonly logosInner: string
+}
+export = styles

src/components/adopters.tsx

@@ -75,7 +75,7 @@ const adopters = [
     title: 'Data Detect',
     image: datadetect,
     url: 'https://unifiedglobalarchiving.com/data-detect/',
-  }
+  },
 ]
 
 interface PropTypes {
@@ -90,10 +90,10 @@ const Adopters = ({ onlyFeatured }: PropTypes) => (
           <div className={styles.logos}>
             <div className={styles.logosInner}>
               {adopters
-                .filter(({ featured }) => onlyFeatured ? featured : true)
+                .filter(({ featured }) => (onlyFeatured ? featured : true))
                 .map(({ title, image, url }) => (
                   <a href={url} key={title}>
-                    <img src={image} alt={title}/>
+                    <img src={image} alt={title} />
                   </a>
                 ))}
             </div>

src/components/announcement.module.css.d.ts

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "announcement": string;
-};
-export = styles;
-
+  readonly announcement: string
+}
+export = styles

src/components/blog-hero.module.css.d.ts

@@ -1,9 +1,8 @@
 declare const styles: {
-  readonly "title": string;
-  readonly "meta": string;
-  readonly "author": string;
-  readonly "subtitle": string;
-  readonly "teaser": string;
-};
-export = styles;
-
+  readonly title: string
+  readonly meta: string
+  readonly author: string
+  readonly subtitle: string
+  readonly teaser: string
+}
+export = styles

src/components/blog-section.module.css.d.ts

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "section": string;
-};
-export = styles;
-
+  readonly section: string
+}
+export = styles

src/components/blog-summary-section.module.css

@@ -1,12 +1,16 @@
 @import '../styles/properties.css';
 
 .blog-summary {
-  background: linear-gradient(to bottom, var(--colors-themed-default) 96px, var(--colors-base-light) 96px);
+  background: linear-gradient(
+    to bottom,
+    var(--colors-themed-default) 96px,
+    var(--colors-base-light) 96px
+  );
 
   & h4 {
     height: auto;
     margin-bottom: 16px;
-    color: var(--colors-themed-default)
+    color: var(--colors-themed-default);
   }
 
   & :global a:any-link {
@@ -37,7 +41,6 @@
 }
 
 @media (--sm-viewport) {
-
   .blog-summary {
     & h4 {
       height: auto;
@@ -54,7 +57,6 @@
 }
 
 @media (--md-viewport) {
-
   .blog-summary {
     & h4 {
       height: auto;
@@ -69,4 +71,3 @@
     width: 100%;
   }
 }
-

src/components/blog-summary-section.module.css.d.ts

@@ -1,7 +1,6 @@
 declare const styles: {
-  readonly "blogSummary": string;
-  readonly "blogRow": string;
-  readonly "blogBox": string;
-};
-export = styles;
-
+  readonly blogSummary: string
+  readonly blogRow: string
+  readonly blogBox: string
+}
+export = styles