[WEB-2180] Add segment and track page views (#81)

* Add Segment snippet v5.2.1

Example as provided by
https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step-2a-add-the-segment-snippet

* Use .track, add properties as seen on old docs page view events

The old docs site did not use .page to track page views, unsure why

* Add segement write key via env variable

* Add SEGMENT_WRITE_KEY to env sample and documentation

Author: j2em6h

.env.copy

@@ -1,4 +1,5 @@
 ALGOLIA_APP_ID=
 ALGOLIA_ADMIN_KEY=
 ALGOLIA_INDEX_NAME=circleci-docs
+SEGMENT_WRITE_KEY=
 SKIP_INDEX_SEARCH=true

TECHNICAL_REFERENCE.md

@@ -314,6 +314,7 @@ Or through npm scripts defined in `package.json`.
 | `ALGOLIA_APP_ID` | Algolia search app ID | - |
 | `ALGOLIA_API_KEY` | Algolia search API key | - |
 | `ALGOLIA_INDEX_NAME` | Algolia search index name | - |
+| `SEGMENT_WRITE_KEY` | Segment write key for analytics | - |
 | `NODE_ENV` | Node environment | `development` |
 
 ## Build Output

gulp.d/tasks/build-site.js

@@ -1,5 +1,6 @@
 'use strict'
 const { exec } = require('child_process')
+require('@dotenvx/dotenvx').config()
 const antoraPlaybook = 'antora-playbook.yml'
 
 const resolvedPath =  require.resolve('../../extensions/page-metadata-extension');
@@ -8,7 +9,7 @@ console.log('Resolved path:', resolvedPath);
 
 module.exports = function buildSite(cb) {
   console.log('Starting Antora build...')
-  exec(`npx antora ${antoraPlaybook} --log-failure-level=warn --extension ${resolvedPath} --extension ${resolvedPathExportExtension}`, (err, stdout, stderr) => {
+  exec(`npx antora ${antoraPlaybook} --log-failure-level=warn --extension ${resolvedPath} --extension ${resolvedPathExportExtension} --key segment_write=${process.env.SEGMENT_WRITE_KEY || null}`, (err, stdout, stderr) => {
     console.log(stdout)
     if (stderr) console.error(stderr)
     if (err) return cb(err)

ui/src/partials/head-scripts.hbs

@@ -3,6 +3,28 @@
     <script>function gtag(){dataLayer.push(arguments)};window.dataLayer=window.dataLayer||[];gtag('js',new Date());gtag('config','{{this}}')</script>
 {{/with}}
 <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
+{{#with site.keys.segmentWrite }}
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>
+    <script>
+        !function(){var i="analytics",analytics=window[i]=window[i]||[];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","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="{{this}}";;analytics.SNIPPET_VERSION="5.2.1";
+        analytics.load("{{this}}");
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        const pathName = window.location.pathname.replace("docs/", "");
+        analytics.track("dd_docs_page", {
+            fullPath: pathName,
+            has2dot0: pathName.includes("2.0/"),
+            fbclid: urlSearchParams.get("fbclid"),
+            gclid: urlSearchParams.get("gclid"),
+            action: "viewed",
+            orgId: Cookies.get("cci-org-analytics-id") || null,
+            page: pathName == "/" ? "homepage" : pathName,
+            hash: window.location.hash ? window.location.hash.replace("#", "") : null,
+            locale: "en",
+            desktop: window.innerWidth >= 1200,
+        })
+        }}();
+    </script>
+{{/with}}
 <script defer src="https://widget.kapa.ai/kapa-widget.bundle.js" data-website-id="06cd008c-32ae-46d3-946b-211d1afd443c" data-project-name="CircleCI" data-project-color="#161616" data-project-logo="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTI7jLeuu2k66svJDmHxYKlP7Ysf7FvNbkuvzAhHEPCsvLbhcpVRnoJCm538OSv6o5uzlQ&usqp=CAU"
 ></script>
 {{!--