0.0.2 • Published 3 months ago

@zitharatechnologies/zithara-analytics-react-native v0.0.2

Weekly downloads
-
License
-
Repository
-
Last release
3 months ago

Zithara Analytics (React Native)

Installation

# with npm:

npm i @zitharatechnologies/zithara-analytics-react-native

Requirements

ZitharaAnalytics depends on react-native-geolocation-service and react-native-device-info for it's optimal functioning.

# with npm:

npm i react-native-geolocation-service
npm i react-native-device-info

Usage

You need to create a ZitharaAnalytics instance within your project with your specific details and wrap your app with the ZitharaAnalyticsProvider of this package.

The useAnalytics hook exposes all methods you can use for tracking.

import React, { useEffect } from 'react';
import ZitharaAnalyticsTracker, { ZitharaAnalyticsProvider } from 'zithara-analytics-react-native';

const MainAppContainer = () => {
  return (
    <View>Main App</View>
  );
};

/**
InstanceProps {
  base_url: string;
  authorization: string;
  secrets: string;
  user: UserInfo;
  disabled?: boolean;
  log?: boolean;
}

UserInfo {
  user_id: string;
  fcm_token?: string;
  username?: string;
  mobile?: number;
  email?: string;
  gender?: string;
}
**/

export const App = () => {
  const instance = new ZitharaAnalyticsTracker({
    base_url: 'https://somedummyurl.in/track', // required
    log: true, // enables or disables logging
    authorization: "cc_example",
    secrets: "LMNOPQRSTUVWXYZa";
    disabled:false, // optional, false by default.
    user: {
      user_id: '1234567890', // unique userID
      username: 'za_user',
      mobile: 9876543210, // user's mobile number
      email: 'za.user@gmail.com',
      gender: 'male', // user's gender
      fcm_token: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // optional
    },
  });

  return (
    <ZitharaAnalyticsProvider instance={instance}>
      <MainAppContainer />
    </ZitharaAnalyticsProvider>
  );
}:

Instance

You must provide baseUrl to create an instance.

ParamDescription
base_url(required) POST end-point url.
authorization(required) Unique ID of the project
secrets(required) key for the validation of the project
disabledDisables all tracking operations if set to true.
logEnables some logs if set to true.
userTakes in all user details, such as user_id(required),username,fcm_token,mobile,email,gender

Methods

The following methods are available with the useAnalytics hook.

trackScreenView({ name })

Tracks screen view as action with prefixed 'Screen' category: Screen / ${name}

trackScreenView({name: 'Home'});

trackAction({ name })

Tracks simple actions

trackAction({name: 'login'});

trackEvent({ category, action, name, value })

Tracks custom events

/**
 Event {
  category: string;
  action: string;
  name?: string;
  value?: number;
}
**/

trackEvent({
   category: 'cc_home',
   action: 'cc_offer_view',
});

trackSearch({ keyword, category })

Tracks search within the app

/**
Search {
  keyword: string;
  category?: string;
}
**/

trackSearch({keyword: 't-shirts'});

trackLink({ link })

Tracks outgoing links to other sites/apps

/**
Link {
  link: string;
}
**/

trackLink({link: 'www.google.com'});

trackDownload({ download })

Tracks downloads

/**
Download {
  download: string;
  url?: string;
}
**/

trackDownload({download: 'invoice'});

trackViewContent({ sku, productName, productCategory })

Track Product views in the app

/**
EcommerceItem {
  sku: string;
  product_name: string;
  product_category: string;
  product_variant?: string;
  product_brand?: string;
  price?: number;
  quantity?: number;
}
**/

trackViewContent({
   sku: '12345678',
   product_name: 't-shirt',
   product_category: "Men's wear",
   price: 499,
});

trackAddToCart({ value, items })

Tracks items getting added to cart

/**
ProductInteraction {
  value: number;
  items: EcommerceItem[];
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

 trackAddToCart({
   value: 999,
   items: products,
  });

trackRemoveFromCart({ value, items })

Tracks items getting removed from cart

/**
ProductInteraction {
  value: number;
  items: EcommerceItem[];
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

 trackRemoveFromCart({
    value: 499,
    items: [products[0]],
  });

trackViewCart()

Track Customer Cart Views in the App

trackViewCart();

trackAddToWishlist({ value, items })

Track Customer adding items to wishlist

/**
ProductInteraction {
  value: number;
  items: EcommerceItem[];
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

 trackAddToWishlist({
      value: 999,
      items: products,
    });

trackRemoveFromWishlist({ value, items })

Track Customer remving items from wishlist

/**
ProductInteraction {
  value: number;
  items: EcommerceItem[];
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

 trackRemoveFromWishlist({
      value: 500,
      items: [products[1]],
  });

trackCheckoutItem({ items, offerId, offerName, coupon, value })

Track when customer checkout items

/**
CheckoutItem {
  items: EcommerceItem[];
  offer_id?: string;
  offer_name?: string;
  coupon?: string;
  value?: number;
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

trackCheckoutItem({
      items: products,
      value: 999,
      offer_id: 'cc_101',
      offer_name: 'cc_discount',
      coupon: 'cc_50',
 });

trackPaymentInfo({ items, offerId, offerName, coupon, value, paymentType })

Track payment info

/**
PaymentInfo {
  items: EcommerceItem[];
  offer_id?: string;
  offer_name?: string;
  coupon?: string;
  value?: number;
  payment_type: string;
}
**/

 const products = [
    {
      sku: '12345678',
      product_name: 't-shirt',
      product_category: "Men's wear",
      product_variant: 'blue',
      product_brand: 'Netplay',
      price: 500,
      quantity: 1,
    },
    {
      sku: '01234567',
      product_name: 'Shirt',
      product_category: "Men's wear",
      product_variant: 'Dark-green',
      product_brand: 'Netplay',
      price: 499,
      quantity: 1,
    },
  ];

  trackPaymentInfo({
     items: products,
     value: 999,
     offer_id: 'cc_101',
     offer_name: 'cc_discount',
     coupon: 'cc_50',
     payment_type: 'cod',
   });

trackOrderConfirmed()

trackOrderConfirmed();

Track order confirmation

trackAdView({ adId, adName })

/**
Ad {
  ad_id: string;
  ad_name?: string;
}
**/

trackAdView({ad_id: 'cc_101'});

Track customer viewing Ad within the app

trackAdClose({ adId, adName })

Track customer closing the Ad

/**
Ad {
  ad_id: string;
  ad_name?: string;
}
**/

trackAdClose({ad_id: 'cc_101'});

trackAdInteraction({ adId, adName })

Track customer interaction with the Ad

/**
Ad {
  ad_id: string;
  ad_name?: string;
}
**/

trackAdInteraction({ad_id: 'cc_101'});
react-native-device-inforeact-native-geolocation-service
0.0.2

3 months ago

0.0.1

3 months ago