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/constants/integrations/client_server_name.js

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

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

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

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

@@ -77,7 +77,7 @@
 import { CNameMapping as SpotifyPixel } from './SpotifyPixel/constants';
 import { CNameMapping as CommandBar } from './CommandBar/constants';
 import { CNameMapping as Ninetailed } from './Ninetailed/constants';
-
+import { CNameMapping as XPixel } from './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 = {
@@ -161,6 +161,7 @@
   ...ActiveCampaign,
   ...Sprig,
   ...SpotifyPixel,
+  ...XPixel,
 };
 
 export { commonNames };

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

@@ -0,0 +1,214 @@
+import { XPixel } from '../../../src/integrations/XPixel';
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+const destinationInfo = {
+  areTransformationsConnected: false,
+  destinationId: 'sample-destination-id',
+};
+
+const basicConfig = {
+  pixelId: '12567839',
+  eventsMapping: [
+    { 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');
+    const isReady = xPixel.isReady();
+    expect(isReady).toBeTruthy();
+  });
+});
+
+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 with contents build properties.products', () => {
+    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',
+              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',
+            price: 3,
+            num_items: 2,
+          },
+        ],
+      },
+    ]);
+  });
+
+  test('Testing Track product_added with contents', () => {
+    xPixel = new XPixel(basicConfig, { logLevel: 'DEBUG' });
+    xPixel.init();
+    window.twq = jest.fn();
+    xPixel.track({
+      message: {
+        context: {},
+        event: 'product_added',
+        properties: {
+          customProp: 'testProp',
+          event_id: 'purchaseId',
+          order_id: 'transactionId',
+          value: 35.0,
+          currency: 'GBP',
+          contents: {
+            content_type: 'product',
+            content_id: 'abc',
+            content_name: 'Food/Drink',
+            price: 3,
+            num_items: 2,
+          },
+        },
+      },
+    });
+    expect(window.twq.mock.calls[0]).toEqual([
+      'event',
+      '789',
+      {
+        currency: 'GBP',
+        value: 35,
+        event_id: 'purchaseId',
+        contents: [
+          {
+            content_type: 'product',
+            content_id: 'abc',
+            content_name: 'Food/Drink',
+            price: 3,
+            num_items: 2,
+          },
+        ],
+      },
+    ]);
+  });
+
+  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', {}]);
+  });
+
+  test('Test for no Event name', () => {
+    xPixel = new XPixel(basicConfig, { logLevel: 'DEBUG' });
+    xPixel.init();
+    window.twq.track = jest.fn();
+    xPixel.track({
+      message: {
+        type: 'track',
+        context: {},
+        properties: {},
+      },
+    });
+    expect(window.twq).not.toHaveBeenCalledWith();
+  });
+
+  test('Test for no Event Id for input event', () => {
+    xPixel = new XPixel(basicConfig, { logLevel: 'DEBUG' });
+    xPixel.init();
+    window.twq.track = jest.fn();
+    xPixel.track({
+      message: {
+        type: 'track',
+        context: {},
+        event: 'addToCart',
+        properties: {},
+      },
+    });
+    expect(window.twq).not.toHaveBeenCalledWith();
+  });
+});

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

@@ -0,0 +1,58 @@
+/* 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, sendEvent } 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.eventsMapping = config.eventsMapping;
+    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.eventsMapping);
+    sendEvent(event, properties, standardEventsMap);
+  }
+
+  page(rudderElement) {
+    const event = 'Page View';
+    const properties = getTrackResponse(rudderElement.message);
+    const standardEventsMap = getHashFromArrayWithDuplicate(this.eventsMapping);
+    sendEvent(event, properties, standardEventsMap);
+  }
+}
+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,22 @@
+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]),
+      u.setAttribute('data-loader', LOAD_ORIGIN),
+      a.parentNode.insertBefore(u, a));
+  })(window, document, 'script');
+  twq('config', pixelId);
+}
+
+export { loadNativeSdk };