Updates

- update nvmrc to 18
- ci tests to node 16, 18
- updated o-tracking and o-viewport and removed some unused react deps
- removed Yup validate for GTM events

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 18.x]
 
     steps:
       - uses: actions/checkout@v1

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v18.17.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phantomstudios/ft-lib",
   "description": "A collection of Javascript UI & tracking utils for FT sites",
-  "version": "0.2.0",
+  "version": "0.3.0-rc3",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/ft-lib#readme",
@@ -40,7 +40,6 @@
     "@babel/preset-typescript": "^7.13.0",
     "@types/debug": "^4.1.7",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.6",
     "@types/youtube": "^0.0.46",
     "@types/yup": "^0.32.0",
     "@typescript-eslint/eslint-plugin": "^4.24.0",
@@ -58,9 +57,6 @@
     "jest": "^26.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
     "set-value": ">=4.0.1",
     "ts-jest": "^26.5.6",
     "typescript": "^4.2.4"
@@ -69,7 +65,7 @@
     "yup": "^1.0.2"
   },
   "peerDependencies": {
-    "@financial-times/o-tracking": "^3.1.4",
-    "@financial-times/o-viewport": "^4.0.5"
+    "@financial-times/o-tracking": "^4.5.1",
+    "@financial-times/o-viewport": "^5.1.2"
   }
 }

src/gaTracker/index.ts

@@ -1,5 +1,4 @@
 import { TrackingOptions } from "../FTTracking";
-import { validateGTMCustomEvent } from "../utils/yupValidator";
 const HEADER_CATEGORY = "Header";
 const HEADER_SEARCH_ACTION = "Engagement - Search";
 
@@ -13,8 +12,9 @@ export class gaTracker {
     this.setupFooterLinksTracking();
   }
 
-  public GTMEventDispatcher(category: string, action: string, label: string) {
-    validateGTMCustomEvent({ category, action, label });
+  /*Dhia - Nov 2023 - For new FT GA4 implementations, customEvents typically only need a single property name (i.e category as the GA4 'event name')
+  so the other properties are now optional */
+  public GTMEventDispatcher(category: string, action = "", label = "") {
     //from channels - sets event categories on window on certain pages..replace?
     if (category === "<category>" && window.gtmCategory) {
       category = window.gtmCategory;
@@ -36,7 +36,6 @@ export class gaTracker {
   }
 
   public GtagEventDispatcher(category: string, action: string, label: string) {
-    validateGTMCustomEvent({ category, action, label });
     window.gtag("event", action, {
       event_category: category,
       event_label: label,
@@ -51,9 +50,7 @@ export class gaTracker {
       if (!gaEventString) return;
       const [category, action, label] = gaEventString.split("|");
 
-      //TODO validate event fields
       if (typeof window !== "undefined") {
-        //TBC - GTM customEvent tag vs standard UA event push?
         if (this.options.isCustomGTMEvent) {
           this.GTMEventDispatcher(
             category,

src/index.ts

@@ -5,8 +5,4 @@ export { gaTracker } from "./gaTracker";
 export { oTracker } from "./oTracker";
 export { ytIframeTracking } from "./ytIframeTracking";
 export { FTTracking, TrackingOptions } from "./FTTracking";
-export {
-  ConfigType,
-  OrigamiEventType,
-  GTMCustomEventType,
-} from "./utils/yupValidator";
+export { ConfigType, OrigamiEventType } from "./utils/yupValidator";

src/utils/yupValidator.ts

@@ -75,25 +75,6 @@ const configSchema = object({
   commercial_product: string().optional().default("ft"),
 });
 
-const gtmCustomEventSchema = object({
-  category: string()
-    .required()
-    .oneOf([
-      "Internal click",
-      "External click",
-      "Video",
-      "Video:fallback",
-      "Audio",
-      "Scroll",
-      "Share",
-      "Form",
-      "Header",
-      "Footer",
-    ]),
-  action: string().required(),
-  label: string().required(),
-});
-
 const origamiEventSchema = object({
   category: string()
     .required()
@@ -131,7 +112,6 @@ const origamiEventSchema = object({
 });
 
 export type ConfigType = InferType<typeof configSchema>;
-export type GTMCustomEventType = InferType<typeof gtmCustomEventSchema>;
 export type OrigamiEventType = InferType<typeof origamiEventSchema>;
 
 export const parseConfig = (config: ConfigType): ConfigType => {
@@ -171,22 +151,6 @@ export const validateConfig = (
   return undefined;
 };
 
-export const validateGTMCustomEvent = (
-  event: GTMCustomEventType
-): ValidationError[] | undefined => {
-  try {
-    gtmCustomEventSchema.validateSync(event, {
-      strict: true,
-      abortEarly: false,
-    });
-  } catch (err: any) {
-    err.errors?.map((err: ValidationError) => {
-      console.error("FTTracker - GTM custom event validation error: " + err);
-    });
-  }
-  return undefined;
-};
-
 export const validateOrigamiEvent = (
   config: OrigamiEventType
 ): ValidationError[] | undefined => {