ExposeBox React Native Bridge Wrapper

Documentation for integrating the ExposeBox react native bridge in your react app

Table of contents

• General info
• Setup
• Usage
• Technologies

General info

Supports Android & iOS

Setup

To run this project, install it locally using npm:

$ npx react-native install exposebox-sdk-react-native-bridge

Usage

First, initialise the library in your Application's onCreate:

ExposeBox.init("companyId", "appId");

companyId is your company's ID, appId is your app's ID, both provided by ExposeBox.

As shown above, you can set your GDPR, CCPA, and/or COPPA compliance settings according to your needs. You can find more details in the Compliance section below.

Then you can use ExposeBox across your app. Examples:

Custom events

You can send custom events with data.

var event = {
            "eventName":"Event With Segment",
            "eventCount":1
            };

ExposeBox.sendEvent("eventName", event);

Where eventName is the event name that will appear on your dashboard, and data is a Map with your custom event data

Track a page view

Implement this in every screen view

ExposeBox.sendPageView("special offers");

Set product(s)

ExposeBox.setProducts(["e349vb", "x980tmw"]);

In case of a single product, you can provide an array with a single element

Set a tag

Adding segmentation tags enables you to tag any user visiting any page on your site into various customized segments from which you can later assemble audiences. The Audiences will be used for running campaigns for sponsored products.

You can add key - value tags, which can be either Strings...

ExposeBox.setTags("specialPage", "Limited time sale", null);

...or a list of strings

ExposeBox.setTags("cars", null, ["Limited time sale", "Volvo", "Mazda"]);

Customer Details

Setting customer details enables ExposeBox send automated emails and synchronise offline data with online data.

Use this when the customer is logged in and the data is available.

First, create the CustomerData object using its Builder:

var customerData = {
    "email" : "",
    "advertiserId" : "",
    "firstName" : "",
    "lastName" : "",
    "address1" : "",
    "address2" : "",
    "city" : "",
    "country" : "",
    "state" : "",
    "zipCode" : "",
    "phone": ""
};

Other fields like city, zip code, address, phone, etc are available.

Then send it through ExposeBox

ExposeBox.setCustomerData(customerData)

Adding to and removing from the cart

Use this when your customer is adding or removing items from the cart

where productId is your product's SKU.

You should include the number of items added to your cart and unit price (after discount)

ExposeBox.addToCart(productId, quantity, unitPrice);

ExposeBox.addToCart("productId", 1, 1.00);

ExposeBox.removeFromCart(productId, quantity);

ExposeBox.removeFromCart("productId", 1);

Adding to and removing from a wishlist

Similarly, the user may add or remove products from their wishlist. ExposeBox can track it as follows:

ExposeBox.addToWishlist("productId");

and

ExposeBox.removeFromWishlist("productId");

Fetching product recommendations

After you set up your placements in the ExposeBox dashboard, you can get product recommendations for those placements. Provide placement IDs in a string array, like in the example below for placements mainPagePlacement and checkoutPlacement. The response will contain a List of ExposeBoxPlacements

ExposeBox.getProductRecommendations(["mainPagePlacement"], function(data) {
      console.log("Products: " + data);
});

An ExposeBoxPlacement will contain a number of products which correspond to the placement ID you set up.

When those products are clicked, let the SDK know about it like this

ExposeBox.onRecommendationClicked(product)

Where product is an ExposeBoxProduct from the placement

Conversions/Orders

Notifies ExposeBox that a conversion was made. This should be sent when a conversion event has occurred (e.g. a “thank you” page after checkout)

First, create the cart products that were in the order

var products = [
    {
    "productId" : "", 
    "quantity" : 1, 
    "unitPrice" : 1.00
    },
    {
    "productId" : "", 
    "quantity" : 1, 
    "unitPrice" : 1.00
    }];

...and finally, send it through ExposeBox

ExposeBox.sendConversion(orderId, products, totalPrice);

Technologies