website: Add analytics and swap CTA & docs section order (#5684)

* website: Add analytics tracking for components and outbound links

* website: Update component dependencies

* website: Swap cta and documentation sections

website/assets/app.js

@@ -5,7 +5,7 @@ const extendRule = require('postcss-extend-rule')
 
 module.exports = {
   ignore: ['yarn.lock', '**/_*'],
-  entry: { 'js/main': './js/index.js' },
+  entry: { 'js/main': './js/index.js', 'js/analytics.js': './js/analytics.js' },
   postcss: cssStandards({
     appendPlugins: [extendRule()]
   }),

website/assets/js/analytics.js

@@ -0,0 +1,101 @@
+import { each } from './utils'
+
+/* Segment's analytics.js provides a ready() function that is called once tracking is up and running */
+/* Some clients block analytics.js, so to prevent errors, we assign noop functions if window.analytics isn't present */
+window.analytics.ready(() => {
+  const analytics = window.analytics || {
+    trackLink: () => {},
+    track: () => {},
+    mock: true
+  }
+
+  // Track all button clicks
+  track(
+    '[data-ga-button]',
+    el => {
+      return {
+        event: 'Click',
+        category: 'Button',
+        label: el.getAttribute('data-ga-button')
+      }
+    },
+    true
+  )
+
+  // Track product subnav link clicks
+  track(
+    '[data-ga-product-subnav]',
+    el => {
+      return {
+        event: 'Click',
+        category: 'Product Subnav Navigation',
+        label: el.getAttribute('data-ga-product-subnav')
+      }
+    },
+    true
+  )
+
+  // Track meganav link clicks
+  track(
+    '[data-ga-meganav]',
+    el => {
+      return {
+        event: 'Click',
+        category: 'Meganav Navigation',
+        label: el.getAttribute('data-ga-meganav')
+      }
+    },
+    true
+  )
+
+  // Track footer link clicks
+  track(
+    '[data-ga-footer]',
+    el => {
+      return {
+        event: 'Click',
+        category: 'Footer Navigation',
+        label: el.getAttribute('data-ga-footer')
+      }
+    },
+    true
+  )
+
+  // Track outbound links
+  track(
+    'a[href^="http"]:not([href^="http://vaultproject.io"]):not([href^="https://vaultproject.io"]):not([href^="http://www.vaultproject.io"]):not([href^="https://www.vaultproject.io"])',
+    el => {
+      return {
+        event: `Outbound Link | ${window.location.pathname}`,
+        category: 'Outbound link',
+        label: el.href
+      }
+    },
+    true
+  )
+
+  // Note: Downloads are tracked from within the Product Downloader component
+
+  /**
+   * Wrapper for segment's track function that will track multiple elements,
+   * normalize parameters, and easily switch between tracking links or events.
+   * @param  {String} selector - query selector, multi element compatible
+   * @param  {Function} cb - optional function that should return params, and will receive the element as a parameter
+   * @param  {Boolean} [link=false] - if true, tracks a link click
+   */
+  function track(selector, cb, link = false) {
+    each(document.querySelectorAll(selector), el => {
+      let params = cb
+      if (typeof cb === 'function') params = cb(el)
+      const event = params.event
+      delete params.event
+      if (link) {
+        analytics.trackLink(el, event, params)
+      } else {
+        el.addEventListener('click', () => {
+          analytics.track(event, params)
+        })
+      }
+    })
+  }
+})

website/assets/package.json

@@ -23,7 +23,7 @@
     "@hashicorp/hashi-nav": "1.1.1",
     "@hashicorp/hashi-newsletter-signup-form": "1.1.1",
     "@hashicorp/hashi-product-downloader": "^0.6.1",
-    "@hashicorp/hashi-product-subnav": "^0.5.1",
+    "@hashicorp/hashi-product-subnav": "^0.5.3",
     "@hashicorp/hashi-section-header": "2.0.4",
     "@hashicorp/hashi-split-cta": "^0.1.4",
     "@hashicorp/hashi-vertical-text-block-list": "^0.1.1",

website/source/index.html.erb

@@ -20,6 +20,15 @@ description: "Vault secures, stores, and tightly controls access to tokens, pass
     <hashi-callouts _data="<%= encode(page.use_cases_callouts[0]) %>"></hashi-callouts>
   </section>
 
+  <section class='g-container'>
+    <hashi-section-header
+      headline="<%= page.documentation_headline.headline %>"
+      description="<%= page.documentation_headline.description %>"
+    ></hashi-section-header>
+
+    <hashi-linked-text-summary-list _data="<%= encode(data.docs_basic_categories) %>"></hashi-linked-text-summary-list>
+  </section>
+
   <section class='gray'>
     <div class='g-container'>
       <hashi-section-header
@@ -40,15 +49,6 @@ description: "Vault secures, stores, and tightly controls access to tokens, pass
     </div>
   </section>
 
-  <section class='g-container'>
-    <hashi-section-header
-      headline="<%= page.documentation_headline.headline %>"
-      description="<%= page.documentation_headline.description %>"
-    ></hashi-section-header>
-
-    <hashi-linked-text-summary-list _data="<%= encode(data.docs_basic_categories) %>"></hashi-linked-text-summary-list>
-  </section>
-
   <section class='no-pad'>
     <hashi-split-cta _data="<%= encode(page.oss_enterprise_ctas.items) %>"></hashi-split-cta>
   </section>