gatsby-core-theme 41.0.1 → 41.0.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [41.0.2](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v41.0.1...v41.0.2) (2024-12-02)
+
+
+### Bug Fixes
+
+* final version ([96d0d7f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/96d0d7f278efded38fb063e7361853e7eeb09c07))
+* mega menu toplist tracking ([5f35781](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/5f35781e8baf2a0399660fecef38e26f84ea9437))
+* test ([ed32443](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/ed324433cfcd7b9342445ac640cd02d3b94e33e6))
+* toplist tracking ([12448d0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/12448d084e100cdb09c34e095eebb24e3c00209d))
+* tracking api ([e93219b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e93219ba5cf0b7da59040b5d4964ddae387a7bb4))
+* tracking-api ([90d4766](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/90d4766ea66d8636dd559dfef169a6955745cc70))
+
+
+* Merge branch 'tracking-api' into 'master' ([418bf11](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/418bf11d49c85494727ee741a3e7fc1f080ac725))
+
 ## [41.0.1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v41.0.0...v41.0.1) (2024-11-29)
 
 

package/package.json

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

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

@@ -16,7 +16,8 @@ const OperatorCtaButton = ({
   gtmClass = '',
   buttonType = 'primary',
   buttonSize = '',
-  module = null,
+  moduleName = null,
+  clickedElement="cta",
   tracker = 'main',
   titleSuffix,
   icon = null,
@@ -46,28 +47,28 @@ const OperatorCtaButton = ({
     typeof document !== 'undefined' && document?.referrer
       ? document.referrer
       : '';
-      
+
   const prettyLink = `${prettyTracker(
     operator,
     trackerType,
     false
   )}`
-  
+
   const translateBtn =
     status && translationsObj[status]
       ? // eslint-disable-next-line react-hooks/rules-of-hooks
-        useTranslate(
-          translationsObj[status]?.translationKey,
-          translationsObj[status]?.defaultValue || ''
-        )
+      useTranslate(
+        translationsObj[status]?.translationKey,
+        translationsObj[status]?.defaultValue || ''
+      )
       : 'Claim'
 
   const affObject = JSON.stringify(
     getTrackingAPIParams(
       pageTemplate,
-      module,
+      moduleName,
       tracker,
-      'cta',
+      clickedElement,
       globalHistory.location.href,
       referer,
       modulePosition,
@@ -90,21 +91,18 @@ const OperatorCtaButton = ({
     }
   }
 
-  const classes = `${styles[buttonType] || ''} ${status && styles[status] ? styles[status] : ''} ${
-    buttonSize ? styles[`${buttonSize}_size`] : ''
-  } `;
+  const classes = `${styles[buttonType] || ''} ${status && styles[status] ? styles[status] : ''} ${buttonSize ? styles[`${buttonSize}_size`] : ''
+    } `;
 
   return (
     trackerLinkActive(operator, tracker) &&
     (status === "active" ? (
       <a
-        href={prettyLink || "#"} 
-        title={`${typeof translateBtn === "string" ? translateBtn : ""} ${
-          titleSuffix || ""
-        }`.trimEnd()}
-        aria-label={`${typeof translateBtn === 'string' ? translateBtn : ''} ${
-          titleSuffix || ''
-        }`.trimEnd()}
+        href={prettyLink || "#"}
+        title={`${typeof translateBtn === "string" ? translateBtn : ""} ${titleSuffix || ""
+          }`.trimEnd()}
+        aria-label={`${typeof translateBtn === 'string' ? translateBtn : ''} ${titleSuffix || ''
+          }`.trimEnd()}
         className={`${classes} ${gtmClass}`}
         target="_blank"
         rel={rel}
@@ -115,9 +113,8 @@ const OperatorCtaButton = ({
       </a>
     ) : (
       <div
-        title={`${typeof translateBtn === 'string' ? translateBtn : ''} ${
-          titleSuffix || ''
-        }`.trimEnd()}
+        title={`${typeof translateBtn === 'string' ? translateBtn : ''} ${titleSuffix || ''
+          }`.trimEnd()}
         className={`${classes || ''} ${gtmClass || ''}`}
       >
         {translateBtn}
@@ -139,7 +136,8 @@ OperatorCtaButton.propTypes = {
   buttonSize: PropTypes.string,
   buttonType: PropTypes.string,
   tracker: PropTypes.string,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
+  clickedElement:  PropTypes.string,
   translationsObj: PropTypes.shape({
     active: PropTypes.shape({
       translationKey: PropTypes.string,

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

@@ -75,7 +75,7 @@ describe('OperatorCtaButton Component', () => {
       writable: true, // possibility to override
     });
     const { container } = render(
-      <OperatorCtaButton {...data()} pageTemplate="test" module="test2" tracker="testing" />
+      <OperatorCtaButton {...data()} pageTemplate="test" moduleName="test2" tracker="testing" />
     );
     const button = container.querySelector('a');
     if (button) {

package/src/components/atoms/header-operator-bannner/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import LazyImage from '~hooks/lazy-image'
 import useTranslate from '~hooks/useTranslate/useTranslate'
 import Bonus from '~molecules/bonus-box/template-three'
+import { TrackingKeys } from '~constants/tracking-api'
 import { getAltText, imagePrettyUrl } from '~helpers/getters'
 
 import styles from './header-operator-bannner.module.scss'
@@ -12,7 +13,8 @@ const HeaderOperatorBaner = ({
   logo,
   buttonType = 'primary',
   template,
-  module = 'header_operator_banner',
+  moduleName = TrackingKeys?.OPERATORBANNER,
+  clickedElement = 'header_operator_banner',
   width = '64',
   height = '64',
   modulePosition,
@@ -38,7 +40,8 @@ const HeaderOperatorBaner = ({
     main = (
       <>
         <Bonus
-          module={module}
+          moduleName={moduleName}
+          clickedElement={clickedElement}
           ctaBtn
           item={operator}
           tracker="main"
@@ -92,7 +95,8 @@ HeaderOperatorBaner.propTypes = {
   }),
   template: PropTypes.string,
   buttonType: PropTypes.string,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
+  clickedElement: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
   modulePosition: PropTypes.number,

package/src/components/atoms/menu/mega-items/index.js

@@ -7,6 +7,7 @@ import Item from "../items/item";
 import Toplist from "~molecules/toplist/header";
 import { Context } from "~context/MainProvider.js";
 import { getPositionClass } from "~helpers/menu";
+import { TrackingKeys } from '~constants/tracking-api'
 import { isMobileDevice } from "~helpers/device-detect";
 
 // Test included with menu molecule test
@@ -70,7 +71,7 @@ const Items = ({ item, gtmClass = "", level = 1, toplist }) => {
               ))}
             </ul>
 
-            {toplist && <Toplist module={toplist} limit={4} />}
+            {toplist && <Toplist module={toplist} limit={4} moduleName={TrackingKeys?.NAVIGATIONTOPLIST} />}
           </div>
         </div>
       )}

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

@@ -4,6 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import PrettyLink from '~atoms/pretty-link';
 import styles from './operator-info-block.module.scss';
+import { TrackingKeys } from '~constants/tracking-api'
+
 import keygen from '~helpers/keygen';
 
 const OperatorInfoBlock = ({ page, modulePosition }) => {
@@ -30,7 +32,7 @@ const OperatorInfoBlock = ({ page, modulePosition }) => {
                   <PrettyLink
                     operator={item}
                     pageTemplate={page.template}
-                    module="operator_info_block"
+                    moduleName={TrackingKeys?.INFOGRID}
                     tracker="main"
                     clickedElement="operator_name"
                     className="operator-info-block-gtm"

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

@@ -11,12 +11,12 @@ const PrettyLink = ({
   operator,
   directPrettyLink = null,
   pageTemplate,
-  module,
+  moduleName,
   tracker,
   titleSuffix,
   className,
   children,
-  clickedElement = 'cta',
+  clickedElement = 'prettyLink',
   rel = 'nofollow sponsored',
   modulePosition,
   itemPosition
@@ -30,7 +30,7 @@ const PrettyLink = ({
   const affObject = JSON.stringify(
     getTrackingAPIParams(
       pageTemplate,
-      module,
+      moduleName,
       tracker,
       clickedElement,
       globalHistory.location.href,
@@ -93,7 +93,7 @@ PrettyLink.propTypes = {
   }),
   directPrettyLink: PropTypes.string,
   pageTemplate: PropTypes.string,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
   titleSuffix: PropTypes.string,
   tracker: PropTypes.string,
   className: PropTypes.string,

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

@@ -32,7 +32,7 @@ describe('PrettyLink Component', () => {
       <PrettyLink
         {...data()}
         pageTemplate="test"
-        module="test2"
+        moduleName="test2"
         tracker="testing"
         clickedElement="cta"
       />

package/src/components/atoms/search/autocomplete/operator.js

@@ -19,7 +19,7 @@ const Operator = ({ item = {}, width = '56', height = '56' }) => {
         alt={item.title}
       />
       <h3>{item.title}</h3>
-      <OperatorCta module="search" operator={relation} gtmClass="toplist-operator-cta-gtm" />
+      <OperatorCta moduleName="search_autocomplete" operator={relation} gtmClass="toplist-operator-cta-gtm" />
     </div>
   );
 };

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

@@ -8,14 +8,14 @@ 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 { TrackingKeys } from '~constants/tracking-api'
 import styles from "./bonus.module.scss";
 
 export default function Bonus({
   operator,
   pageTemplate,
-  module = {
-    name: "bonus",
-  },
+  moduleName = TrackingKeys?.BONUS,
+  module = {},
   tncFixed = false,
   width = "120",
   height = "120",
@@ -30,7 +30,7 @@ export default function Bonus({
           <PrettyLink
             operator={operator}
             pageTemplate={pageTemplate}
-            module={module.name}
+            moduleName={moduleName}
             tracker={module?.tracking_link_name || "main"}
             clickedElement="operator_logo"
             className={`${styles.logo || ""} operator-banner-gtm logo-cta`}
@@ -58,7 +58,7 @@ export default function Bonus({
           <div className={styles.bonus || ""}>
             <BonusBox
               item={operator}
-              module={module.name}
+              moduleName={moduleName}
               pageTemplate={pageTemplate}
               tracker={module?.type || "main"}
               modulePosition={modulePosition}
@@ -69,7 +69,7 @@ export default function Bonus({
             operator={operator}
             pageTemplate={pageTemplate}
             tracker={module?.tracking_link_name || "main"}
-            module={module.name}
+            moduleName={moduleName}
             icon={
               <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />
             }
@@ -98,6 +98,7 @@ Bonus.propTypes = {
   }),
   tncFixed: PropTypes.bool,
   pageTemplate: PropTypes.string,
+  moduleName: PropTypes.string,
   module: PropTypes.shape({
     tracking_link_name: PropTypes.string,
     type: PropTypes.string,

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

@@ -11,14 +11,14 @@ import Rating from "~molecules/star-rating/one-star";
 import Tnc from "~molecules/tnc";
 import PrettyLink from "~atoms/pretty-link";
 import useTranslate from "~hooks/useTranslate/useTranslate";
+import { TrackingKeys } from '~constants/tracking-api'
 import styles from "./bonus.module.scss";
 
 export default function TemplateOne({
   operator,
   pageTemplate,
-  module = {
-    name: "bonus",
-  },
+  moduleName = TrackingKeys?.BONUS,
+  module = {},
   tncFixed = false,
   showWelcomeText = true,
   floating = false,
@@ -53,7 +53,7 @@ export default function TemplateOne({
           <PrettyLink
             operator={operator}
             pageTemplate={pageTemplate}
-            module={module.name}
+            moduleName={moduleName}
             tracker={module?.tracking_link_name || "main"}
             clickedElement="operator_logo"
             className={`${styles.logo || ""} operator-banner-gtm logo-cta`}
@@ -83,14 +83,14 @@ export default function TemplateOne({
               <p className={styles.welcomeBonus}>{welcomeBonusText}</p>
             )}
 
-            <BonusBox module={module.name} item={operator} tracker={module?.type || "main"} pageTemplate={pageTemplate} />
+            <BonusBox moduleName={moduleName} item={operator} tracker={module?.type || "main"} pageTemplate={pageTemplate} />
             {!tncFixed && <Tnc isFixed={tncFixed} operator={operator} />}
           </div>
         </div>
 
         <OperatorCta
           operator={operator}
-          module={module.name}
+          moduleName={moduleName}
           pageTemplate={pageTemplate}
           tracker={module?.tracking_link_name || "main"}
           icon={
@@ -136,6 +136,7 @@ TemplateOne.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
   }),
+  moduleName: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
   showRoundedRating: PropTypes.bool,

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

@@ -10,7 +10,8 @@ export default function BonusBox({
   pageTemplate = null,
   splitBy = '+',
   feSeparator = '+',
-  module = 'bonus_box',
+  moduleName = null,
+  clickedElement = "bonusBox",
   titleSuffix,
   modulePosition,
   itemPosition
@@ -21,10 +22,10 @@ export default function BonusBox({
     <PrettyLink
       operator={item}
       pageTemplate={pageTemplate}
-      module={module}
+      moduleName={moduleName}
       tracker={tracker}
       titleSuffix={titleSuffix}
-      clickedElement="oneliner"
+      clickedElement={clickedElement}
       className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
       modulePosition={modulePosition}
       itemPosition={itemPosition}
@@ -43,7 +44,8 @@ BonusBox.propTypes = {
   pageTemplate: PropTypes.string,
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
+  clickedElement: PropTypes.string,
   titleSuffix: PropTypes.string,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,

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

@@ -18,7 +18,8 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
-  module = 'bonus_box',
+  moduleName = null,
+  clickedElement = "bonusBox",
   titleSuffix,
   modulePosition,
   itemPosition
@@ -30,10 +31,10 @@ export default function BonusBox({
     <PrettyLink
       operator={item}
       pageTemplate={pageTemplate}
-      module={module}
+      moduleName={moduleName}
       tracker={tracker}
       titleSuffix={titleSuffix}
-      clickedElement="oneliner"
+      clickedElement={clickedElement}
       className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
       modulePosition={modulePosition}
       itemPosition={itemPosition}
@@ -52,9 +53,8 @@ export default function BonusBox({
 
   return (
     <div
-      className={`${styles.bonusBox} ${
-        showVariablesComponent ? styles.includeVariableComponent : ''
-      }`}
+      className={`${styles.bonusBox} ${showVariablesComponent ? styles.includeVariableComponent : ''
+        }`}
     >
       {!showVariablesComponent ? (
         <>
@@ -63,7 +63,8 @@ export default function BonusBox({
             <CtaButton
               operator={item}
               buttonType={buttonType}
-              module={module}
+              moduleName={moduleName}
+              clickedElement={`${clickedElement}_cta`}
               modulePosition={modulePosition}
               itemPosition={itemPosition}
             />
@@ -76,7 +77,8 @@ export default function BonusBox({
             <CtaButton
               operator={item}
               buttonType={buttonType}
-              module={module}
+              moduleName={moduleName}
+              clickedElement={`${clickedElement}_cta`}
               modulePosition={modulePosition}
               itemPosition={itemPosition}
             />
@@ -84,7 +86,8 @@ export default function BonusBox({
           {showVariablesComponent && variableInsideContainer && (
             <VariableComponent
               item={item}
-              module={module}
+              moduleName={moduleName}
+              clickedElement={`${clickedElement}_cta`}
               modulePosition={modulePosition}
               itemPosition={itemPosition}
             />
@@ -93,8 +96,8 @@ export default function BonusBox({
       )}
 
       {showVariablesComponent && !variableInsideContainer && (
-        <VariableComponent item={item}      modulePosition={modulePosition}
-        itemPosition={itemPosition} />
+        <VariableComponent item={item} moduleName={moduleName} modulePosition={modulePosition}
+          itemPosition={itemPosition} clickedElement={clickedElement} />
       )}
     </div>
   )
@@ -111,7 +114,8 @@ BonusBox.propTypes = {
   feSeparator: PropTypes.string,
   buttonType: PropTypes.string,
   variableInsideContainer: PropTypes.bool,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
+  clickedElement: PropTypes.string,
   titleSuffix: PropTypes.string,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,

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

@@ -13,7 +13,8 @@ export default function BonusBox({
   splitBy = '+',
   feSeparator = '+',
   buttonType = 'primary',
-  module = 'bonus_box',
+  moduleName = null,
+  clickedElement = "bonusBox",
   titleSuffix,
   modulePosition,
   itemPosition
@@ -25,10 +26,10 @@ export default function BonusBox({
       <PrettyLink
         operator={item}
         pageTemplate={pageTemplate}
-        module={module}
+        moduleName={moduleName}
         tracker={tracker}
         titleSuffix={titleSuffix}
-        clickedElement="oneliner"
+        clickedElement={clickedElement}
         className={`${styles.detailsBox} ${'bonus-box-gtm'}`}
         modulePosition={modulePosition}
         itemPosition={itemPosition}
@@ -43,7 +44,8 @@ export default function BonusBox({
         operator={item}
         icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
         buttonType={buttonType}
-        module={module}
+        moduleName={moduleName}
+        clickedElement={`${clickedElement}_cta`}
         modulePosition={modulePosition}
         itemPosition={itemPosition}
       />
@@ -58,7 +60,8 @@ BonusBox.propTypes = {
   splitBy: PropTypes.string,
   feSeparator: PropTypes.string,
   buttonType: PropTypes.string,
-  module: PropTypes.string,
+  moduleName: PropTypes.string,
+  clickedElement: PropTypes.string,
   titleSuffix: PropTypes.string,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,

package/src/components/molecules/floating-area/index.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import ScrollToTop from '~atoms/scroll-to-top';
 import CookieConsent from '~organisms/cookie-consent';
 import isSticky from '~hooks/stickyOnScroll';
+import { TrackingKeys } from '~constants/tracking-api'
 import styles from './floating-area.module.scss';
 
 export default function FloatingArea({
@@ -46,9 +47,7 @@ export default function FloatingArea({
             <OperatorBanner
               type={pageType}
               pageTemplate={template}
-              module={{
-                name: 'bonus',
-              }}
+              moduleName={TrackingKeys?.BONUS}
               sticky
               logo={pageContext.page.relation.logo_url}
               operator={pageContext.page.relation}

package/src/components/molecules/header/variants/operator/template-one-two/index.js

@@ -11,6 +11,7 @@ import Rating from '../../../../../atoms/ratings';
 import OperatorBanner from '../../../../../atoms/header-operator-bannner';
 import VariableComponent from '../variables';
 import styles from './template-one-two.module.scss';
+import { TrackingKeys } from '~constants/tracking-api'
 import PrettyLink from '~atoms/pretty-link';
 
 const TemplateOneTwo = ({
@@ -23,6 +24,7 @@ const TemplateOneTwo = ({
   numOfStars = 5,
   icon,
   hasVariableComponent = false,
+  moduleName = TrackingKeys?.HEADEROPERATOR,
   template = 'template_one',
   showRoundedRating = false,
   width = '179',
@@ -34,7 +36,7 @@ const TemplateOneTwo = ({
     <PrettyLink
       operator={relation}
       pageTemplate={pageTemplate}
-      module="header_operator_logo"
+      moduleName={moduleName}
       tracker="main"
       clickedElement="operator_logo"
       className="header-gtm logo-cta "
@@ -53,20 +55,17 @@ const TemplateOneTwo = ({
 
   return (
     <div
-      className={`${styles.container} ${
-        template === 'template_two' && styles.templateTwoContainer
-      } ${hasVariableComponent ? styles.hasVariableComponent : ''}`}
+      className={`${styles.container} ${template === 'template_two' && styles.templateTwoContainer
+        } ${hasVariableComponent ? styles.hasVariableComponent : ''}`}
     >
       <div
-        className={`${styles.topSection} ${
-          template === 'template_two' && styles.templateTwoTopSection
-        }`}
+        className={`${styles.topSection} ${template === 'template_two' && styles.templateTwoTopSection
+          }`}
       >
         {logo()}
         <div
-          className={`${styles.topContent} ${
-            template === 'template_two' && styles.templateTwoTopContent
-          }`}
+          className={`${styles.topContent} ${template === 'template_two' && styles.templateTwoTopContent
+            }`}
         >
           <div className={styles.name}>
             <h1>{name}</h1>
@@ -74,9 +73,8 @@ const TemplateOneTwo = ({
           </div>
           {ribbon && (
             <p
-              className={`${styles.ribbon} ${
-                template === 'template_two' && styles.templateTwoRibbon
-              }`}
+              className={`${styles.ribbon} ${template === 'template_two' && styles.templateTwoRibbon
+                }`}
             >
               {ribbon}
             </p>
@@ -107,7 +105,7 @@ const TemplateOneTwo = ({
         />
       )}
 
-      <OperatorBanner logo={image} operator={relation} template={pageTemplate} />
+      <OperatorBanner clickedElement="header_operator_banner" moduleName={moduleName} logo={image} operator={relation} template={pageTemplate} />
     </div>
   );
 };
@@ -134,6 +132,7 @@ TemplateOneTwo.propTypes = {
   showRoundedRating: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,
+  moduleName: PropTypes.string,
 };
 
 export default TemplateOneTwo;

package/src/components/molecules/header/variants/slot/template-one/index.js

@@ -6,10 +6,12 @@ import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getter
 import OperatorBanner from 'gatsby-core-theme/src/components/atoms/header-operator-bannner';
 import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
 import Verify from '~images/icons/verify';
+import { TrackingKeys } from '~constants/tracking-api'
 import styles from './slot.module.scss';
 
 export default function SlotHeader({
   page,
+  moduleName = TrackingKeys?.HEADERSLOTS,
   image = <Verify />,
   showExtraRatings = false,
   width = '170',
@@ -53,6 +55,8 @@ export default function SlotHeader({
         )}
         {headerBonus && (
           <OperatorBanner
+            moduleName={moduleName}
+            clickedElement="header_operator_banner"
             logo={headerBonus?.value?.logo}
             operator={headerBonus?.value}
             template={page?.template}
@@ -99,6 +103,7 @@ SlotHeader.propTypes = {
   }),
   image: PropTypes.element,
   showExtraRatings: PropTypes.bool,
+  moduleName: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
 };

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

@@ -9,6 +9,7 @@ import PrettyLink from '~atoms/pretty-link'
 import OperatorCta from '~atoms/button/operator-cta'
 import { imagePrettyUrl, getAltText } from '~helpers/getters'
 import LazyImage from '~hooks/lazy-image'
+import { TrackingKeys } from '~constants/tracking-api'
 
 import styles from './default-row.module.scss'
 
@@ -22,7 +23,7 @@ const Row = ({
   index,
   className,
   nofollow = false,
-  module = "top_list",
+  moduleName = TrackingKeys?.TOPLIST,
   width = '100',
   height = '100',
   modulePosition,
@@ -50,7 +51,7 @@ const Row = ({
       <PrettyLink
         operator={item}
         pageTemplate={pageTemplate}
-        module={module}
+        moduleName={moduleName}
         tracker={tracker}
         clickedElement="operator_logo"
         className={`casinos-top-list-gtm logo-cta ${styles.logo}`}
@@ -65,8 +66,7 @@ const Row = ({
         />
       </PrettyLink>
       <Bonus
-        module={module}
-        clickedElement='oneliner'
+        moduleName={moduleName}
         item={item}
         tracker={item.toplist_bonus || oneliner}
         modulePosition={modulePosition}
@@ -87,7 +87,7 @@ const Row = ({
         tracker={tracker}
         gtmClass="toplist-operator-cta-gtm"
         pageTemplate={pageTemplate}
-        module={module}
+        moduleName={moduleName}
         modulePosition={modulePosition}
         itemPosition={itemPosition}
       />
@@ -99,7 +99,6 @@ Row.propTypes = {
   oneliner: PropTypes.string,
   layout: PropTypes.string,
   tracker: PropTypes.string,
-  module: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
     ribbons: PropTypes.arrayOf(PropTypes.string),

package/src/components/molecules/toplist/header/index.js

@@ -5,9 +5,10 @@ import keygen from "~helpers/keygen";
 import { imagePrettyUrl, getAltText } from "~helpers/getters";
 import OperatorCta from "~atoms/button/operator-cta";
 import StarRating from "~molecules/star-rating";
+import { TrackingKeys } from '~constants/tracking-api'
 import styles from "./header-toplist.module.scss";
 
-const HeaderToplist = ({ module, limit = null }) => {
+const HeaderToplist = ({ module, limit = null, moduleName = TrackingKeys?.HEADER?.TOPLIST }) => {
   const items = module?.items.length > 0 && module.items[0];
   const title = module?.module_title;
   items.items = limit ? items.items.slice(0, limit) : items.items;
@@ -34,7 +35,7 @@ const HeaderToplist = ({ module, limit = null }) => {
                 buttonSize="s"
                 tracker={items.tracker}
                 gtmClass="toplist-header-cta-gtm"
-                module="header_toplist"
+                moduleName={moduleName}
               />
             </li>
           ))}
@@ -49,7 +50,8 @@ HeaderToplist.propTypes = {
     items: PropTypes.arrayOf(PropTypes.shape({})),
     module_title: PropTypes.string,
   }),
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  moduleName: PropTypes.string,
 };
 
 export default HeaderToplist;

package/src/components/organisms/toplist/index.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { TrackingKeys } from '~constants/tracking-api'
 import keygen from '~helpers/keygen';
 import Tabs from '~hooks/tabs';
 import List from './list';
 import styles from './toplist.module.scss';
 
-const TopList = ({ module, toplistHeading, page, modulePosition }) => {
+const TopList = ({
+  moduleName = TrackingKeys?.TOPLIST,
+  module,
+  toplistHeading,
+  page,
+  modulePosition
+}) => {
   const showTabs = module.items.length > 1;
   const content = module.items.map((toplist) => (
     <div
@@ -22,7 +28,8 @@ const TopList = ({ module, toplistHeading, page, modulePosition }) => {
         initItemsCount={toplist.num_items_initial_load || 0}
         loadItemsCount={toplist.num_items_load_more}
         pageTemplate={page?.template}
-        module={module.name}
+        moduleName={moduleName}
+        module={module}
         extraFields={page?.extraFields}
         modulePosition={modulePosition}
       />
@@ -40,6 +47,7 @@ const TopList = ({ module, toplistHeading, page, modulePosition }) => {
 TopList.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   module: PropTypes.shape({ name: PropTypes.string, items: PropTypes.arrayOf(PropTypes.object) }),
+  moduleName: PropTypes.string,
   toplistHeading: PropTypes.element,
   page: PropTypes.shape({
     template: PropTypes.string,

package/src/components/organisms/toplist/list/index.js

@@ -12,7 +12,7 @@ export default function List({
   initItemsCount,
   loadItemsCount,
   pageTemplate,
-  module,
+  moduleName,
   pagePath,
   modulePosition
 }) {
@@ -60,7 +60,7 @@ export default function List({
             itemRefs={elRefs}
             oneliner={toplist.one_liner}
             index={index}
-            module={module}
+            moduleName={moduleName}
             itemPosition={index + 1}
             modulePosition={modulePosition}
           />
@@ -94,7 +94,7 @@ List.propTypes = {
   initItemsCount: PropTypes.string,
   loadItemsCount: PropTypes.string,
   pageTemplate: PropTypes.string,
-  module: PropTypes.string,
   pagePath: PropTypes.string,
   modulePosition: PropTypes.number,
+  moduleName: PropTypes.string,
 }

package/src/constants/tracking-api.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/prefer-default-export */
+export const TrackingKeys = {
+    TOPLIST: 'toplist',
+    BONUS: 'bonus',
+    BONUSBOX: 'bonus_box',
+    OPERATORBANNER: 'operator_banner',
+    HEADEROPERATOR: 'header',
+    HEADERPAYMENT: 'header',
+    HEADERSLOTS: "header",
+    POPUP: "popup",
+    ODDSTABLE: 'odds_table',
+    CARDS: 'cards',
+    CONTENT: 'content',
+    INFOGRID: "information_grid",
+    COMPARISONTABLE: 'comparison_table',
+    OPERATORSUMMARY: "expert_review_summary",
+    WAGERINGCALCULATOR: 'wagering_calculator',
+    NAVIGATIONTOPLIST: 'navigation_toplist',
+    WELCOMEBONUS: 'welcome_bonus',
+    OPERATORSTABLE: 'comparison_table',
+    LOTTO: 'lotto',
+    NAVIGATIONEXLUSIVE: 'navigation_exclusive',
+    HEADER: {
+        TOPLIST: 'header_toplist',
+        BONUS: "header_bonus"
+    }
+}
+

package/src/helpers/replaceMedia.js

@@ -3,6 +3,7 @@ import React from 'react'
 import Iframe from 'gatsby-core-theme/src/components/atoms/iframe'
 import { isTrackerLink } from 'gatsby-core-theme/src/helpers/tracker.mjs'
 import processImageNode from './processImageNode.js'
+import { TrackingKeys } from '~constants/tracking-api'
 import PrettyLink from '~atoms/pretty-link'
 
 export default (node, moduleWidth = 960, moduleName, pageTemplate, modulePosition, styles) => {
@@ -11,12 +12,12 @@ export default (node, moduleWidth = 960, moduleName, pageTemplate, modulePositio
     node.attribs.class = styles && styles[node?.attribs?.class];
   }
 
-  if(node && node.attribs && node.attribs['data-anchor-label']) {
+  if (node && node.attribs && node.attribs['data-anchor-label']) {
     node.attribs['data-track'] = true;
   }
 
-  if(node.name ==='div' && (node.attribs['data-type'] === 'columnBlock' || node.attribs['data-type'] === 'threeColumnBlock')) {
-    node.attribs.class = `${styles.column} ${node.attribs?.class === 'two-column-block' ? styles.twoColumnBlock : styles.threeColumnBlock}`; 
+  if (node.name === 'div' && (node.attribs['data-type'] === 'columnBlock' || node.attribs['data-type'] === 'threeColumnBlock')) {
+    node.attribs.class = `${styles.column} ${node.attribs?.class === 'two-column-block' ? styles.twoColumnBlock : styles.threeColumnBlock}`;
   }
 
   if (node.name === 'iframe') {
@@ -71,7 +72,7 @@ export default (node, moduleWidth = 960, moduleName, pageTemplate, modulePositio
       <PrettyLink
         directPrettyLink={node?.attribs?.href}
         pageTemplate={pageTemplate}
-        module={moduleName}
+        moduleName={TrackingKeys?.CONTENT}
         tracker={module?.tracking_link_name || 'main'}
         className="content-module-gtm"
         clickedElement="link"

package/src/helpers/replaceMedia.test.js

@@ -61,7 +61,6 @@ describe('replaceMedia function', () => {
     )
     expect(transformedNode.props.className).toBe('content-module-gtm')
     expect(transformedNode.props.clickedElement).toBe('link')
-    expect(transformedNode.props.module).toBe('content')
     expect(transformedNode.props.pageTemplate).toBe('default')
     expect(transformedNode.props.tracker).toBe('main')
   })