Prepare the SDK for data validation (React Native)

React Native is a cross-platform framework that lets you build iOS and Android applications using a shared codebase. To install Bazaarvoice Contextual Commerce on your React Native app, you will install, initialize, and configure the Contextual Commerce SDK to establish a connection between your app and Bazaarvoice. This article describes how to prepare the Contextual Commerce SDK to ensure basic functionality before proceeding with the full implementation.

In this phase, you will:

Include the SDK framework
Start the SDK using your site's configuration
Send page view and order data to Bazaarvoice
Send group assignment data to your analytics platform

Install the SDK

In this step, you will add the coco-react-native-sdk module to your React Native project so it can interact with the Granify SDK on your iOS and Android apps. This ensures the SDK is bundled into your app binary, linked correctly to each platform, and ready to be activated in the next step.

Add the React Native module
1. Copy the coco-react-native-sdk-X.X.X.tgz file into your project root
2. Run the following command, with your correct version numbers:
  Copy Code
  Bash (Unix Shell)
  npm install ./coco-react-native-sdk-X.X.X.tgz

iOS: Install the native Pod

Open your <PROJECT_ROOT>/ios/ directory

Add the following to Podfile:

Copy Code

Ruby

pod 'coco-react-native-sdk', :path => '../node_modules/coco-react-native-sdk'

In the same directory, remove existing pods and reinstall them with the new podfile:
Copy Code
Bash (Unix Shell)
rm -rf ./Pods && pod install

Android: Resolve duplicate-class conflicts

If you encounter the following build error:

Copy Code

Code

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugDuplicateClasses'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable
   > Duplicate class androidx.lifecycle.ViewModelLazy found in modules lifecycle-viewmodel-2.5.1.aar -> lifecycle-viewmodel-2.5.1-runtime (androidx.lifecycle:lifecycle-viewmodel:2.5.1) and lifecycle-viewmodel-ktx-2.3.1.aar -> jetified-lifecycle-viewmodel-ktx-2.3.1-runtime (androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1)
     Duplicate class androidx.lifecycle.ViewTreeViewModelKt found in modules lifecycle-viewmodel-2.5.1.aar -> lifecycle-viewmodel-2.5.1-runtime (androidx.lifecycle:lifecycle-viewmodel:2.5.1) and lifecycle-viewmodel-ktx-2.3.1.aar -> jetified-lifecycle-viewmodel-ktx-2.3.1-runtime (androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1)

Open your app-level build.gradle file

Add an exclude block to the android section:

Copy Code

Groovy

configurations {
    all {
      exclude group: 'androidx.lifecycle', module: 'lifecycle-runtime-ktx'
      exclude group: 'androidx.lifecycle', module: 'lifecycle-viewmodel-ktx'
    }
  }

Activate the SDK

The Contextual Commerce SDK stays inactive until you turn it on. This gives you the control to activate or disable Contextual Commerce without making any major code changes. In this step, you will collect the configuration details that define how the SDK should recognize your app and direct shoppers to the right screen. Then, pass that configuration to the SDK to activate it.

Caution: Do not call activate until you have set up your event listeners. Refer to the Set up the Group Assignment event handler topic following this section.

Collect required information

Before you can activate the SDK, collect the data points that define how the SDK recognizes and interacts with your app. These points are provided to Contextual Commerce using the activate(...) function.
- Site ID
  
  The unique identifier for your site within the Contextual Commerce system. To obtain your site's identifier, contact your account manager.
- Code version
  
  Your application's version string, for example 1.3.0 .
- Navigator (required for iOS apps)
  
  An implementation of the Navigator that the SDK uses to invoke in-app navigation.

Create a configuration object

Once you have collected the required information above, gather it into a configuration object. This object tells the SDK how your app is structured and how to handle navigation between screens.

The following is an example of a configuration object with placeholder values:

Copy Code

Code

let deepLinks = [
  DeepLink(pageType: .cart, link: URL(string: "com.mycompany.MyApp://cart")!),
  DeepLink(pageType: .product, linkFactory: { (params) in
      // do something to launch this page type
  }),
  ... // add links to all relevant page types
]
let config = GranifyConfiguration(forSite: SiteIdentifier(identifier: "AbXyZ")!,
                                  childSiteId: SiteIdentifier(identifier: "SdFgH")!,
                                  deepLinks: deepLinks)
    }
try? Granify.activateGranify(with: config)

Call the activate method

Activate the SDK by calling the activate method. For more information about the activate method, refer to the activate article.

Copy Code

Code

import { activate } from 'coco-react-native-sdk';

useEffect(() => {

activate("TstAp", packageJson.version, navigator)

}, []);

Set up the Group Assignment event handler

In this step, you will register an event handler that is triggered every time a shopper is assigned a group and then send the group assignment directly to your analytics platform without any modifications.

The Group Assignment event categorizes every shopper into one of two groups:

Test group
Shoppers who are eligible to receive campaigns
Control group
Shoppers who are not eligible to receive campaigns, and create a baseline for performance metrics

Subscribe to Group Assigned event

Call the subscribeGroupAssigned(groupAssignedListener:) method to register the callback that captures group assignment data. This notifies your app when Contextual Commerce assigns a shopper to a group.

Call the following subscribeGroupAssigned method before you call the SDK activation method:
Copy Code
Code
import { subscribeGroupAssigned } from 'coco-react-native-sdk'; useEffect(() => { subscribeGroupAssigned(groupAssignedListener); }, []);
Contextual Commerce publishes this event when it assigns a group to the current shopper, or when you provide one using the Group Assignment Provider. You must log this event in your analytics or metrics system so your financial team can verify Contextual Commerce reports and billing.

Refer to the subscribeGroupAssigned(...) topic for specific details.
Forward group assignment data to your analytics

Forward the raw group assignment data directly to your analytics platform without any modifications to ensure your performance metrics are based on unaltered data. Since every client's analytics setup can be unique, this step is intentionally flexible.
1. Identify your analytics platform and refer to their documentation to determine which method or API call they use to track events.
2. Within your callback function, insert the code that will forward the group assignment data to your analytics platform.
3. Test your integration to ensure group assignment data is correctly flowing into your analytics platform.

Implement basic tracking functionality

For Contextual Commerce to make accurate decisions and deliver the right messages at the right time, it must know exactly what the shopper is viewing as they move through your application and whether they are placing orders.

In this step, you will set up the following two methods that will enable basic tracking functionality needed to prepare your SDK setup for QA review:

trackPageView
Notifies Contextual Commerce every time the shopper navigates to a new page or view within your app
trackOrder
Captures every order shoppers successfully place which is essential for measuring Contextual Commerce performance

Track page views

The Contextual Commerce SDK cannot automatically detect in-app page changes. To ensure Contextual Commerce can show the right campaigns on the right pages, embed the TrackPageView component in every screen of your app.

This component will notify Contextual Commerce every time:

The application starts
The application resumes from background
A new session starts
A screen is presented to the user, on any navigation path change

The method requires you to provide information about the page being viewed:

pageIdentifier: The type of page being viewed and its unique path

pageType: One of the following page types recognized by Contextual Commerce:

home: The home page of the app.
product: A page that represents a single product that might have multiple variations.
collection: A page that contains multiple products or child categories that users can select.
ensemble: A page that lists a small group of products, similar to a collection or a complete outfit, but allows for the products to be added to the cart.
search: A page that allows search (if that is a dedicated page) and the page that displays the search results.
blog: A topical, informational article that is not specifically related to purchasing products.
cart: A page that lists the contents of the cart, allows the shopper to manage their cart and continue to complete their purchase.
checkout: A page that allows the shopper to complete their purchase.
flights: A special form of the product page used specifically for flight booking sites.
account: An admin page that allows the shopper to view past purchases and manage their account.
login: A page that allows the user to sign in or sign out.
info: A permanent, informational page about the site, such as "About Us."
guide: A page that helps or guides shoppers through the purchase journey.
video: A page that is dedicated to video content.
other: Any page to which a specific page type does not apply.
receipt: A page that is shown after a completed checkout.
wishlist: A page that shows a current wishlist, or list of wishlists.

path: A unique string identifying the specific instance of the page. This string should emulate what a URL would look like on the web.

Requirement: This is mandatory for any page type that has multiple versions, such as product, collection, or blog.

Examples:

Product: Product Id
Category: Full category path (such as, top level/mid level/child level)
Blog: Article title (possibly with date)

navigator: An object that must be passed into every trackPageView component to enable in-app SDK navigation.

The following is an example of defining a Navigator object that uses callbacks to navigate to a cart and product page:

Copy Code

Code

const navigator: Navigator = {
  cartNavigationCallback: () => {
    Linking.openURL("app://cart");
  },
  productNavigationCallback: (productId: string, sku?: string) => {
    Linking.openURL("app://" + product + "/" + sku);
  }

iOS Requirement: Must be passed into the activate method.
Android Requirement: Must be passed into the TrackPageView component.

The following is an example of embedding the component:

Copy Code

Code

import { TrackPageView } from "coco-react-native-sdk";
import { PageType } from "coco-react-native-sdk";
import { PageIdentifier } from "coco-react-native-sdk/models/pageIdentifier";
import { navigator } from "../path/to/navigator";

export const HomeScreen = ({ navigation }) => {
  const pageIdentifier: PageIdentifier = {
    pageType: PageType.HOME,
    path: "/home"
  };


return(
<View>
<TrackPageView
pageIdentifier={pageIdentifier}
navigator={navigator}
/>
...
</View>
);

};

For more information about the TrackPageView component, refer to the TrackPageView class reference article.

Track orders

Accurate order tracking is necessary for testing campaign functionality and calculating performance metrics. Given some apps have non-standard checkout flows, integrate this method in a way that fits your app so that every order event is forwarded.

Determine all the points in your order process where an order is finalized.
Call the trackOrder method at these points to ensure every order is tracked.
Verify that order data accurately reflects your internal metrics.

Note: Accurate order tracking ensures reliable metrics for performance evaluation, billing, and future campaign optimization. If your order flow involves background processing or delays, ensure the trackOrder method is only called after the order is fully confirmed.

The following is an example of the order model and the trackOrder method:

Copy Code

Code

interface Order {
    currency: string;
    discountCodes: DiscountCode[];
    lineItems: QuantityProduct[];
    lineItemsTotal: number;
    orderNumber: string;
    subtotal: number;
    total: number;
    totalShipping: number;
    totalTax: number;

Copy Code

Code

 import { trackOrder } from 'coco-react-native-sdk';
  const handleCheckout = () => {
    // Logic for processing the checkout
    const orderObj: Order = {...}
    trackOrder(order);
  };

Prepare the SDK for data validation (React Native)

Install the SDK

Add the React Native module

iOS: Install the native Pod

Android: Resolve duplicate-class conflicts

Activate the SDK

Collect required information

Create a configuration object

Call the activate method

Set up the Group Assignment event handler

Subscribe to Group Assigned event

Forward group assignment data to your analytics

Implement basic tracking functionality

Track page views

Track orders