Dynamically accepting/rejecting permission before showing dialog

[coluccini]

Hi! First of all: thanks for this amazing library, it saved me a lot of time ❤️

I've have the cookie-consent installed and working perfectly on my website.

I'm now creating a native app, that it is basically a wrapper that loads the website in a webview. And as I need to ask permission to track the user already on the app side I was wondering if there is a way to let cookie-consent "knows" about the user's decision and handle it without showing the dialog.

[jelen07]

Hi @coluccini,

One of our clients uses cookie-consent within the mobile app. It's possible thanks to the communication of the web with the webview using postMessage(). For example in React via:

window.ReactNativeWebView.postMessage(JSON.stringify(message));

In short - you need to ensure synchronization of consents between the web and webview.

[coluccini]

Thanks Vojtěch! I already have the communication between app and web implemented. My question is about how do I set the consent coming from the app on the website before/without showing the dialog. I’ve tried it using the init event but it seems that is not triggered for some reason (not even when I load the website in a regular browser and even I straight copy&paste it from the docs examples

…

On Sun, 5 Jan 2025 at 16:46, Vojtěch Lacina ***@***.***> wrote: Hi @coluccini <https://github.com/coluccini>, One of our clients uses cookie-consent within the mobile app. It's possible thanks to the communication of the web with the webview using postMessage(). For example in React via: window.ReactNativeWebView.postMessage(JSON.stringify(message)); In short - you need to ensure synchronization of consents between the web and webview. — Reply to this email directly, view it on GitHub <#94 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE3EMY7VAU4CWP3I6Q52OY32JFHV3AVCNFSM6AAAAABURR6RJCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZRGY3DQMRXGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[tg666]

Hi @coluccini

Something like this should work for sending consent from a web/webview to the app:

<script>
    window.cookieConsentWrapperEvents = window.cookieConsentWrapperEvents || [];

    window.cookieConsentWrapperEvents.push(['init', () => {
        const postConsent = () => {
            const consent = CookieConsentWrapper.consentCookieValue;

            if (consent && 'ReactNativeWebView' in window) {
                window.ReactNativeWebView.postMessage(JSON.stringify({
                    consent: consent,
                }));
            }
        };

        window.cookieConsentWrapperEvents.push(['consent:first-action', postConsent]);
        window.cookieConsentWrapperEvents.push(['consent:changed', postConsent]);
    }]);
</script>

The application should receive the message {"consent": "...consent cookie value..."}.

You need to save the value of the consent key somewhere and pass it to the webview as a cookie value (by default it is the cc-settings cookie) when you open a new webview.

I can't advise on the exact implementation as I don't have much experience with React Native.

[coluccini]

Thanks tg666! But I'm trying to do the opposite: consent is first done on the app so I then want to set the same consent on the web (thous avoiding the dialog been shown).

Please, don't focus on the web / app communication. I got that part covered.

For simplicity's sake, let say that when the web is loaded I have the consent value coming from the app saved on a global var like window.consentOnTheApp = "accepted" | "denied". How do I dynamically accept/denied consent based on that value before showing the dialog?

I was trying something like this:

window.cookieConsentWrapperEvents = window.cookieConsentWrapperEvents || [];

window.cookieConsentWrapperEvents.push([
  "init",
  function () {
    const categoriesToAccept = window.consentOnTheApp === "accepted"
      ? ["functionality_storage","ad_storage","ad_user_data","ad_personalization","analytics_storage"]
      : [];
    CookieConsentWrapper.unwrap().acceptCategory(categoriesToAccept); 
  },
]);

But for some reason the init function never gets triggered. Even if I only add a console.log() it never gets printed. Do you know what could be the reason? cookie-consent implementation is working just fine

[tg666]

I can't think of a reason why your init listener won't call.

1. Does it get called on normal web access (not webview from the app)?
2. What version are you using? Adding event listener using window.cookieConsentWrapperEvents works since version 1.0.0.

Anyway, when the init event is called, the cookie bar is already created and should be displayed. Whether or not the cookies bar is displayed is determined by the existence of the cc-settings cookie.

So I would try passing the cookie to the webview.
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#managing-cookies

[coluccini]

Oh that was the issue! I'm still on 0.5 🤦‍♂️

I can pass a value on the cookie cc-settings 😊

But just by doing that, does Tag Manager will pick the consent values and act accordingly? or do I still need to do something else?

[coluccini]

I thought I can go with this more simple approach. Do you think that it might be some problems with it?

if (window.consentOnTheApp === "denied"){
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "updateConsent",
    functionality_storage: "granted",
    ad_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    analytics_storage: "denied",
  });
  const twoYearsInSeconds = 2 * 365 * 24 * 60 * 60;
  const consentDate = new Date().toISOString();
  const values = {
    categories: ["functionality_storage"],
    level: ["functionality_storage"],
    revision: 0,
    data: { last_action_date: consentDate },
    rfc_cookie: false,
    consent_date: consentDate,
    last_consent_update: consentDate,
    consent_uuid: Math.floor(Math.random() * (1000000 - 10000 + 1)) + 10000,
  };

  document.cookie = `cc-settings=${JSON.stringify(values)}; domain=.joppy.me; max-age=${twoYearsInSeconds}; SameSite=Lax`;
}

// load GTM

Note: if not denied, I would finally going to show the dialog to let users customize their selection