React-native-analytic_library NPM

react-native-analytic_library

Analytic SDK Library react-native

Installation

  npm install react-native-analytic_library

Usage

Initialize SDK

Initialize SDK before your AppRegistry.registerComponent

import { AnalyticSDK } from 'react-native-analytic_library';

// Inittialize SDK
const apiKey = 'xx-xx-xx-xx';
AnalyticSDK.initialize(apiKey);

// before this line
AppRegistry.registerComponent(appName, () => App);

Get analytic SDK instance

Analytic SDK instance

const analyticSDK = AnalyticSDK.getInstance();

Create User Session

Capture session for unique user
If you do not have authentication like login to defined your unique user, you can create random id, to defined it as user identifier.

const uniqueId = 'xx';

AnalyticSDK.getInstance().createSession({
  userId: uniqueId,
});

const user = useCurrentUser();

React.useEffect(() => {
  function createSession() {
    if (user === null) {
      return;
    }
    return AnalyticSDK.getInstance().createSession({
      userId: user.id,
    });
  }
  createSession();
}, [user]); // whenever user value changed, you will create session for this user

User Attribution

// set single user attribute/property
AnalyticSDK.getInstance().setUserProperty(
  'gender', // attribute name
  'male' // attribute value
);

// set multiple user attribtues/properties
AnalyticSDK.getInstance().setUserProperties({
  gender: 'male',
  age: 21,
});

Measure E-Commerce

View Catalog Event

AnalyticSDK.getInstance().viewCatalog({
  items: [
    {
      id: 'SKU_789',
      name: 'ankle_socks',
      price: 1.0,
    },
    {
      id: 'SKU_123',
      name: 'hand_socks',
      price: 2.0,
    },
  ],
  catalogName: 'Summer',
});

View Detail Item Event

AnalyticSDK.getInstance().viewDetailItem({
  item: {
    id: 'SKU_789',
    name: 'ankle_socks',
    price: 1.0,
  },
  currency: 'IDR',
});

Add Item to Cart Event

AnalyticSDK.getInstance().addItemToCartEvent({
  item: {
    id: 'SKU_789',
    name: 'ankle_socks',
    price: 1.0,
  },
  currency: 'IDR',
});

Remove Item from Cart Event

AnalyticSDK.getInstance().removeItemFromCartEvent({
  item: {
    id: 'SKU_789',
    name: 'ankle_socks',
    price: 1.0,
  },
  currency: 'IDR',
});

View Cart Event

AnalyticSDK.getInstance().viewCartEvent({
  cart: {
    items: [
      {
        product: {
          id: 'SKU_789',
          name: 'ankle_socks',
          price: 1.0,
        },
        quantity: 1,
      },
    ],
  },
  currency: 'IDR',
});

Begin Checkout Event

AnalyticSDK.getInstance().beginCheckoutEvent({
  cart: {
    items: [
      {
        product: {
          id: 'SKU_789',
          name: 'ankle_socks',
          price: 1.0,
        },
        quantity: 1,
      },
    ],
  },
  currency: 'IDR',
  coupon: 'SUMMERSALE',
});

Log Purchase Success event

AnalyticSDK.getInstance().purchaseSuccessEvent({
  cart: {
    items: [
      {
        product: {
          id: 'SKU_789',
          name: 'ankle_socks',
          price: 1.0,
        },
        quantity: 1,
      },
    ],
  },
  currency: 'IDR',
  coupon: 'SUMMERSALE',
  tax: 1, // tax value,
  transactionId: '19d9c402-fd69-44db-9aea-d22124e7e36f', // transaction identifier
  shipping: 2, // shipping value
});

Receive Product Recommendation Push Notification

On Application Active

To receive product recommendation when app being active, you can call setOnReceiveProductRecommendationNotification function in your component.

Example

React.useEffect(() => {
  const unsubscribe = AnalyticSDK.setOnReceiveProductRecommendationNotification(
    (message) => {
      showAlertMessage({ title: message.title, message: message.body });
    }
  );
  return unsubscribe;
}, []);

On Application at Background

To receive product recommendation when app at background, you can call setProductRecommendationBackgroundHandler before registering app component.

Example

AnalyticSDK.setProductRecommendationBackgroundHandler((message) => {
  console.log(message);
});
// Registering App component
AppRegistry.registerComponent(appName, () => App);