feat: add ecom spec support to google ads via config (#1611)

* feat: add ecom spec support to google ads via config * chore: refactor x1 * chore: eventname fixes * chore: update tests * chore: fix sonar issue
rudderlabs · Feb 28, 2024 · 31f8ef6 · 31f8ef6
1 parent 080155a
commit 31f8ef6
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 6 deletions.
diff --git a/packages/analytics-js-integrations/__tests__/integrations/GoogleAds/__fixtures__/data.js b/packages/analytics-js-integrations/__tests__/integrations/GoogleAds/__fixtures__/data.js
@@ -2,6 +2,9 @@ const productAdded = 'Product Added';
 const orderCompleted = 'Order Completed';
 const mockConversionId = 'AW-11071053757';
 const mockOrderId = '771c04b-2cb8-41dd-9609-330b37bcc62c';
+const item_name = 'Food/Drink';
+const item_variant = 'Extra topped';
+const transaction_id = '771c04b-2cb8-41dd-9609-330b37bcc62c';
 
 const products = [
   {
@@ -240,11 +243,14 @@ export {
   products,
   mockEvents,
   mockOrderId,
+  item_name,
+  item_variant,
+  transaction_id,
   productAdded,
   orderCompleted,
   googleAdsConfigs,
   trackCallPayload,
   mockConversionId,
   mockEventTypeConversions,
-  noEventNameTrackCallPayload
+  noEventNameTrackCallPayload,
 };
diff --git a/packages/analytics-js-integrations/__tests__/integrations/GoogleAds/browser.test.js b/packages/analytics-js-integrations/__tests__/integrations/GoogleAds/browser.test.js
@@ -1,6 +1,9 @@
 import GoogleAds from '../../../src/integrations/GoogleAds/browser';
 import {
   products,
+  item_name,
+  item_variant,
+  transaction_id,
   mockOrderId,
   orderCompleted,
   googleAdsConfigs,
@@ -66,7 +69,22 @@ describe('Scenario to test conversion event by keeping dynamicRemarketing flag d
     expect(window.gtag.mock.calls[0][2]).toEqual({
       currency: 'IND',
       send_to: `${mockConversionId}/TCBjCKjCs4gYEIXBi58p`,
-      transaction_id: mockOrderId,
+      transaction_id,
+      event_id: 'purchaseId',
+      shipping: 4,
+      value: 35,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -92,7 +110,20 @@ describe('Scenario to test dynamic remarketing event by enabling the dynamicRema
       value: 35.0,
       shipping: 4.0,
       currency: 'IND',
+      transaction_id,
       products,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -101,7 +132,7 @@ describe('Scenario to test dynamic remarketing event by enabling the dynamicRema
 describe('Edge scenarios', () => {
   let googleAds;
   beforeEach(() => {
-    googleAds = new GoogleAds(googleAdsConfigs[2], {  }, destinationInfo);
+    googleAds = new GoogleAds(googleAdsConfigs[2], {}, destinationInfo);
     googleAds.init();
     window.gtag = jest.fn();
   });
@@ -116,15 +147,15 @@ describe('Edge scenarios', () => {
   });
 
   test('Scenario to test no event name for page call', () => {
-    googleAds.page({message: {}});
+    googleAds.page({ message: {} });
     // Validating no error is thrown in console if event name is not present
     expect(errMock).toHaveBeenLastCalledWith('in script loader=== googleAds-integration');
     // Validating no conversion event is sent to google ads if event name is not present
     expect(window.gtag.mock.calls[0]).toBeUndefined();
     // Validating no dynamic remarketing event is sent to google ads if event name is not present
     expect(window.gtag.mock.calls[1]).toBeUndefined();
   });
-})
+});
 
 describe('Scenario to test conversion and dynamic remarketing events', () => {
   let googleAds;
@@ -143,7 +174,22 @@ describe('Scenario to test conversion and dynamic remarketing events', () => {
     expect(window.gtag.mock.calls[0][2]).toEqual({
       currency: 'IND',
       send_to: `${mockConversionId}/TCBjCKjCs4gYEIXBi58p`,
-      transaction_id: mockOrderId,
+      transaction_id,
+      event_id: 'purchaseId',
+      shipping: 4,
+      value: 35,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
 
     // verify dynamic remarketing events
@@ -157,6 +203,19 @@ describe('Scenario to test conversion and dynamic remarketing events', () => {
       shipping: 4.0,
       currency: 'IND',
       products,
+      transaction_id,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -179,6 +238,21 @@ describe('Scenario to test only conversion events when track conversion button i
       currency: 'IND',
       send_to: `${mockConversionId}/TCBjCKjCs4gYEIXBi58p`,
       transaction_id: mockOrderId,
+      event_id: 'purchaseId',
+      shipping: 4,
+      value: 35,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -200,11 +274,24 @@ describe('Scenario to test only dynamic remarketing events when track dynamic re
     expect(window.gtag.mock.calls[0][2]).toEqual({
       send_to: mockConversionId,
       event_id: 'purchaseId',
+      transaction_id,
       order_id: mockOrderId,
       value: 35.0,
       shipping: 4.0,
       currency: 'IND',
       products,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -227,6 +314,21 @@ describe('Scenario to test only conversion events when track conversion button a
       currency: 'IND',
       send_to: `${mockConversionId}/TCBjCKjCs4gYEIXBi58p`,
       transaction_id: mockOrderId,
+      event_id: 'purchaseId',
+      shipping: 4,
+      value: 35,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
@@ -250,6 +352,21 @@ describe('Scenario to test both configs together, old config should be given fir
       currency: 'IND',
       send_to: `${mockConversionId}/TCBjCKjCs4gYEIXBi58p`,
       transaction_id: mockOrderId,
+      event_id: 'purchaseId',
+      shipping: 4,
+      value: 35,
+      items: [
+        {
+          currency: 'GBP',
+          item_category: 'Merch',
+          item_id: 'abc',
+          item_name,
+          item_variant,
+          price: 3,
+          quantity: 2,
+          typeOfProduct: 'Food',
+        },
+      ],
     });
   });
 });
diff --git a/packages/analytics-js-integrations/src/integrations/GoogleAds/browser.js b/packages/analytics-js-integrations/src/integrations/GoogleAds/browser.js
@@ -18,6 +18,8 @@ import {
 } from './utils';
 import { loadNativeSdk } from './nativeSdkLoader';
 
+import { prepareParamsAndEventName } from '../GA4/utils';
+
 const logger = new Logger(DISPLAY_NAME);
 
 class GoogleAds {
@@ -45,6 +47,7 @@ class GoogleAds {
     // Depreciating: Added to make changes backward compatible
     this.dynamicRemarketing = config.dynamicRemarketing;
     this.allowEnhancedConversions = config.allowEnhancedConversions || false;
+    this.v2 = config.v2 || true;
     this.name = NAME;
     ({
       shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
@@ -112,6 +115,11 @@ class GoogleAds {
         transaction_id: rudderElement.message?.properties?.order_id,
         send_to: sendToValue,
       };
+      if (this.v2) {
+        const updatedEventName = eventName.trim().replace(/\s+/g, '_');
+        const ecomPayload = prepareParamsAndEventName(rudderElement.message, updatedEventName);
+        properties = { ...properties, ...ecomPayload?.params };
+      }
       properties = removeUndefinedAndNullValues(properties);
       properties = newCustomerAcquisitionReporting(properties);
 
@@ -137,6 +145,13 @@ class GoogleAds {
       );
 
       let { properties } = rudderElement.message;
+      const { event } = rudderElement.message;
+
+      if (this.v2) {
+        const updatedEventName = event.trim().replace(/\s+/g, '_');
+        const ecomPayload = prepareParamsAndEventName(rudderElement.message, updatedEventName);
+        properties = { ...properties, ...ecomPayload?.params };
+      }
 
       // set new customer acquisition reporting
       // docs: https://support.google.com/google-ads/answer/12077475?hl=en#zippy=%2Cinstall-with-the-global-site-tag%2Cinstall-with-google-tag-manager