Skip to content

Commit 637057a

Browse files
Merge pull request #17 from SourcePointUSA/tom-win87-patch-1
Update README.md
2 parents 3587593 + ddc4f8d commit 637057a

File tree

1 file changed

+63
-24
lines changed

1 file changed

+63
-24
lines changed

README.md

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,16 @@ Sourcepoint's React Native package allows you to surface a Sourcepoint CMP messa
22

33
# Table of Contents
44

5+
- [Prerequisites](#prerequisites)
56
- [Install Sourcepoint package](#install-sourcepoint-package)
67
- [Configuration overview](#configuration-overview)
78
- [React example](#react-example)
89
- [Complete app examples](#complete-app-examples)
910

11+
## Prerequisites
12+
13+
Sourcepoint's React Native SDK v1.0.0+ utilizes and is only compatible with [React Native's new architecture](#https://reactnative.dev/architecture/landing-page). Any projects implementing the latest version of the SDK will need to ensure their project uses the new architecture.
14+
1015
## Install Sourcepoint package
1116

1217
Use the node package manager install command to install the Sourcepoint React Native package:
@@ -17,21 +22,21 @@ npm install @sourcepoint/react-native-cmp
1722

1823
## Configuration overview
1924

20-
In order to use the `SPConsentManager` you will need to perform the following:
25+
In order to use the `SPConsentManager` you will need to perform the following:
2126

2227
1. [Instantiate and call build with your configuration](#instantiate-and-call-build-with-your-configuration)
2328
2. [Set up callbacks in instance of `SPConsentManager`](#set-up-callbacks-in-instance-of-spconsentmanager)
24-
3. [Call `loadMessages`](#call-loadmessages)
29+
3. [Call `loadMessages`](#call-loadmessages)
2530
4. [Retrieve user data with `getUserData`](#retrieve-user-data-with-getuserdata)
2631

2732
In the sections below, we will review each of the steps in more detail:
2833

2934
### Instantiate and call build with your configuration
3035

3136
In your app, you can setup the SPConsent manager in a external file or on your app. In the example below we use `useRef`
32-
to keep a reference of the `SPConsentManager`.
37+
to keep a reference of the `SPConsentManager`.
3338

34-
>It is important to notice that we wrap the initialisation of `SPConsentManager` in a `useEffect` and call `consentManager.current?.dispose()` to avoid memory leaks.
39+
> It is important to notice that we wrap the initialisation of `SPConsentManager` in a `useEffect` and call `consentManager.current?.dispose()` to avoid memory leaks.
3540
3641
```ts
3742
const consentManager = useRef<SPConsentManager | null>();
@@ -50,21 +55,22 @@ useEffect(() => {
5055
};
5156
}
5257
```
58+
5359
The following attributes should be replaced with your organization's details:
5460
55-
| **Attribute** | **Data Type** | **Description** |
56-
|-----------------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
57-
| `config.accountId` | Number | Value associates the property with your organization's Sourcepoint account. Retrieved by contacting your Sourcepoint Account Manager or via the **My Account** page in the Sourcepoint portal. |
58-
| `config.propertyId` | Number | ID for property found in the Sourcepoint portal |
59-
| `config.propertyName` | String | Name of property found in the Sourcepoint portal |
60-
| `config.campaigns` | Object | Campaigns launched on the property through the Sourcepoint portal. Accepts `gdpr: {}`, `usnat: {}`, `preferences: {}` and `globalcmp: {}`. See table below for information on each campaign type. |
61+
| **Attribute** | **Data Type** | **Description** |
62+
| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
63+
| `config.accountId` | Number | Value associates the property with your organization's Sourcepoint account. Retrieved by contacting your Sourcepoint Account Manager or via the **My Account** page in the Sourcepoint portal. |
64+
| `config.propertyId` | Number | ID for property found in the Sourcepoint portal |
65+
| `config.propertyName` | String | Name of property found in the Sourcepoint portal |
66+
| `config.campaigns` | Object | Campaigns launched on the property through the Sourcepoint portal. Accepts `gdpr: {}`, `usnat: {}`, `preferences: {}` and `globalcmp: {}`. See table below for information on each campaign type. |
6167
6268
Refer to the table below regarding the different campaigns that can be implemented:
6369
64-
>**NOTE**: Only include the campaign objects for which there is a campaign enabled on the property within the Sourcepoint portal.
70+
> **NOTE**: Only include the campaign objects for which there is a campaign enabled on the property within the Sourcepoint portal.
6571
6672
| **Campaign object** | **Description** |
67-
|---------------------|-----------------------------------------------------------------|
73+
| ------------------- | --------------------------------------------------------------- |
6874
| `gdpr: {}` | Used if your property runs a GDPR TCF or GDPR Standard campaign |
6975
| `usnat: {}` | Used if your property runs a U.S. Multi-State Privacy campaign |
7076
| `preferences: {}` | Used if your property runs a Preferences campaign |
@@ -75,7 +81,7 @@ Refer to the table below regarding the different campaigns that can be implement
7581
`SPConsentManager` communicates with your app through a series of callbacks. Review the table below for available callbacks:
7682
7783
| **Callback** | **Description** |
78-
|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
84+
| ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7985
| `onSPUIReady(callback: () => {})` | Called if the server determines a message should be displayed. The native SDKs will take care of showing the message. |
8086
| `onAction(callback: (action: string) => {})` | Called when the user takes an action (e.g. Accept All) within the consent message. `action: string` is going to be replaced with an enum. |
8187
| `onSPUIFinished(callback: () => {})` | Called when the native SDKs is done removing the consent UI from the foreground. |
@@ -84,17 +90,18 @@ Refer to the table below regarding the different campaigns that can be implement
8490
8591
### Call `loadMessages`
8692
87-
After instantiating and setting up `SPConsentManager` and configuring its callbacks, it is time to call `loadMessages`.
93+
After instantiating and setting up `SPConsentManager` and configuring its callbacks, it is time to call `loadMessages`.
8894
8995
Calling `loadMessages` will initiate the message, contact Sourcepoint's servers, and it may or may not display a message, depending on the scenario configured in the Sourcepoint portal for the property's message campaign.
9096
91-
>This can be done at any stage of your app's lifecycle. Ideally you will want to call it as early as possible, in order to have consent for your vendors.
97+
> This can be done at any stage of your app's lifecycle. Ideally you will want to call it as early as possible, in order to have consent for your vendors.
9298
9399
```ts
94100
consentManager.current?.loadMessage();
95101
```
96102
97103
### Retrieve user data with `getUserData`
104+
98105
`getUserData` returns a `Promise<SPUserData>`. You can call this function at any point in your app's lifecycle, but consent may or may not yet be ready. The safest place to call it is inside the callback `onSPFinished`.
99106
100107
```ts
@@ -106,6 +113,7 @@ consentManager.current?.onFinished(() => {
106113
#### `SPUserData`
107114
108115
Is structured by campaign type.
116+
109117
```ts
110118
type SPUserData = {
111119
gdpr?: GDPRConsent;
@@ -116,6 +124,7 @@ type SPUserData = {
116124
```
117125
118126
`GDPRConsent`:
127+
119128
```ts
120129
type GDPRConsent = {
121130
applies: boolean;
@@ -130,6 +139,7 @@ type GDPRConsent = {
130139
```
131140
132141
`USNatConsent`:
142+
133143
```ts
134144
type USNatConsent = {
135145
applies: boolean;
@@ -144,17 +154,36 @@ type USNatConsent = {
144154
};
145155
```
146156
147-
`PreferencesConsent`:
157+
`PreferencesConsent`:
158+
148159
```ts
149160
type PreferencesConsent = {
150161
dateCreated: string;
151162
uuid?: string;
152163
status: PreferencesStatus[];
153164
rejectedStatus: PreferencesStatus[];
154-
}
165+
};
155166
```
156167
168+
| **`PreferencesConsent` Property** | **Data Type** | **Description** |
169+
| --------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
170+
| `dateCreated` | String | Date the end-user preferences record was created. |
171+
| `uuid` | String | Unique user ID generated for end-user for which preferences record is stored against. |
172+
| `status` | Array | An array of objects for each category that has been accepted by the end user. Please review the structure of this object in the table below. |
173+
| `rejectedStatus` | Array | An array of objects for each category that has been rejected by the end user. Please review the structure of this object in the table below. |
174+
175+
The following table details the structure of category objects that can be returned in the `status` or `rejectedStatus` array.
176+
177+
| **Property** | **Data Type** | **Description** |
178+
| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
179+
| `categoryId` | Number | ID of category as found in the Preferences configuration |
180+
| `channels` | Array | Returned when the category is a Marketing Preference category. Object `{id: number, status: boolean}` represents the channel accepted/rejected by the end-user. Available responses for `id` are: 0 = Email, 1 = SMS, 2 = Whatsapp, 3 = Phone, 4 = Mail, 5 = Test.<br><br> `status` reflects whether the end-user has accepted the channel |
181+
| `changed` | Boolean | For internal purposes only. |
182+
| `dateConsented` | String | Date end-user made their decision on the Marketing Preference or Legal Preference category |
183+
| `subType` | String | Returned when the category is a Legal Preference category and reflects the **Document Type** selected for the Legal Preference category. |
184+
157185
`GlobalCMPConsent`:
186+
158187
```ts
159188
type GlobalCMPConsent = {
160189
applies: boolean;
@@ -163,18 +192,27 @@ type GlobalCMPConsent = {
163192
createdDate?: string;
164193
vendors: Array<Consentable>;
165194
categories: Array<Consentable>;
166-
}
195+
};
167196
```
168197
198+
| **Property** | **Data Type** | **Description** |
199+
| ---------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
200+
| `applies` | Boolean | `true`: end-user's region is in the framework territories \| `false`: end-user's region is not in the framework territories |
201+
| `uuid` | String | Unique user ID generated for end-user for which Global Enterprise consent record is stored against. |
202+
| `expirationDate` | String | Date the end-user's consent record expires. |
203+
| `createdDate` | String | Date the end-user's consent record was created. |
204+
| `vendors` | Array | Vendors configured in your Global Enterprise vendor list and their consent status. `{id: string, consented: boolean}` <br><br> `id` is the ID of the privacy choice. <br><br> `consented` refers to whetherthe privacy choice was opted into by the end-user |
205+
| `categories` | Array | Privacy choices that are applicable to the end-users region and opt-in status for each. `{id: string, consented: boolean}`.<br><br> `id` is the ID of the privacy choice.<br><br> `consented` refers to whetherthe privacy choice was opted into by the end-user |
206+
169207
## React example
170208
171209
In the example below, you can find a fully configured example in React:
172-
210+
173211
```jsx
174212
import React, { useState, useEffect, useRef } from 'react';
175213
import { View, Text, SafeAreaView } from 'react-native';
176214

177-
import { SPConsentManager, SPCampaignEnvironment } from '@sourcepoint/react-native-cmp';
215+
import SPConsentManager, { SPCampaignEnvironment, SPUserData } from '@sourcepoint/react-native-cmp';
178216

179217
export default function App() {
180218
const [userData, setUserData] = useState<SPUserData>({});
@@ -206,8 +244,8 @@ export default function App() {
206244
consentManager.current?.onFinished(() => {
207245
consentManager.current?.getUserData().then(setUserData);
208246
});
209-
consentManager.current?.onAction(({ actionType }) =>
210-
console.log(`User took action ${actionType}`)
247+
consentManager.current?.onAction(({ actionType }) => {
248+
console.log(`User took action ${actionType}`)
211249
});
212250
consentManager.current?.onError(console.error)
213251

@@ -227,6 +265,7 @@ export default function App() {
227265
```
228266
229267
## Implementing authenticated consent
268+
230269
In a nutshell, you provide an identifier for the current user (username, user id, uuid or any unique string) and we'll take care of associating the consent profile to that identifier.
231270
232271
In order to use the authenticated consent all you need to do is replace `.loadMessage()` with `.loadMessage({ authId: "JohnDoe"}))`.
@@ -235,12 +274,12 @@ If our APIs have a consent profile associated with that token `"JohnDoe"` the SD
235274
236275
## Complete App example
237276
238-
Complete app example for iOS and Android can be found in the [`/example`](/example/) folder of the SDK.
277+
Complete app example for iOS and Android can be found in the [`/example`](/example/) folder of the SDK.
239278
240279
## Known issues
280+
241281
On iOS, reloading the app's bundle (ie. pressing r while the emulator is open or on Webpack's console) causes React Native to stop emitting events. This issue is being investigated and it's pottentially within React Native itself.
242282
243283
## License
244284
245285
MIT
246-

0 commit comments

Comments
 (0)