Segment Anonymous ID for Cloud UI Consumption (#1086)

* custom generated ID => Segment Anonymous ID, tagging on analytics load, adding mobile nav click tracking

* qdrant-tech => ajs_anonymous_id

* remove unneeded exports

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

@@ -77,17 +77,11 @@ export function devLog(str) {
   }
 }
 
-export const CROSS_SITE_URL_PARAM_KEY = 'qdrant-tech';
-export function tagCloudUILinksWithHash() {
+const CROSS_SITE_URL_PARAM_KEY = 'ajs_anonymous_id';
+export function tagCloudUILinksWithAnonymousId() {
   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();
+  const anonymousId = analytics.user().anonymousId();
   
   // Function to add or update query parameter in the URL
   function addOrUpdateQueryParam(url, paramName, paramValue) {
@@ -101,6 +95,6 @@ export function tagCloudUILinksWithHash() {
 
   // Loop through all selected <a> elements and update their href
   links.forEach(link => {
-    link.href = addOrUpdateQueryParam(link.href, CROSS_SITE_URL_PARAM_KEY, parameterValue);
+    link.href = addOrUpdateQueryParam(link.href, CROSS_SITE_URL_PARAM_KEY, anonymousId);
   });
 }

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

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

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

@@ -1,4 +1,4 @@
-import { getCookie, devLog, CROSS_SITE_URL_PARAM_KEY } from './helpers';
+import { getCookie, devLog, tagCloudUILinksWithAnonymousId } from './helpers';
 
 const WRITE_KEY = 'segmentWriteKey';
 const PAGES_SESSION_STORAGE_KEY = 'segmentPages';
@@ -33,16 +33,11 @@ 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',
-    qdrant_tech_hash: qdrantTechHash ?? null
+    action: 'clicked'
   };
 
   // If consented to tracking the track 
@@ -60,7 +55,7 @@ const handleClickInteraction = (event) => {
 
 // Gather all <a> elements that have been tagged 
 // for tracking via 'data-metric-loc' attribute
-export function tagAllAnchors() {
+function tagAllAnchors() {
   const allMetricsAnchors= document.querySelectorAll('a[data-metric-loc]');
 
   if (allMetricsAnchors) {
@@ -250,6 +245,11 @@ export function loadSegment() {
       analytics._writeKey = writeKey;
       analytics.SNIPPET_VERSION = "5.2.0";
       analytics.load(writeKey);
+
+      analytics.ready(function() {
+        tagCloudUILinksWithAnonymousId();
+        tagAllAnchors();
+      });
     }
   }