@phantomstudios/ft-lib - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-rc1

lib/gaTracker/index.d.ts

@@ -5,3 +5,3 @@ import { TrackingOptions } from "../FTTracking";
     constructor(options: TrackingOptions);
-    GTMEventDispatcher(category: string, action: string, label: string): void;
+    GTMEventDispatcher(category: string, action?: string, label?: string): void;
     GTMVirtualPageView(pageUrl: string, pageTitle: string): void;
@@ -8,0 +8,0 @@ GtagEventDispatcher(category: string, action: string, label: string): void;

lib/gaTracker/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.gaTracker = void 0;
-var yupValidator_1 = require("../utils/yupValidator");
 var HEADER_CATEGORY = "Header";
@@ -15,4 +14,7 @@ var HEADER_SEARCH_ACTION = "Engagement - Search";
     }
+    /*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 */
     gaTracker.prototype.GTMEventDispatcher = function (category, action, label) {
-        (0, yupValidator_1.validateGTMCustomEvent)({ category: category, action: action, label: label });
+        if (action === void 0) { action = ""; }
+        if (label === void 0) { label = ""; }
         //from channels - sets event categories on window on certain pages..replace?
@@ -37,3 +39,2 @@ if (category === "<category>" && window.gtmCategory) {
     gaTracker.prototype.GtagEventDispatcher = function (category, action, label) {
-        (0, yupValidator_1.validateGTMCustomEvent)({ category: category, action: action, label: label });
         window.gtag("event", action, {
@@ -53,5 +54,3 @@ event_category: category,
             var _a = gaEventString.split("|"), category = _a[0], action = _a[1], label = _a[2];
-            //TODO validate event fields
             if (typeof window !== "undefined") {
-                //TBC - GTM customEvent tag vs standard UA event push?
                 if (_this.options.isCustomGTMEvent) {
@@ -58,0 +57,0 @@ _this.GTMEventDispatcher(category, action, label || window.location.pathname //use pathname if label section has not been defined

lib/index.d.ts

@@ -8,3 +8,3 @@ export { consentMonitor } from "./consentMonitor";
 export { FTTracking, TrackingOptions } from "./FTTracking";
-export { ConfigType, OrigamiEventType, GTMCustomEventType, } from "./utils/yupValidator";
+export { ConfigType, OrigamiEventType } from "./utils/yupValidator";
 //# sourceMappingURL=index.d.ts.map

lib/utils/yupValidator.d.ts

@@ -51,11 +51,2 @@ import { InferType, ValidationError } from "yup";
 }, "">;
-declare const gtmCustomEventSchema: import("yup").ObjectSchema<{
-    category: string;
-    action: string;
-    label: string;
-}, import("yup").AnyObject, {
-    category: undefined;
-    action: undefined;
-    label: undefined;
-}, "">;
 declare const origamiEventSchema: import("yup").ObjectSchema<{
@@ -81,9 +72,7 @@ category: string;
 export type ConfigType = InferType<typeof configSchema>;
-export type GTMCustomEventType = InferType<typeof gtmCustomEventSchema>;
 export type OrigamiEventType = InferType<typeof origamiEventSchema>;
 export declare const parseConfig: (config: ConfigType) => ConfigType;
 export declare const validateConfig: (config: ConfigType) => ValidationError[] | undefined;
-export declare const validateGTMCustomEvent: (event: GTMCustomEventType) => ValidationError[] | undefined;
 export declare const validateOrigamiEvent: (config: OrigamiEventType) => ValidationError[] | undefined;
 export {};
 //# sourceMappingURL=yupValidator.d.ts.map

lib/utils/yupValidator.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateOrigamiEvent = exports.validateGTMCustomEvent = exports.validateConfig = exports.parseConfig = void 0;
+exports.validateOrigamiEvent = exports.validateConfig = exports.parseConfig = void 0;
 var yup_1 = require("yup");
@@ -65,20 +65,2 @@ //transform passed values to first character uppercase and replace spaces with underscores
 });
-var gtmCustomEventSchema = (0, yup_1.object)({
-    category: (0, yup_1.string)()
-        .required()
-        .oneOf([
-        "Internal click",
-        "External click",
-        "Video",
-        "Video:fallback",
-        "Audio",
-        "Scroll",
-        "Share",
-        "Form",
-        "Header",
-        "Footer",
-    ]),
-    action: (0, yup_1.string)().required(),
-    label: (0, yup_1.string)().required(),
-});
 var origamiEventSchema = (0, yup_1.object)({
@@ -157,18 +139,2 @@ category: (0, yup_1.string)()
 exports.validateConfig = validateConfig;
-var validateGTMCustomEvent = function (event) {
-    var _a;
-    try {
-        gtmCustomEventSchema.validateSync(event, {
-            strict: true,
-            abortEarly: false,
-        });
-    }
-    catch (err) {
-        (_a = err.errors) === null || _a === void 0 ? void 0 : _a.map(function (err) {
-            console.error("FTTracker - GTM custom event validation error: " + err);
-        });
-    }
-    return undefined;
-};
-exports.validateGTMCustomEvent = validateGTMCustomEvent;
 var validateOrigamiEvent = function (config) {
@@ -175,0 +141,0 @@ var _a;

package.json

 {
   "name": "@phantomstudios/ft-lib",
   "description": "A collection of Javascript UI & tracking utils for FT sites",
-  "version": "0.2.0",
+  "version": "0.3.0-rc1",
   "main": "lib/index.js",
@@ -43,3 +43,2 @@ "types": "lib/index.d.ts",
     "@types/jest": "^26.0.23",
-    "@types/react": "^17.0.6",
     "@types/youtube": "^0.0.46",
@@ -62,5 +61,2 @@ "@types/yup": "^0.32.0",
     "prettier": "^2.3.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
     "set-value": ">=4.0.1",
@@ -74,5 +70,5 @@ "ts-jest": "^26.5.6",
   "peerDependencies": {
-    "@financial-times/o-tracking": "^3.1.4",
+    "@financial-times/o-tracking": "^4.5.1",
     "@financial-times/o-viewport": "^4.0.5"
   }
 }

src/gaTracker/index.ts

 import { TrackingOptions } from "../FTTracking";
-import { validateGTMCustomEvent } from "../utils/yupValidator";
 const HEADER_CATEGORY = "Header";
@@ -16,4 +15,5 @@ const HEADER_SEARCH_ACTION = "Engagement - Search";
 
-  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?
@@ -40,3 +40,2 @@ if (category === "<category>" && window.gtmCategory) {
   public GtagEventDispatcher(category: string, action: string, label: string) {
-    validateGTMCustomEvent({ category, action, label });
     window.gtag("event", action, {
@@ -56,5 +55,3 @@ event_category: category,
 
-      //TODO validate event fields
       if (typeof window !== "undefined") {
-        //TBC - GTM customEvent tag vs standard UA event push?
         if (this.options.isCustomGTMEvent) {
@@ -61,0 +58,0 @@ this.GTMEventDispatcher(

src/index.ts

@@ -8,6 +8,2 @@ export { consentMonitor } from "./consentMonitor";
 export { FTTracking, TrackingOptions } from "./FTTracking";
-export {
-  ConfigType,
-  OrigamiEventType,
-  GTMCustomEventType,
-} from "./utils/yupValidator";
+export { ConfigType, OrigamiEventType } from "./utils/yupValidator";

src/utils/yupValidator.ts

@@ -78,21 +78,2 @@ import {
 
-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({
@@ -135,3 +116,2 @@ category: string()
 export type ConfigType = InferType<typeof configSchema>;
-export type GTMCustomEventType = InferType<typeof gtmCustomEventSchema>;
 export type OrigamiEventType = InferType<typeof origamiEventSchema>;
@@ -176,18 +156,2 @@
 
-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 = (
@@ -194,0 +158,0 @@ config: OrigamiEventType

No alert changes

Improved metrics

Dev dependency count

24

decreased by-14.29%

Worsened metrics

Total package byte prevSize

220946

decreased by-1.57%

Lines of code

3740

decreased by-2.27%

No dependency changes