Merge pull request #399 from newrelic/tg/cookies-dialog

feat: Add cookies dialog

gatsby-browser.js

@@ -6,4 +6,24 @@
 
 import wrapPageElement from './gatsby/wrap-page-element';
 
-export { wrapPageElement };
+const onRouteUpdate = ({ location }) => {
+  if (process.env.NODE_ENV !== `production` || typeof ga !== `function`) {
+    return null;
+  }
+
+  // wrap inside a timeout to make sure react-helmet is done with it's changes (https://github.com/gatsbyjs/gatsby/issues/9139)
+  // reactHelmet is using requestAnimationFrame: https://github.com/nfl/react-helmet/blob/5.2.0/src/HelmetUtils.js#L296-L299
+  const sendPageView = () => {
+    const pagePath = location
+      ? location.pathname + location.search + location.hash
+      : undefined;
+    window.ga(`set`, `page`, pagePath);
+    window.ga(`send`, `pageview`);
+  };
+
+  // Minimum delay for reactHelmet's requestAnimationFrame
+  setTimeout(sendPageView, 32);
+
+  return null;
+};
+export { onRouteUpdate, wrapPageElement };

gatsby-config.js

@@ -7,13 +7,6 @@ module.exports = {
     siteUrl: 'https://developer.newrelic.com',
   },
   plugins: [
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: 'UA-3047412-33',
-        head: true,
-      },
-    },
     'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-source-filesystem',

gatsby-ssr.js

@@ -50,4 +50,23 @@ const onPreRenderHTML = ({
   ]);
 };
 
-export { onPreRenderHTML, wrapPageElement };
+const onRenderBody = ({ setHeadComponents }) => {
+  if (process.env.NODE_ENV !== `production`) {
+    return null;
+  }
+  // Pre-connect to google analytics
+  return setHeadComponents([
+    <link
+      rel="preconnect"
+      key="preconnect-google-analytics"
+      href="https://www.google-analytics.com"
+    />,
+    <link
+      rel="dns-prefetch"
+      key="dns-prefetch-google-analytics"
+      href="https://www.google-analytics.com"
+    />,
+  ]);
+};
+
+export { onPreRenderHTML, onRenderBody, wrapPageElement };

package.json

@@ -13,8 +13,6 @@
     "gatsby": "^2.24.2",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-emotion": "^4.3.9",
-    "gatsby-plugin-google-analytics": "^2.3.10",
-    "gatsby-plugin-google-tagmanager": "^2.3.5",
     "gatsby-plugin-manifest": "^2.4.12",
     "gatsby-plugin-mdx": "^1.2.14",
     "gatsby-plugin-meta-redirect": "^1.1.1",
@@ -30,6 +28,7 @@
     "gatsby-source-filesystem": "^2.3.12",
     "gatsby-transformer-remark": "^2.8.17",
     "gatsby-transformer-sharp": "^2.5.7",
+    "js-cookie": "^2.2.1",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",

src/components/CookieApprovalDialog.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import Cookies from 'js-cookie';
+import Button from './Button';
+import cx from 'classnames';
+import styles from './CookieApprovalDialog.module.scss';
+import ExternalLink from './ExternalLink';
+
+const gdprConsentCookieName = 'newrelic-gdpr-consent';
+
+const CookieApprovalDialog = ({ className, setCookieConsent }) => {
+  const [isCookieSet, setIsCookieSet] = useState(true);
+
+  useEffect(() => {
+    setIsCookieSet(Cookies.get(gdprConsentCookieName) !== undefined);
+  }, []);
+
+  function writeCookie(answer) {
+    const currentEnvironment =
+      process.env.ENV || process.env.NODE_ENV || 'development';
+    const options = { expires: 365 /* days */ };
+    if (currentEnvironment !== 'development') {
+      options.domain = 'newrelic.com';
+    }
+
+    Cookies.set(gdprConsentCookieName, String(!!answer), options);
+    setIsCookieSet(true);
+    answer && setCookieConsent(true);
+  }
+
+  if (isCookieSet) {
+    return null;
+  }
+  return (
+    <div className={cx(styles.container, className)}>
+      <div className={styles.content}>
+        <div className={styles.primaryContent}>
+          <h4 className={styles.heading}>
+            This site uses cookies{' '}
+            <span role="img" aria-label="Cookie emoji">
+              🍪
+            </span>
+          </h4>
+          <p className={styles.description}>
+            We use cookies and other similar technologies ("Cookies") on our
+            websites and services to enhance your experience and to provide you
+            with relevant content. By using our websites and services you are
+            agreeing to the use of cookies. You can read more{' '}
+            <ExternalLink href="https://newrelic.com/termsandconditions/cookie-policy">
+              here
+            </ExternalLink>
+            . If you consent to our cookies, please click <strong>Yes</strong>.
+          </p>
+        </div>
+        <div className={styles.buttonsContainer}>
+          <Button
+            className={styles.approveButton}
+            variant={Button.VARIANT.PRIMARY}
+            onClick={() => writeCookie(true)}
+          >
+            Yes
+          </Button>
+          <Button
+            className={styles.rejectButton}
+            variant={Button.VARIANT.NORMAL}
+            onClick={() => writeCookie(false)}
+          >
+            No
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CookieApprovalDialog.propTypes = {
+  className: PropTypes.string,
+  setCookieConsent: PropTypes.func,
+};
+
+export default CookieApprovalDialog;

src/components/CookieApprovalDialog.module.scss

@@ -0,0 +1,105 @@
+.container {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  z-index: 10000;
+  background-color: rgba(28, 42, 47, 0.92);
+  box-shadow: 0px -0.249053px 4.26158px rgba(12, 48, 57, 0.0421718),
+    0px -0.598509px 10.2412px rgba(12, 48, 57, 0.0605839),
+    0px -1.12694px 19.2832px rgba(12, 48, 57, 0.075),
+    0px -2.01027px 34.3979px rgba(12, 48, 57, 0.0894161),
+    0px -3.75998px 64.3375px rgba(12, 48, 57, 0.107828),
+    0px -9px 154px rgba(12, 48, 57, 0.15);
+  backdrop-filter: blur(5px);
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1180px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 1.125rem 0;
+}
+
+.heading {
+  color: #fff;
+  margin-top: 0;
+  margin-bottom: 2px;
+  line-height: 21px;
+}
+
+.description {
+  margin: 0 0 0px;
+  font-size: 13px;
+  line-height: 21px;
+  color: var(--accent-text-color);
+}
+
+.buttonsContainer {
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+.approveButton {
+  margin-right: 10px;
+  padding: 0.625rem 1.75rem;
+}
+
+.rejectButton {
+  padding: 0.625rem 1rem;
+}
+
+// ==============================================================
+// Responsive styles
+// ==============================================================
+@media screen and (max-width: 1200px) {
+  .content {
+    width: 100%;
+    padding: 1.125rem 1.75rem;
+  }
+
+  .heading {
+    margin-bottom: 0.375rem;
+  }
+
+  .description {
+    line-height: 19px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .description {
+    margin-bottom: 1rem;
+  }
+
+  .cta-container {
+    margin: 0;
+  }
+
+  .approveButton {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .rejectButton {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
+// ==============================================================
+// Dark mode
+// ==============================================================
+:global(.dark-mode) {
+  .container {
+    background-color: rgba(15, 25, 28, 0.92);
+    box-shadow: 0 -1px 0 rgba(55, 72, 78, 0.4);
+  }
+}

src/components/Layout.js

@@ -1,21 +1,47 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
+import { Helmet } from 'react-helmet';
+import Cookies from 'js-cookie';
 import Footer from './Footer';
 import GlobalHeader from './GlobalHeader';
 import MobileHeader from './MobileHeader';
 import Sidebar from './Sidebar';
+import CookieApprovalDialog from './CookieApprovalDialog';
 import styles from './Layout.module.scss';
 import 'normalize.css';
 import './styles.scss';
 import '../theme.scss';
 
+const gaTrackingId = 'UA-3047412-33';
+const gdprConsentCookieName = 'newrelic-gdpr-consent';
+
 const Layout = ({ children }) => {
+  const [cookieConsent, setCookieConsent] = useState(false);
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
 
+  useEffect(() => {
+    const consentValue = Cookies.get(gdprConsentCookieName);
+    consentValue && setCookieConsent(true);
+  }, []);
+
   return (
     <div className={styles.layout}>
+      <Helmet>
+        {cookieConsent ? (
+          <script>
+            {`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+          
+          ga('create', '${gaTrackingId}', 'auto');
+          ga('set', 'anonymizeIp', true);
+          ga('send', 'pageview');`}
+          </script>
+        ) : null}
+      </Helmet>
       <GlobalHeader />
       <MobileHeader
         className={styles.hideOnDesktop}
@@ -34,6 +60,7 @@ const Layout = ({ children }) => {
           <Footer className={styles.footer} />
         </div>
       </div>
+      <CookieApprovalDialog setCookieConsent={setCookieConsent} />
     </div>
   );
 };