Merge pull request #385 from 4site-interactive-studios/ecard-supress-datalayer

Option to supress gift related events to dataLayer when on eCard pages

Author: fernanDOTdo

packages/scripts/dist/data-layer.d.ts

@@ -5,6 +5,7 @@ export declare class DataLayer {
     private static instance;
     private encoder;
     private endOfGiftProcessStorageKey;
+    private giftFields;
     private excludedFields;
     private hashedFields;
     private retainedEmailField;

packages/scripts/dist/data-layer.js

@@ -24,6 +24,19 @@ export class DataLayer {
         this._form = EnForm.getInstance();
         this.encoder = new TextEncoder();
         this.endOfGiftProcessStorageKey = "ENGRID_END_OF_GIFT_PROCESS_EVENTS";
+        // pageJson entries related to the gift process
+        this.giftFields = [
+            "amount",
+            "currency",
+            "donationLogId",
+            "feeCover",
+            "giftProcess",
+            "paymentType",
+            "receiptNumber",
+            "recurring",
+            "transactionId",
+            "transactionType",
+        ];
         this.excludedFields = [
             // Credit Card
             "transaction.ccnumber",
@@ -102,13 +115,27 @@ export class DataLayer {
     onLoad() {
         // Collect all data layer variables to push at once
         const dataLayerData = {};
+        const suppressEcardData = ENGrid.getPageType() === "ECARD" &&
+            ENGrid.getOption("SuppressPurchaseEcard");
         if (ENGrid.getGiftProcess()) {
-            this.logger.log("EN_SUCCESSFUL_DONATION");
-            this.addEndOfGiftProcessEventsToDataLayer();
+            // EN will chain together gift process data on the page json when redirecting from a completed donation to an ecard.
+            // Since the ecard page can be embedded on the thank you page of a donation, this can cause confusion in the data layer with events
+            // firing for both the donation and the ecard on the same page.
+            if (suppressEcardData) {
+                this.logger.log("⛔ Gift process was detected BUT suppressing EN_SUCCESSFUL_DONATION event due to SuppressPurchaseEcard option enabled");
+                window.sessionStorage.removeItem(this.endOfGiftProcessStorageKey);
+            }
+            else {
+                this.logger.log("EN_SUCCESSFUL_DONATION");
+                this.addEndOfGiftProcessEventsToDataLayer();
+            }
         }
         if (window.pageJson) {
             const pageJson = window.pageJson;
             for (const property in pageJson) {
+                if (suppressEcardData && this.giftFields.includes(property)) {
+                    continue;
+                }
                 const key = `EN_PAGEJSON_${property.toUpperCase()}`;
                 const value = pageJson[property];
                 dataLayerData[key] = this.transformJSON(value);

packages/scripts/dist/interfaces/options.d.ts

@@ -18,6 +18,7 @@ export interface Options {
     UseAmountValidatorFromEN?: boolean;
     SkipToMainContentLink?: boolean;
     SrcDefer?: boolean;
+    SuppressPurchaseEcard?: boolean;
     NeverBounceAPI?: string | null;
     NeverBounceDateField?: string | null;
     NeverBounceDateFormat?: string;

packages/scripts/dist/interfaces/options.js

@@ -17,6 +17,7 @@ export const OptionsDefaults = {
     UseAmountValidatorFromEN: false,
     SkipToMainContentLink: true,
     SrcDefer: true,
+    SuppressPurchaseEcard: false,
     NeverBounceAPI: null,
     NeverBounceDateField: null,
     NeverBounceStatusField: null,

packages/scripts/src/data-layer.ts

@@ -23,6 +23,20 @@ export class DataLayer {
   private encoder = new TextEncoder();
   private endOfGiftProcessStorageKey = "ENGRID_END_OF_GIFT_PROCESS_EVENTS";
 
+  // pageJson entries related to the gift process
+  private giftFields = [
+    "amount",
+    "currency",
+    "donationLogId",
+    "feeCover",
+    "giftProcess",
+    "paymentType",
+    "receiptNumber",
+    "recurring",
+    "transactionId",
+    "transactionType",
+  ];
+
   private excludedFields = [
     // Credit Card
     "transaction.ccnumber",
@@ -111,15 +125,31 @@ export class DataLayer {
   private onLoad() {
     // Collect all data layer variables to push at once
     const dataLayerData: { [key: string]: any } = {};
+    const suppressEcardData =
+      ENGrid.getPageType() === "ECARD" &&
+      ENGrid.getOption("SuppressPurchaseEcard");
 
     if (ENGrid.getGiftProcess()) {
-      this.logger.log("EN_SUCCESSFUL_DONATION");
-      this.addEndOfGiftProcessEventsToDataLayer();
+      // EN will chain together gift process data on the page json when redirecting from a completed donation to an ecard.
+      // Since the ecard page can be embedded on the thank you page of a donation, this can cause confusion in the data layer with events
+      // firing for both the donation and the ecard on the same page.
+      if (suppressEcardData) {
+        this.logger.log(
+          "⛔ Gift process was detected BUT suppressing EN_SUCCESSFUL_DONATION event due to SuppressPurchaseEcard option enabled"
+        );
+        window.sessionStorage.removeItem(this.endOfGiftProcessStorageKey);
+      } else {
+        this.logger.log("EN_SUCCESSFUL_DONATION");
+        this.addEndOfGiftProcessEventsToDataLayer();
+      }
     }
 
     if (window.pageJson) {
       const pageJson = window.pageJson as Record<string, any>;
       for (const property in pageJson) {
+        if (suppressEcardData && this.giftFields.includes(property)) {
+          continue;
+        }
         const key = `EN_PAGEJSON_${property.toUpperCase()}`;
         const value = pageJson[property];
         dataLayerData[key] = this.transformJSON(value);

packages/scripts/src/interfaces/options.ts

@@ -18,6 +18,7 @@ export interface Options {
   UseAmountValidatorFromEN?: boolean;
   SkipToMainContentLink?: boolean;
   SrcDefer?: boolean;
+  SuppressPurchaseEcard?: boolean;
   NeverBounceAPI?: string | null;
   NeverBounceDateField?: string | null;
   NeverBounceDateFormat?: string;
@@ -211,6 +212,7 @@ export const OptionsDefaults: Options = {
   UseAmountValidatorFromEN: false,
   SkipToMainContentLink: true,
   SrcDefer: true,
+  SuppressPurchaseEcard: false,
   NeverBounceAPI: null,
   NeverBounceDateField: null,
   NeverBounceStatusField: null,