|
| 1 | +# Integration with Sourcepoint SDK |
| 2 | +The Contentpass SDK can be seamlessly integrated with the Sourcepoint SDK to manage consent. Since the Sourcepoint SDK |
| 3 | +is a separate React Native package, you must install it independently. For detailed guidance, refer to the |
| 4 | +[Sourcepoint SDK documentation](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp). |
| 5 | + |
| 6 | + |
| 7 | +## Setting Up Sourcepoint |
| 8 | +To use the Sourcepoint SDK, follow these steps: |
| 9 | + |
| 10 | +1. Create a Sourcepoint Account: Set up a Sourcepoint account and create a property with the type APP. |
| 11 | +2. Configure the Property, ensure the property includes: |
| 12 | + - Campaigns |
| 13 | + - Partition Sets |
| 14 | + - Scenarios (with the `acps` parameter — see [here](https://docs.contentpass.net/docs/onboarding/cmp/sourcepoint#4-sourcepoint-contentpass-integration) for details) |
| 15 | + - Messages |
| 16 | + |
| 17 | +For more information, consult the [Sourcepoint documentation](https://docs.sourcepoint.com/hc/en-us). |
| 18 | + |
| 19 | +A newly created property should resemble the following example: |
| 20 | + |
| 21 | + |
| 22 | +### Adding a Custom Action to Sourcepoint Messages |
| 23 | +To integrate the Sourcepoint SDK with the Contentpass SDK, you must define a custom action in Sourcepoint Messages: |
| 24 | +1. Navigate to `Messages` > `GDPR Messages` > `Web / Webview (TCF)`. |
| 25 | +2. Edit the relevant message and add a custom action to the login button, such as `cp('login')`. |
| 26 | +3. This custom action will authenticate users through the Contentpass SDK. |
| 27 | + |
| 28 | +Example configuration: |
| 29 | + |
| 30 | + |
| 31 | +## Code Integration |
| 32 | +After setting up Sourcepoint, install its SDK package. Use the following code to integrate Contentpass and Sourcepoint |
| 33 | +SDKs in your app. |
| 34 | + |
| 35 | +### Important note |
| 36 | +After creating a property in Sourcepoint, you must wait approximately 15 minutes before it becomes available for use |
| 37 | +with the `@sourcepoint/react-native-cmp package`. This delay allows the configuration to propagate. |
| 38 | + |
| 39 | +### Implementation |
| 40 | +Install the Sourcepoint SDK package, then use the following code to integrate the two SDKs in your app: |
| 41 | + |
| 42 | +```jsx |
| 43 | +import { useEffect, useRef, useState } from 'react'; |
| 44 | +import { SPConsentManager } from '@sourcepoint/react-native-cmp'; |
| 45 | +import { ContentpassStateType, useContentpassSdk } from '@contentpass/react-native-contentpass'; |
| 46 | + |
| 47 | +const sourcePointConfig = { |
| 48 | + accountId: 'SOURCEPOINT_ACCOUNT_ID', |
| 49 | + propertyId: 'SOURCEPOINT_PROPERTY_ID', |
| 50 | + propertyName: 'SOURCEPOINT_PROPERTY_NAME', |
| 51 | +}; |
| 52 | + |
| 53 | +const setupSourcepoint = (hasValidSubscription) => { |
| 54 | + const { accountId, propertyName, propertyId } = sourcePointConfig; |
| 55 | + const spConsentManager = new SPConsentManager(); |
| 56 | + |
| 57 | + spConsentManager.build(accountId, propertyId, propertyName, { |
| 58 | + gdpr: { |
| 59 | + targetingParams: { |
| 60 | + acps: hasValidSubscription ? 'true' : 'false', |
| 61 | + }, |
| 62 | + }, |
| 63 | + }); |
| 64 | + |
| 65 | + return spConsentManager; |
| 66 | +}; |
| 67 | + |
| 68 | +const App = () => { |
| 69 | + const [authResult, setAuthResult] = useState(); |
| 70 | + const contentpassSdk = useContentpassSdk(); |
| 71 | + const spConsentManager = useRef(); |
| 72 | + |
| 73 | + useEffect(() => { |
| 74 | + const onContentpassStateChange = (state) => { |
| 75 | + setAuthResult(state); |
| 76 | + }; |
| 77 | + |
| 78 | + contentpassSdk.registerObserver(onContentpassStateChange); |
| 79 | + |
| 80 | + return () => { |
| 81 | + contentpassSdk.unregisterObserver(onContentpassStateChange); |
| 82 | + }; |
| 83 | + }, [contentpassSdk]); |
| 84 | + |
| 85 | + useEffect(() => { |
| 86 | + // wait for the authResult to be set before setting up Sourcepoint |
| 87 | + if (!authResult || authResult.state === ContentpassStateType.INITIALISING) { |
| 88 | + return; |
| 89 | + } |
| 90 | + |
| 91 | + spConsentManager.current = setupSourcepoint( |
| 92 | + authResult?.hasValidSubscription ?? false |
| 93 | + ); |
| 94 | + |
| 95 | + spConsentManager.current?.onAction((action) => { |
| 96 | + if (action.customActionId === "cp('login')") { |
| 97 | + contentpassSdk.authenticate() |
| 98 | + } |
| 99 | + }); |
| 100 | + |
| 101 | + spConsentManager.current?.loadMessage(); |
| 102 | + |
| 103 | + return () => { |
| 104 | + spConsentManager.current?.dispose(); |
| 105 | + }; |
| 106 | + }, [authResult, contentpassSdk]); |
| 107 | + |
| 108 | + return ( |
| 109 | + // Your app content |
| 110 | + ) |
| 111 | +} |
| 112 | +``` |
| 113 | +
|
| 114 | +## Troubleshooting |
| 115 | +While integrating the Contentpass SDK with Sourcepoint SDK (version `0.3.0`), you may encounter known issues. Pull requests |
| 116 | +addressing these issues have been submitted in the [Sourcepoint GitHub repository](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp): |
| 117 | +- [PR #10](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp/pull/10) |
| 118 | +- [PR #11](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp/pull/11) |
| 119 | +
|
| 120 | +### Temporary Fixes |
| 121 | +If these fixes are not yet available in the latest version of the SDK, you can patch node_modules in your project using |
| 122 | +tools like `yarn patch` or similar. The patch files can be found here: |
| 123 | +- Patch for [PR #10](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp/pull/10): [@sourcepoint-react-native-cmp-npm-0.3.0-2434c31dc9.patch](./sourcepoint-patches/@sourcepoint-react-native-cmp-npm-0.3.0-2434c31dc9.patch) |
| 124 | +- Patch for [PR #11](https://github.com/SourcePointUSA/react-native-sourcepoint-cmp/pull/11): (https://github.com/SourcePointUSA/react-native-sourcepoint-cmp/pull/11): [@sourcepoint-react-native-cmp-patch-34fca36663.patch](./sourcepoint-patches/@sourcepoint-react-native-cmp-patch-34fca36663.patch) |
| 125 | +
|
| 126 | +We hope these issues will be resolved in the next release of the Sourcepoint SDK, eliminating the need for manual patches. |
0 commit comments