The Contentpass SDK can be seamlessly integrated with the Sourcepoint SDK to manage consent. Since the Sourcepoint SDK is a separate React Native package, you must install it independently. For detailed guidance, refer to the Sourcepoint SDK documentation.
To use the Sourcepoint SDK, follow these steps:
- Create a Sourcepoint Account: Set up a Sourcepoint account and create a property with the type APP.
- Configure the Property, ensure the property includes:
- Campaigns
- Partition Sets
- Scenarios (with the
acps
parameter — see here for details) - Messages
For more information, consult the Sourcepoint documentation.
A newly created property should resemble the following example:
To integrate the Sourcepoint SDK with the Contentpass SDK, you must define a custom action in Sourcepoint Messages:
- Navigate to
Messages
>GDPR Messages
>Web / Webview (TCF)
. - Edit the relevant message and add a custom action to the login button, such as
cp('login')
. - This custom action will authenticate users through the Contentpass SDK.
After setting up Sourcepoint, install its SDK package. Use the following code to integrate Contentpass and Sourcepoint SDKs in your app.
After creating a property in Sourcepoint, you must wait approximately 15 minutes before it becomes available for use
with the @sourcepoint/react-native-cmp
package. This delay allows the configuration to propagate.
Install the Sourcepoint SDK package, then use the following code to integrate the two SDKs in your app:
import { useEffect, useRef, useState } from 'react';
import { SPConsentManager } from '@sourcepoint/react-native-cmp';
import { ContentpassStateType, useContentpassSdk } from '@contentpass/react-native-contentpass';
const sourcePointConfig = {
accountId: 'SOURCEPOINT_ACCOUNT_ID',
propertyId: 'SOURCEPOINT_PROPERTY_ID',
propertyName: 'SOURCEPOINT_PROPERTY_NAME',
};
const setupSourcepoint = (hasValidSubscription) => {
const { accountId, propertyName, propertyId } = sourcePointConfig;
const spConsentManager = new SPConsentManager();
spConsentManager.build(accountId, propertyId, propertyName, {
gdpr: {
targetingParams: {
acps: hasValidSubscription ? 'true' : 'false',
},
},
});
return spConsentManager;
};
const App = () => {
const [authResult, setAuthResult] = useState();
const contentpassSdk = useContentpassSdk();
const spConsentManager = useRef();
useEffect(() => {
const onContentpassStateChange = (state) => {
setAuthResult(state);
};
contentpassSdk.registerObserver(onContentpassStateChange);
return () => {
contentpassSdk.unregisterObserver(onContentpassStateChange);
};
}, [contentpassSdk]);
useEffect(() => {
// wait for the authResult to be set before setting up Sourcepoint
if (!authResult || authResult.state === ContentpassStateType.INITIALISING) {
return;
}
spConsentManager.current = setupSourcepoint(
authResult.hasValidSubscription || false
);
spConsentManager.current?.onAction((action) => {
if (action.customActionId === "cp('login')") {
contentpassSdk.authenticate()
}
});
spConsentManager.current?.loadMessage();
return () => {
spConsentManager.current?.dispose();
};
}, [authResult, contentpassSdk]);
return (
// Your app content
)
}