Changes in cookiebot

gatsby-ssr.js

@@ -1,3 +1,4 @@
+import React from "react"
 import { SSRWrapper } from "./src/state/ReduxWrapper"
 // @see https://www.gatsbyjs.com/docs/adding-redux-store/
 export const wrapRootElement = SSRWrapper;
@@ -20,4 +21,55 @@ global.window.matchMedia = function () {
 }
 
 global.Blob = Blob
-global.XMLHttpRequest = XMLHttpRequest
+global.XMLHttpRequest = XMLHttpRequest
+
+const isProduction = process.env.NODE_ENV === "production";
+
+console.log('is production?', isProduction);
+
+export const onPreRenderHTML = (args, pluginOptions) => {
+    const { blockGtm = true, manualMode = true, includeInDevelopment = true, } = pluginOptions;
+    // Do not modify scripts when in development. Can be overriden with plugin options.
+    if (!isProduction || !includeInDevelopment)
+        return;
+    const { getHeadComponents, replaceHeadComponents, getPreBodyComponents, replacePreBodyComponents, } = args;
+    const headComponents = getHeadComponents();
+    // Headcomponents needs to be assigned to a new
+    const newHeadComponents = headComponents.map((component) => {
+        if (component.type === "script") {
+            if ((component.key === "plugin-google-tagmanager" || component.key === "gatsby-plugin-linkedin-insight") &&
+                manualMode &&
+                blockGtm &&
+                isProduction // gatsby-plugin-google-tagmanager will thrown an error if the script has not been loaded in development
+            ) {
+                // Add Cookiebot manual mode data attribute to GTM script
+                return (React.createElement("script", Object.assign({ "data-cookieconsent": "statistics", type: "text/plain", key: component.key }, component.props)));
+            }
+        }
+        return component;
+    });
+    replaceHeadComponents(newHeadComponents);
+    const preBodyComponents = getPreBodyComponents();
+    const newPreBodyComponents = preBodyComponents.map((component) => {
+        if (component.type === "noscript") {
+            if (component.key === "plugin-google-tagmanager" &&
+                manualMode &&
+                blockGtm &&
+                isProduction // gatsby-plugin-google-tagmanager will thrown an error if the script has not been loaded in development
+            ) {
+                // Add Cookiebot manual mode data attribute to GTM noscript's iframe script
+                const gtmIframeStr = component.props.dangerouslySetInnerHTML.__html;
+                // Add data attribute to string
+                const gtmIframeStrWithCookiebotManualMode = gtmIframeStr.substr(0, 8) +
+                    'data-cookieconsent="statistics" ' +
+                    gtmIframeStr.substr(8);
+                const newProps = Object.assign({}, component.props);
+                newProps.dangerouslySetInnerHTML.__html =
+                    gtmIframeStrWithCookiebotManualMode;
+                return React.createElement("noscript", Object.assign({ key: component.key }, newProps));
+            }
+        }
+        return component;
+    });
+    replacePreBodyComponents(newPreBodyComponents);
+};

package.json

@@ -46,6 +46,7 @@
     "immutability-helper": "2.9.1",
     "immutable": "^3.7.6",
     "jsdom": "^16.2.2",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.15",
     "lodash-webpack-plugin": "^0.11.4",
     "moment": "^2.24.0",

src/components/SEO.js

@@ -20,7 +20,7 @@ const SEO = ({ seo = {} }) => {
   return (
     <>
       <Helmet title={seo.title ? seo.title : title} titleTemplate={titleTemplate}>
-        <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e11e4375-71b9-426d-a76d-61eae3ddc08f" type="text/javascript" async></script>
+        <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e11e4375-71b9-426d-a76d-61eae3ddc08f" type="text/javascript" data-blockingmode="auto"></script>
         <meta charSet="utf-8" />
         <meta name="description" content={seo.description ? seo.description : description} />
         <meta name="image" content={seo.image?.publicURL ? `${url}${seo.image.publicURL.slice(1)}` : `${url}${image.slice(1)}`} />

src/state/ReduxWrapper.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import localforage from 'localforage';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { loggedUserReducer } from 'openstack-uicore-foundation/lib/reducers';
@@ -13,11 +14,11 @@ const onBeforeLift = () => {
   console.log("reading state ...")
 }
 
-const clientId = typeof window === 'object' ? window.OAUTH2_CLIENT_ID : process.env.OAUTH2_CLIENT_ID
+const clientId = process.env.OAUTH2_CLIENT_ID;
 
 const config = {
   key: `root_${clientId}`,
-  storage,
+  storage: localforage,
 }
 
 const persistedReducers = persistCombineReducers(config, {

src/templates/blog-post.js

@@ -83,7 +83,7 @@ const BlogPost = ({ isLoggedUser, data }) => {
         contentComponent={HTMLContent}
         helmet={
           <Helmet titleTemplate="%s | Blog">
-            <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e11e4375-71b9-426d-a76d-61eae3ddc08f" type="text/javascript" async></script>
+            <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e11e4375-71b9-426d-a76d-61eae3ddc08f" type="text/javascript" data-blockingmode="auto"></script>
             <title>{`${post.frontmatter.seo.title ? post.frontmatter.seo.title : post.frontmatter.title}`}</title>
             <meta name="description" content={`${post.frontmatter.seo.description}`} />
             <meta property="og:type" content="article" />

src/templates/openinfra-live.js

@@ -27,6 +27,11 @@ export const OpenInfraLiveTemplate = ({
   const [today, setToday] = useState(moment().utc().unix())
   const [ready, setReady] = useState(false)
 
+  const noCookieYoutube = (url) => {
+    const regex = /youtube/;
+    return url.replace(regex, 'youtube-nocookie');
+  }
+
   useEffect(() => {
     fetch(`https://timeintervalsince1970.appspot.com/`)
       .then(response => response.json())
@@ -49,7 +54,8 @@ export const OpenInfraLiveTemplate = ({
         <section className="up-next-wrapper">
           <div className="video">
             <div className="videoWrapper">
-              <iframe width="560" height="315" src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+              <iframe className="cookieconsent-optin-marketing" width="560" height="315" data-src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" data-cookieconsent="marketing" allowFullScreen></iframe>
+              <iframe className="cookieconsent-optout-marketing" width="560" height="315" src={noCookieYoutube(episode.youtubeEmbed)} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
             </div>
           </div>
           <div className="details">
@@ -142,7 +148,7 @@ export const OpenInfraLiveTemplate = ({
               </div>
             </section>
           </div>
-          
+
           <KeynotesPromoV2 />
 
           <section className="live-section">
@@ -167,7 +173,8 @@ export const OpenInfraLiveTemplate = ({
                           <div className="date">{moment.utc(episode.date).format("dddd, MMMM DD, YYYY")}</div>
                           <div className="video">
                             <div className="videoWrapper">
-                              <iframe width="560" height="315" src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                              <iframe className="cookieconsent-optin-marketing" width="560" height="315" data-src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" data-cookieconsent="marketing" allowFullScreen></iframe>
+                              <iframe className="cookieconsent-optout-marketing" width="560" height="315" src={noCookieYoutube(episode.youtubeEmbed)} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                             </div>
                           </div>
                           <div className="details">
@@ -235,7 +242,7 @@ export const OpenInfraLiveTemplate = ({
                 })}
                 {/* End single episode */}
               </div>
-                <IdeasBanner />
+              <IdeasBanner />
             </div>
           </section>
           <section className="live-section">
@@ -248,7 +255,8 @@ export const OpenInfraLiveTemplate = ({
                     <div className="all-episode-single" key={`past-${index}`}>
                       <div className="video">
                         <div className="videoWrapper">
-                          <iframe width="560" height="315" src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
+                          <iframe className="cookieconsent-optin-marketing" width="560" height="315" data-src={episode.youtubeEmbed} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" data-cookieconsent="marketing" allowFullScreen></iframe>
+                          <iframe className="cookieconsent-optout-marketing" width="560" height="315" src={noCookieYoutube(episode.youtubeEmbed)} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                         </div>
                       </div>
                       <div className="details">

yarn.lock

@@ -11975,6 +11975,13 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 localforage@^1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.7.3.tgz#0082b3ca9734679e1bd534995bdd3b24cf10f204"