Prepare to test campaigns (React Native)

In this phase, you will:

• Implement all required API methods to support campaign testing
• Create a hidden debug menu that enables internal testing and troubleshooting
• Learn how to interpret Contextual Commerce logs

Set up required methods

Preparing your SDK for data validation included setting up methods to track page views and orders.

To enable and test campaign functionality, you must implement the following additional methods:

• Track product (trackProduct)   
• Track cart state  (trackCart)   
• Set the currently viewed product​  (setCurrentProduct) 
• Show campaign (showCampaign) 

Track product

Track the products shoppers view, and all their available variations, to ensure campaigns match them with the most relevant products and promotions.

The  trackProduct method should be called immediately after trackPageView on any product page load, for example:

• On application launch to a product page
• On application resume to a product page
• On any in-app navigation that presents a product page

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

• products: An array of all active SKUs on the page

Note: This list acts as the source data for the setCurrentProduct function, so ensure every actively available variation is included. 

• currentProductCarterCallback: A closure invoked by in-campaign "Add To Cart" button that simulates the shopper adding the currently selected SKU to their cart

Caution: If your app normally requires the user to pick a specific option (such as, size or color) before adding to the cart, this callback must initiate that same behavior (such as, triggering the "Select a Size" prompt), rather than forcing an incomplete add. 

For more information about the trackProduct method, refer to the trackProduct reference article.

The following is an example of the  trackProduct method:

class CarterImpl implements Carter {
  addCurrentProductToCart() {
    // Your code to add the current product to cart
  }
}

trackProduct(products: [
  Product(sku: "myprod_001",
          productId: "myprod",
          title: "My Product",
          price: 100.0,
          regularPrice: 100.01,
          image: "path/to/image",
          url: "path/to/product")
  ],
  ... // more variations of this product
  ) {
    new CarterImpl()
  }

Track cart state

Track products in the shopper's cart to enable cart-specific campaigns types, like abandoned cart reminders. 

The trackCart method should be called:

• On application launch, even if the cart is empty
• After any cart update
  • Item added, removed, or quantity changed
  • Purchase complete and cart cleared
  • Cart synced from another device

The method requires you to provide information about the products currently in the shopper's cart:

• items: A dictionary of all items in the shopper's cart and their quantities.

Caution: Ensure the productId and sku passed to trackCart are identical to the values used in trackProduct. 

For more information about the  trackCart method, refer to the trackCart reference article.

The following is an example of the trackCart method:

import { trackCart } from 'coco-react-native-sdk';
  const appStartUp = () => {
    // Logic for starting the app
    // Contextual Commerce's activate(...) function
    trackCart(cart, currency)
  }

  const addToCart = () => {
    // Logic for adding an item to the cart
    trackCart(cart, currency)
  }

  const removeFromCart = () => {
    // Logic for removing an item from the cart
    trackCart(cart, currency)
  }

  const handleCheckout = () => {
    // Logic for processing the checkout
    // Logic for clearing cart after checkout
    trackCart(cart, currency)
  }

  const syncCart = () => {
    // Logic for syncing the cart with previous/parallel sessions
    trackCart(cart, currency)
  }

Set the currently viewed product 

Track the precise product variation the shopper has chosen to ensure campaigns make personalized product recommendations based on the exact SKU the shopper is viewing. 

The setCurrentProduct method should be called immediately after each trackProduct and whenever the shopper changes the chosen item on a product page, for example:

• On application launch to a product page 
  • Pass the default selected product SKU
• On application resume on a product page
  • Pass the selected product SKU when the view loads
• From navigation to a product page
  • Pass the default selected product SKU
• On user changing the selected product variation like size or color
  • Pass the new selected product SKU

The method requires you to provide information about the product variation the shopper has selected:

• sku: The SKU of the currently selected product variation. Must match one of the sku values supplied in your most recent trackProduct call. 
• productId: The parent product ID. Must match the productId from your most recent trackProduct call.
  

For more information about the setCurrentProduct method, refer to the setCurrentProduct reference article.

The following is an example of the setCurrentProduct method:

setCurrentProduct(sku: "myprod_001", productId: "myprod")

Show campaigns

Set up the showCampaign method to enable internal campaign testing in your app. This method requests a specific campaign to display within your environment so you and the Contextual Commerce QA team can preview and validate campaigns before they go live. Bazaarvoice tests campaigns using end-to-end simulations in a test environment before release. Because every production environment is unique, campaigns may behave differently in your specific application. Test your campaign in a staging environment to ensure it displays as expected. The showCampaign method can be called any time after you call activateGranify.

Note: The showCampaign method is necessary for internal testing and campaign approval and should never be used in regular shopper sessions.

The method requires you to provide information about the products currently in the shopper's cart:

• campaignId: A text string representing the campaign to test. Reach out to your Account Manager for your specific concept ID. 

For more information about the showCampaign method, refer to the showCampaign class reference article.

The following is an example of the showCampaign method:

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

showCampaign("1234");

Create a debug menu

A hidden debug menu allows the Contextual Commerce QA team, and your internal testers, to trigger specific tests directly within your app without disrupting users or modifying production code. This menu is intended exclusively for internal testing and should be hidden from shoppers. 

Recommended implementation

Your debug menu should be:

• Available within QA or Test builds of your app 
• Accessible through a special gesture or interaction
  • Ex: triple-tap on a particular screen or hold down a button for five seconds before the "developer" UI appears
• Clearly distinguished from any regular app operations

Your debug menu UI should include:

• A text field for entering the specific concept ID (four or five digit number) associated with the test campaign
• A way to manually trigger the showCampaign method

Analyzing logs

The Contextual Commerce SDK generates logs at various levels (debug, info, call, warn, and error) during its operation. To simplify log analysis, logs will always start with the prefix [Granify] so you can easily filter to relevant entries. 

The following is an example of an entry you might find in your logs:

[Granify] 🟡 warn [consume(data:):65] Force Matching Failure: CampaignFilter::7641 failed has_cart: ["+"] for value: false

Interpreting this example:

• Campaign ID 7641 was triggered using the showCampaign method, but the SDK couldn't display it.
• The campaign has an unmet requirement that the shopper must have items in their cart.
• Specifically,  has_cart: ["+"] means "requires at least one cart item," and value: false indicates the current shopper's cart was empty when the campaign was triggered.