Updated code with new modification as discussed

integrations/GA4/ECommerceEventConfig.js

@@ -30,6 +30,21 @@ const includeParams = {
       query: "search_term",
     },
   },
+  PaymentInfo: {
+    mappings: {
+      payment_method: "payment_type",
+    },
+  },
+  ShippingInfo: {
+    mappings: {
+      shipping_method: "shipping_tier",
+    },
+  },
+  Promotion: {
+    mappings: {
+      position: "location_id",
+    },
+  },
 };
 
 const eventNamesConfigArray = [
@@ -50,28 +65,16 @@ const eventNamesConfigArray = [
     hasItem: true,
   },
 
-  // Promotion Section :: Discuss
+  // Promotion Section
   {
     src: ["promotion viewed"],
     dest: "view_promotion",
-    requiredParams: [
-      requiredEventParameters.ProductId,
-      requiredEventParameters.ProductName,
-      requiredEventParameters.PromotionId,
-      requiredEventParameters.PromotionName,
-    ],
-    hasItem: true,
+    onlyIncludeParams: includeParams.Promotion,
   },
   {
     src: ["promotion clicked"],
     dest: "select_promotion",
-    requiredParams: [
-      requiredEventParameters.ProductId,
-      requiredEventParameters.ProductName,
-      requiredEventParameters.PromotionId,
-      requiredEventParameters.PromotionName,
-    ],
-    hasItem: true,
+    onlyIncludeParams: includeParams.Promotion,
   },
 
   // Ordering Section
@@ -129,14 +132,22 @@ const eventNamesConfigArray = [
     ],
     hasItem: true,
   },
-  {
-    src: ["payment info entered"], // adding item_name as checkout_id. I know its not feasible but what is correct value to send.
-    dest: "add_payment_info",
-    requiredParams: [
-      requiredEventParameters.ProductId,
-      requiredEventParameters.ProductName,
+  // To handle sending multiple payload for single event use approach as below
+  {
+    src: ["payment info entered"],
+    dest: [
+      {
+        dest: "add_payment_info",
+        hasItem: false,
+        onlyIncludeParams: includeParams.PaymentInfo,
+      },
+      {
+        dest: "add_shipping_info",
+        hasItem: false,
+        onlyIncludeParams: includeParams.ShippingInfo,
+      },
     ],
-    hasItem: true,
+    hasMultiplePayload: true,
   },
   {
     src: ["order completed"],
@@ -147,12 +158,11 @@ const eventNamesConfigArray = [
     ],
     hasItem: true,
   },
-  // Check how to do
   {
     src: ["order refunded"],
     dest: "refund",
     hasItem: true,
-  }, // GA4 refund is different it supports two refund, partial and full refund  // order_id
+  },
 
   /* Coupon Section
     No Coupon Events present in GA4
@@ -170,7 +180,7 @@ const eventNamesConfigArray = [
   },
   //-------
 
-  // Sharing Section :: What will be content id ask
+  // Sharing Section
   {
     src: ["product shared"],
     dest: "share",
@@ -190,14 +200,9 @@ const eventNamesConfigArray = [
 const eventParametersConfigArray = [
   { src: "list_id", dest: "item_list_id", inItems: true },
   { src: "category", dest: "item_list_name", inItems: true },
-  { src: "promotion_id", dest: "items.promotion_id" },
-  { src: "creative", dest: "items.creative_slot" },
-  { src: "name", dest: "items.promotion_name" }, // can be removed
-  { src: "position", dest: "location_id", inItems: true }, // can be removed
   { src: "price", dest: "value" },
   { src: "currency", dest: "currency", inItems: true },
   { src: "coupon", dest: "coupon", inItems: true },
-  { src: "payment_method", dest: "payment_type" },
   { src: "affiliation", dest: "affiliation", inItems: true },
   { src: "shipping", dest: "shipping" },
   { src: "tax", dest: "tax" },

integrations/GA4/browser.js

@@ -76,7 +76,8 @@ export default class GA4 {
     let destinationProperties = {};
     destinationProperties = getDestinationEventProperties(
       properties,
-      eventParametersConfigArray
+      eventParametersConfigArray,
+      hasItem
     );
 
     if (hasItem) {
@@ -92,53 +93,85 @@ export default class GA4 {
   }
 
   /**
-   *
-   * @param {*} rudderElement
+   * Only include params that are present in given mapping config for things like Cart/Product shared, Product/Products shared
+   * @param {*} params
+   * @param {*} properties
    */
-  track(rudderElement) {
-    let { event } = rudderElement.message;
-    const { properties } = rudderElement.message;
-    const { products } = properties;
-    let destinationProperties = {};
-    if (!event || isReservedName(event)) {
-      throw Error("Cannot call un-named/reserved named track event");
+  getIncludedParameters(params, properties) {
+    const destinationProperties = {};
+    if (type(params) === "object") {
+      const { defaults, mappings } = params;
+      if (type(defaults) === "object") {
+        Object.keys(defaults).forEach((key) => {
+          destinationProperties[key] = defaults[key];
+        });
+      }
+      if (type(mappings) === "object") {
+        Object.keys(mappings).forEach((key) => {
+          destinationProperties[mappings[key]] = properties[key];
+        });
+      }
     }
-    const eventMappingObj = getDestinationEventName(event);
-    if (eventMappingObj) {
-      event = eventMappingObj.dest;
+    return destinationProperties;
+  }
+
+  sendGAEvent(event, parameters, checkRequiredParameters, eventMappingObj) {
+    if (checkRequiredParameters) {
+      if (!hasRequiredParameters(parameters, eventMappingObj)) {
+        throw Error("Payload must have required parameters..");
+      }
+    }
+    window.gtag("event", event, parameters);
+  }
+
+  handleEventMapper(eventMappingObj, properties, products) {
+    let destinationProperties = {};
+    const event = eventMappingObj.dest;
+    if (eventMappingObj.hasMultiplePayload && Array.isArray(event)) {
+      /* Recursion approach to send multiple payload to GA4 for single event from rudder payload
+       */
+      event.forEach((d) => {
+        // eslint-disable-next-line no-param-reassign
+        d.src = eventMappingObj.src;
+        this.handleEventMapper(d, properties, products);
+      });
+    } else {
       if (eventMappingObj.onlyIncludeParams) {
         /* Only include params that are present in given mapping config for things like Cart/Product shared, Product/Products shared
          */
         const includeParams = eventMappingObj.onlyIncludeParams;
-        if (type(includeParams) === "object") {
-          const { defaults, mappings } = includeParams;
-          if (type(defaults) === "object") {
-            Object.keys(defaults).forEach((key) => {
-              destinationProperties[key] = defaults[key];
-            });
-          }
-          if (type(mappings) === "object") {
-            Object.keys(mappings).forEach((key) => {
-              destinationProperties[mappings[key]] = properties[key];
-            });
-          }
-        }
+        destinationProperties = this.getIncludedParameters(
+          includeParams,
+          properties
+        );
       } else {
         destinationProperties = this.getdestinationProperties(
           properties,
           eventMappingObj.hasItem,
           products
         );
       }
-    } else {
-      destinationProperties = properties;
+      this.sendGAEvent(event, destinationProperties, true, eventMappingObj);
     }
+  }
 
-    if (!hasRequiredParameters(destinationProperties, eventMappingObj)) {
-      throw Error("Payload must have required parameters..");
+  /**
+   *
+   * @param {*} rudderElement
+   */
+  track(rudderElement) {
+    const { event } = rudderElement.message;
+    const { properties } = rudderElement.message;
+    const { products } = properties;
+    if (!event || isReservedName(event)) {
+      throw Error("Cannot call un-named/reserved named track event");
+    }
+    const eventMappingObj = getDestinationEventName(event);
+    if (eventMappingObj) {
+      this.handleEventMapper(eventMappingObj, properties, products);
+    } else {
+      this.sendGAEvent(event, properties, false);
     }
-
-    window.gtag("event", event, destinationProperties);
   }
 
   identify(rudderElement) {

integrations/GA4/test/input.js

@@ -3,7 +3,7 @@ const rudderanalytics = [];
 rudderanalytics.track("Products Searched", {
   query: "HDMI cable",
 });
-
+// 1
 rudderanalytics.track("Product List Viewed", {
   list_id: "list1",
   category: "What's New",
@@ -69,6 +69,20 @@ rudderanalytics.track("Product List Filtered", {
   ],
 });
 
+rudderanalytics.track("Promotion Viewed", {
+  promotion_id: "promo1",
+  creative: "banner1",
+  name: "sale",
+  position: "home_top",
+});
+
+rudderanalytics.track("Promotion Clicked", {
+  promotion_id: "promo1",
+  creative: "banner1",
+  name: "sale",
+  position: "home_top",
+});
+// same 1
 rudderanalytics.track("Product Clicked", {
   product_id: "123",
   sku: "F15",
@@ -83,7 +97,7 @@ rudderanalytics.track("Product Clicked", {
   url: "https://www.website.com/product/path",
   image_url: "https://www.website.com/product/path.png",
 });
-
+// same 1 - but only coupon
 rudderanalytics.track("Product Viewed", {
   product_id: "123",
   sku: "F15",
@@ -99,7 +113,7 @@ rudderanalytics.track("Product Viewed", {
   url: "https://www.website.com/product/path",
   image_url: "https://www.website.com/product/path.png",
 });
-
+// same 1
 rudderanalytics.track("Product Added", {
   product_id: "123",
   sku: "F15",
@@ -114,7 +128,7 @@ rudderanalytics.track("Product Added", {
   url: "https://www.website.com/product/path",
   image_url: "https://www.website.com/product/path.png",
 });
-
+// 
 rudderanalytics.track("Product Removed", {
   product_id: "123",
   sku: "F15",

integrations/GA4/test/output.js

@@ -67,9 +67,12 @@ gtag("event", "Product List Filtered", {
   ],
 });
 
+gtag("event", "view_promotion", { location_id: "home_top" });
+
+gtag("event", "select_promotion", { location_id: "home_top" });
+
 // extra params/
 gtag("event", "select_item", {
-  content_id: "123", // extra
   items: [
     {
       item_id: "123",
@@ -82,19 +85,15 @@ gtag("event", "select_item", {
       coupon: "DISC21",
       index: 1,
       item_list_name: "Games",
-      promotion_name: "Game", // extra
-      location_id: 1, // extra
     },
   ],
   item_list_name: "Games",
   value: 13.49, // extra
   coupon: "DISC21", // extra
-  location_id: 1, // extra
 });
 
 // extra params/
 gtag("event", "view_item", {
-  content_id: "123",
   items: [
     {
       item_id: "123",
@@ -106,17 +105,16 @@ gtag("event", "view_item", {
       quantity: 11,
       coupon: "DISC21",
       index: 1,
-      item_list_name: "Games",
+      item_list_name: "Games",  // extra
       promotion_name: "Game",
       currency: "USD",
       location_id: 1,
     },
   ],
-  item_list_name: "Games",
+  item_list_name: "Games", // extra
   value: 13.49,
-  coupon: "DISC21",
+  coupon: "DISC21", // extra
   currency: "USD",
-  location_id: 1,
 });
 
 // extra params/
@@ -220,16 +218,16 @@ window.gtag("event", "begin_checkout", {
   currency: "USD",
 });
 
-// not extra
-window.gtag("event", "add_payment_info", {
-  payment_type: "card",
-  items: [
-    {
-      item_name: "12344",
-      item_id: "123",
-    },
-  ],
-});
+// eslint-disable-next-line no-unused-vars
+const multiplePayloadExample = [
+  window.gtag("event", "add_payment_info", {
+    payment_type: "card",
+  }),
+
+  window.gtag("event", "add_shipping_info", {
+    shipping_tier: "ekart",
+  }),
+];
 
 // extra params/
 window.gtag("event", "purchase", {