As I build my product web site, I want to add code for Google ads, analytics, Facebook pixel, etc.
As these products use cookies, I need my visitor’s permission to use them. However, I still want them to be able to use my website if they choose not to allow cookies, so I need a [Disable Cookies] button in the alert they see when they arrive the first time.
How am I best to use Wappler to disable those functions and cookies if the user chooses to do so?
Best wishes,
Antony.
I haven’t read this doc, but maybe it will help.
Thanks @brad - this shows how to add the alert, but not how to give the one-click option to disable the cookies!
I don’t think you can do that. Blocking cookies is a browser setting that a user can set in the browser settings. I don’t think you can, nor should, change a users browser settings.
If a user is concerned about cookies they likely have it turned off locally already.
Thanks for your thoughts Brad!
Lots of web sites give you the option to control your cookie use when you first visit them (like the example below), and that is the functionality I’m looking to implement!
Interesting, I have never come across a site that uses that. Maybe you need to use a third party service like Cookiebot to achieve it. I will be watching to see what you come up with. Good luck! 
I’d be quite happy with a solution that just disables all third party cookies… is this easy to do within Wappler upon a user action like clicking a button? 
Hey @Antony been a while since I’ve been on Wappler so I can’t give you a definitive Wappler way however how you would do this is to wrap all your cookie logic in a conditional element (this would have to come server side possibly though if your using things like Google analytics as I think Wappler will still render everything otherwise.
But essentially what you need to do is just wrap all your cookie setting stuff in an area that will only render / come through if the user has agreed to accept cookies. I.e a condition that says only inject the analytics JavaScript if user has accepted terms.
If I get a chance tomorrow I’ll have a play with a basic Wappler screen to see if I can figure out the Wappler way of doing it.
I don’t think there will be a disable all cookies setting in Wappler though because you are essentially enabling cookies when you load the various analytics or whatever other third party apps you are using.
Hi @Antony,
So I have had a play with this. You can add the following type of Javacript as a function that can then be called on a click (for example if they click the accept cookies button). This will dynamically insert the tracking scripts from google analytics. You can then take this to do the same for any other thirdparty libs you are using. You would then want to probably create a cookie to track that they have accepted so you can just run the script straight away. I havent actually tried this with Google Analytics but I think it should work.
Add the following script to the bottom of your body.
<script>
function addCookie(){
const target = document.body;
const gascript = document.createElement("script");
gascript.setAttribute("async", "")
gascript.src = "https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID";
target.appendChild(gascript);
const gascriptblock = document.createElement("script");
const inlineScript = document.createTextNode(`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TRACKING_ID');
`);
gascriptblock.appendChild(inlineScript);
target.appendChild(gascriptblock);
}
</script>
Then you could add this function as an action on your button as a static event for example:
Hope that helps
Brilliant @datguru, it works!
A few important changes…
I’m experimenting now with a disable cookies function now, as GDPR does require you to make one of these available to your users.
Thanks for your help!
Antony.
<script>
function enable_cookies(){
const target = document.body;
const gascript = document.createElement("script");
gascript.setAttribute("async", "")
gascript.src = "https://www.googletagmanager.com/gtag/js?id=GOOGLE_CODE";
target.appendChild(gascript);
const gascriptblock = document.createElement("script");
const inlineScript = document.createTextNode(`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GOOGLE_CODE');
`);
gascriptblock.appendChild(inlineScript);
target.appendChild(gascriptblock);
}
</script>
You actually can
onclick="enable_cookies()"
Hmmm… I can’t seem to make the js function call work in that way @teodor… not to worry, I’ll stick with my flows!
Here is the code for disabling Google Analytics…
See https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out
function disable_cookies (){
window['ga-disable-GOOGLE_CODE'] = true;
}
This also requires you to set this window parameter to false in your enable_cookies() function, which now looks like this:
function enable_cookies(){
const target = document.body;
const gascript = document.createElement("script");
gascript.setAttribute("async", "")
gascript.src = "https://www.googletagmanager.com/gtag/js?id=GOOGLE_CODE";
target.appendChild(gascript);
const gascriptblock = document.createElement("script");
const inlineScript = document.createTextNode(`
window['ga-disable-GOOGLE_CODE'] = false;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GOOGLE_CODE');
`);
gascriptblock.appendChild(inlineScript);
target.appendChild(gascriptblock);
}
I used a static event as per my screenshot to do that but this may not be available depending on what element you are trying to use etc.
Glad you got it all working though!
I just release a Cookie Consent component that handles cookie consent.