gatsby-core-theme 30.0.24 → 30.0.26

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [30.0.26](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.25...v30.0.26) (2023-11-29)
+
+
+### Bug Fixes
+
+* tracker optimizations ([7a00e03](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7a00e03c1b50fc7b7f58df3611d1f1095809e524))
+
+
+* Merge branch 'tm-3833-tracker-optimizations' into 'master' ([9032562](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/903256263606a1c14c030954d984a7e45d291071))
+
+## [30.0.25](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.24...v30.0.25) (2023-11-29)
+
+
+### Bug Fixes
+
+* tracker SSR optimizations ([9968c54](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9968c544e423a3671f0edce7d5cfba1831099b09))
+
 ## [30.0.24](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.23...v30.0.24) (2023-11-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.24",
+  "version": "30.0.26",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/button/operator-cta.js

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from '~context/MainProvider';
 import { prettyTracker, translate } from '~helpers/getters';
+import { setCookie, getCookie } from '~helpers/cookies';
 
 import styles from './button.module.scss';
 
@@ -26,18 +27,27 @@ const OperatorCtaButton = ({
   const { translations } = useContext(Context) || {};
   const status = operator?.status || '';
   const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
-
-  const urlParams = [];
+  const url = typeof window !== 'undefined' ? window.location.href : '';
+  const urlParams = {};
 
   if (process.env.IS_TRACKING_SSR === 'true') {
-    pageTemplate && urlParams.push(`template=${pageTemplate}`);
-    module && urlParams.push(`module=${module}`);
-    tracker !== 'main' && urlParams.push(`tracker_name=${tracker}`);
+    if (pageTemplate) {
+      urlParams.page_type = pageTemplate;
+    }
+    if (module) {
+      urlParams.module = module;
+    }
+    if (tracker !== 'main') {
+      urlParams.tracker_name = tracker;
+    }
+    urlParams.request_url = url;
   }
 
-  const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}${
-    urlParams.length > 0 ? `?${urlParams.join('&')}` : ''
-  }`;
+  const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}`;
+
+  const onCTAClick = () => {
+    process.env.IS_TRACKING_SSR && setCookie('affObject', JSON.stringify(urlParams));
+  };
 
   const translateBtn =
     status && translationsObj[status]
@@ -60,6 +70,7 @@ const OperatorCtaButton = ({
       className={`${classes} ${gtmClass}`}
       target="_blank"
       rel="nofollow noreferrer sponsored"
+      onClick={onCTAClick}
     >
       {translateBtn}
       {icon && icon}

package/src/components/pages/tracker/index-ssr.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
 import Button from '~atoms/button/button';
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl, getAltText, translate } from '~helpers/getters';
-import { generateTrackerLink } from '~helpers/generators';
 import styles from './tracker.module.scss';
-import { getAffiliateLink } from '~helpers/tracker';
+import { getAffiliateLink, getTrackerName } from '~helpers/tracker';
 
 const Tracker = ({
   pageContext,
@@ -26,29 +25,8 @@ const Tracker = ({
 }) => {
   const { operator, page } = pageContext;
   const translations = page?.translations;
-  const trackerLinks = operator ? Object.keys(operator.links) : [];
 
-  const stripTrailingSlash = (str) => (str.endsWith('/') ? str.slice(0, -1) : str);
-
-  let tracker = '';
-  for (let i = 0; i < trackerLinks.length; i += 1) {
-    const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
-    if (
-      generateTrackerLink(operator, trackerLink, false, page.template) === stripTrailingSlash(path)
-    ) {
-      tracker =
-        operator.links[
-          Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())
-        ];
-      break;
-    }
-    if (path.includes('ppc_fallback')) {
-      // eslint-disable-next-line react/prop-types
-      tracker = operator.links['PPC Fallback'];
-      break;
-    }
-    tracker = operator.links.main;
-  }
+  const tracker = getTrackerName(operator, page, path);
 
   const showSplashScreen = typeof window !== 'undefined';
 
@@ -59,7 +37,7 @@ const Tracker = ({
         window.location.replace(serverData.result.link);
       } else {
         console.log('FROM LOCAL');
-        window.location.replace(tracker);
+        window.location.replace(tracker.value);
       }
     }
   }
@@ -195,10 +173,15 @@ Tracker.propTypes = {
   styles: PropTypes.shape({}),
 };
 
-export async function getServerData({ pageContext, url }) {
+export async function getServerData({ pageContext, headers, url }) {
   let res = '';
-
-  res = await getAffiliateLink(pageContext.operator, url);
+  res = await getAffiliateLink(
+    pageContext.operator,
+    url,
+    pageContext.page.path,
+    pageContext.page,
+    headers
+  );
   return res;
 }
 

package/src/helpers/tracker.mjs

@@ -1,18 +1,59 @@
-/* eslint-disable import/prefer-default-export */
-export async function getAffiliateLink(operator, url) {
-  let urlParams = `site_id=${process.env.SITE_ID}&operator_short_name=${
-    operator.short_name
-  }&operator_type=${operator.type}&language=${operator.market.split('_')[1]}&market_short_code=${
-    operator.market
-  }`;
+import { generateTrackerLink } from '~helpers/generators';
 
-  const urlSplit = url.split('?');
 
-  if (urlSplit.length === 2) {
-    urlParams += `&${urlSplit[1]}`;
+export function getTrackerName(operator, page, path) {
+  const trackerLinks = operator ? Object.keys(operator.links) : [];
+  const stripTrailingSlash = (str) => (str.endsWith('/') ? str.slice(0, -1) : str);
+  let trackerName = 'main';
+  let tracker = '';
+  for (let i = 0; i < trackerLinks.length; i += 1) {
+    const trackerLink = trackerLinks[i].toLowerCase().replace(' ', '_');
+    if (
+      generateTrackerLink(operator, trackerLink, false, page.template) === stripTrailingSlash(path)
+    ) {
+      tracker =
+        operator.links[
+          Object.keys(operator.links).find((key) => key.toLowerCase() === trackerLink.toLowerCase())
+        ];
+      trackerName = trackerLink.toLowerCase();
+      break;
+    }
+    if (path.includes('ppc_fallback')) {
+      // eslint-disable-next-line react/prop-types
+      tracker = operator.links['PPC Fallback'];
+      break;
+    }
+    tracker = operator.links.main;
   }
 
-  const res = await fetch(`${process.env.GATSBY_TRACKING_API_URL}?${urlParams}`).catch(
+  return { name: trackerName, value: tracker };
+}
+
+/* eslint-disable no-return-assign */
+/* eslint-disable import/prefer-default-export */
+export async function getAffiliateLink(operator, url, path, page, headers) {
+  const trackerName = await getTrackerName(operator, page, path);
+
+  const cookie =
+    headers.get('cookie') &&
+    headers
+      .get('cookie')
+      .split(';')
+      .map((item) => item.split('='))
+      .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});
+
+  const urlParam = {
+    site_id: process.env.SITE_ID,
+    operator_short_name: operator.short_name,
+    operator_type: operator.type,
+    language: operator.market.split('_')[1],
+    tracker_name: trackerName.name,
+    market_short_code: operator.market,
+    ip_address: headers.get('host'),
+    ...JSON.parse(cookie.affObject),
+  };
+
+  const res = await fetch(`${process.env.GATSBY_TRACKING_API_URL}?${new URLSearchParams(urlParam).toString()}`).catch(
     (err) => null
   );