Cloud UI Outbound Link URL Param (#1055)

* adding url param 'qdrant-tech' to outbound links to Cloud UI for the sake of tracking user journey (when consented)

* tagCloudUILinksWithHash() should not be conditional but occur before tracking events/elements are registered

* tagCloudUILinksWithHash within DOMContentLoaded and before registering All anchors for tracking

* import correction

* add new key/value pair to interaction

* uniform naming convention and remove "s" from key, and CROSS_SITE_URL_PARAM_KEY for uniformity

qdrant-landing/themes/qdrant-2024/assets/js/helpers.js

@@ -75,4 +75,32 @@ export function devLog(str) {
   if (window.location.host.includes('localhost')) {
     console.log(str)
   }
-}
+}
+
+export const CROSS_SITE_URL_PARAM_KEY = 'qdrant-tech';
+export function tagCloudUILinksWithHash() {
+  const targetUrl = 'https://cloud.qdrant.io/';
+  
+  // Generate a random 32-character string
+  const generateRandomString = (length = 32) => {
+    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_";
+    return Array.from({ length }, () => charset.charAt(Math.floor(Math.random() * charset.length))).join('');
+  };
+
+  const parameterValue = generateRandomString();
+  
+  // Function to add or update query parameter in the URL
+  function addOrUpdateQueryParam(url, paramName, paramValue) {
+    const urlObj = new URL(url, window.location.origin); // Ensures URL is absolute
+    urlObj.searchParams.set(paramName, paramValue);
+    return urlObj.toString();
+  }
+
+  // Select all <a> elements with href exactly containing targetUrl
+  const links = document.querySelectorAll(`a[href*="${targetUrl}"]`);
+
+  // Loop through all selected <a> elements and update their href
+  links.forEach(link => {
+    link.href = addOrUpdateQueryParam(link.href, CROSS_SITE_URL_PARAM_KEY, parameterValue);
+  });
+}

qdrant-landing/themes/qdrant-2024/assets/js/index.js

@@ -1,12 +1,13 @@
 import scrollHandler from './scroll-handler';
 import { XXL_BREAKPOINT } from './constants';
-import { initGoToTopButton, getCookie } from './helpers';
+import { initGoToTopButton, getCookie, tagCloudUILinksWithHash } from './helpers';
 import { loadSegment, createSegmentStoredPage, tagAllAnchors } from './segment-helpers'
 
 createSegmentStoredPage();
 
 // on document ready
 document.addEventListener('DOMContentLoaded', function () {
+  tagCloudUILinksWithHash();
   tagAllAnchors();
 
   if (!window.analytics && getCookie('cookie-consent')) {

qdrant-landing/themes/qdrant-2024/assets/js/segment-helpers.js

@@ -1,4 +1,4 @@
-import { getCookie, devLog } from './helpers';
+import { getCookie, devLog, CROSS_SITE_URL_PARAM_KEY } from './helpers';
 
 const WRITE_KEY = 'segmentWriteKey';
 const PAGES_SESSION_STORAGE_KEY = 'segmentPages';
@@ -8,7 +8,6 @@ const PAYLOAD_BOILERPLATE = {
   title: document.title,
 };
 
-
 /*******************/
 /* General helpers */
 /*******************/
@@ -34,11 +33,16 @@ const nameMapper = (url) => { // Mapping names based on pathname for Segment
 /* DOM helpers */
 /***************/
 const handleClickInteraction = (event) => {
+  const url = new URL(event.target.href);
+  const searchParams = url.searchParams;
+  const qdrantTechHash = searchParams.get(CROSS_SITE_URL_PARAM_KEY);
+
   const payload = {
     ...PAYLOAD_BOILERPLATE,
     location: event.target.getAttribute('data-metric-loc') ?? '',
     label: event.target.getAttribute('data-metric-label') ?? event.target.innerText,
-    action: 'clicked'
+    action: 'clicked',
+    qdrant_tech_hash: qdrantTechHash ?? null
   };
 
   // If consented to tracking the track