Qubit React Native SDK
Installation of the QubitSDK, to provide event tracking and lookup. To make use of this SDK, please contact your Qubit Customer Success representative.
Getting started
Releases
We currently offer two tracks for the React Native SDK. Upgrade to v2 to take advantage of Merchandising Hub personalisation with placements.
| VERSION | NOTES |
|---|---|
| 2.0.1 | Latest release on v2 track, for Merchandising Hub. Added getPlacement() method. Upgraded iOS & Android dependencies. |
| 1.0.9 | Latest release on v1 track, for Experimentation Hub. |
Installation
-
$ npm install qubit-sdk-react-native --saveor$ yarn add qubit-sdk-react-native -
Navigate to your
/iosdirectory and runpod installto ensure theQubitSDKCocoaPod is installed. Android should require no further installation.
Optional - if you are using React Native < 0.60, you must link the library.
$ react-native link qubit-sdk-react-native
Usage
Import whole library in your javascript files
import QubitSDK from 'qubit-sdk-react-native';
then initialize SDK
QubitSDK.start("qubit");
and send first event
QubitSDK.sendEvent("ecView", { "type": "button", "value": "click" });
API documentation
Table of Contents
start
Initialization of SDK. It should be called as early as possible after application start, only once and before any other interaction with the API.
Parameters
-
trackingIdstring Tracking id (identifier of application/company etc.) -
logLevel("SILENT"|"ERROR"|"WARN"|"INFO"|"DEBUG"|"VERBOSE") Level of logs produced by native SDK. (optional, default'WARN')
Examples
QubitSDK.start("qubit", "DEBUG");Returns void None
sendEvent
Sends event to the server.
Parameters
Examples
QubitSDK.sendEvent("ecView", { "type": "button", "value": "click" });Returns void None
enable
Enables or disables receiving events.
Parameters
-
valueboolean true for enabling, false for disabling
Examples
QubitSDK.enable(false);Returns void None
getTrackingId
Returns trackingId. Debug purposes.
Examples
async () => {
const trackingId = await QubitSDK.getTrackingId();
...
}Returns Promise<string> Promise with String trackingId.
getDeviceId
Returns device id established by the SDK. Debug purposes.
Examples
async () => {
const deviceId = await QubitSDK.getDeviceId();
...
}Returns Promise<string> Promise with String deviceId.
getLookupData
Returns current Lookup Data. Debug purposes.
Examples
async () => {
const lookupData = await QubitSDK.getLookupData();
...
}
{ viewNumber: 10,
sessionNumber: 4,
lastViewTs: 1863218003,
ipLocation:
{ regionCode: '36004',
region: 'unknown',
longitude: 19.9612,
latitude: 50.0495,
countryCode: 'PL',
country: 'poland',
cityCode: '1803',
city: 'krakow',
areaCode: 'unknown',
area: 'unknown' },
ipAddress: '93.180.179.112',
firstViewTs: 1696635454
}Returns Promise<string> Promise with object. Although it returns Promise, it returns value only if SDK have these information at the moment of the function call.
getExperiences
Returns list of Experiences.
Parameters
-
experienceIdsarray<number> List of experiences ids. When array is empty, returns all experiences. -
variationnumber? Optional. -
previewboolean? Optional. -
ignoreSegmentsboolean? Optional.
Examples
async () => {
const experiences = await QubitSDK.getExperiences([], 0, false, false);
experiences.forEach(e => e.shown());
...
}
{ variation: 852190,
payload: {},
isControl: false,
id: 143640,
callback: 'https://sse.qubit.com/v1/callback?data=igKAeyJFeHBlcmllbmNlSWQiOjE0MzY0MCwiSXRlcmF0aW9uARUsMzc2MDY3LCJWYXJpFRUUODUyNzc0HRUUTWFzdGVyATAQODUyMTkBRXBzQ29udHJvbCI6ZmFsc2UsIlRyYWZmaWNBbGxvYwVKTCI6MC40NzUsIlByb2JhYmlsaXR5ARRQODI1NjI2MTk0NTgyNDQ5MSwiUGlkVhkAGFRlbXBsYXQFvwxudWxsBWZMY2tpbmdJZCI6Im1pcXVpZG8iLCIBjQhleHQFFkQ4MmFjYzNiY2FiYmNhYzM2In0='
},
{ variation: 855620,
payload: { show_share: false,
show_sale_banner: false,
sale_banner: 'https://dd6zx4ibq538k.cloudfront.net/static/images/5010/626263d0b3d3230f4062da1e0d1395ad_1300_554.jpeg',
free_shipping: 'Shipping is free for you!' },
isControl: false,
id: 144119,
callback: 'https://sse.qubit.com/v1/callback?data=jAKAeyJFeHBlcmllbmNlSWQiOjE0NDExOSwiSXRlcmF0aW9uARUsNDUyOTEwLCJWYXJpFRUYMTAxMDcyMh0WFE1hc3RlcgExmDg1NTYyMCwiSXNDb250cm9sIjpmYWxzZSwiVHJhZmZpY0FsbG9jYQFgSCI6MC4yNSwiUHJvYmFiaWxpdHkBE2A0ODAwMTM4OTg0MjEwNjM3MywiUGlkIjowThoAGFRlbXBsYXQFwQxudWxsBWdMY2tpbmdJZCI6Im1pcXVpZG8iLCIBjghleHQFFkQ4MmFjYzNiY2FiYmNhYzM2In0='
},
{ variation: 972984,
payload: {},
isControl: true,
id: 160862,
callback: 'https://sse.qubit.com/v1/callback?data=iQKAeyJFeHBlcmllbmNlSWQiOjE2MDg2MiwiSXRlcmF0aW9uARUsNDM0NjIzLCJWYXJpFRUUOTcyOTg0HRUUTWFzdGVyATARG3BJc0NvbnRyb2wiOnRydWUsIlRyYWZmaWNBbGxvYwVJRCI6MC41LCJQcm9iYWJpbGl0eQESVDAzNjQzMTAyMTQ3MTU5ODkyLCJQaWRaGgAYVGVtcGxhdAW-DG51bGwFZhBja2luZwGLKCJtaXF1aWRvIiwiAYwIZXh0BRZEODJhY2MzYmNhYmJjYWMzNiJ9'
}
]Returns Promise<array<Experience>> Promise with an array of Experience objects.
getPlacement
Returns Placement for given parameters.
Parameters
-
placementIdstring Unique ID of the placement. -
modestring? The mode to fetch placements content with, can be one of LIVE/SAMPLE/PREVIEW. Defaults to LIVE. -
attributesstring? JSON string containing custom attributes to be used to query for the placement. "visitor" attribute will be ignored as it is set by SDK. -
campaignIdstring? Optional. -
experienceIdstring? Optional.
Examples
async () => {
const placementId = "8271-4cb1-a7bd-4201f70f5904"
const attributes = JSON.stringify({
"user": {
"id": "chg4bg7vdqo-0jzl7bqtq-idhpjmy"
}
})
const placement = await getPlacement(
placementId, // placementId
"LIVE", // mode
attributes, // query attributes, as JSON string
"campaign_id", // force campaignId, during development
"experience_id" // force experienceId, during development
)
// fetch content for rendering
const content = placement.content
// trigger an impression
placement.impression()
// trigger a clickthrough
placement.clickthrough()
}Returns Promise<Placement> Promise with an object describing Placement object.
{
"content": { ... }
}Compatibility
Qubit SDK React Native is compatible with React Native 0.58 and higher
Links
Qubit website
Qubit Android SDK on Github
Qubit iOS SDK on Github