gatsby-core-theme 30.0.55 → 30.0.56

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [30.0.56](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.55...v30.0.56) (2024-01-18)
+
+
+### Bug Fixes
+
+* added new component and new tracking api params ([a1aa8d6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1aa8d6cae7c3512d96674576adfc805e11a36bf))
+* added new component and new tracking api params ([6a20d08](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6a20d08a9554646d57eb3c52f222b82d6cae6b40))
+* added new component and new tracking api params ([fcf7428](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fcf74283c044032893adca4e0596a82aae62d376))
+* added new params ([c1d76c5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1d76c5b5981c9bd1e10e7d5a35c91c2220bd646))
+* added new params ([6841ac3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6841ac361eff51f6e1ba4b08bafed762da4eb27c))
+
+
+* Merge branch 'tm-3989-tracking-api-params' into 'master' ([7077dff](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7077dffcfb0632e608f99608b555e6d2c5f3ef5e))
+
 ## [30.0.55](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.54...v30.0.55) (2024-01-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.55",
+  "version": "30.0.56",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",
@@ -52,7 +52,8 @@
     "react-google-recaptcha": "^2.1.0",
     "react-lazyload": "^3.2.0",
     "react-masonry-css": "^1.0.16",
-    "sass": "^1.63.6"
+    "sass": "^1.63.6",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Context } from '~context/MainProvider';
 import { prettyTracker, translate } from '~helpers/getters';
 import { setCookie } from '~helpers/cookies';
+import { getTrackingAPIParams } from '~helpers/tracker';
 
 import styles from './button.module.scss';
 
@@ -28,51 +29,14 @@ const OperatorCtaButton = ({
   const status = operator?.status || '';
   const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
   const url = typeof window !== 'undefined' ? window.location.href : '';
-  const urlParams = {};
-
-  function deparam(paramStr) {
-    const paramArr = paramStr.split('&');
-    const paramObj = {};
-    paramArr.forEach((e) => {
-      const param = e.split('=');
-      paramObj[param[0]] = decodeURIComponent(param[1]);
-    });
-    return paramObj;
-  }
-
-  if (process.env.IS_TRACKING_SSR === 'true') {
-    if (pageTemplate) {
-      urlParams.page_type = pageTemplate;
-    }
-    if (module) {
-      urlParams.module = module;
-    }
-    if (tracker !== 'main') {
-      urlParams.tracker_name = tracker;
-    }
-
-    if (url && url.split('?').length === 2) {
-      // eslint-disable-next-line prefer-destructuring
-      urlParams.request_url = url.split('?')[0];
-      const extraData = deparam(url.split('?')[1]);
-      if (extraData.fbclid) {
-        urlParams.facebook_click_id = extraData.fbclid;
-      }
-      if (extraData.msclkid) {
-        urlParams.microsoft_click_id = extraData.msclkid;
-      }
-      if (extraData.gclid) {
-        urlParams.google_click_id = extraData.gclid;
-      }
-    } else if (url) {
-      urlParams.request_url = url;
-    }
-  }
-
   const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}`;
 
   const onCTAClick = () => {
-    process.env.IS_TRACKING_SSR && setCookie('affObject', JSON.stringify(urlParams));
+    process.env.IS_TRACKING_SSR &&
+      setCookie(
+        'affObject',
+        JSON.stringify(getTrackingAPIParams(pageTemplate, module, tracker, 'cta', url))
+      );
   };
 
   const translateBtn =

package/src/components/atoms/operator-info-block/index.js

@@ -2,15 +2,13 @@
 /* eslint-disable no-nested-ternary */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { prettyTracker } from '~helpers/getters';
+import PrettyLink from '~atoms/pretty-link';
 import styles from './operator-info-block.module.scss';
 import keygen from '~helpers/keygen';
 
 const OperatorInfoBlock = ({ page }) => {
   const { relation } = page;
   const status = relation?.status;
-  const prettyLink = prettyTracker(relation, 'main', false, page.template);
   if (status !== 'active') return null;
   const infos = [
     { field_name: 'url', field_label: 'URL' },
@@ -29,14 +27,16 @@ const OperatorInfoBlock = ({ page }) => {
               <p className={styles.label || ''}>{item.field_label}</p>
               <div className={styles.value || ''}>
                 {item.field_name === 'url' ? (
-                  <a
-                    href={prettyLink}
-                    target="_blank"
+                  <PrettyLink
+                    operator={item}
+                    pageTemplate={page.template}
+                    module="operator_info_block"
+                    tracker="main"
+                    clickedElement="operator_name"
                     className="operator-info-block-gtm"
-                    rel="noindex nofollow noreferrer sponsored"
                   >
                     {relation[item.field_name]}
-                  </a>
+                  </PrettyLink>
                 ) : item.field_name === 'support_types' ? (
                   relation.support_types.toLowerCase().includes('live chat') ? (
                     <p>Yes</p>

package/src/components/atoms/pretty-link/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { prettyTracker } from '~helpers/getters';
+import { setCookie } from '~helpers/cookies';
+import { getTrackingAPIParams } from '~helpers/tracker';
+
+const PrettyLink = ({
+  operator,
+  pageTemplate,
+  module,
+  tracker,
+  clickedElement,
+  className,
+  children,
+}) => {
+  const prettyLink = prettyTracker(operator, tracker, false, pageTemplate);
+  const url = typeof window !== 'undefined' ? window.location.href : '';
+  const onCTAClick = () => {
+    // eslint-disable-next-line no-unused-expressions
+    process.env.IS_TRACKING_SSR &&
+      setCookie(
+        'affObject',
+        JSON.stringify(getTrackingAPIParams(pageTemplate, module, tracker, clickedElement, url))
+      );
+  };
+
+  return (
+    <a
+      href={prettyLink || '#'}
+      title={operator.name}
+      className={className}
+      target="_blank"
+      rel="noreferrer sponsored nofollow"
+      aria-label={`${operator.name} Link`}
+      onClick={onCTAClick}
+    >
+      {children}
+    </a>
+  );
+};
+
+PrettyLink.propTypes = {
+  operator: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  pageTemplate: PropTypes.string,
+  module: PropTypes.string,
+  tracker: PropTypes.string,
+  clickedElement: PropTypes.string,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.any]),
+};
+
+export default PrettyLink;

package/src/components/atoms/pretty-link/pretty-link.test.js

@@ -0,0 +1,80 @@
+/* eslint-disable no-lone-blocks */
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import PrettyLink from '.';
+
+const data = (activeStatus = 'active') => ({
+  operator: {
+    status: activeStatus,
+    links: {
+      main: 'https://www.google.com',
+    },
+    short_name: 'operator',
+  },
+  pageTemplate: 'default',
+  tracker: 'main',
+  children: <h1>Test children</h1>,
+});
+
+describe('PrettyLink Component', () => {
+  test('PrettyLink children and link', () => {
+    const { getByText, container } = render(<PrettyLink {...data()} />);
+    expect(getByText('Test children')).toBeTruthy();
+    expect(container.querySelector('a').getAttribute('href')).toEqual('/no/visit/operator');
+  });
+
+  test('Affiliate object in cookie', () => {
+    window = Object.create(window);
+    const url = 'http://test.com/?fbclid=param1&msclkid=param2&gclid=param3';
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: url,
+      },
+      writable: true, // possibility to override
+    });
+    const { container } = render(
+      <PrettyLink
+        {...data()}
+        pageTemplate="test"
+        module="test2"
+        tracker="testing"
+        clickedElement="cta"
+      />
+    );
+    const button = container.querySelector('a');
+    fireEvent.click(button);
+    const affObject = JSON.parse(document.cookie.split('=')[1]);
+    expect(affObject.page_type).toEqual('test');
+    expect(affObject.module).toEqual('test2');
+    expect(affObject.request_url).toEqual('http://test.com/');
+    expect(affObject.facebook_click_id).toEqual('param1');
+    expect(affObject.microsoft_click_id).toEqual('param2');
+    expect(affObject.google_click_id).toEqual('param3');
+    expect(affObject.tracker_name).toEqual('testing');
+    expect(affObject.clicked_element).toEqual('cta');
+  });
+
+  test('Default Affiliate object in cookie', () => {
+    window = Object.create(window);
+    const url = 'http://testdomain.com/';
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: url,
+      },
+      writable: true, // possibility to override
+    });
+    const { container } = render(<PrettyLink {...data()} />);
+    const button = container.querySelector('a');
+    fireEvent.click(button);
+    const affObject = JSON.parse(document.cookie.split('=')[1]);
+    expect(affObject.page_type).toEqual('default');
+    expect(affObject.request_url).toEqual('http://testdomain.com/');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/bonus/template-one/index.js

@@ -2,12 +2,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
+import { imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import BonusBox from '~molecules/bonus-box/template-four';
 import OperatorCta from '~atoms/button/operator-cta';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';
+import PrettyLink from '~atoms/pretty-link';
 import styles from './bonus.module.scss';
 
 export default function Bonus({
@@ -19,12 +20,6 @@ export default function Bonus({
   tncEnable = true,
   tncFixed = false,
 }) {
-  const prettyLink = prettyTracker(
-    operator,
-    module?.tracking_link_name || 'main',
-    false,
-    pageTemplate
-  );
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
   const logo = standardised_logo_url || logo_url;
 
@@ -38,22 +33,22 @@ export default function Bonus({
     >
       <div className={styles.container}>
         <div>
-          <a
-            href={prettyLink}
+          <PrettyLink
+            operator={operator}
+            pageTemplate={pageTemplate}
+            module={module.name}
+            tracker={module?.tracking_link_name || 'main'}
+            clickedElement="oneliner"
             className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
-            title={operator?.name}
-            target="_blank"
-            rel="noreferrer sponsored"
-            aria-label={`${operator?.name} Link`}
           >
             <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} height={120} width={100} />
             <div className={styles.details}>
               {name && <span>{name}</span>}
               {bonus?.rating && <Rating rating={bonus?.rating} showDecimal />}
             </div>
-          </a>
+          </PrettyLink>
           <div className={styles.bonus || ''}>
-            <BonusBox item={operator} tracker={module?.type || 'main'} />
+            <BonusBox item={operator} module="bonus" tracker={module?.type || 'main'} />
             {tncEnable && !tncFixed && <Tnc hasCollapse={false} operator={operator} />}
           </div>
         </div>

package/src/components/molecules/bonus/template-two/index.js

@@ -3,13 +3,14 @@ import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
-import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
+import { imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import isSticky from '~hooks/stickyOnScroll';
 import BonusBox from '~molecules/bonus-box/template-four';
 import OperatorCta from '~atoms/button/operator-cta';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';
+import PrettyLink from '~atoms/pretty-link';
 import { Context } from '~context/MainProvider';
 import styles from './bonus.module.scss';
 
@@ -26,13 +27,6 @@ export default function TemplateOne({
   showWelcomeText = true,
   floating = false,
 }) {
-  const prettyLink = prettyTracker(
-    operator,
-    module?.tracking_link_name || 'main',
-    false,
-    pageTemplate
-  );
-
   const [show, setShow] = useState(showOnLoad);
   const [closed, setClosed] = useState(false);
   const { cookieAccepted, setBannerActive, translations } = useContext(Context) || {};
@@ -71,13 +65,13 @@ export default function TemplateOne({
       >
         <div className={styles.container}>
           <div>
-            <a
-              href={prettyLink}
+            <PrettyLink
+              operator={operator}
+              pageTemplate={pageTemplate}
+              module={module.name}
+              tracker={module?.tracking_link_name || 'main'}
+              clickedElement="oneliner"
               className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
-              title={operator?.name}
-              target="_blank"
-              rel="noreferrer sponsored"
-              aria-label={`${operator?.name} Link`}
             >
               <LazyImage
                 alt={operator?.name}
@@ -90,7 +84,7 @@ export default function TemplateOne({
                 {name && <span>{name}</span>}
                 {bonus?.rating && <Rating rating={bonus?.rating} showDecimal />}
               </div>
-            </a>
+            </PrettyLink>
             <div className={styles.bonus || ''}>
               {showWelcomeText && (
                 <p className={styles.welcomeBonus}>

package/src/components/molecules/bonus-box/template-one/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { prettyTracker, getBonusData } from '~helpers/getters.mjs';
+import { getBonusData } from '~helpers/getters.mjs';
+import PrettyLink from '~atoms/pretty-link';
 import styles from './bonus-box.module.scss';
 
 export default function BonusBox({
@@ -9,22 +10,24 @@ export default function BonusBox({
   pageTemplate = null,
   splitBy = '+',
   feSeparator = '+',
+  module = 'bonus_box',
 }) {
-  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
 
   return (
-    <a
-      href={prettyLink || '#'}
-      target="_blank"
-      rel="nofollow noreferrer sponsored"
+    <PrettyLink
+      operator={item}
+      pageTemplate={pageTemplate}
+      module={module}
+      tracker={tracker}
+      clickedElement="oneliner"
       className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
     >
       {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
       {data?.secondLine && (
         <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
       )}
-    </a>
+    </PrettyLink>
   );
 }
 
@@ -34,4 +37,5 @@ BonusBox.propTypes = {
   pageTemplate: PropTypes.string,
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
+  module: PropTypes.string,
 };

package/src/components/molecules/bonus-box/template-three/index.js

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { translate, prettyTracker, getBonusData } from '~helpers/getters.mjs';
+import { translate, getBonusData } from '~helpers/getters.mjs';
 import { Context } from '~context/MainProvider';
 import CtaButton from '../../../atoms/button/operator-cta';
 import styles from './bonus-box.module.scss';
+import PrettyLink from '~atoms/pretty-link';
 import VariableComponent from '../variables';
 
 export default function BonusBox({
@@ -17,18 +18,19 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
-  module = null,
+  module = 'bonus_box',
 }) {
   const { translations } = useContext(Context) || {};
   const welcomeBonusTranslation = translate(translations, 'welcome_bonus', 'Welcome Bonus');
-  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
 
   const content = () => (
-    <a
-      href={prettyLink || '#'}
-      target="_blank"
-      rel="nofollow noreferrer sponsored"
+    <PrettyLink
+      operator={item}
+      pageTemplate={pageTemplate}
+      module={module}
+      tracker={tracker}
+      clickedElement="oneliner"
       className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
     >
       {welcomeBonus && <p>{welcomeBonusTranslation}</p>}
@@ -36,7 +38,7 @@ export default function BonusBox({
       {data?.secondLine && (
         <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
       )}
-    </a>
+    </PrettyLink>
   );
 
   return (

package/src/components/molecules/bonus-box/template-two/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
-import { prettyTracker, getBonusData } from '~helpers/getters.mjs';
+import { getBonusData } from '~helpers/getters.mjs';
 import CtaButton from '../../../atoms/button/operator-cta';
+import PrettyLink from '~atoms/pretty-link';
 import styles from './bonus-box.module.scss';
 
 export default function BonusBox({
@@ -12,24 +13,26 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
-  module = null,
+  module = 'bonus_box',
 }) {
-  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
   const data = getBonusData(item, tracker, splitBy);
 
   return (
     <div className={styles.bonusBox}>
-      <a
-        href={prettyLink || '#'}
-        target="_blank"
-        rel="nofollow noreferrer sponsored"
+      <PrettyLink
+        operator={item}
+        pageTemplate={pageTemplate}
+        module={module}
+        tracker={tracker}
+        clickedElement="oneliner"
         className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
       >
         {data?.mainLine && <span className={styles.firstPart}>{data.mainLine}</span>}
         {data?.secondLine && (
           <span className={styles.secondPart}>{`${feSeparator}${data.secondLine}`}</span>
         )}
-      </a>
+      </PrettyLink>
+
       <CtaButton
         operator={item}
         icon={<FaArrowRight title="Right-pointing Arrow Icon" />}

package/src/components/molecules/main/index.js

@@ -21,7 +21,7 @@ const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator =
       {NotFound && <NotFound pageContext={pageContext} />}
       {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
-        section.modules.map((module) => (
+        section.modules.map((module, index) => (
           <Module
             key={keygen()}
             module={module}
@@ -29,6 +29,7 @@ const Main = ({ section = {}, pageContext = {}, serverData = {}, exclOperator =
             page={page}
             pageContext={pageContext}
             serverData={serverData}
+            modulePosition={index}
           />
         ))}
       {AuthorBox && (

package/src/components/molecules/toplist/default-row/index.js

@@ -5,8 +5,9 @@ import PropTypes from 'prop-types';
 import Bonus from '~molecules/bonus-box/template-one';
 import SellingPoints from '~atoms/selling-points';
 import ReviewLink from '../../../atoms/review-link';
+import PrettyLink from '~atoms/pretty-link';
 import OperatorCta from '~atoms/button/operator-cta';
-import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
+import { imagePrettyUrl, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
@@ -22,10 +23,7 @@ const Row = ({
   className,
   module,
 }) => {
-  const prettyLink = prettyTracker(item, tracker, false, pageTemplate);
-  // const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || null;
-
   const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
 
   const addToRefs = (el, itemNum) => {
@@ -42,13 +40,13 @@ const Row = ({
       <div className={styles.ribbons || ''}>
         {item.ribbons && item.ribbons.map((ribbon) => <span>{ribbon}</span>)}
       </div>
-      <a
-        href={prettyLink || '#'}
-        title={item.name}
+      <PrettyLink
+        operator={item}
+        pageTemplate={pageTemplate}
+        module={module}
+        tracker={tracker}
+        clickedElement="logo"
         className={`casinos-top-list-gtm logo-cta ${styles.logo}`}
-        target="_blank"
-        rel="noreferrer sponsored nofollow"
-        aria-label={`${item.name} Link`}
       >
         <LazyImage
           alt={getAltText(imageObject, item.name)}
@@ -56,9 +54,8 @@ const Row = ({
           width={100}
           height={100}
         />
-      </a>
-      <Bonus item={item} tracker={oneliner} />
-      {/* <StarRating numOfStars={5} rating={itemRating} showLabel /> */}
+      </PrettyLink>
+      <Bonus module="bonus" item={item} tracker={oneliner} />
       <SellingPoints sellingPoints={item.selling_points} />
       {reviewPath && (
         <ReviewLink

package/src/components/pages/body/index.js

@@ -4,6 +4,8 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { v4 as uuidv4 } from 'uuid';
 import { getSection } from '~helpers/getters';
 import Header from '~molecules/header';
 import Main from '~molecules/main';
@@ -11,39 +13,23 @@ import Footer from '~molecules/footer';
 import Navigation from '~organisms/navigation';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
+import { setCookie, getCookie } from '~helpers/cookies';
 
 function Body({ pageContext, children, hideOperatorBanner, serverData }) {
   const getBodySection = (name) => getSection(name, pageContext);
   const { template } = pageContext.page;
   const is404 = pageContext?.page?.path?.includes('404');
 
-  // testing
-
   const main = getBodySection('main');
   const navigation = getBodySection('navigation');
   const footer = getBodySection('footer');
 
   useEffect(() => {
-    if (!process.env.CANARY_TOKEN) {
-      return;
-    }
-
-    if (
-      document.domain !== `prelive.${process.env.GATSBY_SITE_NAME}` ||
-      document.domain !== process.env.GATSBY_SITE_NAME ||
-      document.domain !== `www.${process.env.GATSBY_SITE_NAME}`
-    ) {
-      const l = location.href;
-      const r = document.referrer;
-      const img = new Image();
-      img.src = `${'http://canarytokens.com/' + `[${process.env.CANARY_TOKEN}].jpg?l=`}${encodeURI(
-        l
-      )}&r=${encodeURI(r)}`;
+    if (!getCookie('affUUID')) {
+      setCookie('affUUID', uuidv4());
     }
   }, []);
 
-  // eslint-disable-next-line camelcase
-  const { relation_type } = pageContext.page;
   const status = pageContext.page.relation?.status;
   const hideBanner = status === 'inactive' || status === 'coming_soon';
   const pageType = pageContext.page.relation_type;

package/src/helpers/tracker.mjs

@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import { generateTrackerLink } from '~helpers/generators';
 
 export function getTrackerName(operator, page, path) {
@@ -32,19 +33,19 @@ export function getTrackerName(operator, page, path) {
 
 function isJsonString(str) {
   try {
-      JSON.parse(str);
+    JSON.parse(str);
   } catch (e) {
-      return false;
+    return false;
   }
   return true;
 }
 
 function deparam(paramStr) {
-  const paramArr = paramStr.split('&');     
+  const paramArr = paramStr.split('&');
   const paramObj = {};
-  paramArr.forEach(e=>{
-      const param = e.split('=');
-      paramObj[param[0]] = decodeURIComponent(param[1]);
+  paramArr.forEach((e) => {
+    const param = e.split('=');
+    paramObj[param[0]] = decodeURIComponent(param[1]);
   });
   return paramObj;
 }
@@ -53,6 +54,7 @@ function deparam(paramStr) {
 /* eslint-disable import/prefer-default-export */
 export async function getAffiliateLink(operator, path, page, headers, url) {
   const trackerName = await getTrackerName(operator, page, path);
+
   const cookie =
     headers && headers.get('cookie')
       ? headers
@@ -62,9 +64,8 @@ export async function getAffiliateLink(operator, path, page, headers, url) {
           .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
       : { affObject: JSON.stringify({}) };
 
-
-  let extraParams = null
-  if(url && url.split('?').length === 2) {
+  let extraParams = null;
+  if (url && url.split('?').length === 2) {
     extraParams = deparam(`${url.split('?')[1]}`);
   }
 
@@ -76,8 +77,12 @@ export async function getAffiliateLink(operator, path, page, headers, url) {
     tracker_name: trackerName.name,
     market_short_code: operator.market,
     ip_address: headers ? headers.get('x-real-ip') || headers.get('host') : '127.0.0.1',
+    user_agent: headers ? headers.get('user-agent') || headers.get('user-agent') : 'N/A',
+    user_uuid: cookie ? cookie.affUUID || 'N/A' : 'N/A',
+    facebook_browser_id: cookie ? cookie._fbp || 'N/A' : 'N/A',
+    facebook_pixel_id: process.env.PIXEL_ID || 'N/A',
     ...(isJsonString(cookie.affObject) ? JSON.parse(cookie.affObject) : {}),
-    ...(extraParams || {})
+    ...(extraParams || {}),
   };
 
   const res = await fetch(
@@ -89,3 +94,40 @@ export async function getAffiliateLink(operator, path, page, headers, url) {
     props: data,
   };
 }
+
+export function getTrackingAPIParams(pageTemplate, module, tracker, clickedElement, url) {
+  const urlParams = {};
+
+  if (pageTemplate) {
+    urlParams.page_type = pageTemplate;
+  }
+  if (module) {
+    urlParams.module = module;
+  }
+  if (tracker !== 'main') {
+    urlParams.tracker_name = tracker;
+  }
+
+  if (clickedElement) {
+    urlParams.clicked_element = clickedElement;
+  }
+
+  if (url && url.split('?').length === 2) {
+    // eslint-disable-next-line prefer-destructuring
+    urlParams.request_url = url.split('?')[0];
+    const extraData = deparam(url.split('?')[1]);
+    if (extraData.fbclid) {
+      urlParams.facebook_click_id = extraData.fbclid;
+    }
+    if (extraData.msclkid) {
+      urlParams.microsoft_click_id = extraData.msclkid;
+    }
+    if (extraData.gclid) {
+      urlParams.google_click_id = extraData.gclid;
+    }
+  } else if (url) {
+    urlParams.request_url = url;
+  }
+
+  return urlParams;
+}

package/src/helpers/tracker.test.js

@@ -70,7 +70,9 @@ describe('Tracker Helper', () => {
 
     expect(fetch).toBeCalledTimes(1);
     expect(fetch).toBeCalledWith(
-      `${process.env.GATSBY_TRACKING_API_URL}?${new URLSearchParams(urlParam).toString()}`
+      `${process.env.GATSBY_TRACKING_API_URL}?${new URLSearchParams(
+        urlParam
+      ).toString()}&user_agent=N%2FA&user_uuid=N%2FA&facebook_browser_id=N%2FA&facebook_pixel_id=N%2FA`
     );
   });
 
@@ -83,23 +85,38 @@ describe('Tracker Helper', () => {
       '/path?extraparam=val&extraparam2=val2'
     );
 
-    const tracker = Tracker.getTrackerName(operator, 'default', '/no/visit/rizk');
-
-    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: tracker.name,
-      market_short_code: operator.market,
-      ip_address: '127.0.0.1',
-      extraparam: 'val',
-      extraparam2: 'val2',
-    };
-
     expect(fetch).toBeCalledTimes(1);
     expect(fetch).toBeCalledWith(
-      `${process.env.GATSBY_TRACKING_API_URL}?${new URLSearchParams(urlParam).toString()}`
+      `testlink?site_id=82&operator_short_name=rizk&operator_type=sportsbook&language=en&tracker_name=main&market_short_code=ie_en&ip_address=127.0.0.1&user_agent=N%2FA&user_uuid=N%2FA&facebook_browser_id=N%2FA&facebook_pixel_id=N%2FA&extraparam=val&extraparam2=val2`
+    );
+  });
+
+  test('getTrackingAPIParams tests', async () => {
+    const params = Tracker.getTrackingAPIParams(
+      'temlateValue',
+      'moduleValue',
+      'trackerValue',
+      'clickedElementValue',
+      'urlValue'
+    );
+    expect(params.page_type).toEqual('temlateValue');
+    expect(params.module).toEqual('moduleValue');
+    expect(params.tracker_name).toEqual('trackerValue');
+    expect(params.clicked_element).toEqual('clickedElementValue');
+    expect(params.request_url).toEqual('urlValue');
+  });
+
+  test('getTrackingAPIParams tests with url Params', async () => {
+    const params = Tracker.getTrackingAPIParams(
+      null,
+      null,
+      null,
+      null,
+      'urlValue?fbclid=param1&msclkid=param2&gclid=param3'
     );
+    expect(params.request_url).toEqual('urlValue');
+    expect(params.facebook_click_id).toEqual('param1');
+    expect(params.microsoft_click_id).toEqual('param2');
+    expect(params.google_click_id).toEqual('param3');
   });
 });