From 6421670cfe379b44124016ca7a2a7a0ac34d3343 Mon Sep 17 00:00:00 2001 From: Jennifer Yip Date: Mon, 19 Nov 2018 17:23:03 -0500 Subject: [PATCH] Add consent manager to vaultproject.io (#5808) * Add consent manager * Add Hull and Hotjar --- website/assets/app.js | 45 ++++++++++++++++++- website/assets/css/index.css | 2 + website/assets/js/consent-manager.js | 65 ++++++++++++++++++++++++++++ website/assets/js/index.js | 4 +- website/assets/package.json | 4 ++ website/assets/reshape.js | 4 +- website/config.rb | 9 ---- website/source/layouts/layout.erb | 18 ++++++-- 8 files changed, 136 insertions(+), 15 deletions(-) create mode 100644 website/assets/js/consent-manager.js diff --git a/website/assets/app.js b/website/assets/app.js index 1443662fd..6093c2a7c 100644 --- a/website/assets/app.js +++ b/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 } } diff --git a/website/assets/css/index.css b/website/assets/css/index.css index 2d14c411e..255ea8fdf 100644 --- a/website/assets/css/index.css +++ b/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'; diff --git a/website/assets/js/consent-manager.js b/website/assets/js/consent-manager.js new file mode 100644 index 000000000..7b1934645 --- /dev/null +++ b/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()` + } + ] +}) diff --git a/website/assets/js/index.js b/website/assets/js/index.js index 749b59183..49a9a0401 100644 --- a/website/assets/js/index.js +++ b/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 }) diff --git a/website/assets/package.json b/website/assets/package.json index 6c9392f04..3ce6af08a 100644 --- a/website/assets/package.json +++ b/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", diff --git a/website/assets/reshape.js b/website/assets/reshape.js index c4f419e46..854fb4edd 100644 --- a/website/assets/reshape.js +++ b/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 } diff --git a/website/config.rb b/website/config.rb index af9ffa20d..acffc1c2f 100644 --- a/website/config.rb +++ b/website/config.rb @@ -17,15 +17,6 @@ end 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| diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index 905d7801c..bda806c1b 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -33,9 +33,19 @@ - - <%= yield_content :head %> @@ -43,10 +53,12 @@ +
<%= yield %>
<%= yield_content :scripts %> +