feat: add Clarity to the WFE (#1305)

package.json

@@ -27,7 +27,7 @@
     "lint": "eslint source/javascripts --cache",
     "lint:fix": "eslint source/javascripts --cache --quiet --fix",
     "build": "webpack --bail",
-    "build:website": "MODE=WEBSITE ANALYTICS=true HOTJAR=true DATADOG_RUM=true npm run build",
+    "build:website": "MODE=WEBSITE ANALYTICS=true CLARITY=true DATADOG_RUM=true npm run build",
     "build:plugin": "MODE=CLI ANALYTICS=true npm run build && ./_scripts/compile_api.sh",
     "start:dev": "webpack-dev-server",
     "start:base": "concurrently \"npm:start:dev\" \"DEV=true ./_scripts/run_api.sh 4000\"",

rails/transformer.rb

@@ -68,8 +68,8 @@ def analytics?
     ENV['ANALYTICS'] == 'true'
 end
 
-def hotjar?
-    ENV['HOTJAR'] == 'true'
+def clarity?
+    ENV['CLARITY'] == 'true'
 end
 
 def freshpaint?

source/index.slim

@@ -9,8 +9,8 @@ html
 		script[src="#{ mode_dependant_asset_path 'javascripts/vendor.js' }"]
 		script[src="#{ mode_dependant_asset_path 'javascripts/strings.js' }"]
 		script[src="#{ mode_dependant_asset_path 'javascripts/routes.js' }"]
-		- if hotjar?
-			script[src="#{ mode_dependant_asset_path 'javascripts/hotjar.js' }"]
+		- if clarity?
+			script[src="#{ mode_dependant_asset_path 'javascripts/clarity.js' }"]
 		- if datadog_rum?
 			script[src="#{ mode_dependant_asset_path 'javascripts/datadogrum.js' }"]
 		script[src="#{ mode_dependant_asset_path 'javascripts/main.js' }"]

source/javascripts/clarity.js

@@ -0,0 +1,5 @@
+(function (c, l, a, r, i, t, y) {
+	c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
+	t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
+	y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
+})(window, document, "clarity", "script", "mxdzahxph2");

webpack.config.js

@@ -62,11 +62,11 @@ const MonacoPluginOptions = {
   ],
 };
 
-const { NODE_ENV, MODE, PUBLIC_URL_ROOT, HOTJAR, DEV_SERVER_PORT, DATADOG_RUM } = process.env;
+const { NODE_ENV, MODE, PUBLIC_URL_ROOT, CLARITY, DEV_SERVER_PORT, DATADOG_RUM } = process.env;
 const isProd = NODE_ENV === 'prod';
 const isWebsiteMode = MODE === 'WEBSITE';
 const urlPrefix = isWebsiteMode ? PUBLIC_URL_ROOT : '';
-const isHotjarEnabled = HOTJAR === 'true';
+const isClarityEnabled = CLARITY === 'true';
 const isDataDogRumEnabled = DATADOG_RUM === 'true';
 const publicPath = `${urlPrefix}/${version}/`;
 
@@ -93,8 +93,8 @@ const entry = {
   routes: './javascripts/routes.js.erb',
   main: './javascripts/index.js',
 };
-if (isHotjarEnabled) {
-  entry.hotjar = './javascripts/hotjar.js';
+if (isClarityEnabled) {
+  entry.clarity = './javascripts/clarity.js';
 }
 if (isDataDogRumEnabled) {
   entry.datadogrum = './javascripts/datadog-rum.js.erb';