Merge pull request #10 from SoftwareAG/feature/analytics

Added facebook pixel analytics

Author: Manoj

gatsby-config.js

@@ -128,6 +128,17 @@ const plugins = [
       })
       ,
     },
+  },
+  {
+    resolve: `gatsby-plugin-gdpr-cookies`,
+    options: {
+      facebookPixel: {
+        pixelId: '757069165097356',
+        cookieName: 'gatsby-gdpr-facebook-pixel',
+      },
+      // defines the environments where the tracking should be available  - default is ["production"]
+      environments: ['production', 'development']
+    },
   }
 ];
 

package.json

@@ -25,6 +25,7 @@
     "gatsby-image": "^2.4.7",
     "gatsby-link": "^2.2.27",
     "gatsby-plugin-emotion": "^4.1.18",
+    "gatsby-plugin-gdpr-cookies": "^1.0.7",
     "gatsby-plugin-local-search": "^1.1.1",
     "gatsby-plugin-manifest": "^2.2.33",
     "gatsby-plugin-material-ui": "^2.1.9",
@@ -46,6 +47,7 @@
     "match-all": "^1.2.5",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-cookie-consent": "^5.1.2",
     "react-dom": "^16.12.0",
     "react-feather": "^2.0.3",
     "react-github-btn": "^1.1.1",

src/components/layout.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import {MDXProvider} from '@mdx-js/react';
-
 import ThemeProvider from './theme/themeProvider';
 import mdxComponents from './mdxComponents';
 import Sidebar from './sidebar';
 import RightSidebar from './rightSidebar';
 import config from '../../config.js';
+import CookieConsent from 'react-cookie-consent';
 
 const Wrapper = styled('div')`
   display: flex;
   width: 100%;
   justify-content: space-between;
-  background: ${({ theme }) => theme.colors.background};
+  background: ${({theme}) => theme.colors.background};
 
   .sideBarUL li a {
-    color: ${({ theme }) => theme.colors.text};
+    color: ${({theme}) => theme.colors.text};
   }
 
   .sideBarUL .item > a:hover {
@@ -37,10 +37,10 @@ const Content = styled('main')`
   margin-right: 0px;
   padding-top: 2rem;
   // width: 860px;
-  background: ${({ theme }) => theme.colors.background};
+  background: ${({theme}) => theme.colors.background};
 
   table tr {
-    background: ${({ theme }) => theme.colors.background};
+    background: ${({theme}) => theme.colors.background};
   }
 
   @media only screen and (max-width: 1023px) {
@@ -71,25 +71,33 @@ const RightSideBarWidth = styled('div')`
   flex-shrink: 0;
 `;
 
-const Layout = ({ children, location }) => (
+const Layout = ({children, location}) => (
   <ThemeProvider location={location}>
     <MDXProvider components={mdxComponents}>
       <Wrapper>
         <LeftSideBarWidth className={'hiddenMobile'}>
-          <Sidebar location={location} />
+          <Sidebar location={location}/>
         </LeftSideBarWidth>
         {config.sidebar.title ? (
           <div
             className={'sidebarTitle sideBarShow'}
-            dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
+            dangerouslySetInnerHTML={{__html: config.sidebar.title}}
           />
         ) : null}
         <Content>
           <MaxWidth>{children}</MaxWidth>
         </Content>
         <RightSideBarWidth className={'hiddenMobile'}>
-          <RightSidebar location={location} />
+          <RightSidebar location={location}/>
         </RightSideBarWidth>
+        <CookieConsent
+          enableDeclineButton
+          location="bottom"
+          buttonText="I understand and accept the use of cookies"
+          declineButtonText="I do not accept the use of cookies"
+          cookieName="gatsby-gdpr-facebook-pixel">
+          We are always working to improve this website for our users. To do this, we use the anonymous data provided by Cookies.
+        </CookieConsent>
       </Wrapper>
     </MDXProvider>
   </ThemeProvider>

yarn.lock

@@ -1731,6 +1731,10 @@
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+
 "@types/debug@^0.0.30":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-0.0.30.tgz#dc1e40f7af3b9c815013a7860e6252f6352a84df"
@@ -1825,6 +1829,10 @@
   version "8.10.61"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.61.tgz#d299136ce54bcaf1abaa4a487f9e4bedf6b0d393"
 
+"@types/object-assign@^4.0.30":
+  version "4.0.30"
+  resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -3825,6 +3833,10 @@ cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
 
+cookie@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -6065,6 +6077,16 @@ gatsby-plugin-emotion@^4.1.18:
     "@babel/runtime" "^7.10.2"
     "@emotion/babel-preset-css-prop" "^10.0.27"
 
+gatsby-plugin-gdpr-cookies@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-gdpr-cookies/-/gatsby-plugin-gdpr-cookies-1.0.7.tgz#9bc5d4ce4143e316a9bb0572a54695336616c78d"
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+    common-tags "^1.8.0"
+    minimist "^1.2.5"
+    react-ga "^2.7.0"
+    universal-cookie "^4.0.3"
+
 gatsby-plugin-local-search@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-local-search/-/gatsby-plugin-local-search-1.1.1.tgz#3483af8b104e0463887d4d98504ecae90048bbab"
@@ -8305,6 +8327,10 @@ jpeg-js@^0.3.4:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.3.7.tgz#471a89d06011640592d314158608690172b1028d"
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+
 js-message@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15"
@@ -11032,6 +11058,12 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-cookie-consent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-cookie-consent/-/react-cookie-consent-5.1.2.tgz#553c4851f8be1e3a91f40f36f350e99b47276731"
+  dependencies:
+    js-cookie "^2.2.1"
+
 react-dev-utils@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.3.tgz#5b42d9ea58d5e9e017a2f57a40a8af408a3a46fb"
@@ -11078,6 +11110,10 @@ react-feather@^2.0.3:
   dependencies:
     prop-types "^15.7.2"
 
+react-ga@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c"
+
 react-github-btn@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.0.tgz#464066f999a77c0eed27980260601b51cbe15614"
@@ -13421,6 +13457,15 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.4.1:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+universal-cookie@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.3.tgz#c2fa59127260e6ad21ef3e0cdd66ad453cbc41f6"
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    "@types/object-assign" "^4.0.30"
+    cookie "^0.4.0"
+    object-assign "^4.1.1"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"