castled-js-sdk 0.0.1 → 0.0.3

package/src/integrations/GA/constants.js

@@ -0,0 +1,10 @@
+const NAME = 'GA';
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Analytics': NAME,
+  GoogleAnalytics: NAME,
+  'GOOGLE ANALYTICS': NAME,
+  'google analytics': NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/GA/index.js

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

package/src/integrations/GA/index.test.js

@@ -0,0 +1,184 @@
+import GA from './browser';
+import logger from '../../utils/logUtil';
+
+beforeAll(() => {});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+
+const destinationInfo = {
+  shouldApplyDeviceModeTransformation: false,
+  propagateEventsUntransformedOnError: false,
+  destinationId: 'sample-destination-id',
+};
+
+const trackingId = 'UA-143161493-8';
+const eventName = 'test track';
+const label = 'test label';
+
+GA.prototype.loadScript = jest.fn();
+
+describe('GA init tests', () => {
+  let googleAnalytics;
+  beforeEach(() => {
+    googleAnalytics = new GA(
+      { trackingID: trackingId },
+      { loadIntegration: true },
+      destinationInfo,
+    );
+    googleAnalytics.init();
+  });
+
+  test('GA init default config test time', () => {
+    // const googleAnalytics = new GA({ trackingID: "UA-143161493-8" });
+    // googleAnalytics.init();
+    expect(typeof window.ga.l).toBe('number');
+  });
+
+  test('GA init default config test create and require', () => {
+    expect(window.GoogleAnalyticsObject).toEqual('ga');
+    expect(typeof window.ga).toBe('function');
+    expect(typeof window.ga.l).toBe('number');
+    // expect(window.ga.q[0]).toEqual();
+    expect(window.ga.q[0][0]).toEqual('create');
+    expect(window.ga.q[0][1]).toEqual(trackingId);
+    expect(window.ga.q[0][2]).toEqual({
+      cookieDomain: 'auto',
+      siteSpeedSampleRate: 1,
+      sampleRate: 100,
+      allowLinker: true,
+      useAmpClientId: false,
+    });
+    expect(window.ga.q[1][0]).toEqual('require');
+    expect(window.ga.q[1][1]).toEqual('ecommerce');
+  });
+
+  describe('GA page', () => {
+    beforeEach(() => {
+      googleAnalytics = new GA(
+        {
+          trackingID: trackingId,
+          dimensions: [
+            {
+              from: 'testDimension',
+              to: 'dimension1',
+            },
+          ],
+          metrics: [],
+          contentGroupings: [],
+          resetCustomDimensionsOnPage: [
+            {
+              resetCustomDimensionsOnPage: 'testDimension',
+            },
+          ],
+        },
+        { loadIntegration: true },
+        destinationInfo,
+      );
+      googleAnalytics.init();
+      window.ga = jest.fn();
+    });
+
+    test('send pageview', () => {
+      googleAnalytics.page({
+        message: {
+          context: {},
+          properties: {
+            category: 'test cat',
+            path: '/test',
+            url: 'http://localhost',
+            referrer: '',
+            title: 'test page',
+            testDimension: 'abc',
+          },
+        },
+      });
+      logger.debug(JSON.stringify(window.ga.mock.calls)); // this has set with empty {} object when resetCustomDimensions
+      expect(window.ga.mock.calls[0][0]).toEqual('set');
+      expect(window.ga.mock.calls[0][1]).toEqual({ dimension1: null });
+      expect(window.ga.mock.calls[1][0]).toEqual('set');
+      expect(window.ga.mock.calls[1][1]).toEqual({ dimension1: 'abc' });
+      expect(window.ga.mock.calls[3][0]).toEqual('send');
+      expect(window.ga.mock.calls[3][1]).toEqual('pageview');
+
+      // it has a pageview as a top level key..expected??
+      expect(window.ga.mock.calls[3][2]).toEqual({
+        page: '/test',
+        title: 'test cat',
+        location: 'http://localhost',
+      });
+      logger.debug(JSON.stringify(window.ga.mock.calls));
+      // TODO: call another page, check location not set
+    });
+  });
+
+  describe('GA simple non ecomm event', () => {
+    beforeEach(() => {
+      googleAnalytics = new GA(
+        {
+          trackingID: trackingId,
+          dimensions: [],
+          metrics: [],
+          contentGroupings: [],
+        },
+        { loadIntegration: true },
+        destinationInfo,
+      );
+      googleAnalytics.init();
+      window.ga = jest.fn();
+    });
+
+    test('send track call interaction and default category', () => {
+      googleAnalytics.track({
+        message: {
+          context: {},
+          event: eventName,
+          properties: {
+            value: 20,
+            label,
+          },
+        },
+      });
+      // logger.debug(JSON.stringify(window.ga.mock.calls));
+
+      expect(window.ga.mock.calls[0][0]).toEqual('send');
+      expect(window.ga.mock.calls[0][1]).toEqual('event');
+
+      expect(window.ga.mock.calls[0][2]).toEqual({
+        eventCategory: 'All',
+        eventAction: eventName,
+        eventLabel: label,
+        eventValue: 20,
+        nonInteraction: false,
+      });
+    });
+
+    test('send track call non-interaction and explicit category', () => {
+      googleAnalytics.track({
+        message: {
+          context: {},
+          event: eventName,
+          properties: {
+            category: 'test cat',
+            value: 20,
+            label,
+            nonInteraction: 1,
+          },
+        },
+      });
+      // logger.debug(JSON.stringify(window.ga.mock.calls));
+
+      expect(window.ga.mock.calls[0][0]).toEqual('send');
+      expect(window.ga.mock.calls[0][1]).toEqual('event');
+
+      expect(window.ga.mock.calls[0][2]).toEqual({
+        eventCategory: 'test cat',
+        eventAction: eventName,
+        eventLabel: label,
+        eventValue: 20,
+        nonInteraction: true,
+      });
+    });
+  });
+});

package/src/integrations/GA360/browser.js

@@ -0,0 +1,58 @@
+/**
+ * Purpose of this integration:
+ * GA 360 is the enterprise version of Google Analytics. It is not different from GA. But in order Work GA 360 as
+ * device-mode integration and maintain the same structure with others created this integration.
+ * This GA360 class inherited all the properties from the GA class and whenever a method of this class is called,
+ * underlying GA method will get called.
+ */
+/* eslint-disable class-methods-use-this */
+import { GA } from '../GA';
+import logger from '../../utils/logUtil';
+import { NAME } from './constants';
+
+class GA360 extends GA {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    super(config, analytics, destinationInfo);
+    this.analytics = analytics;
+    this.name = NAME;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  init() {
+    logger.debug('===in init GA 360 ===');
+    return super.init();
+  }
+
+  identify(htElement) {
+    logger.debug('=========in GA 360 identify ==========');
+    return super.identify(htElement);
+  }
+
+  track(htElement) {
+    logger.debug('=========in GA 360 track ==========');
+    return super.track(htElement);
+  }
+
+  page(htElement) {
+    logger.debug('=========in GA 360 page ==========');
+    return super.page(htElement);
+  }
+
+  isLoaded() {
+    logger.debug('=========in GA 360 load ==========');
+    return super.isLoaded();
+  }
+
+  isReady() {
+    return super.isReady();
+  }
+}
+
+export { GA360 };

package/src/integrations/GA360/constants.js

@@ -0,0 +1,14 @@
+const NAME = 'GA360';
+const CNameMapping = {
+  [NAME]: NAME,
+  'Google Analytics 360': NAME,
+  'Google analytics 360': NAME,
+  'google analytics 360': NAME,
+  'Google Analytics360': NAME,
+  'Google analytics360': NAME,
+  'google analytics360': NAME,
+  GoogleAnalytics360: NAME,
+  'GA 360': NAME,
+};
+
+export { NAME, CNameMapping };

package/src/integrations/GA360/index.js

@@ -0,0 +1 @@
+export { GA360 } from './browser';

package/src/integrations/GA4/browser.js

@@ -0,0 +1,264 @@
+/* eslint-disable prefer-rest-params */
+/* eslint-disable class-methods-use-this */
+import { NAME } from './constants';
+import { eventsConfig } from './config';
+import logger from '../../utils/logUtil';
+import ScriptLoader from '../../utils/ScriptLoader';
+import { Cookie } from '../../utils/storage/cookie';
+import { constructPayload, flattenJsonPayload } from '../../utils/utils';
+import { shouldSendUserId, prepareParamsAndEventName, formatAndValidateEventName } from './utils';
+
+export default class GA4 {
+  constructor(config, analytics, destinationInfo) {
+    if (analytics.logLevel) {
+      logger.setLogLevel(analytics.logLevel);
+    }
+    this.name = NAME;
+    this.clientId = '';
+    this.sessionId = '';
+    this.sessionNumber = '';
+    this.cookie = Cookie;
+    this.sendUserId = true;
+    this.analytics = analytics;
+    this.measurementId = config.measurementId;
+    this.debugView = config.debugView || false;
+    this.capturePageView = config.capturePageView || 'rs';
+    this.isHybridModeEnabled = config.connectionMode === 'hybrid';
+    this.extendPageViewParams = config.extendPageViewParams || false;
+    this.overrideClientAndSessionId = config.overrideClientAndSessionId || false;
+    ({
+      shouldApplyDeviceModeTransformation: this.shouldApplyDeviceModeTransformation,
+      propagateEventsUntransformedOnError: this.propagateEventsUntransformedOnError,
+      destinationId: this.destinationId,
+    } = destinationInfo ?? {});
+  }
+
+  loadScript(measurementId) {
+    window.dataLayer = window.dataLayer || [];
+    window.gtag =
+      window.gtag ||
+      function gt() {
+        window.dataLayer.push(arguments);
+      };
+    window.gtag('js', new Date());
+    const gtagParameterObject = {};
+
+    if (this.capturePageView === 'rs') {
+      gtagParameterObject.send_page_view = false;
+    }
+
+    // Setting the userId as part of the configuration
+    this.sendUserId = shouldSendUserId(this.analytics.loadOnlyIntegrations);
+    if (this.sendUserId && this.analytics.getUserId()) {
+      gtagParameterObject.user_id = this.analytics.getUserId();
+    }
+
+    if (this.isHybridModeEnabled && this.overrideClientAndSessionId) {
+      gtagParameterObject.cookie_prefix = 'rs';
+      gtagParameterObject.client_id = this.analytics.getAnonymousId();
+      gtagParameterObject.session_id = this.analytics.getSessionId();
+    } else {
+      // Cookie migration logic
+      const clientCookie = this.cookie.get('rs_ga');
+      const defaultGA4Cookie = this.cookie.get('_ga');
+      const measurementIdArray = this.measurementId.split('-');
+      const sessionCookie = this.cookie.get(`rs_ga_${measurementIdArray[1]}`);
+
+      // Only override when both cookie with rs prefix is available and default cookie is not available
+      if (!defaultGA4Cookie && clientCookie && sessionCookie) {
+        const clientCookieArray = clientCookie.split('.');
+
+        // client_id cookie : GA1.1.51545857.1686555747
+        // client_id cookie : GA1.1.48512441-5e44-4860-9900-a8f6e6bc4041
+        const clientId =
+          clientCookieArray.length > 3
+            ? `${clientCookieArray[2]}.${clientCookieArray[3]}`
+            : clientCookieArray[2];
+
+        // session_id cookie : GS1.1.1686558743.1.1.1686558965.7.0.0
+        const sessionCookieArray = sessionCookie.split('.');
+        const sessionId = sessionCookieArray[2];
+
+        // Use existing client and session ids
+        if (clientId) {
+          gtagParameterObject.client_id = clientId;
+        }
+        if (sessionId) {
+          gtagParameterObject.session_id = sessionId;
+        }
+      }
+
+      // Remove rs prefixed cookies so that it won't used again
+      this.cookie.remove('rs_ga');
+      this.cookie.remove(`rs_ga_${measurementIdArray[1]}`);
+    }
+
+    if (this.debugView) {
+      gtagParameterObject.debug_mode = true;
+    }
+
+    if (Object.keys(gtagParameterObject).length === 0) {
+      window.gtag('config', measurementId);
+    } else {
+      window.gtag('config', measurementId, gtagParameterObject);
+    }
+
+    // Set user traits as part of global gtag object
+    const userTraits = flattenJsonPayload(this.analytics.getUserTraits());
+    if (Object.keys(userTraits).length > 0) {
+      window.gtag('set', 'user_properties', userTraits);
+    }
+
+    /**
+     * Setting the parameter sessionId, clientId and session_number using gtag api
+     * Ref: https://developers.google.com/tag-platform/gtagjs/reference
+     */
+    window.gtag('get', this.measurementId, 'session_id', (sessionId) => {
+      this.sessionId = sessionId;
+    });
+    window.gtag('get', this.measurementId, 'client_id', (clientId) => {
+      this.clientId = clientId;
+    });
+    window.gtag('get', this.measurementId, 'session_number', (sessionNumber) => {
+      this.sessionNumber = sessionNumber;
+    });
+
+    ScriptLoader(
+      'google-analytics 4',
+      `https://www.googletagmanager.com/gtag/js?id=${measurementId}`,
+    );
+  }
+
+  init() {
+    this.loadScript(this.measurementId);
+  }
+
+  /**
+   * If the gtag is successfully initialized, client ID and session ID fields will have valid values for the given GA4 configuration
+   */
+  isLoaded() {
+    return !!(this.sessionId && this.clientId);
+  }
+
+  isReady() {
+    return this.isLoaded();
+  }
+
+  /**
+   *
+   * @param {*} htElement
+   */
+  identify(htElement) {
+    logger.debug('In Google Analytics 4 Identify');
+
+    const { message } = htElement;
+    const { traits } = message.context;
+    window.gtag('set', 'user_properties', flattenJsonPayload(traits));
+
+    if (this.sendUserId && message.userId) {
+      const { userId } = message;
+      window.gtag('config', this.measurementId, { user_id: userId });
+    }
+  }
+
+  /**
+   *
+   * @param {*} htElement
+   */
+  track(htElement) {
+    // if Hybrid mode is enabled, don't send data to the device-mode
+    if (this.isHybridModeEnabled) {
+      return;
+    }
+
+    logger.debug('In Google Analytics 4 Track');
+
+    const { message } = htElement;
+
+    const eventName = formatAndValidateEventName(message?.event);
+    if (!eventName) {
+      logger.error('Event name is required');
+      return;
+    }
+
+    const data = prepareParamsAndEventName(message, eventName);
+    if (!data) {
+      return;
+    }
+
+    const { params, event } = data;
+    const parameters = this.addSendToAndMeasurementIdToPayload(params, htElement);
+
+    window.gtag('event', event, parameters);
+  }
+
+  /**
+   *
+   * @param {*} htElement
+   */
+  page(htElement) {
+    logger.debug('In Google Analytics 4 Page');
+
+    if (this.capturePageView === 'rs') {
+      const { message } = htElement;
+      const { properties } = message;
+
+      let payload = constructPayload(message, eventsConfig.PAGE.mapping);
+      payload = this.addSendToAndMeasurementIdToPayload(payload, htElement);
+
+      if (this.extendPageViewParams) {
+        window.gtag('event', 'page_view', {
+          ...flattenJsonPayload(properties),
+          ...payload,
+        });
+      } else {
+        window.gtag('event', 'page_view', payload);
+      }
+    }
+  }
+
+  /**
+   *
+   * @param {*} htElement
+   * @returns
+   */
+  group(htElement) {
+    if (this.isHybridModeEnabled) {
+      return;
+    }
+
+    logger.debug('In Google Analytics 4 Group');
+
+    const { groupId, traits } = htElement.message;
+    let payload = traits;
+    payload = this.addSendToAndMeasurementIdToPayload(payload, htElement);
+
+    const eventData = {
+      group_id: groupId,
+      ...payload,
+    };
+
+    window.gtag('event', 'join_group', eventData);
+  }
+
+  addSendToAndMeasurementIdToPayload(params, htElement) {
+    const { message } = htElement;
+    const { userId } = message;
+    const parameters = params;
+    parameters.send_to = this.measurementId;
+    if (this.sendUserId && userId) {
+      parameters.user_id = userId;
+    }
+    return parameters;
+  }
+
+  getDataForIntegrationsObject() {
+    return {
+      'Google Analytics 4 (GA4)': {
+        clientId: this.clientId,
+        sessionId: this.sessionId,
+        sessionNumber: this.sessionNumber,
+      },
+    };
+  }
+}