feat: onboarded XPixel Integration

packages/analytics-js-common/src/constants/integrations/XPixel/constants.js

@@ -0,0 +1,61 @@
+const DIR_NAME = 'XPixel';
+const NAME = 'XPIXEL';
+const DISPLAY_NAME = 'XPixel';
+
+const DISPLAY_NAME_TO_DIR_NAME_MAP = { [DISPLAY_NAME]: DIR_NAME };
+const CNameMapping = {
+  [NAME]: NAME,
+  XPIXEL: NAME,
+  XPixel: NAME,
+  Xpixel: NAME,
+  xpixel: NAME,
+  xPixel: NAME,
+};
+
+const trackPropertyMapping = [
+  {
+    destKey: 'event_id',
+    sourceKeys: ['properties.eventId', 'properties.event_id', 'messageId'],
+  },
+  {
+    destKey: 'status',
+    sourceKeys: 'properties.status',
+  },
+  {
+    destKey: 'currency',
+    sourceKeys: 'properties.currency',
+  },
+  {
+    destKey: 'value',
+    sourceKeys: 'properties.value',
+  },
+  {
+    destKey: 'search_string',
+    sourceKeys: ['properties.search_string', 'properties.searchString'],
+  },
+  {
+    destKey: 'description',
+    sourceKeys: 'properties.description',
+  },
+  {
+    destKey: 'conversion_id',
+    sourceKeys: ['properties.conversion_id', 'properties.conversionId'],
+  },
+  {
+    destKey: 'twclid',
+    sourceKeys: 'properties.twclid',
+  },
+  {
+    destKey: 'contents',
+    sourceKeys: 'properties.contents',
+  },
+];
+
+export {
+  NAME,
+  CNameMapping,
+  DISPLAY_NAME_TO_DIR_NAME_MAP,
+  DISPLAY_NAME,
+  DIR_NAME,
+  trackPropertyMapping,
+};

packages/analytics-js-common/src/v1.1/utils/client_server_name.js

@@ -77,6 +77,7 @@ const clientToServerNames = {
   SPOTIFYPIXEL: 'Spotify Pixel',
   COMMANDBAR: 'CommandBar',
   NINETAILED: 'Ninetailed',
+  XPIXEL: 'XPixel',
 };
 
 export { clientToServerNames };

packages/analytics-js-common/src/v1.1/utils/config_to_integration_names.js

@@ -78,6 +78,7 @@ const configToIntNames = {
   SPOTIFYPIXEL: 'SpotifyPixel',
   COMMANDBAR: 'CommandBar',
   NINETAILED: 'Ninetailed',
+  XPIXEL: 'XPixel',
 };
 
 export { configToIntNames };

packages/analytics-js-common/src/v1.1/utils/integration_cname.js

@@ -76,7 +76,7 @@
 import { CNameMapping as SpotifyPixel } from '../../constants/integrations/SpotifyPixel/constants';
 import { CNameMapping as CommandBar } from '../../constants/integrations/CommandBar/constants';
 import { CNameMapping as Ninetailed } from '../../constants/integrations/Ninetailed/constants';
-
+import { CNameMapping as XPixel } from '../../constants/integrations/XPixel/constants';
 // for sdk side native integration identification
 // add a mapping from common names to index.js exported key names as identified by Rudder
 const commonNames = {
@@ -159,6 +159,7 @@
   ...ActiveCampaign,
   ...Sprig,
   ...SpotifyPixel,
+  ...XPixel,
 };
 
 export { commonNames };

packages/analytics-js-integrations/__tests__/integrations/XPixel/browser.test.js

@@ -0,0 +1,173 @@
+import { XPixel } from '../../../src/integrations/XPixel';
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+const destinationInfo = {
+  areTransformationsConnected: false,
+  destinationId: 'sample-destination-id',
+};
+
+const basicConfig = {
+  pixelId: '12567839',
+  eventToEventIdMap: [
+    { from: 'Sign Up', to: '123' },
+    { from: 'Custom', to: '987' },
+    { from: 'Page View', to: '456' },
+    { from: 'Page View', to: '467' },
+    { from: 'product_added', to: '789' },
+  ],
+};
+
+describe('XPixel init tests', () => {
+  beforeAll(() => {
+    // Add a dummy script as it is required by the init script
+    const scriptElement = document.createElement('script');
+    scriptElement.type = 'text/javascript';
+    scriptElement.id = 'dummyScript';
+    const headElements = document.getElementsByTagName('head');
+    headElements[0].insertBefore(scriptElement, headElements[0].firstChild);
+  });
+
+  let xPixel;
+
+  test('Testing init call of XPixel', () => {
+    xPixel = new XPixel(basicConfig, { loglevel: 'debug' }, destinationInfo);
+    xPixel.init();
+    expect(typeof window.twq).toBe('function');
+  });
+});
+
+describe('xPixel page', () => {
+  let xPixel;
+  beforeEach(() => {
+    xPixel = new XPixel(basicConfig, { loglevel: 'debug' });
+    xPixel.init();
+    window.twq = jest.fn();
+  });
+
+  test('send pageview', () => {
+    xPixel.page({
+      message: {
+        context: {},
+        properties: {
+          category: 'test cat',
+          path: '/test',
+          url: 'http://localhost',
+          referrer: '',
+          title: 'test page',
+          testDimension: 'abc',
+          value: 35.0,
+          currency: 'GBP',
+        },
+      },
+    });
+    expect(window.twq.mock.calls[0]).toEqual(['event', '456', { currency: 'GBP', value: 35 }]);
+    expect(window.twq.mock.calls[1]).toEqual(['event', '467', { currency: 'GBP', value: 35 }]);
+  });
+});
+
+describe('XPixel Track event', () => {
+  let xPixel;
+  beforeEach(() => {});
+  test('Testing Track Simple Event', () => {
+    xPixel = new XPixel(basicConfig, { loglevel: 'DEBUG' }, destinationInfo);
+    xPixel.init();
+    window.twq = jest.fn();
+    xPixel.track({
+      message: {
+        context: {},
+        event: 'Custom',
+        properties: {
+          customProp: 'testProp',
+          order_id: 'transactionId',
+          value: 35.0,
+          coupon: 'APPARELSALE',
+          currency: 'GBP',
+          products: [
+            {
+              customPropProd: 'testPropProd',
+              product_id: 'abc',
+              category: 'Merch',
+              name: 'Food/Drink',
+              brand: '',
+              variant: 'Extra topped',
+              price: 3.0,
+              quantity: 2,
+              currency: 'GBP',
+              position: 1,
+              value: 6.0,
+              typeOfProduct: 'Food',
+            },
+          ],
+        },
+      },
+    });
+    expect(window.twq.mock.calls[0]).toEqual([
+      'event',
+      '987',
+      {
+        currency: 'GBP',
+        value: 35,
+        contents: [
+          {
+            content_type: 'product',
+            content_id: 'abc',
+            content_name: 'Food/Drink',
+            price: 3,
+            num_items: 2,
+          },
+        ],
+      },
+    ]);
+  });
+
+  test('Testing Track product_added with no content_type in payload', () => {
+    xPixel = new XPixel(basicConfig, { loglevel: 'DEBUG' });
+    xPixel.init();
+    window.twq.track = jest.fn();
+    xPixel.track({
+      message: {
+        context: {},
+        event: 'product_added',
+        properties: {
+          customProp: 'testProp',
+          event_id: 'purchaseId',
+          order_id: 'transactionId',
+          value: 35.0,
+          currency: 'GBP',
+          products: [
+            {
+              customPropProd: 'testPropProd',
+              product_id: 'abc',
+              category: 'Merch',
+              name: 'Food',
+              price: 3.0,
+              quantity: 2,
+              currency: 'GBP',
+              position: 1,
+              value: 6.0,
+              typeOfProduct: 'Food',
+            },
+          ],
+        },
+      },
+    });
+    expect(window.twq.mock.calls[0]).toEqual(['config', '12567839']);
+  });
+
+  test('Test for empty properties', () => {
+    xPixel = new XPixel(basicConfig, { loglevel: 'DEBUG' });
+    xPixel.init();
+    window.twq.track = jest.fn();
+    xPixel.track({
+      message: {
+        type: 'track',
+        context: {},
+        event: 'Sign Up',
+        properties: {},
+      },
+    });
+    expect(window.twq.mock.calls[1]).toEqual(['event', '123', {}]);
+  });
+});

packages/analytics-js-integrations/src/integrations/XPixel/browser.js

@@ -0,0 +1,68 @@
+/* eslint-disable class-methods-use-this */
+import {
+  NAME,
+  DISPLAY_NAME,
+} from '@rudderstack/analytics-js-common/constants/integrations/XPixel/constants';
+import Logger from '../../utils/logger';
+import { getHashFromArrayWithDuplicate } from '../../utils/commonUtils';
+import { getTrackResponse } from './utils';
+import { loadNativeSdk } from './nativeSdkLoader';
+
+const logger = new Logger(DISPLAY_NAME);
+class XPixel {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.analytics = analytics;
+    this.pixelId = config.pixelId;
+    this.eventToEventIdMap = config.eventToEventIdMap;
+    this.name = NAME;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    loadNativeSdk(this.pixelId);
+  }
+
+  isLoaded() {
+    return !!window.twq;
+  }
+
+  isReady() {
+    return this.isLoaded();
+  }
+
+  track(rudderElement) {
+    const { event } = rudderElement.message;
+    if (!event) {
+      logger.error('Event name is missing');
+      return;
+    }
+    const properties = getTrackResponse(rudderElement.message);
+    const standardEventsMap = getHashFromArrayWithDuplicate(this.eventToEventIdMap);
+    const eventIds = standardEventsMap[event?.toLowerCase()];
+    if (Array.isArray(eventIds)) {
+      eventIds.forEach(eventId => {
+        window.twq('event', eventId, properties);
+      });
+    } else {
+      logger.error(`Event name (${event}) is not valid, must be mapped to atleast one Event ID`);
+    }
+  }
+
+  page(rudderElement) {
+    const event = 'Page View';
+    const properties = getTrackResponse(rudderElement.message);
+    const standardEventsMap = getHashFromArrayWithDuplicate(this.eventToEventIdMap);
+    const eventIds = standardEventsMap[event?.toLowerCase()];
+    eventIds.forEach(eventId => {
+      window.twq('event', eventId, properties);
+    });
+  }
+}
+export default XPixel;

packages/analytics-js-integrations/src/integrations/XPixel/index.js

@@ -0,0 +1 @@
+export { default as XPixel } from './browser';

packages/analytics-js-integrations/src/integrations/XPixel/nativeSdkLoader.js

@@ -0,0 +1,21 @@
+import { LOAD_ORIGIN } from '@rudderstack/analytics-js-common/v1.1/utils/constants';
+
+function loadNativeSdk(pixelId) {
+  !(function (e, t, n, s, u, a) {
+    e.twq ||
+      ((s = e.twq =
+        function () {
+          s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
+        }),
+      (s.version = '1.1'),
+      (s.queue = []),
+      (u = t.createElement(n)),
+      (u.async = !0),
+      (u.src = 'https://static.ads-twitter.com/uwt.js'),
+      (a = t.getElementsByTagName(n)[0]),
+      a.parentNode.insertBefore(u, a));
+  })(window, document, 'script');
+  twq('config', pixelId);
+}
+
+export { loadNativeSdk };