Vue-sdk-react-native NPM

Overview

VueSDK is a library/SDK providing all the functions and utilities required to help you build and integrate all the recommendations and search offered by Vue.AI. To know about the detailed set of use cases available - please visit this link.

Quick Start Guide

1. Install Vue SDK

You will need your project token for initializing your library. You can get your project token from project settings.

Prerequisites

React Native v0.6+

Steps

Under your app's root directory, install vue-sdk-react-native.

npm install vue-sdk-react-native

Under your application's ios folder, run

pod install

2. Initialize Vue SDK

You must first initialize with your project token and Vue SDK base url. You can get your project token from project settings.

import { initialize } from 'vue-sdk-react-native';

const token = 'YOUR_TOKEN';
const baseUrl = 'GIVEN_VUE_SDK_BASE_URL';
const loggingEnabled = true; // set it as true if developer wants to see sdk logs

initialize({ token, baseUrl, loggingEnabled });

Once you've called this method once, you can access all Vue SDK functions throughout the rest of your application.

3. Discover Events

To ensure accurate and comprehensive event tracking, it is recommended to call the discoverEvents function before invoking the track function in your SDK integration. The discoverEvents function retrieves the essential information related to track events, such as event names, properties, and default properties. This step allows you to populate the necessary data and configure the event tracking accordingly.

import { useDiscoverEvents } from 'vue-sdk-react-native';

const {
  discoverEvents,
  discoverEventsResponse: { data, isLoading, error }
} = useDiscoverEvents();

// Discover events method
discoverEvents();

The discoverEventsResponse field returned by the useDiscoverEvents hook is an object containing the following properties:

data: The discover events data returned by the API. This property will be null initially and will be updated once the API call is completed successfully.

isLoading: A boolean value indicating whether the discover events data is currently being loaded from the API. It will be true while the API call is in progress, and false once the data is fetched or an error occurs.

error: An error object, if any, that occurred during the API call. This property will be null if there are no errors.

You can see the events list in console if you set loggingEnabled as true in initialize call.

4. Track Event

To track custom events using our SDK, you can utilize the track function. This function allows you to capture specific actions or interactions within your application and gather valuable data for analysis.

Here's an example of how to use the track function: You can send an event from anywhere in your application. useEvents hook contain track method.

import { useEvents } from 'vue-sdk-react-native';

// Track event method 
const { track } = useEvents();
const eventName = 'YOUR_CUSTOM_EVENT_NAME';
const requestParams = {
// Your request params
  YOUR_KEY: 'YOUR_VALUE'
};
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
const correlationId = 'YOUR_CORRELATION_ID';
track(eventName, requestParams, correlationId, sdkConfig);

The SDK automatically includes several properties when tracking events. These properties are essential for comprehensive event tracking and provide valuable insights into user interactions. Here are some of the properties that are automatically added by the SDK. By explicitly providing the SDK config parameter for the track function, the user can override the following values:

key	Description	Example Value
platform	Platform of the user	android or ios
medium	Medium from where requests are sent	application
referrer	same values as platform for mobile app	android or ios
url	Bundle id of the application	com.example.myapp

5. Get Recommendations

The getRecommendations function in the SDK allows you to retrieve recommendations based on specific search criteria and properties. This function provides a convenient way to fetch recommendations and receive the results asynchronously.

Let's get started by Recommendation methods. We have a useRecommendations hook and it contain three methods for getting Vue SDK recommendations and one object for getting results. They are getRecommendationsByStrategy, getRecommendationsByModule and getRecommendationsByPage. Results of these async methods are getting in the recommendations object.

import { useRecommendations } from 'vue-sdk-react-native';

const {
    getRecommendationsByStrategy,
    getRecommendationsByModule,
    getRecommendationsByPage,
    recommendations: { data, isLoading, error }
  } = useRecommendations();

1. Get Recommendations by Page

const requestParamsForPage = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const pageReference = 'YOUR_PAGE_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByModule(
  pageReference,
  requestParamsForPage,
  correlationId,
  sdkConfig
);

2. Get Recommendations by Module

const requestParamsForModule = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const moduleReference = 'YOUR_MODULE_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByModule(
  moduleReference,
  requestParamsForModule,
  correlationId,
  sdkConfig
);

3. Get Recommendations by Strategy

const requestParamsForStrategy = {
  param1: 'VALUE_1',
  param2: 'VALUE_2'
};
const strategyReference = 'YOUR_STRATEGY_NAME';
const correlationId = 'YOUR_CORRELATION_ID';
const sdkConfig = {
  platform: 'PLATFORM_VALUE',
  referrer: 'REFERRER_VALUE',
  url: 'URL_VALUE',
  medium: 'MEDIUM_VALUE'
};
getRecommendationsByStrategy(
  strategyReference,
  requestParamsForStrategy,
  correlationId,
  sdkConfig
);

The recommendations field returned by the useRecommendations hook is an object containing the following properties:

data: An object that holds the recommendations data returned by the API. It includes the following properties:

recommendationsByModule: An array of recommendations specific to modules.
recommendationsByPage: An array of recommendations specific to pages.
recommendationsByStrategy: An array of recommendations specific to strategies.

isLoading: An object representing the loading states for different recommendations. It includes the following properties:

isRecommendationsByModuleLoading: A boolean value indicating whether the recommendations by module are currently being loaded.
isRecommendationsByPageLoading: A boolean value indicating whether the recommendations by page are currently being loaded.
isRecommendationsByStrategyLoading: A boolean value indicating whether the recommendations by strategy are currently being loaded.

error: An object representing the errors that occurred during the API calls for different recommendations. It includes the following properties:

recommendationsByModuleError: An error object, if any, that occurred while fetching recommendations by module.
recommendationsByPageError: An error object, if any, that occurred while fetching recommendations by page.
recommendationsByStrategyError: An error object, if any, that occurred while fetching recommendations by strategy.

Here are some of the properties that are automatically added by the SDK. By explicitly providing the SDK config parameter for the getRecommendations function, the user can override the following values:

key	Description	Example Value
platform	Platform of the user	ios
medium	Medium from where requests are sent	application
referrer	same values as platform for mobile app	android or ios
url	Bundle id of the application	com.example.myapp

6. Set User

The setUser function in the SDK allows you to associate a user ID with subsequent API calls after the user has logged in. This user ID is used to track user-specific events and behaviors, providing personalized experiences and accurate analytics.

import { setUser } from 'vue-sdk-react-native';

const userId = 'YOUR_USER_ID';
setUser({ userId });

7. Reset User Profile

The resetUser function in the SDK allows you to clear the user information and reset the SDK state when the user logs out of your application. This ensures that any user-specific data and tracking are cleared and no longer associated with the user.

import { resetUser } from 'vue-sdk-react-native';

resetUser();

8. Set BloxUUID

The setBloxUUID function in the SDK allows you to set the blox UUID which is passed as argument for the getRecommendations and track functions. In the case where you do not set bloxUUID, the SDK internally generates a random UUID upon an SDK function call and will maintain the same value till setBloxUUID is called.

import { setBloxUUID } from 'vue-sdk-react-native';

const BLOX_UUID = 'SAMPLE_BLOX_UUID';

await setBloxUUID(BLOX_UUID);

9. Get BloxUUID

The getBloxUUID function in the SDK returns the blox UUID configured in the SDK.

import { getBloxUUID } from 'vue-sdk-react-native';

const bloxUuid = await getBloxUUID();
console.log('Blox UUID:', bloxUuid);

Complete Code Example

Here's a runnable code example that covers everything in this quickstart guide.

import React, { useEffect } from 'react';
import {
  Button,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  SafeAreaView,
  ActivityIndicator,
} from 'react-native';
import {
  initialize,
  setUser,
  useEvents,
  useRecommendations,
  getBloxUUID,
  setBloxUUID
} from 'vue-sdk-react-native';

function App(): JSX.Element {
  useEffect(() => {
    const token = 'YOUR_TOKEN';
    const baseUrl = 'GIVEN_VUE_SDK_BASE_URL';
    initialize({token, baseUrl, loggingEnabled: true});
    setUser({userId: 'YOUR_USER_ID'});
  }, []);

  const {
    recommendations: {
      data: {
        recommendationsByModule,
        recommendationsByPage,
        recommendationsByStrategy
      },
      isLoading: {
        isRecommendationsByModuleLoading,
        isRecommendationsByPageLoading,
        isRecommendationsByStrategyLoading
      }
    },
    getRecommendationsByStrategy,
    getRecommendationsByModule,
    getRecommendationsByPage,
  } = useRecommendations();

  const getRecommendations = () => {
    const strategyName = 'YOUR_STRATEGY_NAME';
    const requestParams = {
      // Your request params
      YOUR_KEY: 'YOUR_VALUE'
    };
    const correlationId = 'YOUR_CORRELATION_ID';
    const sdkConfig = {
      platform: 'PLATFORM_VALUE',
      referrer: 'REFERRER_VALUE',
      url: 'URL_VALUE',
      medium: 'MEDIUM_VALUE'
    };
    getRecommendationsByStrategy(
      strategyName,
      requestParams,
      correlationId,
      sdkConfig
    );
  };

  const { track } = useEvents();

  const trackEvent = () => {
    const eventName = 'YOUR_CUSTOM_EVENT_NAME';
    const requestParams = {
      // Your request params
      YOUR_KEY: 'YOUR_VALUE',
    };
    const correlationId = 'YOUR_CORRELATION_ID';
    const sdkConfig = {
      platform: 'PLATFORM_VALUE',
      referrer: 'REFERRER_VALUE',
      url: 'URL_VALUE',
      medium: 'MEDIUM_VALUE'
    };
    track(eventName, requestParams, correlationId, sdkConfig);
  };

  const getBloxUuid = async () => {
    const bloxUuid = await getBloxUUID();
    console.log('Blox UUID:', bloxUuid);
  };

  const setBloxUuid = async () => {
    const sampleBloxUuid = 'SAMPLE_BLOX_UUID';
    await setBloxUUID(sampleBloxUuid);
  };

  const renderRecommendationsByStrategy = () => {
    return (
      <ScrollView horizontal>
        {recommendationsByStrategy?.[0]?.data?.map((item: any) => (
          <View key={item?.Title} style={styles.productCard}>
            <View>
              <Image
                style={styles.productImage}
                source={{uri: item['Image Src']}}
              />
            </View>
            <View>
              <Text numberOfLines={2} style={styles.productCardTitle}>
                {item?.Title}
              </Text>
              <Text style={styles.productPrice}>{`${item['Variant Price']}$`}</Text>
            </View>
          </View>
        ))}
      </ScrollView>
    );
  };

  const renderLoader = () => {
    return (
      <View style={styles.loaderContainer}>
        <ActivityIndicator size={'large'} />
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.backgroundStyle}>
      {isRecommendationsByModuleLoading && renderLoader()}
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={styles.backgroundStyle}>
        <View>
          <Button
            color="blue"
            onPress={getRecommendations}
            title="Get Recommendations By Strategy"
          />
          <Button color="blue" onPress={trackEvent} title="Log Event" />
          <Button color="blue" onPress={getBloxUuid} title="Get blox uuid" />
          <Button color="blue" onPress={setBloxUuid} title="Set blox uuid" />
          {renderRecommendationsByStrategy()}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  backgroundStyle: {
    flex: 1,
  },
  productCard: {
    padding: 10,
    margin: 5,
    backgroundColor: '#D2E9E9',
    borderRadius: 5,
    width: 170,
  },
  productCardTitle: {
    color: '#545B77',
    fontWeight: '700',
    paddingTop: 8,
  },
  productPrice: {
    color: '#545B77',
    fontWeight: '400',
    paddingTop: 4,
  },
  productImage: {
    width: 150,
    height: 200,
    borderRadius: 3,
  },
  loaderContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 2,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
});

export default App;