[email protected] - Add support for tracking contexts (#2543)

* [email protected] - Add support for tracking contexts

* [email protected] - Use mixin to provide prop

* Add storybook controls and update READMEs

* Use latest f-trak

Author: xander-marjoram

packages/components/organisms/f-footer/CHANGELOG.md

@@ -3,6 +3,15 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v8.9.0
+
+_June 24, 2024_
+
+### Added
+
+- New prop `globalTrackingContexts` which are passed through to f-trak for analytics events.
+- Use `f-trak` v1+
+
 ## v8.8.0
 
 _May 21, 2024_

packages/components/organisms/f-footer/README.md

@@ -90,6 +90,7 @@ The props that can be defined are as follows (if any):
 | `showCourierLinks`    | `Bool`   | `true`  | Controls whether to show courier links in footer.                                                             |
 | `showCountrySelector` | `Bool`   | `true`  | Controls whether to show country selector in footer.                                                          |
 | `content`             | `Object` | `{}`    | Content to be displayed in the footer (sections, links, etc.)                                                 |
+| `globalTrackingContexts` | `Array` | `[]`  | Array containing the global tracking contexts to be passed through to f-trak. |
 
 ### CSS Classes
 

packages/components/organisms/f-footer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeat/f-footer",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "main": "dist/f-footer.umd.min.js",
   "maxBundleSize": "80kB",
   "files": [
@@ -54,7 +54,7 @@
     "v-click-outside": "3.1.2"
   },
   "peerDependencies": {
-    "@justeat/f-trak": ">=0.6.0"
+    "@justeat/f-trak": "1.x"
   },
   "devDependencies": {
     "@justeat/f-wdio-utils": "1.x"

packages/components/organisms/f-footer/src/components/ButtonList.vue

@@ -9,12 +9,15 @@
                 v-for="(button, i) in buttonList.buttons"
                 :key="`${i}_Button`"
                 :href="button.url"
-                :data-trak='`{
-                    "trakEvent": "click",
-                    "category": "engagement",
-                    "action": "footer",
-                    "label": "${button.gtm}"
-                }`'
+                :data-trak='JSON.stringify({
+                    trakEvent: "click",
+                    category: "engagement",
+                    action: "footer",
+                    label: button.gtm,
+                    ...(globalTrackingContexts.length ? {
+                        context: globalTrackingContexts
+                    } : {})
+                })'
                 :class="$style['c-buttonList-button']"
                 target="_blank"
                 rel="noopener noreferrer">
@@ -25,7 +28,11 @@
 </template>
 
 <script>
+import analyticsMixin from '../mixins/analytics.mixin';
+
 export default {
+    mixins: [analyticsMixin],
+
     props: {
         buttonList: {
             type: Object,

packages/components/organisms/f-footer/src/components/CountrySelector.vue

@@ -55,12 +55,15 @@
                     :key="`${i}_Country`"
                     :data-test-id="[`countrySelector-country-${country.dataTestKey}`]">
                     <a
-                        :data-trak='`{
-                            "trakEvent": "click",
-                            "category": "engagement",
-                            "action": "footer",
-                            "label": "${country.gtm}"
-                        }`'
+                        :data-trak='JSON.stringify({
+                            trakEvent: "click",
+                            category: "engagement",
+                            action: "footer",
+                            label: country.gtm,
+                            ...(globalTrackingContexts.length ? {
+                                context: globalTrackingContexts
+                            } : {})
+                        })'
                         :href="country.siteUrl"
                         :class="$style['c-countrySelector-link']"
                         data-test-id="countrySelector-countryLink">
@@ -85,7 +88,9 @@ import {
     CrossIcon
 } from '@justeat/f-vue-icons';
 import vClickOutside from 'v-click-outside';
+
 import FlagIcon from './FlagIcon.vue';
+import analyticsMixin from '../mixins/analytics.mixin';
 
 export default {
     components: {
@@ -98,6 +103,8 @@ export default {
         clickOutside: vClickOutside.directive
     },
 
+    mixins: [analyticsMixin],
+
     props: {
         currentCountryName: {
             type: String,

packages/components/organisms/f-footer/src/components/FeedbackBlock.vue

@@ -6,12 +6,15 @@
             $style['is-invisible']
         ]"
         data-gtm-feedback
-        data-trak='{
-            "trakEvent": "click",
-            "category": "engagement",
-            "action": "footer",
-            "label": "click_feedback"
-        }'>
+        :data-trak='JSON.stringify({
+            trakEvent: "click",
+            category: "engagement",
+            action: "footer",
+            label: "click_feedback",
+            ...(globalTrackingContexts.length ? {
+                context: globalTrackingContexts
+            } : {})
+        })'>
         <h2
             :class="[
                 $style['c-footer-heading'],
@@ -34,7 +37,11 @@
 </template>
 
 <script>
+import analyticsMixin from '../mixins/analytics.mixin';
+
 export default {
+    mixins: [analyticsMixin],
+
     props: {
         title: {
             type: String,

packages/components/organisms/f-footer/src/components/Footer.vue

@@ -14,7 +14,8 @@
             <link-list
                 v-for="(section, i) in content.sections"
                 :key="`${i}_LinkList`"
-                :link-list="section" />
+                :link-list="section"
+                :global-tracking-contexts="globalTrackingContexts" />
         </div>
 
         <div :class="$style['c-footer-light']">
@@ -30,7 +31,8 @@
                     <button-list
                         v-for="(buttonList, i) in copy.linkButtonList"
                         :key="`${i}_ButtonList`"
-                        :button-list="buttonList" />
+                        :button-list="buttonList"
+                        :global-tracking-contexts="globalTrackingContexts" />
                 </div>
 
                 <div
@@ -42,18 +44,21 @@
                         :title="copy.downloadOurApps"
                         :icons="copy.appStoreIcons"
                         :locale="copy.locale"
-                        list-type="apps" />
+                        list-type="apps"
+                        :global-tracking-contexts="globalTrackingContexts" />
 
                     <feedback-block
                         :title="copy.feedback"
                         :text="copy.improveOurWebsite"
                         :button-text="copy.sendFeedback"
-                        data-test-id="feedback-block" />
+                        data-test-id="feedback-block"
+                        :global-tracking-contexts="globalTrackingContexts" />
 
                     <icon-list
                         :icons="copy.socialIcons"
                         :title="copy.followUs"
-                        list-type="social" />
+                        list-type="social"
+                        :global-tracking-contexts="globalTrackingContexts" />
                 </div>
             </div>
         </div>
@@ -73,7 +78,8 @@
                 :current-country-name="copy.currentCountryName"
                 :current-country-key="copy.currentCountryKey"
                 :countries="countryList"
-                :change-country-text="copy.changeCurrentCountry" />
+                :change-country-text="copy.changeCurrentCountry"
+                :global-tracking-contexts="globalTrackingContexts" />
 
             <legal-field
                 v-if="metaLegalFieldEnabled"
@@ -82,23 +88,27 @@
 
             <icon-list
                 :icons="copy.paymentIcons"
-                list-type="payments" />
+                list-type="payments"
+                :global-tracking-contexts="globalTrackingContexts" />
         </div>
     </footer>
 </template>
 
 <script>
 import { globalisationServices } from '@justeat/f-services';
+
 import ButtonList from './ButtonList.vue';
 import CountrySelector from './CountrySelector.vue';
 import FeedbackBlock from './FeedbackBlock.vue';
 import IconList from './IconList.vue';
 import LegalField from './LegalField.vue';
 import LinkList from './LinkList.vue';
 import { tenantConfigs, countries } from '../tenants';
+import analyticsMixin from '../mixins/analytics.mixin';
 
 export default {
     name: 'PageFooter',
+
     components: {
         ButtonList,
         CountrySelector,
@@ -107,6 +117,9 @@ export default {
         LegalField,
         LinkList
     },
+
+    mixins: [analyticsMixin],
+
     props: {
         locale: {
             type: String,
@@ -125,20 +138,25 @@ export default {
             default: () => {}
         }
     },
+
     computed: {
         footerLocale () {
             return globalisationServices.getLocale(tenantConfigs, this.locale, this.$i18n);
         },
+
         copy () {
             const localeConfig = tenantConfigs[this.footerLocale];
             return localeConfig;
         },
+
         theme () {
             return globalisationServices.getTheme(this.footerLocale);
         },
+
         metaLegalFieldEnabled () {
             return Object.keys(this.copy.metaLegalField).length > 0;
         },
+
         countryList () {
             return countries.filter(country => country.key !== this.copy.currentCountryKey);
         }

packages/components/organisms/f-footer/src/components/IconList.vue

@@ -31,12 +31,15 @@
                     :href="icon.url"
                     :title="icon.alt"
                     :class="$style['c-iconList-listLink']"
-                    :data-trak='`{
-                        "trakEvent": "click",
-                        "category": "engagement",
-                        "action": "footer",
-                        "label": "${icon.gtm}"
-                    }`'
+                    :data-trak='JSON.stringify({
+                        trakEvent: "click",
+                        category: "engagement",
+                        action: "footer",
+                        label: icon.gtm,
+                        ...(globalTrackingContexts.length ? {
+                            context: globalTrackingContexts
+                        } : {})
+                    })'
                     :data-test-id="`footerIcon ${icon.name}`">
                     <component
                         :is="iconChoice"
@@ -58,13 +61,16 @@
 <script>
 import BaseProviderIcon from './BaseProviderIcon.vue';
 import AppStoreIcon from './AppStoreIcon.vue';
+import analyticsMixin from '../mixins/analytics.mixin';
 
 export default {
     components: {
         AppStoreIcon,
         BaseProviderIcon
     },
 
+    mixins: [analyticsMixin],
+
     props: {
         icons: {
             type: Array,

packages/components/organisms/f-footer/src/components/LinkList.vue

@@ -52,12 +52,15 @@
                     :rel="link.rel"
                     :target="link.target"
                     :class="$style['c-footer-list-link']"
-                    :data-trak='`{
-                        "trakEvent": "click",
-                        "category": "engagement",
-                        "action": "footer",
-                        "label": "${link.gtmLabel}"
-                    }`'>
+                    :data-trak='JSON.stringify({
+                        trakEvent: "click",
+                        category: "engagement",
+                        action: "footer",
+                        label: link.gtmLabel,
+                        ...(globalTrackingContexts.length ? {
+                            context: globalTrackingContexts
+                        } : {})
+                    })'>
                     {{ link.text }}
                 </a>
             </li>
@@ -69,23 +72,30 @@
 import { ChevronIcon } from '@justeat/f-vue-icons';
 import { windowServices } from '@justeat/f-services';
 
+import analyticsMixin from '../mixins/analytics.mixin';
+
 export default {
     components: {
         ChevronIcon
     },
+
+    mixins: [analyticsMixin],
+
     props: {
         linkList: {
             type: Object,
             default: () => ({})
         }
     },
+
     data () {
         return {
             currentScreenWidth: 0,
             interactedState: null,
             panelCollapsed: false
         };
     },
+
     computed: {
         listId () {
             return `footer-${this.linkList.name.toLowerCase().split(' ').join('-')}`;
@@ -103,15 +113,18 @@ export default {
             return this.panelCollapsed ? 'linkList-wrapper-collapsed' : 'linkList-wrapper';
         }
     },
+
     mounted () {
         this.currentScreenWidth = windowServices.getWindowWidth();
         windowServices.addEvent('resize', this.onResize, 100);
 
         this.setPanelCollapsed();
     },
+
     destroyed () {
         windowServices.removeEvent('resize', this.onResize);
     },
+
     methods: {
         /**
          * Sets Links List panel collapsed state.
@@ -126,6 +139,7 @@ export default {
                 this.panelCollapsed = false;
             }
         },
+
         /**
          * Handle click events on Link List visibility toggle.
          * Only applied to below `wide` screen width (ref. Fozzie UI breakpoints).
@@ -136,6 +150,7 @@ export default {
                 this.setPanelCollapsed();
             }
         },
+
         /**
          * Handles `resize` window events.
          * Screen width is the only factor that affects Links List presentation.