🚀 Cookie Consent component

[JonL]

Before using this extension make sure you have gone through the library’s documentation so you understand what’s and what’s not possible and how to achieve your objective.

This Wappler component wraps the library for compatibility with App Connect while providing a UI to interact with it from the Studio app.

@jonl1/wappler-ac-cookie-consent

Screenies:

App Connect panel

App Connect panel and dynamic events

Databindings

Actions

Event data

Demo from the library website in case you want to play a bit with it:

https://playground.cookieconsent.orestbida.com

How to block scripts that place cookies until consent is given(or not)?

1. Change your script type to text/plain
2. Use the data-category attribute in your script tag and use as value one of the categories you have configured in the plugin.

<script src="external.js" type="text/plain" data-category="analytics"></script>

Once the user accepts the analytics category in the consent modal it will load the script. If the user doesn’t accept the analytics category the script will never run so the analytics cookies won’t be placed in the user’s browser.

Enjoy GDPRing.

[TMR]

I cant believe the timing of this post.

For weeks now I’ve been getting a Google reminder that our existing cookie/tracking GDPR response needs updating. I’ve never been happy with it but have been reluctant to start researching what else was available out there - then this drops into my lap!!

I’ve just (easily) installed the extension and its working as an absolute dream - there are so many options in there - it’s great. Thanks for taking the time to create this extension, I’m sure it’ll be really popular.

[JonL]

I’m really happy you are finding it useful and easy to use. I poured a lot of time in adding extra information to the UI and adding the myriad of options.

There are a few advanced options that I haven’t been able to figure out how to implement in a user friendly way due to the limitation of some UI controls that Wappler provides. So I need to give it further thought or maybe push for some additional UI controls from Wappler.

Had I built this to suit only my needs the UI configuration file would have been like 5 times smaller and the overall logic less extensive and polished. But to make it useful for the community the work involved starts growing very fast.

So, yeah, hopefully people find it useful

[TMR]

The only addition I could see that would be useful would be a modal editor to allow editing of the wording on the modal itself (Header, Description, Footer), maybe include it in the ‘UI Customization’ section…? I cant see right now where that’s done,

[JonL]

Check the translation file in public/js/jonl1-cookie-consent/locale/en.json

[TMR]

Perfect! thank you - I was looking in the public/assets/js folder - duh!

[sitestreet]

Nice work @JonL. I’m assuming it’s Node only or is it server agnostic?

[JonL]

It’s an App Connect extension, therefore agnostic. It’s frontend.

[bpj]

This is incredible! Thanks @JonL

[turn3636]

Great and useful extension! Thanks for your time and effort and contribution to the community.

[sitestreet]

I’m excited to use this extension but, as it’s the first time I’ve used the new extension facility, I’ve hit a problem.

When I go to install it I get this message:

But when I try to set the Web Root Folder, it just leaves the field blank and the extensions doesn’t like it:

Help!

[JonL]

That’s more a general question/issue. Probably you will need to open a bug report about not being able to change Web Root Folder

[Eric_F]

Hey Jon, how would I use Google Analytics with this? Would I add it to the page head like normal or would I have the Cookie Consent load the script?

Never messed with this type of thing before so I don’t really know what I am doing.

[JonL]

It’s up to you. Both options are possible.
I would advise you to go through the library official documentation on how to accomplish each one of them.
This extension just wraps the library so it’s compatible with App Connect and provides a UI so it’s usable from Wappler.

[Eric_F]

I just looked into this a bit more and wanted to confirm I have it right. I followed

GitHub - orestbida/cookieconsent: Simple cross-browser cookie-consent plugin...

So I add

<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="text/plain" data-cookiecategory="analytics" async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script type="text/plain" data-cookiecategory="analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag(){window.dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA_MEASUREMENT_ID');
</script>

to the head of my layout page and then add a new category to match the data-cookiecategory like

Do I need to add

cookieconsent.run({
    // ...
    page_scripts: true
    // ...
});

or is that done for me?

[JonL]

The attribute is data-category.

You don’t need to call run. All the JS stuff is handled by the extension.