luxolus/open-vault
2
0
Fork 0
Code Issues 1 Pull requests Releases Activity

Add consent manager to vaultproject.io (#5808)

Browse source 
* Add consent manager

* Add Hull and Hotjar
This commit is contained in:
Jennifer Yip 2018-11-19 17:23:03 -05:00 committed by Chris Hoffman
parent 7daa57ccf3
commit 6421670cfe
8 changed files with 136 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
website/assets/app.js
View file

@ -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 }
}

2
website/assets/css/index.css
View file

@ -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';

65
website/assets/js/consent-manager.js Normal file
View file

@ -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()`
}
]
})

4
website/assets/js/index.js
View file

@ -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
})

4
website/assets/package.json
View file

@ -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",

4
website/assets/reshape.js
View file

@ -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
}

9
website/config.rb
View file

@ -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|

18
website/source/layouts/layout.erb
View file

@ -33,9 +33,19 @@
<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 %>
@ -43,10 +53,12 @@
<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">