skip-event-bridge

skip-event-bridge

Project that consolidates the tracking of all events monitored in the APP and on the Web.

Requirements:

1. Any Javascript based project 😃

Instalation

yarn add skip-event-bridge

or if you're using npm

npm install skip-event-bridge  --save

Lib initialization

// Error handler, if an exception occurs it will notify the developers and will prevent the application from stopping
import { BugsnagClient } from '@utils/Bugsnag';

// or 'skip-event-bridge/src/index' to check typescript types
import { EventSDK, MobileClevertap } from 'skip-event-bridge';

// The provider must be imported into the client application
import * as CleverTap from 'clevertap-react-native';

// Main instance of lib
const eventSDK = new EventSDK();

// The imported provider must be passed as a parameter to the strategy in which it was designed
eventSDK.addProvider(new MobileClevertap(CleverTap));

// If an exception occurs it will notify the developers and will prevent the application from stopping
eventSDK.addErrorHandler(() => BugsnagClient.notify);

export default eventSDK;

Setting user properties for the providers (Every provider have your specific methods)

eventSDK.tryOnUserLogin({ customer }, []);

Usage, Calling an event

First, import your created instance

import eventSDK from '@event-providers';

Then, call your event

 eventSDK.tryAppReviewed({ store: storeName, thumbs: 'up', body: null }, []);

OBS: First parameter is a payload, second parameter is the ID's of the provider you wan to send the event, optional. If empty, will be sended for all providers that implemented that event.

Instructions for improve this lib

How to test this library without install then on package.json and reflect all of your changes in real time.

In Web

In this repository clonned on your PC, run

$ yarn link 

In your project folder run this

$ yarn link skip-event-bridge 

In React Native

Your metro.config file probaly looks like this

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
};

Now, Just put extraNodeModules in resolver and add an new watchFolders

const path = require('path');

const extraNodeModules = {
  'skip-event-bridge': path.resolve(__dirname + '/../skip-event-bridge/'),
};

const watchFolders = [path.resolve(__dirname + '/../skip-event-bridge/')];

module.exports = {
  resolver: {
    extraNodeModules,
  },
  watchFolders,
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

👮🏿 BEFORE YOUR PROCEED 👮🏻

Events will be accepted only if it is documented HERE

All events have to be typed objects, you NEED to create the type of event in types.ts or your pull request will be dropped.

You need to implement an transform method to return your typed object event before send to your(s) provider(s)

Example in transforms.mobile.ts

// RETURN THE SAME TYPE OF types.ts
export const intoSkipListProduct = (skiplist: any, product: any): SkipListProduct => {
  const newProduct: Product = productDetailIntoProduct(product.fullProduct || product);

  // Previous type created in types.ts
  const productSkipList: SkipListProduct = {
    skip_list_id: skiplist.id,
    skip_list_name: skiplist.name,
    skip_list_url: skiplist.url,
    ...newProduct
  };

  return productSkipList;
};

How to create an new event

Add the interface for try send event in types.ts file with this parameters, folow these sample.

export interface EventSdk {
 // previous events
 tryYourNewEvent(payload: any, ids: Array<string>): void;
}

Then implement the interface provider in types.ts file with this parameters, folow these sample.

export interface Provider {
  // previous interfaces
  yourNewEvent?: ProviderMethod;
}

Implement the method declareted in the interface EventSdk in SkipEventSdk.ts

tryYourNewEvent(payload: any, ids: Array<string>): void {
  this.runAll('yourNewEvent', payload, ids);
}

Implement the method declareted in the interface interface Provider in EventActions.ts

/// create your type of object event in types.ts, follow the SkipList sample
yourNewEvent(sender: Function, skipList: SkipList): void {
  sender('Your New Event', makeTrustworthy(skipList));
}

Implement the object transform in MobileStrategy.ts

This event created in MobileStrategy.ts will be sent in all providers

  yourNewEvent(payload: any): void {
    // Payload is the pure object sent of web or mobile
    const { skiplist, product } = payload;

    // The transform returns the normalized prepared object to send to the providers
    const productSkipList = intoSkipListProduct(skiplist, product);

    this.action.yourNewEvent(this.addEvent.bind(this), productSkipList);
  }

If you want to create some specific treatments for a provider just create a new provider that extends MobileStrategy.ts and implements Provider

This event created in hypothetical MobileFirebaseStrategy.ts will be sent overrided to Firebase

export default class MobileFirebaseStrategy extends WebStrategy implements Provider {
  private provider: any;

  private action: EventAction;

  constructor(firebase: any) {
    super();
    this.action = new EventAction();
    this.provider = firebase;
  }

  /// overrided event sender for specific event name, this is just an example
  addEvent(eventName: string, payload: Record<string, any>): void {
    let newEventName = eventName.replace(/ /g,"_");
    this.provider.logEvent(newEventName, payload);
  }
  
  /// overrided event
  yourNewEvent(payload: any): void {
    // Payload is the pure object sent of web or mobile
    const { skiplist, product } = payload;

    // The transform returns the normalized prepared object to send to the providers
    const productSkipList = specificTransformForFirebase(skiplist, product);

    this.action.yourNewEvent(this.addEvent.bind(this), productSkipList);
  }

}

How to create an new Provider

In strategies folder, create your named provider, for example MobileClevertapStrategy.ts

Create a class with the name of provider, to your new provider be capable to send previous implemented events, these provider will inherit MobileStrategy, like this:

export default class MobileClevertapStrategy extends MobileStrategy implements Provider {

  constructor(clevertap: any) {
    // This is the full library of Clevertap sended by application
    super(clevertap);
  }

}

Now your are capable to create specific methods or events for this provider or override the default behaviour of an event, just folow the previous instructions to create an new event then:

   // Specific method for this provider
   private setFCMtoken(token: string): void {
    this.provider.setPushToken(token, 'FCM');
  }

  /// overrided event
  yourNewEvent(payload: any): void {
    // Payload is the pure object sent of web or mobile
    const { skiplist, product } = payload;

    // The transform returns the normalized prepared object to send to the providers
    const productSkipList = specificTransformForClevertap(skiplist, product);

    this.action.yourNewEvent(this.addEvent.bind(this), productSkipList);
  }

And, thats it! 🚀

Now your are capable to create your specific provider that send all previous events and are capable to override some behaviours.

Open your pull request and we will publish a newer version of this library