[Reaguj natywnie] 1. consentmanager Integracja SDK
W tym dokumencie znajdziesz ogólne informacje na temat integracji naszego SDK z Twoim projektem. Więcej szczegółów znajdziesz w naszym Dokumentacja API dokumentacja.
1. Instalacja
consentmanager SDK to kompleksowe rozwiązanie do zarządzania zgodą użytkownika w aplikacjach mobilnych. Zaprojektowany do obsługi zgodności z GDPR, preferencji prywatności użytkownika i przejrzystości śledzenia reklam, ten SDK zapewnia bezproblemową integrację z platformami iOS i Android. Ponadto oferuje wtyczki/mostki opakowujące dla React Native, Flutter i Unity, dzięki czemu jest wszechstronny w różnych środowiskach programistycznych.
W tym dokumencie opisano procedurę instalacji i funkcje udostępniane naszym klientom tworzącym aplikacje przy użyciu React Native, aby mogli uzyskać dostęp do naszego zestawu SDK CMP do zarządzania zgodami za pośrednictwem naszego mostu React Native Native Bridge. Aby uzyskać więcej szczegółów, zapoznaj się z naszą Dokumentacja API dokumentacja.
Kroki — opis wysokiego poziomu
-
Integracja i konfiguracja:
- Zintegruj pakiet SDK ze swoją aplikacją.
- Skonfiguruj ustawienia SDK zgodnie ze swoimi potrzebami.
-
Tworzenie instancji i wyświetlanie warstwy zgody:
- Podczas uruchamiania aplikacji utwórz instancję
CMPManagerklasa. Ta instancja będzie obsługiwać proces wyrażania zgody. - W razie potrzeby zestaw SDK automatycznie wyświetli ekran zgody.
- Podczas uruchamiania aplikacji utwórz instancję
-
Przetwarzanie danych zgody użytkownika:
- Po zebraniu zgód informacje są przechowywane i dostępne do zapytania za pośrednictwem różnych właściwości i metod udostępnianych przez nasz zestaw SDK. Będziesz mieć informacje o odrzuconych lub zaakceptowanych zgodach, dostawcach i celach.
1.1 Integracja i konfiguracja
NPM
Opublikowaliśmy nasz most React Native do NPM. Uruchom ten wiersz na swoim terminalu:
npm install cm-sdk-react-native-v3Upewnij się również, że build.gradle plik w folderze Android twojego projektu ma zadeklarowaną właściwą zależność. To jest React Native Bridge, więc obie zależności muszą być zsynchronizowane. To samo dotyczy iOS: upewnij się, że twój plik podspec odzwierciedla właściwą zależność.
Android:
dependencies {
// For < 0.71, this will be from the local maven repo
// For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+"
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation "net.consentmanager.sdkv3:cmsdkv3:3.2.0" // Make sure this line is inserted
}iOS
s.dependency "cm-sdk-ios-v3", "3.2.0"Łączenie (React Native 0.59 i starsze)
Jeśli używasz React Native 0.59 lub starszej wersji, musisz ręcznie połączyć moduły natywne:
react-native link cm-sdk-react-native-v31.2 Tworzenie instancji i wyświetlanie warstwy zgody
W kodzie musisz utworzyć instancję klasy CMPManager. Musisz skonfigurować dwa obiekty, które zostaną przekazane do metody getInstance: UrlConfig, który obsługuje konfigurację CMP, taką jak Code-ID i domyślny język, i ConsentLayerUIConfig. który skonfiguruje wygląd WebView, który wyświetli warstwę zgody. Następnie możesz użyć metody checkWithServerAndOpenIfNecessary() aby automatycznie pobrać niezbędne dane z naszego serwera i określić, czy ekran zgody musi zostać wyświetlony, czy nie. Jeśli tak, SDK automatycznie wyświetli ekran zgody w tym momencie, za pośrednictwem WebView utworzony przez nasz zestaw SDK, który wyświetli warstwę zgody z tekstem i przyciskami zgodnie z konfiguracją CMP (wybraną za pomocą identyfikatora kodu CMP), zbierze dane i zapisze informacje o zgodzie w obszarze NSUserDefaults/UserPreferences urządzenia, dzięki czemu aplikacja będzie mogła wyświetlać odpowiednie reklamy.
Należy pamiętać, że funkcjonalności związane z określeniem, czy zgoda jest potrzebna, czy nie, a także wyświetlanie warstwy zgody zależą od niezawodnego połączenia sieciowego. Jeśli nie ma dostępnego połączenia lub jeśli mechanizm ponownej próby nie dotrze do naszego serwera, zdarzenie didReceiveError zwróci błąd limitu czasu, a zatem SDK nie będzie w stanie określić potrzeby zgody, ponieważ nie będzie w stanie wyświetlić warstwy zgody. Upewnij się, że Twoja logika to uwzględnia.
Przykład:
const HomeScreen: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
const [toastMessage, setToastMessage] = useState<string | null>(null);
useEffect(() => {
initializeConsent();
}, []);
const initializeConsent = async () => {
try {
await CmSdkReactNativeV3.setUrlConfig({
id: 'YOUR-CODE-ID-GOES-HERE', // Code-ID retrieved from your CMP dashboard
domain: 'delivery.consentmanager.net', // Domain, alsro retrieved from the dashboard
language: 'EN', // International language code examples: EN, DE, IT, PL, etc.
appName: 'CMDemoAppReactNative', // Used for reporting purposes only, that's the name that will be used on the reports
});
await CmSdkReactNativeV3.setWebViewConfig({
position: 'fullScreen',
backgroundStyle: { type: 'dimmed', color: 'black', opacity: 0.5 },
cornerRadius: 5,
respectsSafeArea: true,
allowsOrientationChanges: true,
});
await CmSdkReactNativeV3.checkWithServerAndOpenIfNecessary();
console.log('CMPManager initialized and open consent layer opened if necessary');
} catch (error) {
console.error('Error initializing consent:', error);
} finally {
setIsLoading(false);
}
};1.3 Przetwarzanie danych zgody użytkowników
Sprawdzanie zgód użytkowników
Nasz SDK oferuje różne metody sprawdzania i pobierania informacji o zgodzie. Główne metody są wyświetlane w poniższym przykładzie:
// On the example below retrieved from our Demo App, we have some examples
// of how to check consents from the user, either accepted or rejected.
// Helper function
const handleApiCall = async (
apiCall: () => Promise<any>,
successMessage: (result: any) => string,
errorMessage: string = 'An error occurred'
) => {
try {
const result = await apiCall();
showToast(successMessage(result));
} catch (error) {
showToast(`${errorMessage}: ${error}`);
}
};
const buttons = [
{
title: 'Has User Choice?',
onPress: () => handleApiCall(
CmSdkReactNativeV3.hasUserChoice,
(result) => `Has User Choice: ${result}`
),
},
{
title: 'Has Purpose ID c53?',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.hasPurposeConsent('c53'),
(result) => `Has Purpose: ${result}`
),
},
{
title: 'Has Vendor ID s2789?',
onPress: () => handleApiCall(
() => CmSdkReactNativeV3.hasVendorConsent('s2789'),
(result) => `Has Vendor: ${result}`
),
},
]Aby uzyskać więcej informacji na temat innych metod, zapoznaj się z naszą pełną wersją Dokumentacja API.
Ponowne otwarcie warstwy zgody w celu sprawdzenia wyborów użytkowników
Aby umożliwić użytkownikowi sprawdzenie lub zmianę swoich wyborów, wystarczy zadzwonić pod numer openConsentLayer()
CmSdkReactNativeV3.forceOpenTa metoda wyświetli warstwę zgody za pośrednictwem tej samej instancji WebView, która została utworzona w poprzednich krokach.
Importowanie/eksportowanie informacji o zgodzie do innych źródeł
W niektórych przypadkach aplikacja natywna może zawierać webviews w celu wyświetlania informacji, takich jak reklamy lub treści. Aby przesłać informacje o zgodzie z SDK do webview, możesz pobrać ciąg zgody za pomocą:
CmSdkReactNativeV3.exportCMPInfoSpowoduje to wyeksportowanie informacji o zgodzie i wszystkich dalszych danych, które są potrzebne CMP. Następnie możesz przekazać te informacje do CMP, który znajduje się w Twoim widoku internetowym, dodając je do adresu URL, który jest wywoływany w widoku internetowym.
Jeśli w przeciwnym razie musisz zaimportować ciąg zgody za pomocą zestawu SDK, możesz skorzystać z poniższego przykładu:
() => CmSdkReactNativeV3.importCMPInfo(
'Q1FERkg3QVFERkg3QUFmR01CSVRCQkVnQUFBQUFBQUFBQWlnQUFBQUFBQUEjXzUxXzUyXzUzXzU0XzU1XzU2XyNfczI3ODlfczI3OTBfczI3OTFfczI2OTdfczk3MV9VXyMxLS0tIw'
)Integracja z Apple Tracking Transparency (ATT)
Jeśli korzystasz ze śledzenia lub analityki w swojej aplikacji, zalecamy zapoznanie się z przewodnikiem Implementacja ATT tutaj.
Tworzenie niestandardowego układu
Aby utworzyć niestandardowy widok WKWebView, na przykład zmienić jego położenie lub tło, możesz zmienić konfigurację przekazaną do obiektu ConsentLayerUIConfig w następujący sposób:
ConsentLayerUIConfig(
position: .halfScreenTop,
backgroundStyle: .dimmed(.grey, 0.75),
cornerRadius: 20,
respectsSafeArea: false,
allowsOrientationChanges: true)Logowanie
Podczas korzystania z naszego zestawu SDK dla systemu iOS może zaistnieć potrzeba debugowania lub analizowania informacji z dziennika w różnych celach. Dzienniki generowane przez nasz zestaw SDK są oznaczone jako „CMP”, co pozwala na łatwe filtrowanie i przeglądanie tylko odpowiednich dzienników. Aby uzyskać więcej informacji, zapoznaj się z w tej sekcji naszej dokumentacji.
