Add consent manager to vaultproject.io (#5808)

* Add consent manager

* Add Hull and Hotjar

website/assets/app.js

@@ -2,13 +2,56 @@ const cssStandards = require('spike-css-standards')
 const jsStandards = require('spike-js-standards')
 const preactPreset = require('babel-preset-preact')
 const extendRule = require('postcss-extend-rule')
+const webpack = require('webpack')
+
+/* eslint-disable-next-line */
+console.log(`Building assets for environment *${process.env.NODE_ENV}*`)
+
+const isProd =
+  process.env.NODE_ENV === 'production' ||
+  process.env.NODE_ENV === 'tmp-production'
+
+let utilServerUrl
+if (isProd) {
+  utilServerUrl = 'https://util.hashicorp.com'
+} else {
+  utilServerUrl = 'https://hashicorp-web-util-staging.herokuapp.com'
+}
+
+if (process.env.UTIL_SERVER) {
+  utilServerUrl = process.env.UTIL_SERVER
+
+  // remove trailing slash
+  utilServerUrl = utilServerUrl.replace(/\/$/, '')
+
+  /* eslint-disable-next-line */
+  console.log(`utilServerUrl=${utilServerUrl}`)
+}
+
+let segmentWriteKey
+if (isProd) {
+  segmentWriteKey = 'OdSFDq9PfujQpmkZf03dFpcUlywme4sC'
+} else {
+  segmentWriteKey = '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
+}
 
 module.exports = {
   ignore: ['yarn.lock', '**/_*'],
-  entry: { 'js/main': './js/index.js', 'js/analytics.js': './js/analytics.js' },
+  entry: {
+    'js/main': './js/index.js',
+    'js/analytics.js': './js/analytics.js',
+    'js/consent-manager': './js/consent-manager.js'
+  },
   postcss: cssStandards({
     appendPlugins: [extendRule()]
   }),
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      utilityServerRoot: JSON.stringify(utilServerUrl),
+      segmentWriteKey: JSON.stringify(segmentWriteKey)
+    })
+  ],
   babel: jsStandards({ appendPresets: [preactPreset] }),
   server: { open: false }
 }

website/assets/css/index.css

@@ -19,6 +19,8 @@
 @import '@hashicorp/hashi-split-cta/dist/style.css';
 @import '@hashicorp/hashi-linked-text-summary-list/dist/style.css';
 @import '@hashicorp/hashi-docs-sitemap/dist/style.css';
+@import '@hashicorp/hashi-consent-manager/dist/style.css';
+@import '@hashicorp/hashi-toggle/dist/style.css';
 
 /* to be removed pending new components */
 @import '_inner';

website/assets/js/consent-manager.js

@@ -0,0 +1,65 @@
+import { open, init } from '@hashicorp/hashi-consent-manager'
+
+window.openConsentManager = () => open()
+
+init({
+  version: 1,
+  container: '#consent-manager',
+  companyName: 'HashiCorp',
+  privacyPolicyLink: '/privacy',
+  segmentWriteKey: segmentWriteKey,
+  utilServerRoot: utilityServerRoot,
+  segmentServices: [
+    {
+      key: 'googleanalytics',
+      name: 'Google Analytics',
+      description:
+        'Google Analytics is a popular service for tracking web traffic. We use this data to determine what content our users find important so that we can dedicate more resources toward it.',
+      category: 'Analytics'
+    },
+    {
+      name: 'Marketo V2',
+      description:
+        'Marketo is a marketing automation tool that allows us to segment users into different categories based off of their behaviors.  We use this information to provide tailored information to users in our email campaigns.',
+      category: 'Email Marketing'
+    },
+    {
+      name: 'Hull',
+      description:
+        'Hull is a tool that we use to clean up analytics data and send it between different services. It does not add any javascript tracking code to this site.',
+      category: 'Analytics'
+    },
+    {
+      name: 'Hotjar',
+      description:
+        'Hotjar is a service that generates heatmaps of where users click on our sites. We use this information to ensure that our site is not confusing, and simple to use and navigate.',
+      category: 'Analytics'
+    }
+  ],
+  categories: [
+    {
+      name: 'Functional',
+      description:
+        'Functional services provide a utility to the website, such as the ability to log in, or to get live support. Disabling any of these scripts will cause that utility to be missing from the site.'
+    },
+    {
+      name: 'Analytics',
+      description:
+        'Analytics services keep track of page traffic and user behavior while browsing the site. We use this data internally to improve the usability and performance of the site. Disabling any of these scripts makes it more difficult for us to understand how our site is being used, and slower to improve it.'
+    },
+    {
+      name: 'Email Marketing',
+      description:
+        'Email Marketing services track user behavior while browsing the site. We use this data internally in our marketing efforts to provide users contextually relevant information based off of their behaviors. Disabling any of these scripts makes it more difficult for us to provide you contextually relevant information.'
+    }
+  ],
+  additionalServices: [
+    {
+      name: 'OptinMonster',
+      description:
+        "OptinMonster is a service that we use to show a prompt to sign up for our newsletter if it's perceived that you are interested in our content.",
+      category: 'Functional',
+      body: `var om597a24292a958,om597a24292a958_poll=function(){var e=0;return function(t,a){clearInterval(e),e=setInterval(t,a)}}();!function(e,t,a){if(e.getElementById(a))om597a24292a958_poll(function(){if(window.om_loaded&&!om597a24292a958)return(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0})},25);else{var n=!1,o=e.createElement("script");o.id=a,o.src="//a.optnmstr.com/app/js/api.min.js",o.async=!0,o.onload=o.onreadystatechange=function(){if(!(n||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState))try{n=om_loaded=!0,(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0}),o.onload=o.onreadystatechange=null}catch(e){}},(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(o)}}(document,0,"omapi-script");analytics.page()`
+    }
+  ]
+})

website/assets/js/index.js

@@ -9,6 +9,7 @@ import megaNav from '@hashicorp/hashi-mega-nav'
 import productDownloader from '@hashicorp/hashi-product-downloader'
 import hero from '@hashicorp/hashi-hero'
 import docsSidenav from '@hashicorp/hashi-docs-sidenav'
+import consentManager from '@hashicorp/hashi-consent-manager'
 
 const components = initializeComponents({
   nav,
@@ -18,5 +19,6 @@ const components = initializeComponents({
   megaNav,
   productDownloader,
   hero,
-  docsSidenav
+  docsSidenav,
+  consentManager
 })

website/assets/package.json

@@ -11,6 +11,7 @@
     "@hashicorp/hashi-button": "1.0.5",
     "@hashicorp/hashi-callouts": "^2.0.5",
     "@hashicorp/hashi-content": "^0.1.0",
+    "@hashicorp/hashi-consent-manager": "^1.0.5",
     "@hashicorp/hashi-docs-sidenav": "^0.3.0",
     "@hashicorp/hashi-docs-sitemap": "^0.1.4",
     "@hashicorp/hashi-footer": "1.1.2",
@@ -26,9 +27,12 @@
     "@hashicorp/hashi-product-subnav": "^0.5.3",
     "@hashicorp/hashi-section-header": "^4.0.0",
     "@hashicorp/hashi-split-cta": "^0.1.4",
+    "@hashicorp/hashi-toggle": "^0.2.2",
     "@hashicorp/hashi-vertical-text-block-list": "^0.1.1",
     "@hashicorp/js-utils": "^1.0.0",
     "@hashicorp/localstorage-polyfill": "^1.0.3",
+    "@segment/in-eu": "^0.2.1",
+    "@segment/top-domain": "^3.0.0",
     "color-contrast": "^0.0.1",
     "js-cookie": "^2.2.0",
     "marked": "^0.5.1",

website/assets/reshape.js

@@ -13,6 +13,7 @@ const callouts = require('@hashicorp/hashi-callouts')
 const splitCta = require('@hashicorp/hashi-split-cta')
 const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list')
 const docsSitemap = require('@hashicorp/hashi-docs-sitemap')
+const consentManager = require('@hashicorp/hashi-consent-manager')
 
 module.exports = {
   'hashi-footer': footer,
@@ -29,5 +30,6 @@ module.exports = {
   'hashi-callouts': callouts,
   'hashi-split-cta': splitCta,
   'hashi-linked-text-summary-list': linkedTextSummaryList,
-  'hashi-docs-sitemap': docsSitemap
+  'hashi-docs-sitemap': docsSitemap,
+  'hashi-consent-manager': consentManager
 }

website/config.rb

@@ -17,15 +17,6 @@
 proxy '_redirects', 'netlify-redirects', ignore: true
 
 helpers do
-  # get correct analytics id
-  def segmentId()
-    if (ENV['ENV'] == 'tmp-production')
-      'OdSFDq9PfujQpmkZf03dFpcUlywme4sC'
-    else
-      '0EXTgkNx0Ydje2PGXVbRhpKKoe5wtzcE'
-    end
-  end
-
   # Formats and filters a category of docs for the sidebar component
   def get_sidebar_data(category)
     sitemap.resources.select { |resource|

website/source/layouts/layout.erb

@@ -33,20 +33,32 @@
 
     <link rel='stylesheet' href='/css/index.css' />
 
-    <!-- Analytics scrpts -->
-    <script defer>
-      !function(){var e=window.analytics=window.analytics||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"],e.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),e.push(a),e}};for(var t=0;t<e.methods.length;t++){var a=e.methods[t];e[a]=e.factory(a)}e.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+e+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a)},e.SNIPPET_VERSION="4.0.0",e.load("<%= segmentId %>")}}();var om597a24292a958,om597a24292a958_poll=function(){var e=0;return function(t,a){clearInterval(e),e=setInterval(t,a)}}();!function(e,t,a){if(e.getElementById(a))om597a24292a958_poll(function(){if(window.om_loaded&&!om597a24292a958)return(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0})},25);else{var n=!1,o=e.createElement("script");o.id=a,o.src="//a.optnmstr.com/app/js/api.min.js",o.async=!0,o.onload=o.onreadystatechange=function(){if(!(n||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState))try{n=om_loaded=!0,(om597a24292a958=new OptinMonsterApp).init({s:"35109.597a24292a958",staging:0,dev:0,beta:0}),o.onload=o.onreadystatechange=null}catch(e){}},(document.getElementsByTagName("head")[0]||document.documentElement).appendChild(o)}}(document,0,"omapi-script");analytics.page()
+    <script>
+      // segment analytics
+      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
+      analytics.page({
+        properties: {
+          url: window.location.href,
+          path: window.location.pathname,
+          search: window.location.search,
+          title: document.title,
+          referrer: document.referrer
+        }
+      });
+      }}();
     </script>
 
     <%= yield_content :head %>
   </head>
 
   <body id="<%= body_id_for(current_page) %>" class="<%= body_classes_for(current_page) %>">
     <hashi-mega-nav title="<%= defined?(@meganav_title).nil? ? '' : @meganav_title %>" _data="<%= encode(dato.mega_nav) %>"></hashi-mega-nav>
+    <div id="consent-manager"></div>
     <main><%= yield %></main>
     <hashi-footer _data="<%= encode(dato.global_footer) %>"></hashi-footer>
 
     <%= yield_content :scripts %>
+    <script src='/js/consent-manager.js'></script>
     <script src='/js/main.js'></script>
 
     <script type="application/ld+json">