This page will list every step you need to take to fully integrate with Contextual Commerce. Make sure you have applied every required step, and any optional steps that you need.
trackCart function.trackOrder function.showCampaign function.trackProduct methodsetCurrentProduct method.[Required]
coco-react-native-sdk-X.X.X.tgz into the root of your react application and run:npm install ./coco-react-native-sdk-X.X.X.tgz
NOTE: Ensure you have replaced the version numbers before they run the command.
<PROJECT_ROOT>/ios directory and add the following to Podfile:pod 'coco-react-native-sdk', :path => '../node_modules/coco-react-native-sdk'
<PROJECT_ROOT>/ios directory, remove the pods and reinstall them with the new podfile:rm -rf ./Pods && pod install
If you encounter the following failure when building the Android application:
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)
Please add the following to the android section of your app level build.gradle:
configurations {
all {
exclude group: 'androidx.lifecycle', module: 'lifecycle-runtime-ktx'
exclude group: 'androidx.lifecycle', module: 'lifecycle-viewmodel-ktx'
}
}
[Required]
As soon as Contextual Commerce assigns a group to the current shopper (or you provide us with one using the Group Assignment Provider), Contextual Commerce will publish this event. You can use this to log metrics in your chosen metric system. It is particularly important that this data point is stored because it allows your financial team to confirm all the numbers Contextual Commerce is reporting (and billing against), and you can be confident that you are getting all the benefits from our partnership.
Call this function before you activate Contextual Commerce.
import { subscribeGroupAssigned } from 'coco-react-native-sdk';
useEffect(() => {
subscribeGroupAssigned(groupAssignedListener);
}, []);
See subscribeGroupAssigned(...) function documentation for specific details.
[Required]
Contextual Commerce doesn't just act - we always wait for you, the app owner, to start the process. This gives you control to choose to disable Contextual Commerce if you need to (by not activating it), without having to make extensive code changes.
When you activate Contextual Commerce, you need to provide us with:
see Configuring Contextual Commerce for more details on exactly what we need you to give us.
import { activate } from 'coco-react-native-sdk';
useEffect(() => {
activate("TstAp", packageJson.version, navigator)
}, []);
See activate(...) function documentation for more details
[Required]
One of the key pieces of information the Contextual Commerce Brain uses to make its decisions is knowing when the shopper navigates from page to page within the app. For more details on exactly how and why we track each page, see Tracking Pages.
To keep Contextual Commerce informed of page navigations, the TrackPageView component must be embedded in all pages of your app. You must provide the type of the page, as well as a unique identifier(referred to as a path, and should emulate what a URL would look like on web) for the page being tracked. A navigator must also be provided containing callbacks to navigate to the cart and product pages
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 (
);
};
See TrackPageView(...) function documentation for more details.
trackCart function[Required]
It is critical to Contextual Commerce's effectiveness that the we know the contents of the current shopper’s cart at all times. You can keep us to date by utilizing this method. The method should be called with the complete contents of the cart whenever those contents change. That could be when the shopper adds, removes or changes the type or quantity of an item, but it could also be when the app receives information about cart contents from a previous or parallel session.
You should also call this method when the app starts, even if the cart is empty.
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)
}
See trackCart(...) function documentation for more details.
trackOrder function[Required]
It is imperative that Contextual Commerce know every time a shopper actually places an order. The whole purpose of Contextual Commerce is to encourage your shoppers to do exactly this, and we need to know when we have been successful to allow the Contextual Commerce Brain to learn and improve. Call this function when an order is confirmed as successful.
import { trackOrder } from 'coco-react-native-sdk';
const handleCheckout = () => {
// Logic for processing the checkout
const orderObj: Order = {...}
trackOrder(order);
};
See trackOrder(...) function documentation for more details.
showCampaign function[Required]
The showCampaign function is necessary, but is only ever used for forcing a campaign to show. It is not necessary for you to call showCampaign before a campaign will show. However, we need a way to be able to force-display campaigns that are not yet available for your shoppers. This allows us to test them in the context of your app, and get final design approval. Without this method, we cannot test a campaign without making it live in production first, leading to a poor user experience.
The standard way to implement this is to add a new field somewhere inside the app's settings screen, where we can enter a four or five digit code and click a button. You would then pass that code to Contextual Commerce by calling this method. Some clients hide this section in their settings behind "magic" gestures (eg: tap five times on the settings screen to reveal the "developer" options).
import { showCampaign } from 'coco-react-native-sdk';
const [campaignId, setCampaignId] = useState("");
const onShowCampaignPressed = () => {
showCampaign({campaignId});
};
return (
<TextInput onChangeText={setCampaignId} value={campaignId} />
<Button title="Show Campaign" onPress={onShowCampaignPressed} />
);
see Granify.showCampaign(conceptId:) for details of the method, and Testing for more information about testing in general.
trackProduct function[Required]
It is imperative that Contextual Commerce know which products the shopper is looking at, as well as which are actually being bought. The trackProduct function is one of two functions (along with setCurrentProduct) which are required to provide Contextual Commerce with enough information to make good decisions.
For more details on exactly how we track products and shopper interest, see Tracking Products.
The trackProduct function must be called every time a new product page is viewed (even if the shopper has already seen this page). It provides the Contextual Commerce Brain with the complete list of all possible variations of the current product. It does not tell us which variation (sku) is currently selected, though - that is the job of setCurrentProduct.
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()
}
See trackProduct(...) function documentation for more details
setCurrentProduct function[Required]
It is imperative that Contextual Commerce know which products the shopper is looking at, as well as which are actually being bought. The setCurrentProduct function is one of two functions (along with trackProduct) which are required to provide Contextual Commerce with enough information to make good decisions.
For more details on exactly how we track products and shopper interest, see Tracking Products.
The setCurrentProduct function must be called every time a new variation of a product is selected, including the first time the product is viewed. The trackProduct call will tell us all the variations available for the current product, and the setCurrentProduct function will tell us which variation of the product is currently selected. The product identified with setCurrentProduct must be one of those provided in the last trackProduct call.
setCurrentProduct(sku: "myprod_001", productId: "myprod")
See setCurrentProduct(...) function documentation for more details
This function is not required, but is often very useful. If your app has other popups, modals, or there are any times when you do not want a campaign to pop up, you can set the restricted state. When this state is on (.RESTRICTED), no campaigns will be shown. Switch it off to resume normal programming.
For example, if you have a promotional message that pops up when a shopper logs in, you might set the restricted state on while that popup is open, and then set if off again once the popup has been removed.
Please remember to always switch the restricted state off when you no longer require it.
import { setRestrictionState, RestrictionState } from `coc-react-native-sdk`
const displayElement = () => {
setRestrictionState(RestrictionState.RESTRICTED);
// Logic for displaying element
};
const hideElement = () => {
setRestrictionState(RestrictionState.UNRESTRICTED);
// Logic for hiding element
};
See setRestrictionState(..) function documentation for more details.