mapp-intelligence-reactnative-plugin 1.0.0

package/src/Converters.tsx

@@ -0,0 +1,219 @@
+import type {
+  CampaignParameters,
+  EcommerceParameters,
+  EventParameters,
+  MediaEvent,
+  MediaParameteres,
+  PageParameters,
+  SessionParameters,
+  UserCategories,
+} from './DataTypes';
+
+//MARK: methods for converting objects
+export function convertUserCategories(userCategories?: UserCategories | null) {
+  if (userCategories == null) {
+    return null;
+  }
+  console.log('convertUserCategories');
+  const birthday = userCategories?.birthday;
+  const categories = userCategories?.customCategories;
+
+  const userCategorisesDict: Object = {
+    birthday:
+      birthday != null
+        ? { day: birthday.day, month: birthday.month, year: birthday.year }
+        : null,
+    city: userCategories?.city,
+    country: userCategories?.country,
+    emailAddress: userCategories?.emailAddress,
+    emailReceiverId: userCategories?.emailReceiverId,
+    firstName: userCategories?.firstName,
+    gender: userCategories?.gender,
+    customerId: userCategories?.customerId,
+    lastName: userCategories?.lastName,
+    newsletterSubscribed: userCategories?.newsletterSubscribed,
+    phoneNumber: userCategories?.phoneNumber,
+    street: userCategories?.street,
+    streetNumber: userCategories?.streetNumber,
+    zipCode: userCategories?.zipCode,
+    customCategories:
+      categories != null ? Object.fromEntries(categories.entries()) : null,
+  };
+  return userCategorisesDict;
+}
+
+export function convertPageParameters(
+  pageParameters?: PageParameters | null
+): Object | null {
+  console.log('convertPageParameters');
+  if (pageParameters == null) {
+    return null;
+  }
+
+  const params = pageParameters?.params;
+  const cat = pageParameters?.categories;
+
+  const page: Object = {
+    params: params != null ? Object.fromEntries(params.entries()) : {},
+    categories: cat != null ? Object.fromEntries(cat) : {},
+    searchTerm: pageParameters?.searchTerm,
+  };
+
+  return page;
+}
+
+export function convertSessionParamters(
+  sessionParamaters?: SessionParameters | null
+): Object | null {
+  console.log('convertSessionParamters');
+  if (sessionParamaters == null) {
+    return null;
+  }
+  const data = sessionParamaters?.parameters;
+  return data != null ? Object.fromEntries(data.entries()) : {};
+}
+
+export function convertEcommerceParameters(
+  ecommerceParameters?: EcommerceParameters | null
+): Object | null {
+  console.log('convertEcommerceParameters');
+  if (ecommerceParameters == null) {
+    return null;
+  }
+
+  let products: Object[] = [];
+  ecommerceParameters.products?.map((item) => {
+    let categories = item.categories;
+    let ecommercParams = item.ecommerceParameters;
+    products.push({
+      name: item?.name,
+      cost: item.cost,
+      quantity: item.quantity,
+      productAdvertiseID: item.productAdvertiseID,
+      productSoldOut: item.productSoldOut,
+      productVariant: item.productVariant,
+      categories:
+        categories != null ? Object.fromEntries(categories.entries()) : {},
+      ecommerceParameters:
+        ecommercParams != null
+          ? Object.fromEntries(ecommercParams.entries())
+          : {},
+    });
+  });
+
+  const customParams = ecommerceParameters.customParameters;
+
+  const ecommerce: Object = {
+    products: products,
+    status: ecommerceParameters.status,
+    currency: ecommerceParameters.currency,
+    orderID: ecommerceParameters.orderID,
+    orderValue: ecommerceParameters.orderValue,
+    returningOrNewCustomer: ecommerceParameters.returningOrNewCustomer,
+    returnValue: ecommerceParameters.returnValue,
+    cancellationValue: ecommerceParameters.cancellationValue,
+    couponValue: ecommerceParameters.couponValue,
+    paymentMethod: ecommerceParameters.paymentMethod,
+    shippingServiceProvider: ecommerceParameters.shippingServiceProvider,
+    shippingSpeed: ecommerceParameters.shippingSpeed,
+    shippingCost: ecommerceParameters.shippingCost,
+    markUp: ecommerceParameters.markUp,
+    orderStatus: ecommerceParameters.orderStatus,
+    customParameters:
+      customParams != null ? Object.fromEntries(customParams.entries()) : {},
+  };
+
+  return ecommerce;
+}
+
+export function convertCampaignParameters(
+  campaignParameters?: CampaignParameters | null
+): Object | null {
+  console.log('convertCapaignParameters');
+  if (campaignParameters == null) {
+    return null;
+  }
+
+  const params = campaignParameters?.customParameters;
+
+  const campaign: Object = {
+    campaignId: campaignParameters?.campaignId,
+    action: campaignParameters?.action,
+    mediaCode: campaignParameters?.mediaCode,
+    oncePerSession: campaignParameters?.oncePerSession,
+    customParameters:
+      params != null ? Object.fromEntries(params.entries()) : {},
+  };
+  return campaign;
+}
+
+export function convertEventParameters(
+  event?: EventParameters | null
+): Object | null {
+  if (event == null) {
+    return null;
+  }
+
+  const customParams =
+    event.customParameters != null
+      ? Object.fromEntries(event.customParameters?.entries())
+      : null;
+
+  const eventParams: Object = {
+    customParameters: customParams,
+  };
+
+  return eventParams;
+}
+
+export function convertMediaParameters(
+  mediaParam?: MediaParameteres | null
+): Object | null {
+  if (mediaParam == null) {
+    return null;
+  }
+
+  const params: Object = {
+    name: mediaParam?.name,
+    action: mediaParam?.action,
+    position: mediaParam?.position,
+    duration: mediaParam?.duration,
+    bandwith: mediaParam?.bandwith,
+    soundIsMuted: mediaParam?.soundIsMuted,
+    soundVolume: mediaParam?.soundVolume,
+    customCategories:
+      mediaParam?.customCategories != null
+        ? Object.fromEntries(mediaParam.customCategories?.entries())
+        : null,
+  };
+
+  return params;
+}
+
+export function convertMediaEvent(
+  mediaEvent?: MediaEvent | null
+): Object | null {
+  if (mediaEvent == null) {
+    return null;
+  }
+
+  const custom =
+    mediaEvent.customParameters != null
+      ? Object.fromEntries(mediaEvent?.customParameters?.entries())
+      : null;
+  const eCommerce = convertEcommerceParameters(mediaEvent.eCommerceParameters);
+  const session = convertSessionParamters(mediaEvent.sessionParameters);
+  const event = convertEventParameters(mediaEvent.eventParameters);
+  const mediaParams = convertMediaParameters(mediaEvent.parameters);
+
+  const data: Object = {
+    pageName: mediaEvent.pageName,
+    parameters: mediaParams,
+    eventParameters: event,
+    sessionParameters: session,
+    eCommerceParameters: eCommerce,
+    customParameters: custom,
+  };
+
+  return data;
+}

package/src/DataTypes.tsx

@@ -0,0 +1,168 @@
+interface PartialPageParameters {
+  searchTerm?: string | null;
+  params?: Map<number, string> | null;
+  categories?: Map<number, string> | null;
+}
+export type PageParameters = Required<PartialPageParameters>;
+
+interface PartialBirthday {
+  day: number;
+  month: number;
+  year: number;
+}
+export type MIBirthday = Required<PartialBirthday>;
+
+export enum MIGender {
+  unknown = 1,
+  male = 2,
+  female = 3,
+}
+
+interface PartialUserCategoris {
+  birthday?: MIBirthday | null;
+  city?: string | null;
+  country?: string | null;
+  emailAddress?: string | null;
+  emailReceiverId?: string | null;
+  firstName?: string | null;
+  gender?: MIGender | MIGender.unknown;
+  customerId?: string | null;
+  lastName?: string | null;
+  newsletterSubscribed?: boolean | null;
+  phoneNumber?: string | null;
+  street?: string | null;
+  streetNumber?: string | null;
+  zipCode?: string | null | undefined;
+  customCategories?: Map<number, string> | null;
+}
+
+export type UserCategories = PartialUserCategoris;
+
+interface ParticularEcommerceParameters {
+  products?: MIProduct[] | null;
+  status?: MIStatus | null;
+  currency?: string | null;
+  orderID?: string | null;
+  orderValue?: number | null;
+  returningOrNewCustomer?: string | null;
+  returnValue?: number | null;
+  cancellationValue?: number | null;
+  couponValue?: number | null;
+  paymentMethod?: string | null;
+  shippingServiceProvider?: string | null;
+  shippingSpeed?: string | null;
+  shippingCost?: number | null;
+  markUp?: number | null;
+  orderStatus?: string | null;
+  customParameters?: Map<number, string> | null;
+}
+export type EcommerceParameters = Required<ParticularEcommerceParameters>;
+
+export interface MIProduct {
+  name?: string | null;
+  cost?: number | null;
+  quantity?: number | null;
+  productAdvertiseID?: number | null;
+  productSoldOut?: boolean | null;
+  productVariant?: string | null;
+  categories?: Map<number, string> | null;
+  ecommerceParameters?: Map<string, string> | null;
+}
+
+export enum MIStatus {
+  noneStatus = 0,
+  addedToBasket = 1,
+  purchased = 2,
+  viewed = 3,
+  deletedFromBasket = 4,
+  addedToWishlist = 5,
+  deletedFromWishlist = 6,
+  checkout = 7,
+}
+
+export enum MIAction {
+  click = 1,
+  view = 2,
+}
+
+interface ParticularCampaignParameters {
+  campaignId?: string | null;
+  action?: MIAction | null;
+  mediaCode?: string | null;
+  oncePerSession?: boolean | null;
+  customParameters?: Map<number, string> | null;
+}
+export type CampaignParameters = Required<ParticularCampaignParameters>;
+
+interface ParticularSessionParameters {
+  parameters?: Map<number, string> | null;
+}
+export type SessionParameters = Required<ParticularSessionParameters>;
+
+export interface EventParameters {
+  customParameters: Map<number, string>;
+}
+
+export enum MediaParam {
+  media_category = 'mg',
+  media_action = 'mk',
+  media_position = 'mt1',
+  media_duration = 'mt2',
+  bandwidth = 'bw',
+  volume = 'vol',
+  mute = 'mut',
+  name = 'mi',
+}
+
+export interface MediaParameteres {
+  name: string;
+  action: string;
+  position: number;
+  duration: number;
+  bandwith?: number | null;
+  soundIsMuted?: boolean | null;
+  soundVolume?: number | null;
+  customCategories: Map<number, string> | null;
+}
+
+export interface MediaEvent {
+  pageName: string;
+  parameters: MediaParameteres | null;
+  eventParameters?: EventParameters | null;
+  sessionParameters?: SessionParameters | null;
+  eCommerceParameters?: EcommerceParameters | null;
+  customParameters?: Map<number, string> | null;
+}
+
+export enum ExceptionType {
+  none = 0,
+  uncaught = 1,
+  caught = 2,
+  custom = 3,
+  all = 4,
+  uncaught_and_custom = 5,
+  uncaught_and_caught = 6,
+  custom_and_caught = 7,
+}
+
+export enum MediaAction {
+  init = 'init',
+  play = 'play',
+  pause = 'pause',
+  stop = 'stop',
+  seek = 'seek',
+  pos = 'pos',
+  eof = 'eof',
+}
+
+export enum LogLevel {
+  all = 1, // All logs of the above.
+  debug = 2, // The lowest priority that you would normally log, and purely
+  // informational in nature.
+  warning = 3, // Something is missing and might fail if not corrected
+  error = 4, // Something has failed.
+  fault = 5, // A failure in a key system.
+  info = 6, // Informational logs for updating configuration or migrating from
+  // older versions of the library.
+  none = 7, // None of the logs.
+}

package/src/GlobalErrorHandler.tsx

@@ -0,0 +1,58 @@
+import { trackException } from './index';
+// import {
+//   getUnhandledPromiseRejectionTracker,
+//   setUnhandledPromiseRejectionTracker,
+// } from './promiseRejectionHandler';
+const {
+  polyfillGlobal,
+} = require('react-native/Libraries/Utilities/PolyfillFunctions');
+const Promise = require('promise/setimmediate/es6-extensions');
+const tracking = require('promise/setimmediate/rejection-tracking');
+
+export type GlobalErrorHandler = (
+  error: any,
+  isFatal: boolean | undefined
+) => void;
+
+var onErrorCallback: ((e: Error, isFatal: Boolean) => {}) | undefined | null =
+  null;
+
+const defaultErrorHandler: GlobalErrorHandler = (error, isFatal) => {
+  try {
+    trackException(error, error.stackTrace);
+    console.log('GLOBAL ERROR HANDLER: ', isFatal, error);
+  } catch (err) {
+    console.error(err);
+  } finally {
+    onErrorCallback?.(error, isFatal ?? false);
+  }
+};
+
+export const setGlobalErrorHandler = (
+  errorCallback?: ((e: Error, isFatal: Boolean) => {}) | undefined | null,
+  errorHandler: GlobalErrorHandler = defaultErrorHandler
+): void => {
+  onErrorCallback = errorCallback;
+
+  polyfillGlobal('Promise', () => {
+    tracking.enable({
+      allRejections: true,
+      onUnhandled: (_: number, error: unknown) => {
+        errorHandler(error, false);
+      },
+    });
+
+    return Promise;
+  });
+
+  ErrorUtils.setGlobalHandler(errorHandler);
+  //   const prevTracker = getUnhandledPromiseRejectionTracker();
+
+  //   setUnhandledPromiseRejectionTracker((id: any, error: any) => {
+  //     console.warn('Unhandled promise rejection!', id, error);
+  //     if (prevTracker !== undefined) {
+  //       //prevTracker(id, error);
+  //       errorHandler(error, false);
+  //     }
+  //   });
+};

package/src/UseWebTracking.tsx

@@ -0,0 +1,135 @@
+// useWebTracking.tsx
+import { useRef, useCallback } from 'react';
+import {
+  trackPageWithCustomData,
+  trackAction,
+  trackException,
+  getEverId,
+} from './index';
+//import * as MappIntelligencePlugin from 'react-native-mappinteligence-plugin';
+import type { WebViewMessageEvent } from 'react-native-webview';
+import { WebView } from 'react-native-webview';
+
+const runOnce = `
+        var meta = document.createElement('meta');
+        meta.setAttribute('name', 'viewport');
+        meta.setAttribute('content', 'width=device-width, height=device-height, initial-scale=0.85, maximum-scale=1.0, user-scalable=no');
+        document.getElementsByTagName('head')[0].appendChild(meta);
+        
+        window.WebtrekkAndroidWebViewCallback = {};
+
+        window.WebtrekkAndroidWebViewCallback.trackCustomPage = function(pageName,param){
+            window.ReactNativeWebView.postMessage(JSON.stringify({ 'method': 'trackCustomPage', 'name':pageName, 'params':param }));
+        }
+
+        window.WebtrekkAndroidWebViewCallback.trackCustomEvent = function(eventName, param){
+            window.ReactNativeWebView.postMessage(JSON.stringify({ 'method': 'trackCustomEvent', 'name':eventName, 'params':param }));
+        }
+
+        window.WebtrekkAndroidWebViewCallback.getEverId = function(){
+            window.ReactNativeWebView.postMessage(JSON.stringify({ 'method': 'getEverId', 'name':'webtrekkApplicationEverId', 'params': window.webtrekkApplicationEverId }));
+        }
+    `;
+const injectEverIdScript = `window.webtrekkApplicationEverId = '%everId%' ; true; `;
+
+type OnMessage = (data: any) => void;
+
+type OnLoad = () => void;
+
+const useWebTracking = (
+  onMessage?: OnMessage | null,
+  onLoad?: OnLoad | null
+) => {
+  const webViewRef = useRef<WebView>(null);
+
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      try {
+        const message = JSON.parse(event.nativeEvent.data);
+        const method = message.method;
+        const name = message.name;
+        const params = message.params;
+
+        console.log(method, name, params);
+
+        if (method === 'trackCustomPage') {
+          trackCustomPage(name, params);
+        } else if (method === 'trackCustomEvent') {
+          trackCustomEvent(name, params);
+        }
+      } catch (error) {
+        console.error('Error parsing message from WebView', error);
+      }
+      onMessage?.(event.nativeEvent.data);
+    },
+    [onMessage]
+  );
+
+  const trackCustomPage = (name: string, params: any) => {
+    try {
+      const parameters = getJson(params) ?? new Map();
+      console.log('Page Name: ', name, '; Params: ', parameters);
+      trackPageWithCustomData(name, parameters);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const trackCustomEvent = (name: string, params: any) => {
+    try {
+      const parameters = getJson(params);
+      console.log('Event Name: ', name, '; Params: ', parameters);
+      trackAction(name, parameters, null, null, null, null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getJson = (data?: any | null): any => {
+    try {
+      if (data) {
+        const json = JSON.parse(data);
+        return json;
+      }
+      return null;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const handleLoad = useCallback(() => {
+    getEverId()
+      .then((everId: string) => {
+        if (webViewRef.current) {
+          const scripts = injectEverIdScript.replace('%everId%', everId);
+          webViewRef.current.injectJavaScript(scripts);
+          console.log('Injected scripts: ', scripts);
+
+          setTimeout(() => {
+            webViewRef.current?.injectJavaScript(
+              `window.WebtrekkAndroidWebViewCallback.getEverId()`
+            );
+          }, 1000);
+        }
+      })
+      .catch((error: Error) => {
+        console.error(error);
+        trackException(error);
+      });
+
+    if (onLoad) {
+      onLoad();
+    }
+  }, []);
+
+  const getInjectedJavaScript = (script?: string | undefined | null) => {
+    if (script) {
+      return runOnce + '; true; ' + script;
+    }
+    return runOnce;
+  };
+
+  return { webViewRef, handleMessage, handleLoad, getInjectedJavaScript };
+};
+
+export default useWebTracking;

package/src/global.d.ts

@@ -0,0 +1,24 @@
+// src/global.d.ts
+declare global {
+  interface GlobalEventHandlersEventMap {
+    onunhandledrejection: PromiseRejectionEvent;
+  }
+
+  interface PromiseRejectionEvent extends Event {
+    promise: Promise<any>;
+    reason: any;
+  }
+
+  interface Global {
+    onununhandledrejection?: (event: PromiseRejectionEvent) => void;
+  }
+
+  const global: Global;
+}
+
+type Tracker = (id: number, error: unknown) => void;
+
+export function getUnhandledPromiseRejectionTracker(): Tracker | undefined;
+export function setUnhandledPromiseRejectionTracker(tracker: Tracker): void;
+
+export {};