Skip to content

Commit f5f69d8

Browse files
Merge pull request #5 from SourcePointUSA/tom-win87-patch-1
Reformat README.md
2 parents 6851729 + 8e3228d commit f5f69d8

File tree

1 file changed

+73
-29
lines changed

1 file changed

+73
-29
lines changed

README.md

Lines changed: 73 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
1-
# @sourcepoint/react-native-cmp
1+
Sourcepoint's React Native package allows you to surface a Sourcepoint CMP message on applications built using the Reactive Native framework.
22

3-
The official React Native package for Sourcepoint
3+
# Table of Contents
44

5-
## Installation
5+
- [Install Sourcepoint package](#install-sourcepoint-package)
6+
- [Configuration overview](#configuration-overview)
7+
- [React example](#react-example)
8+
- [Complete app examples](#complete-app-examples)
9+
10+
## Install Sourcepoint package
11+
12+
Use the node package manager install command to install the Sourcepoint React Native package:
613

714
```sh
815
npm install @sourcepoint/react-native-cmp
916
```
1017

11-
## Usage
18+
## Configuration overview
19+
20+
In order to use the `SPConsentManager` you will need to perform the following:
1221

13-
### Overview
14-
In a nutshell, in order to use the `SPConsentManager` you'll need:
15-
1. Instantiate and call build with your configuration
16-
2. Set up the callbacks in the instance of `SPConsentManager`
17-
3. Call `loadMessages`. This will initiate the message, contact SP's servers, and it may or may not display a message, depending on your campaign scenario (configured in Sourcepoin't Dashboard).
18-
4. Retrieve user data with `getUserData`.
22+
1. [Instantiate and call build with your configuration](#instantiate-and-call-build-with-your-configuration)
23+
2. [Set up callbacks in instance of `SPConsentManager`](#set-up-callbacks-in-instance-of-spconsentmanager)
24+
3. [Call `loadMessages`](#call-loadmessages)
25+
4. [Retrieve user data with `getUserData`](#retrieve-user-data-with-getuserdata)
1926

20-
Let's review each of the steps above in more detail.
27+
In the sections below, we will review each of the steps in more detail:
2128

2229
### Instantiate and call build with your configuration
23-
In your app, you can setup the SPConsent manager in a external file or on your App. In this example we use `useRef`
24-
to keep a reference of the `SPConsentManager`. It's important to notice we wrap the initialisation of `SPConsentManager` in a `useEffect` and call `consentManager.current?.dispose()` to avoid memory leaks.
30+
31+
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`.
33+
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.
35+
2536
```ts
2637
const consentManager = useRef<SPConsentManager | null>();
2738

@@ -39,28 +50,61 @@ useEffect(() => {
3950
};
4051
}
4152
```
53+
The following attributes should be replaced with your organization's details:
4254
43-
### Set up the callbacks in the instance of `SPConsentManager`
44-
`SPConsentManager` communicates with your app through a series of callbacks.
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: {}` and/or `usnat: {}`. See table below for information on each campaign type. |
4561
46-
* `onSPUIReady(callback: () => {})`
47-
This is called if the server determined a message should be displayed. The native SDKs will take care of the showing the message.
48-
* `onAction(callback: (action: string) => {});`
49-
Called when the user takes a action (e.g. accept all) within the consent message. `action: string` is going to be replaced with an enum.
50-
* `onSPUIFinished(callback: () => {})`
51-
Called when the native SDKs is done removing the consent UI from the foreground.
52-
* `onFinished(callback: () => {})`
53-
Called when all UI and network processes are finished. User consent is stored on the local storage of each platform (`UserDefaults` for iOS and `SharedPrefs` for Android). And it's safe to retrieve consent data with `getUserData`
54-
* `onError(callback: (description: string) => {})`
55-
Called if something go wrong.
62+
Refer to the table below regarding the different campaigns that can be implemented:
63+
64+
>**NOTE**: Only include the campaign objects for which there is a campaign enabled on the property within the Sourcepoint portal.
65+
66+
| **Campaign object** | **Description** |
67+
|---------------------|-----------------------------------------------------------------|
68+
| `gdpr: {}` | Used if your property runs a GDPR TCF or GDPR Standard campaign |
69+
| `usnat: {}` | Used if your property runs a U.S. Multi-State Privacy campaign |
70+
71+
### Set up callbacks in instance of `SPConsentManager`
72+
73+
`SPConsentManager` communicates with your app through a series of callbacks. Review the table below for available callbacks:
74+
75+
| **Callback** | **Description** |
76+
|--------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
77+
| `onSPUIReady(callback: () => {})` | Called if the server determines a message should be displayed. The native SDKs will take care of showing the message. |
78+
| `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. |
79+
| `onSPUIFinished(callback: () => {})` | Called when the native SDKs is done removing the consent UI from the foreground. |
80+
| `onFinished(callback: () => {})` | Called when all UI and network processes are finished. User consent is stored on the local storage of each platform (`UserDefaults` for iOS and `SharedPrefs` for Android). And it is safe to retrieve consent data with `getUserData` |
81+
| `onError(callback: (description: string) => {})` | Called if something goes wrong. |
5682
5783
### Call `loadMessages`
58-
After instantiating and setting up `SPConsentManager`, configuring its callbacks, it's time to call `loadMessages`. 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.
84+
85+
After instantiating and setting up `SPConsentManager` and configuring its callbacks, it is time to call `loadMessages`.
86+
87+
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.
88+
89+
>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.
90+
91+
```ts
92+
consentManager.current?.loadMessage();
93+
```
5994
6095
### Retrieve user data with `getUserData`
6196
`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`.
6297
63-
## Full Example
98+
```ts
99+
consentManager.current?.onFinished(() => {
100+
consentManager.current?.getUserData().then(setUserData);
101+
});
102+
```
103+
104+
## React example
105+
106+
In the example below, you can find a fully configured example in React:
107+
64108
```jsx
65109
import React, { useState, useEffect, useRef } from 'react';
66110
import { View, Text, SafeAreaView } from 'react-native';
@@ -114,9 +158,9 @@ export default function App() {
114158
)
115159
```
116160
117-
### Complete Example
161+
## Complete App examples
118162
119-
For a complete app example, check the `/example` folder.
163+
Complete app examples for iOS and Android can be found in the [`/example`](/example/) folder of the SDK.
120164
121165
## License
122166

0 commit comments

Comments
 (0)