Tilbage til bloggen
Technical

Flutter & React Native: Mobile CMP Implementation

GetCookies-teametMarch 22, 202614 min læsning
MobileFlutterReact NativeiOSAndroid
Flutter & React Native: Mobile CMP Implementation

Flutter & React Native: Mobile CMP Implementation

Date: March 22, 2026 Author: GetCookies Team Category: Technical Reading Time: 14 min


Mobile apps are the new frontier for privacy enforcement. Apple's App Tracking Transparency (ATT) and Google Play's Data Safety requirements mean you can't just "wing it" with consent anymore.

If you are building cross-platform apps with Flutter or React Native, you have a unique challenge: you need a Consent Management Platform (CMP) that speaks both "Native" (iOS/Android) and "Dart/JS".

This guide explores how to implement GetCookies in cross-platform mobile environments.

The "Double Consent" Problem

On iOS, you often need two layers of consent:

  1. Apple ATT: The system popup ("Allow App to track you?").
  2. GDPR/CMP: The detailed preferences (Purposes, Vendors).

Best Practice: Show the GDPR CMP first. If the user says "No" to tracking there, do not even show the Apple ATT prompt (it's redundant and annoying). Only show ATT if the user accepts tracking in the CMP.

React Native Implementation

For React Native, we use a WebView overlay or a Native Module bridge.

1. The WebView Approach (Easiest)

Use react-native-webview to load your GetCookies web widget.

  • Pros: Same configuration as your website. Updates instantly without app store release.
  • Cons: Doesn't control native SDKs (like Firebase) automatically.

2. The Bridge Approach (Robust)

You listen for messages from the WebView and set native flags.

// App.js
import { Settings } from 'react-native-fbsdk-next';

const onConsentMessage = (event) => {
  const consent = JSON.parse(event.nativeEvent.data);
  
  if (consent.categories.marketing) {
    Settings.setAdvertiserTrackingEnabled(true); // Enable Facebook SDK
  } else {
    Settings.setAdvertiserTrackingEnabled(false);
  }
};

Flutter Implementation

In Flutter, the logic is similar using webview_flutter.

// consent_dialog.dart
WebView(
  initialUrl: 'https://cdn.getcookies.io/mobile-wrapper.html?id=YOUR_ID',
  javascriptChannels: {
    JavascriptChannel(
      name: 'GetCookiesBridge',
      onMessageReceived: (JavascriptMessage message) {
        Map<String, dynamic> consent = jsonDecode(message.message);
        if (consent['marketing']) {
          FacebookAppEvents().setAdvertiserTracking(enabled: true);
        }
      },
    ),
  },
)

Google Consent Mode in Apps

Google Analytics for Firebase now supports Consent Mode. You must map your CMP choices to Firebase consent types:

  • ad_storage
  • analytics_storage
  • ad_user_data
  • ad_personalization

Crucial: Set these defaults in your Info.plist (iOS) and AndroidManifest.xml (Android) so they apply before the app code even runs.

Conclusion

Mobile consent is harder than web consent because you are controlling compiled SDKs, not dynamic script tags. The key is "Bridging": using the CMP UI to drive the native configuration of your analytics and ad SDKs.

G

GetCookies-teamet

Skrevet og vedligeholdt af GetCookies-teamet hos Getia AS i Oslo, Norge. Artiklen er generel information om cookiesamtykke og ikke juridisk rådgivning.

Scan dit eget website gratis

Gratisplanen kører banneret på ét website med tre cookie-scanninger om måneden. Intet kort, intet salgsopkald.