Merge pull request #94 from bunq/bunq/doc#93_gtm

#93 - Added .env and GTM snippet
bunq · Mar 14, 2019 · 047ce1e · 047ce1e
2 parents 6feb07b + 79c5257
commit 047ce1e
Show file tree

Hide file tree

Showing 14 changed files with 244 additions and 25 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+GOOGLE_TAG_MANAGER_CONTAINER_ID=GTM-XXXXXX
+
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,7 @@
 # misc
 .DS_Store
 .idea
+.env
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
         "swagger-ui": "^3.18.2"
     },
     "dependencies": {
+        "cookieconsent": "^3.1.0",
+        "dotenv": "^7.0.0",
         "node-sass-chokidar": "^1.3.3",
         "react-scripts": "^1.1.5"
     }

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html lang="en-US">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <meta name="theme-color" content="#000000">
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="favicon.ico">
-    <title>bunq API Documentation</title>
-</head>
-<body>
-    <noscript>
-        You need to enable JavaScript to run this app.
-    </noscript>
-    <div class="header"></div>
-    <div id="root" class="react-root"></div>
-</body>
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+        <link rel="shortcut icon" href="favicon.ico">
+        <title>bunq API Documentation</title>
+    </head>
+    <body>
+        <noscript>
+            You need to enable JavaScript to run this app.
+        </noscript>
+
+        <div class="header"></div>
+        <div id="root" class="react-root"></div>
+    </body>
 </html>
diff --git a/src/assets/images/cookie.svg b/src/assets/images/cookie.svg
diff --git a/src/helpers/tracking.js b/src/helpers/tracking.js
@@ -0,0 +1,66 @@
+// @flow
+/**
+ */
+export default function initializeCookieConsentBar() {
+    window.addEventListener("load", () => {
+        var shouldAddMotionListeners = true;
+
+        window.cookieconsent.initialise({
+            position: "bottom",
+            content: {
+                message: "We use cookies when you continue to use our website.",
+                dismiss: "got it!",
+                link: "Learn more",
+                href: "https://www.bunq.com/privacy"
+            },
+            container: document.querySelector(".react-root"),
+            onInitialise: function () {
+                if (this.hasConsented()) {
+                    initializeAllTracking();
+
+                    shouldAddMotionListeners = false;
+                }
+            }
+        });
+
+        if (window.cookieconsent.hasInitialised && shouldAddMotionListeners) {
+            window.addEventListener("scroll", initializeAllTracking);
+            window.addEventListener("keydown", initializeAllTracking);
+            window.addEventListener("mousedown", initializeAllTracking);
+            window.addEventListener("touchstart", initializeAllTracking);
+        }
+    });
+}
+
+/**
+ */
+function initializeAllTracking() {
+    initializeGoogleTagManagerIfNeeded();
+
+    window.removeEventListener("scroll", initializeAllTracking);
+    window.removeEventListener("keydown", initializeAllTracking);
+    window.removeEventListener("mousedown", initializeAllTracking);
+    window.removeEventListener("touchstart", initializeAllTracking);
+}
+
+/**
+ */
+function initializeGoogleTagManagerIfNeeded() {
+    const googleTagManagerContainerId = process.env.REACT_APP_GOOGLE_TAG_MANAGER_CONTAINER_ID;
+
+    if (googleTagManagerContainerId) {
+        (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", googleTagManagerContainerId);
+    }
+}
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,20 @@
 // @flow
 import SwaggerUIStandalonePreset from "swagger-ui";
-import "swagger-ui/dist/swagger-ui.css";
+import "cookieconsent/build/cookieconsent.min.js";
+import dotenv from "dotenv";
 
-import registerServiceWorker from "./helpers/registerServiceWorker";
 import {
     BunqLayoutPlugin,
     DisableTryItOutPlugin
 } from "./plugins";
+import initializeCookieConsentBar from "./helpers/tracking";
+import registerServiceWorker from "./helpers/registerServiceWorker";
+
+import "swagger-ui/dist/swagger-ui.css";
 import "./scss/index.css";
 
+dotenv.config();
+
 SwaggerUIStandalonePreset({
     url: "https://raw.githubusercontent.com/bunq/doc/master/swagger.json",
     dom_id: "#root",
@@ -20,4 +26,6 @@ SwaggerUIStandalonePreset({
     ]
 });
 
+initializeCookieConsentBar();
 registerServiceWorker();
+
diff --git a/src/scss/_cookie-consent.scss b/src/scss/_cookie-consent.scss
@@ -0,0 +1,99 @@
+@import "variables";
+@import "~cookieconsent/build/cookieconsent.min.css";
+
+/* Sizes */
+$min-width-button: 100px;
+$size-cookie: 30px;
+
+/* Borders */
+$border-button: 1px solid $color-white;
+
+/* Colors */
+$background-color-cookie-consent: #007AFF;
+
+.cc-grower {
+    margin: 0 $spacer-small * -1;
+}
+
+.cc-window {
+    background-color: $background-color-cookie-consent;
+
+    &.cc-banner,
+    &.cc-floating {
+        display: block;
+        text-align: center;
+
+        .cc-message {
+            display: inline-block;
+            color: $color-white;
+            margin-bottom: $spacer-small / 2;
+
+            @media (min-width: $width-viewport-small) {
+                margin-left: auto;
+                margin-right: $spacer-medium;
+                margin-bottom: 0;
+            }
+
+            a {
+                color: $color-white;
+                opacity: 1;
+            }
+
+            &:before {
+                content: "";
+                display: inline-block;
+                width: $size-cookie;
+                height: $size-cookie;
+                margin-right: $spacer-small * 2;
+                background-image: $asset-cookie;
+                background-position: center center;
+                background-repeat: no-repeat;
+                background-size: 100% auto;
+                vertical-align: middle;
+            }
+        }
+
+        .cc-message,
+        .cc-compliance {
+            font-family: "Open Sans", sans-serif;
+        }
+
+        .cc-compliance {
+            @media (min-width: $width-viewport-small) {
+                display: inline-block;
+                margin-right: auto;
+            }
+
+            .cc-dismiss {
+                color: $color-white;
+                min-width: $min-width-button;
+                border: $border-button;
+                border-radius: 8px;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    color: $background-color-cookie-consent;
+                    background-color: $color-white;
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    &.cc-floating {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        max-width: 100%;
+        padding: $spacer-small / 2 $spacer-small;
+        z-index: $z-index-max;
+
+        .cc-message,
+        .cc-compliance {
+            @media (min-width: $width-viewport-small) {
+                display: inline-block;
+            }
+        }
+    }
+}
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -1,4 +1,4 @@
-@import "_variables.scss";
+@import "variables";
 
 html {
     height: 100%;

diff --git a/src/scss/_sidebar.scss b/src/scss/_sidebar.scss
@@ -1,4 +1,4 @@
-@import "_variables.scss";
+@import "variables";
 
 .sidebar {
     display: none;

diff --git a/src/scss/_type.scss b/src/scss/_type.scss
@@ -1,4 +1,4 @@
-@import "_variables.scss";
+@import "variables";
 
 .sidebar,
 .swagger-ui {

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -71,5 +71,6 @@ $z-index-max: 9999;
 /**
  * Assets
  */
+$asset-cookie: url("../assets/images/cookie.svg");
 $asset-logo-bunq-white: url("../assets/images/logo-bunq-white.svg");
 $asset-rainbow: url("../assets/images/ribbon.png");
diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -1,5 +1,6 @@
-@import "_variables.scss";
-@import "_type.scss";
-@import "_webfonts.scss";
-@import "_custom.scss";
-@import "_sidebar.scss";
+@import "cookie-consent";
+@import "custom";
+@import "sidebar";
+@import "type";
+@import "variables";
+@import "webfonts";
diff --git a/yarn.lock b/yarn.lock