@magicpixel/rn-mp-client-sdk 0.2.0

package/src/index.tsx

@@ -0,0 +1,258 @@
+import { MpDataLayerHelper } from './eedl/eedl';
+import type {
+  AppCustomerInfo,
+  AppPageLoad,
+  MapLike,
+  SdkInitOptions,
+} from './common/app-types';
+import { DataStore } from './common/data-store';
+import { Logger } from './common/logger';
+import { Reporter } from './common/reporter';
+import { DataElementProcessor } from './processors/data-element.processor';
+import { TagProcessor } from './processors/tag.processor';
+import { Utils } from './common/utils';
+import { QcProcessor } from './processors/qc.processor';
+import { NetworkService } from './common/network-service';
+import { EventBus } from './common/event-bus';
+import { VisitIdProcessor } from './processors/visit-id.processor';
+
+class MagicPixelImpl {
+  private static dl: MpDataLayerHelper;
+  private static customerInfo: AppCustomerInfo;
+  private static firstAppLaunch = true;
+
+  static async init(options: SdkInitOptions): Promise<void> {
+    this.dl = new MpDataLayerHelper('mpDlEvent', 'manual', 'page_load');
+
+    await NetworkService.refreshClientSdkJson(options);
+
+    if (!DataStore.isDataStoreReady()) {
+      throw new Error('MagicPixel SDK is not ready. No tags will be processed');
+    }
+
+    const sdk = DataStore.getClientSdk();
+
+    await VisitIdProcessor.init();
+
+    MagicPixelEventBus.on('mpDlEvent', async (evtName, payload) => {
+      console.log('mpDlEvent:: ', evtName, JSON.stringify(payload));
+      const eventName: string = payload.eventName;
+      const eventDataModel: MapLike = payload.model ?? {};
+      const eventId = eventDataModel['ev._id'];
+
+      Logger.logDbg('Tracking Event:: ', eventName, 'with id:: ', eventId);
+
+      if (sdk.mpDlE?.indexOf(eventName) > -1) {
+        // if this is something the tag manager is interested in - fire tag manager
+        DataStore.enQueueTMFire(
+          false,
+          `custom_event_${eventName}`,
+          eventName,
+          eventId,
+          eventDataModel
+        );
+        await this.checkAndFireTM();
+      }
+    });
+  }
+
+  static recordEvent(eventName: string, payload: MapLike): void {
+    if (this.customerInfo) {
+      const newPayload: MapLike = {
+        ...payload,
+        ...this.customerInfo,
+      };
+      this.dl.pushEvent(eventName, newPayload);
+    } else {
+      this.dl.pushEvent(eventName, payload);
+    }
+  }
+
+  static ready(): void {
+    this.dl.ready();
+  }
+
+  static async checkAndFireTM(): Promise<void> {
+    try {
+      if (!DataStore.isTagManagerProcessing()) {
+        const item = DataStore.deQueueTMFire();
+        if (item) {
+          Logger.logDbg(
+            'Executing TM For: ',
+            item.name,
+            ', Event:: ',
+            item.dcrName,
+            ', Event id:: ',
+            item.eventId,
+            'Payload:: ',
+            item.dcrPayload
+          );
+          await this.runTM(
+            item.sseOnly,
+            item.name,
+            item.dcrName,
+            item.eventId,
+            item.dcrPayload
+          );
+        }
+      } else {
+        Logger.logDbg(
+          'Tag Manager is processing or is not ready. This event will start after that'
+        );
+      }
+    } catch (err) {
+      Logger.logError('Error check and process tm', err);
+      Reporter.reportError('m:checkAndFireTM', err);
+    }
+  }
+
+  static async runTM(
+    sseOnly: boolean,
+    triggerName: string,
+    evtName: string,
+    evtId: string,
+    eventData?: Record<string, any>
+  ): Promise<void> {
+    try {
+      Logger.logDbg(
+        'Running:: ',
+        sseOnly,
+        triggerName,
+        evtName,
+        evtId,
+        eventData
+      );
+
+      // set tag manager in process status
+      DataStore.setTagManagerProcessing(true);
+
+      // process all the data elements and cache them for this run
+      await DataElementProcessor.processDataElements(
+        DataStore.getSdkDataElements(),
+        eventData
+      );
+
+      const sdk = DataStore.getClientSdk();
+
+      const pcKey = DataStore.getSdkPcKey();
+      if (pcKey) {
+        const pcVal = DataStore.getDataElementValue(pcKey);
+        if (typeof pcVal !== 'undefined' && pcVal === true) {
+          Logger.logDbg('Set: PR Comp: ', true);
+          DataStore.setPrivacyCompliance(true);
+        } else {
+          Logger.logDbg('Set: PR Comp: ', false);
+          DataStore.setPrivacyCompliance(false);
+        }
+      } else {
+        Logger.logDbg('Set: PR Comp: ', false);
+        DataStore.setPrivacyCompliance(true);
+      }
+
+      if (DataStore.getSdkPageLangKey()) {
+        DataStore.setDataElement(
+          'page_lang_key',
+          DataStore.getSdkPageLangKey()
+        );
+        DataStore.setPageLang(
+          DataStore.getDataElementValue('page_lang_key') as string
+        );
+      } else {
+        DataStore.setDataElement('page_lang_key', null);
+      }
+
+      //set page_browser default data element with page_os because backend expects this
+      DataStore.setDataElement(
+        'page_browser',
+        DataStore.getOperatingSystem().toLowerCase()
+      );
+
+      Reporter.initReporter(
+        sdk.s.ev,
+        sdk.s.ev_id,
+        DataStore.getDeviceType(),
+        DataStore.getPageLang(),
+        DataStore.getDeviceOs(),
+        DataStore.getPageName(),
+        evtName,
+        evtId,
+        DataStore.getClientDownStream(),
+        DataStore.getCoreVersion(),
+        []
+      );
+
+      const validQCList = QcProcessor.processQc(
+        DataStore.getSdkQC(),
+        evtName,
+        evtId
+      );
+
+      if (validQCList?.length > 0) {
+        Logger.logDbg('Found Valid QCs to process', DataStore.getValidQcInfo());
+
+        TagProcessor.processTags(evtName, evtId)
+          .then(() => {
+            this._fireTM(sdk.s.ev, sdk.s.ev_id, evtName, evtId);
+          })
+          .catch((err) => {
+            Logger.logError('Error processing tag lists.', err);
+            Reporter.reportError('i::processTags', err);
+            this._fireTM(sdk.s.ev, sdk.s.ev_id, evtName, evtId);
+          });
+      }
+    } catch (runTMErr) {
+      Logger.logError('Error in runTM', runTMErr);
+      Reporter.reportError('m::runTM', runTMErr);
+    }
+  }
+
+  static _fireTM(
+    envName: string,
+    envId: string,
+    evtName: string,
+    evtId: string
+  ): void {
+    if (DataStore.hasOneSSTTag() && DataStore.shouldFireSstForEvent(evtName)) {
+      Reporter.postSST(
+        DataStore.getDataElements(),
+        envName,
+        envId,
+        DataStore.getSSTDownStream(),
+        evtName,
+        evtId
+      ).catch((err: any) => {
+        Reporter.reportError('l::postSST', err);
+      });
+    }
+
+    DataStore.setTagManagerProcessing(false);
+    Utils.sleep(250).then(async () => {
+      try {
+        await this.checkAndFireTM();
+      } catch (err) {
+        Reporter.reportError('i::runTM', err);
+      }
+    });
+  }
+
+  static setCustomerInfo(customerInfo: AppCustomerInfo): void {
+    this.customerInfo = customerInfo;
+  }
+
+  static recordPageLoad(pageLoadInfo: AppPageLoad): void {
+    pageLoadInfo.is_entry = this.firstAppLaunch ? 1 : 0;
+    if (this.customerInfo) {
+      const newPayload: MapLike = {
+        ...pageLoadInfo,
+        ...this.customerInfo,
+      };
+      this.dl.pushEvent('page_load', newPayload);
+    } else {
+      this.dl.pushEvent('page_load', pageLoadInfo);
+    }
+    this.firstAppLaunch = false;
+  }
+}
+
+export const MagicPixelEventBus = EventBus;
+export const MagicPixel = MagicPixelImpl;

package/src/models/mp-client-sdk.ts

@@ -0,0 +1,174 @@
+import type { MapLike } from '../common/app-types';
+
+export interface ClientSdkDeItem {
+  nm: string;
+  typ: string;
+  key?: string;
+  def?: any;
+  cl?: boolean;
+  lwcase?: boolean;
+  fn?: (deHelper: any, input: any) => any;
+  isAsync?: boolean;
+  fnTOut?: number;
+}
+
+export enum ParamResourceEncodingType {
+  URL_ENC = 'URL_ENC',
+  BASE64 = 'BASE64',
+}
+
+export enum ParamResourceHashType {
+  SHA256 = 'SHA256',
+  SHA512 = 'SHA512',
+}
+
+export enum ParamResourceValSrc {
+  STATIC = 'STATIC',
+  DE = 'DE',
+  TRANS_FUNC = 'TRANS_FUNC',
+  CHILDREN = 'CHILDREN',
+  TG_JSON_PATH = 'TG_JSON_PATH',
+}
+
+export interface SdkParamEncodingTransformer {
+  nm: string;
+  eTyp: 'URL_ENC' | 'BASE64';
+  o?: number;
+}
+
+export interface SdkParamHashingTransformer {
+  nm: string;
+  hTyp: ParamResourceHashType;
+  o?: number;
+}
+
+export interface SdkParamIgnoreEmptyTransformer {
+  nm: string;
+  igEmpty: boolean;
+  o?: number; // order
+}
+
+export type TFType = (
+  | SdkParamHashingTransformer
+  | SdkParamEncodingTransformer
+  | SdkParamIgnoreEmptyTransformer
+)[];
+
+export interface ClientSdkParamItem {
+  id: string; // id
+  nm: string; // name
+  rqd?: boolean; // is mandatory
+  tf?: TFType; // transformation array
+  prLvl?: boolean; // is provider level attribute
+  pId?: string; // parent id
+  sv?: string; // static value
+  de?: string; // data element id
+  tfId?: string; // transformation function id
+  children?: ClientSdkParamItem[];
+  exclude_from_req_body?: boolean;
+  fKey: string; // flat key
+  val_src: string;
+}
+
+export interface ClientSdkQcCondition {
+  param: string; // param name
+  i?: string[]; // include conditions
+  e?: string[]; // exclude conditions
+  i_ect: boolean; // is exact match for include
+  i_cs?: boolean; // is case-sensitive for include
+  e_ect?: boolean; // is exact match for exclude
+  e_cs?: boolean; // is case-sensitive for exclude
+}
+
+export interface ClientSdkPrItem {
+  nm: string;
+  url?: string; // base url
+  typ: string; // js or img provider
+  sTyp: string; // r or i sub type
+  rParams?: MapLike<ClientSdkParamItem>; // parameters
+  hrs?: MapLike<string>; // headers
+  ext?: string; // sdk extras joined into a string
+  src?: string; // src of the sdk
+  sync?: boolean; // should be loaded sync or async
+  pr: string; // whitelisted or black listed
+  chld?: boolean; // has at least one parameter whose val_src is CHILDREN
+}
+
+export interface ClientSdkTfnItem {
+  nm: string; // name
+  fn: (input: any) => any; // js function in case this is a jsv data element
+  rParams: MapLike<ClientSdkParamItem>; // parameters
+}
+
+export interface ClientSdkQcItem {
+  nm: string;
+  id: string;
+  c: ClientSdkQcCondition[];
+}
+
+export interface ClientSdkTagItem {
+  nm: string; // name
+  p: string; // provider id
+  url: string; // tag url
+  rParams?: MapLike<ClientSdkParamItem>;
+  st: number; // start time - in epoch seconds
+  ex: number; // expiry time - in epoch seconds
+  qc: string[];
+  img?: boolean; // is image tag
+  wrk?: boolean; // is web worker compatible
+  chld?: boolean; // has at least one parameter whose val_src is CHILDREN
+}
+
+export interface ClientSdkSettingsItem {
+  dbg: boolean; // debug_enabled
+  err: boolean; // error_enabled
+  c_dom: string; // default cookie domain
+  v_dur: number; // visit duration
+  c_url: string; // collector_url
+  bare_c_url?: string; // bare collector url - transient variable
+  wh_idl?: string[]; // list of whitelisted idl events
+  wh_domains?: string[]; // list of white listed domains
+  c_url_lkp?: MapLike<{ v: string; ig: boolean; ect: boolean }>; // collector url look up
+  v_id: string; // vendor_id
+  p_id: string; // project_id
+  ev: string; // environment
+  ev_id: string; // environment id
+  dly: number; // trigger_delay
+  sst: boolean; // should enable server side. this will be set to true if there is atleast one sever side tag defined
+  idl: boolean; // should enable ID Link service. this will be set to true if the vendor has ID Link enabled
+  c_typ?: string; // the type of CSP, example nonce.
+  c_src?: string; // the source of CSP, example meta_tag for nonce type.
+  c_key?: string; // the data for CSP.
+  v: string; // core sdk version
+  bld_dt: string; // sdk build date and time from MP - this is not for the core sdk
+  p_view?: boolean; // should fire page info call or not to metrics
+  dws_c_t: 'j' | 'n'; // client side down stream (j = java, n = node)
+  dws_s_t: 'j' | 'n'; // server side down stream (j = java, n = node)
+}
+
+export interface BaseResourceParamType {
+  id: string; // id of param
+  nm: string; // name
+  o?: number; // order
+  pId?: string; // parent id
+  children?: BaseResourceParamType[];
+}
+
+export interface MpClientSdk {
+  langKey: string; // language data element id
+  pcKey: string; // privacy compliance key
+  cDomKey?: string; // collector domain tfn key
+  domWListKey?: string; // domain white list tfn function
+  d: MapLike<ClientSdkDeItem>; // data element map
+  qc?: ClientSdkQcItem[]; // qualification criteria
+  t?: MapLike<ClientSdkTagItem>; // tag map
+  p?: MapLike<ClientSdkPrItem>; // provider map
+  tfn?: MapLike<ClientSdkTfnItem>; // list of transformation functions
+  s: ClientSdkSettingsItem; // settings data item
+  dtmE: string[]; // list of dtm direct call events magic pixel should be interested in
+  ctmE: string[]; // list of custom javascript event magic pixel should be interested in
+  mpDlE: string[]; // list of MagicPixel data layer event magic pixel should be interested in
+  sseDtmE: string[]; // list of server side dtm events that we should trigger sst tag
+  sseCtmE: string[]; // list of custom window events that we should trigger sst tag
+  sseMpDlE: string[]; // list of mp dl events that should trigger the sst tag
+}

package/src/processors/data-element.processor.ts

@@ -0,0 +1,249 @@
+/**
+ * Process data element of type url parameter
+ * @param de
+ */
+import { Utils } from '../common/utils';
+import type { DeJsvHelper, MapLike } from '../common/app-types';
+import type { ClientSdkDeItem } from '../models/mp-client-sdk';
+import { DataStore } from '../common/data-store';
+import { Logger } from '../common/logger';
+
+const deJsvTimeOutPromise = (ms = 2000): Promise<any> => {
+  return new Promise((_resolve, reject) => {
+    const id = setTimeout(() => {
+      clearTimeout(id);
+      reject('Timed out in ' + ms + 'ms.');
+    }, ms);
+  });
+};
+
+const dElemProcessors: MapLike<
+  (
+    helper: DeJsvHelper,
+    elem: ClientSdkDeItem,
+    eventData?: Record<string, any>
+  ) => any
+> = {
+  mpdl: (
+    helper: DeJsvHelper,
+    elem: ClientSdkDeItem,
+    eventData?: Record<string, any>
+  ): any => {
+    return processMpDl(helper, elem, eventData);
+  },
+  pg_os: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    // already browser is in lower case, so no need to do it again
+    return DataStore.getOperatingSystem();
+  },
+  visit_id: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getVisitId();
+  },
+  pg_dtype: (_helper: DeJsvHelper, _elem: ClientSdkDeItem): any => {
+    return DataStore.getDeviceType();
+  },
+  pg_random: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return Utils.getUniqueID();
+  },
+  pg_empty_val: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return '';
+  },
+  mp_dvc_id: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getDeviceId();
+  },
+  mp_vis_id: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getMpId();
+  },
+  mp_org_id: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getOrgId();
+  },
+  mp_c_sdk_v: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getCoreVersion();
+  },
+  mp_c_sdk_env: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    return DataStore.getMpEnv();
+  },
+  pg_mp_dl_evt_id: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    _elem.key = 'ev._id';
+    return processMpDl(_helper, _elem, _eventData);
+  },
+  pg_mp_dl_evt_ts: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    _elem.key = 'ev._tsMs';
+    return processMpDl(_helper, _elem, _eventData);
+  },
+  pg_mp_dl_evt_name: (
+    _helper: DeJsvHelper,
+    _elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): any => {
+    _elem.key = 'ev._eventName';
+    return processMpDl(_helper, _elem, _eventData);
+  },
+  jsv: async (
+    helper: DeJsvHelper,
+    elem: ClientSdkDeItem,
+    _eventData?: Record<string, any>
+  ): Promise<any> => {
+    try {
+      if (elem.fn) {
+        if (!elem.isAsync) {
+          return await elem.fn(helper, undefined);
+        } else {
+          return await Promise.race([
+            elem.fn(helper, undefined),
+            deJsvTimeOutPromise(elem.fnTOut || undefined),
+          ]);
+        }
+      } else {
+        return elem.def || undefined;
+      }
+    } catch (err) {
+      Logger.logError(err);
+      return elem.def || undefined;
+    }
+  },
+};
+
+function generalCleanAndEscape(
+  helper: DeJsvHelper,
+  de: ClientSdkDeItem,
+  val: any
+): string {
+  if (typeof de.fn === 'function') {
+    val = de.fn(helper, val);
+    return val;
+  } else {
+    if (typeof val === 'string') {
+      // clean
+      if (de.cl) {
+        val = val?.trim();
+        // see if it has a single quote or double quote, if so, escape it
+        if (val.indexOf(`'`) > -1) {
+          val = val.replace(/'/g, '');
+        }
+
+        if (val.indexOf(`"`) > -1) {
+          val = val.replace(/"/g, '');
+        }
+      }
+      if (de.lwcase) {
+        val = val?.toLowerCase();
+      }
+    }
+    return val;
+  }
+}
+
+function processMpDl(
+  helper: DeJsvHelper,
+  de: ClientSdkDeItem,
+  eventData?: Record<string, any>
+): any {
+  try {
+    if (de.key) {
+      if (eventData && typeof eventData[de.key] !== 'undefined') {
+        return generalCleanAndEscape(helper, de, eventData[de.key]);
+      }
+    }
+  } catch (err) {
+    Logger.logError('Error processing mp dl variable: ', err);
+  }
+  return generalCleanAndEscape(helper, de, de.def);
+}
+
+export class DataElementProcessor {
+  /**
+   * Process all the data elements at once, or if a set of keys are specified, processes only
+   * those keys and updates the dataElements object in global-fns file
+   * @param sdkDataElements
+   * @param eventData
+   * @param optDeKeys
+   */
+  static async processDataElements(
+    sdkDataElements: MapLike<ClientSdkDeItem>,
+    eventData?: Record<string, any>,
+    optDeKeys?: string[]
+  ): Promise<MapLike<any>> {
+    const de = DataStore.getDataElements();
+    const deKeys =
+      optDeKeys && optDeKeys.length > 0
+        ? optDeKeys
+        : Object.keys(sdkDataElements);
+
+    try {
+      const deHelper = DataStore.getDataElementHelpers();
+      for (const key of deKeys) {
+        try {
+          const deItem = sdkDataElements[key];
+          if (deItem) {
+            const invokeItem = dElemProcessors[deItem.typ];
+            if (dElemProcessors[deItem.typ]) {
+              Logger.logDbg('Processing data element: ', deItem.nm);
+              if (invokeItem) {
+                de[key] = await invokeItem(deHelper, deItem, eventData);
+              }
+            } else {
+              Logger.logError('No processor found for de typ: ', deItem.typ);
+            }
+          }
+        } catch (err) {
+          Logger.logError(
+            'Error processing data element: ',
+            key,
+            ' with error: ',
+            err
+          );
+        }
+      }
+    } catch (err) {
+      Logger.logError('Error processing data elements: ', err);
+    }
+
+    DataStore.setDataElements(de);
+    Logger.logDbg('Data Elements: ', de);
+    return de;
+  }
+}