Persist utm params in cookie and add to outbound links to cloud ui (#1867)

* persist utm params in cookie and add to outbound links to cloud ui

* remove console log

* remove comments

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

@@ -1,3 +1,5 @@
+const UTM_PARAMS_KEY = 'utm_params';
+
 export function isElementInViewport(el) {
   var rect = el.getBoundingClientRect();
 
@@ -105,54 +107,56 @@ export function addGA4Properties(properties) {
   properties.ga_client_id = getCookie('_ga')?.replace('GA1.1.','');
 }
 
+export function persistUTMParams() {
+  if (!window.location.search) return;
+
+  const utmParams = getUTMParams();
+
+  if (!Object.keys(utmParams).length) return;
+
+  let filteredParams = '';
+  let ampersand = false;
+
+  for (const key in utmParams) {
+    if (utmParams[key]) {
+      ampersand = filteredParams.length;
+      filteredParams += `${ampersand ? '&' : ''}${key}=${utmParams[key]}`;
+    }
+  }
+
+  const oneYearInSeconds = 365 * 24 * 60 * 60;
+  document.cookie = `${UTM_PARAMS_KEY}=${filteredParams}; path=/; max-age=${oneYearInSeconds}`;
+}
+
 export function getUTMParams() {
-  const urlParams = new URLSearchParams(window.location.search);
+  const search = window.location.search;
+  
+  if (!search) return {};
 
-  // Gather all GTM related params
-  const utmIds = {
-      gcl: urlParams.get('gclid'),
-      gbra: urlParams.get('gbraid'),
-      wbra: urlParams.get('wbraid'),
+  const urlParams = new URLSearchParams(search);
+
+  return {
+      gclid: urlParams.get('gclid'),
+      gbraid: urlParams.get('gbraid'),
+      wbraid: urlParams.get('wbraid'),
+      utm_source: urlParams.get('utm_source'),
+      utm_medium: urlParams.get('utm_medium'),
+      utm_campaign: urlParams.get('utm_campaign'),
+      utm_content: urlParams.get('utm_content'),
+      utm_term: urlParams.get('utm_term')
   };
-
-  const utmParams = {
-      source: urlParams.get('utm_source'),
-      medium: urlParams.get('utm_medium'),
-      campaign: urlParams.get('utm_campaign'),
-      content: urlParams.get('utm_content'),
-      term: urlParams.get('utm_term')
-  };
-
-  return [utmIds, utmParams];
 }
 
 export function addUTMToLinks() {
-  const [utmIds, utmParams] = getUTMParams();
-
-  // Create new params string for outbound links and store in sessionStorage
-  let newParams = '';
-  for (const key in utmIds) {
-      if (utmIds[key]) {
-          sessionStorage.setItem(`${key}id`, utmIds[key]);
-          newParams += `${key}id=${utmIds[key]}&`;
-      }
-  }
-  for (const key in utmParams) {
-      if (utmParams[key]) {
-          sessionStorage.setItem(`utm_${key}`, utmParams[key]);
-          newParams += `utm_${key}=${utmParams[key]}&`;
-      }
-  }
+  const utmParams = getCookie(UTM_PARAMS_KEY);
 
   // Add url params to outbound links to product site
-  if (newParams.length > 0) {
-      newParams = newParams.replace(/[&|?]$/, ''); // remove trailing & or ?
-
+  if (utmParams) {
       const links = document.querySelectorAll('a[href*="cloud.qdrant.io"]');
       links.forEach(link => {
           const href = link.href;
           const separator = href.indexOf('?') === -1 ? '?' : '&';
-          link.href = `${href}${separator}${newParams}`;
+          link.href = `${href}${separator}${utmParams}&qdrant_ref=qdrant_tech`;
       });
   }
 }

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

@@ -1,10 +1,12 @@
 import scrollHandler from './scroll-handler';
 import { XXL_BREAKPOINT } from './constants';
-import { initGoToTopButton } from './helpers';
+import { initGoToTopButton, persistUTMParams } from './helpers';
 import { handleSegmentReady } from './segment-helpers';
 import { registerAndCall } from './onetrust-helpers';
 import TableOfContents from './table-of-content';
 
+persistUTMParams();
+
 // on document ready
 document.addEventListener('DOMContentLoaded', function () {
   const handleOneTrustLoaded = () => {   // One Trust Loaded

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

@@ -140,6 +140,23 @@ const trackInteractionEvent = (properties = {}) => {
   )
 }
 
+function cleanSegmentUtmKeys(obj) {
+  const cleanedObject = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      // Remove "id" from the end
+      let cleanedKey = key.replace(/id$/, '');
+
+      // Remove "utm_" from the beginning
+      cleanedKey = cleanedKey.replace(/^utm_/, '');
+
+      cleanedObject[cleanedKey] = obj[key];
+    }
+  }
+  return cleanedObject;
+}
+
+
 /************************/
 /* Handle Segment Ready */
 /************************/
@@ -147,15 +164,16 @@ export function handleSegmentReady() {
   addUTMToLinks();
 
   analytics.ready(() => {
-    const [utmIds, utmParams] = getUTMParams();
+    const utmParams = getUTMParams()
+    const cleanUtmParams = cleanSegmentUtmKeys(utmParams);
+
     const isFirstPageView = localStorage.getItem('isFirstPageView');
 
     if (isFirstPageView === 'true') {
       analytics.identify({
         firstVisitAttribution: {
           referrer: document.referrer,
-          ...utmParams,
-          ...utmIds
+          ...cleanUtmParams
         },
         hubspotutk: getCookie('hubspotutk'),
       });