Add Tracking + Consent Manager for Docs

docs/gatsby-browser.js

@@ -0,0 +1,13 @@
+const { NODE_ENV = 'development' } = process.env
+
+// eslint-disable-next-line import/prefer-default-export
+export const onRouteUpdate = () => {
+  if (!window.analytics || typeof window.analytics.page !== 'function') {
+    if (NODE_ENV === 'development') {
+      console.warn('Unable to locate analytics.js')
+    }
+    return
+  }
+
+  window.analytics.page()
+}

docs/gatsby-ssr.js

@@ -1,18 +1,50 @@
 /* eslint-disable react/no-danger */
 const React = require('react')
+const { min: createSnippet } = require('@segment/snippet')
 const { extractStyles } = require('../esm')
+const segmentWriteKey = require('./segmentWriteKey')
+
+const getSnippet = ({ writeKey }) => {
+  // In development, stub out all analytics.js methods
+  // this prevents "dirtying" your real analytics with local testing/traffic
+  const { NODE_ENV = 'development' } = process.env
+  if (NODE_ENV === 'development') {
+    return `
+      (function () {
+        // analytics.js stub
+        const analytics = window.analytics = {}
+        const methods = [
+          'trackSubmit', 'trackClick', 'trackLink', 'trackForm', 'pageview',
+          'identify', 'reset', 'group', 'track', 'ready', 'alias', 'debug',
+          'page', 'once', 'off', 'on', 'load'
+        ]
+        methods.forEach(method =>
+          analytics[method] = (...args) => console.log(\`analytics.\${method}\`, ...args)
+        )
+      })()
+    `
+  }
+
+  return createSnippet({ apiKey: writeKey, page: false })
+}
 
 exports.onRenderBody = ({ setHeadComponents }) => {
   // Get the css and hydration script from Evergreen.
   const { css, hydrationScript } = extractStyles()
 
+  const snippet = getSnippet({ writeKey: segmentWriteKey })
+
   // Takes an array of components as its first argument which are added to
   // the headComponents array which is passed to the html.js component.
   setHeadComponents([
     // We need a key here for Gatsby to stop complaining.
     <React.Fragment key="evergreen-ssr">
       <style id="evergreen-css" dangerouslySetInnerHTML={{ __html: css }} />
       {hydrationScript}
-    </React.Fragment>
+    </React.Fragment>,
+    <script
+      key="segment-snippet"
+      dangerouslySetInnerHTML={{ __html: snippet }}
+    />
   ])
 }

docs/package.json

@@ -12,6 +12,9 @@
     "@mdx-js/tag": "^0.15.0",
     "@reach/router": "^1.1.1",
     "@reactions/component": "^2.0.2",
+    "@segment/consent-manager": "^1.2.0",
+    "@segment/in-eu": "^0.2.1",
+    "@segment/snippet": "^4.4.0",
     "faker": "^4.1.0",
     "fuzzaldrin-plus": "^0.6.0",
     "gatsby": "^2.0.8",

docs/segmentWriteKey.js

@@ -0,0 +1 @@
+export default 'kfSgLPyTrQI1Ys3hW4Sm3B25NHs4UHZX'

docs/src/components/ConsentManager.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { ConsentManager, openConsentManager } from '@segment/consent-manager'
+import inEU from '@segment/in-eu'
+import segmentWriteKey from '../../segmentWriteKey'
+
+export default () => {
+  const bannerContent = (
+    <span>
+      We use cookies (and other similar technologies) to collect data to improve
+      your experience on our site. By using our website, you’re agreeing to the
+      collection of data as described in our{' '}
+      <a
+        href="https://segment.com/docs/legal/website-data-collection-policy/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Website Data Collection Policy
+      </a>.
+    </span>
+  )
+  const bannerSubContent = 'You can change your preferences at any time.'
+  const preferencesDialogTitle = 'Website Data Collection Preferences'
+  const preferencesDialogContent =
+    'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
+  const cancelDialogTitle = 'Are you sure you want to cancel?'
+  const cancelDialogContent =
+    'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'
+
+  return (
+    <div>
+      <ConsentManager
+        writeKey={segmentWriteKey}
+        shouldRequireConsent={inEU}
+        bannerContent={bannerContent}
+        bannerSubContent={bannerSubContent}
+        preferencesDialogTitle={preferencesDialogTitle}
+        preferencesDialogContent={preferencesDialogContent}
+        cancelDialogTitle={cancelDialogTitle}
+        cancelDialogContent={cancelDialogContent}
+      />
+
+      <button type="button" onClick={openConsentManager}>
+        Website Data Collection Preferences
+      </button>
+    </div>
+  )
+}

docs/src/components/Page.js

@@ -10,6 +10,7 @@ import DocsMDXProvider from './DocsMDXProvider'
 import TopBar from './TopBar'
 import Layout from './Layout'
 import OverviewItem from './OverviewItem'
+import PageFooter from './PageFooter'
 
 const flatItems = [
   ...IA.foundation.items.map(item => {
@@ -158,6 +159,7 @@ class Page extends React.Component {
             </div>
           </main>
         </div>
+        <PageFooter />
       </React.Fragment>
     )
   }

docs/src/components/PageFooter.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import SegmentLogoWordmark from './SegmentLogoWordmark'
+import ConsentManager from './ConsentManager'
 
 const NativeLink = props => (
   <a target="_blank" rel="noopener noreferrer" {...props} />
@@ -25,6 +26,9 @@ export default class PageFooter extends React.PureComponent {
             </p>
           </div>
         </div>
+        <div className="Container PageFooter-inner">
+          <ConsentManager />
+        </div>
       </footer>
     )
   }

docs/src/css/main-layout.css

@@ -3,7 +3,7 @@ body {
 }
 
 .MainLayout {
-  height: 100vh;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
 }

docs/src/css/overview.css

@@ -1,5 +1,6 @@
 .Overview {
-  =margin: 0 auto 160px;
+  margin: 0 auto 160px;
+  min-height: 100vh;
 
   & header {
     margin-top: 40px;

docs/src/pages/get-started/introduction.js

@@ -5,6 +5,7 @@ import TopBar from '../../components/TopBar'
 import GetStartedSidebar from '../../components/GetStartedSidebar'
 import SyntaxHighlighter from '../../components/SyntaxHighlighter'
 import Layout from '../../components/Layout'
+import PageFooter from '../../components/PageFooter'
 
 const NativeLink = ({ ...props }) => {
   return <a target="_blank" rel="noopener noreferrer" {...props} />
@@ -107,6 +108,7 @@ ReactDOM.render(
           <GetStartedSidebar />
         </main>
       </div>
+      <PageFooter />
     </Layout>
   )
 }

docs/src/pages/get-started/theming.js

@@ -3,6 +3,7 @@ import Helmet from 'react-helmet'
 import TopBar from '../../components/TopBar'
 import GetStartedSidebar from '../../components/GetStartedSidebar'
 import Layout from '../../components/Layout'
+import PageFooter from '../../components/PageFooter'
 
 const NativeLink = ({ ...props }) => {
   return <a target="_blank" rel="noopener noreferrer" {...props} />
@@ -41,6 +42,7 @@ export default () => {
           <GetStartedSidebar />
         </main>
       </div>
+      <PageFooter />
     </Layout>
   )
 }