Accept and reject cookies by lahdeero · Pull Request #9271 · decidim/decidim

lahdeero · 2022-05-06T16:41:11Z

🎩 What? Why?

Allow user to choose which cookies they want to accept and reject. Technically there is four (4) cookie categories: essential, preferences, analytics and marketing. Iframes are disabled until all categories are accepted, scripts that require cookies could be added as follows:

<script type="text/plain" data-cookiecategory="preferences">
  console.log('preferences cookies accepted');
</script>

Note that you can always change your cookie settings by clicking "Cookie settings" in the footer (participant side)

📌 Related Issues

Fixes Cookie policy: accept and reject #9170

Testing

Go to admin panel -> Find WYSIWYG/quill editor -> Add youtube video using editor -> Go to participant side to view content
Create meeting with embedded content -> Go to (live) meetings page
Create html block to homepage with the content below -> Go to home page

<div>
  <p>TESTING TEXT PLAIN SCRIPTS</p>
  <script type="text/plain" data-consent="essential">
    console.log('essential cookies accepted');
  </script>
  <script type="text/plain" data-consent="preferences">
    console.log('preferences cookies accepted');
  </script>
  <script type="text/plain" data-consent="analytics">
    console.log('analytics cookies accepted');
  </script>
  <script type="text/plain" data-consent="marketing">
    console.log('marketing cookies accepted');
  </script>
</div>

📷 Screenshots

♥️ Thank you!

lahdeero · 2022-05-09T13:46:28Z

EDIT: Staging changed to https://decidim-cookie-consent.herokuapp.com/

Sorry for inconvenience!

ahukkanen · 2022-05-10T08:05:24Z

I have some styling related suggestions.

Cookie notification

I would categorize the buttons differently:

Use primary button with the button we want participants to click by default, i.e. the "Accept all"
Use "hollow" button for the reject action
Use "clear" button for the settings
Make the heading a bit smaller (h5 maybe?)

Same thing for the buttons within the cookie settings modal.

Disabled content notification

I would put a bit of hightlight to the disabled content notification so that the user sees it clearly there is something missing. Colors are just example in the screenshot, use the Decidim theme colors instead.

Add a border to the element
Add a background to the element
Center the content within the notification, both vertically and horizontally
Add a bit of margin between the text and the button
Change the button label to "Change cookie settings"
Make the element a bit lower in height (only the notification, should not apply to the video when it is displayed)

We used .ql-editor selector to find content inside editor (while editing), but decidim_sanitize_editor added same class (ql-editor) when we are rendering content with editor.

ahukkanen

Technically this is good to go for me but could you please add the documentation page?

We maintain the developer related documentation in the decidim main repository, so we can include it in this PR.

For details, see the related issue (and Andres suggestion about the location for this):
decidim/documentation#94

ahukkanen

Docs looks good, just few minor things noticed when reading through.

docs/modules/customize/pages/cookies.adoc

ahukkanen

Great! This is good to go for me.

I'll leave this still open for @andreslucena and @carolromero to have the final review.

andreslucena

Foremost, great job @lahdeero! I have lots of smallish things to improve, but generally I liked the approach!

decidim-core/lib/decidim/core.rb

docs/modules/customize/pages/cookies.adoc

CHANGELOG.md

docs/modules/customize/pages/cookies.adoc

andreslucena

Wrong button, sorry 😅

andreslucena · 2022-05-26T09:45:45Z

I read before that we can prevent that by applying the following meta comments around the content we want to hide from the search index:

I didn't know about this tags @ahukkanen, great finding! Just a detail, that googleoff as far as I found It's for the Google Search Appliance, a discontinued Google product for internal use, and seems like it doesn't work with Googlebot/Google Search.

ahukkanen · 2022-05-26T10:02:27Z

I didn't know about this tags @ahukkanen, great finding! Just a detail, that googleoff as far as I found It's for the Google Search Appliance, a discontinued Google product for internal use, and seems like it doesn't work with Googlebot/Google Search.

Nice note @andreslucena ! I didn't catch that.

I think we should also add data-nosnippet attribute to the element wrapping the content of the cookie notification then:
https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr

Also the text that is used in place of the meta description is apparently called a "regular snippet" as per this doc:
https://developers.google.com/search/docs/advanced/appearance/featured-snippets#block-both

So this should prevent Google adding the content to the meta description.

ahukkanen

These should cover all the cases mentioned at:
https://en.wikipedia.org/wiki/Noindex

And data-nosnippet as per:
https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#data-nosnippet-attr

decidim-core/app/cells/decidim/data_consent/dialog.erb

andreslucena · 2022-05-27T09:18:11Z

So this should prevent Google adding the content to the meta description.

I hope so, this would be great to solve!!

andreslucena

Sorry for the delay. I wanted to give it a last review with fresh eyes. Everything seems great 👍🏽 🚀

andreslucena · 2022-06-08T07:19:09Z

@ahukkanen can you review this one last time? Thanks!

* Replace cookie consent dialog * Can manage cookies via modal * Add translations and remove old route * Update modal after accepting all or essential * Refactor javascript * Update cookie name * Trigger text/plain scripts * Disable iframes when cookies rejected * Add tests and fix accessability issues * Add and fix tests * Fix dialog * Add changelog and fix js-cookie dependency * Fix i18n and lint errors * Add role attributes to html * Remove old test * Add more logic to select_cookies * Copy packa-lock.json to design app * Accept essential cookies before system tests * Fix css stylelint offenses * Update failing tests * Update failing tests vol2 * Comment broken seed * Fix conflicting selectors We used .ql-editor selector to find content inside editor (while editing), but decidim_sanitize_editor added same class (ql-editor) when we are rendering content with editor. * Dont continue javascript logic if modal missing * Suggested css changes * Revert seed * Remove locals prefix * Fix live meetings without cookies * Add config for cookies * Fix dialog mobile view * Update tests * normalize locales * Add max height to disabled iframe * Add organization variable so it sets cookie * Prevent cookie dialog in social share tests * Add test for cookie details * Update changelog * Update css for medium size screens * Prevent search engines from indexing modals * Clean copy paste code * Update changelog * Change cookie variable names * Fix iframe disabled param * Fix cookieName variable * Reduce amount of custom css in dialog * Css changes * Make category descriptions easier to open * i18n Essential only -> Accept only essential * Change term in tests also * Change cookie consent to data consent * Change variable name * Update file name in test * Update cell name * Add cookies documentation * Update cookies documentation * Remove colon * Use antora docs formatting for the list * Add session cookie and update documentation * Tell robots not to care about the dialog

lahdeero added 12 commits April 27, 2022 16:34

Replace cookie consent dialog

a9dc355

Can manage cookies via modal

0ec1502

Add translations and remove old route

67eb815

Update modal after accepting all or essential

f77c716

Refactor javascript

2fd85f7

Update cookie name

b0c57c3

Trigger text/plain scripts

ed3ef18

Disable iframes when cookies rejected

1aa1c44

Add tests and fix accessability issues

4aeb2d4

Add and fix tests

d9e3133

Fix merge conflict

ef15293

Fix dialog

d310a16

lahdeero changed the title ~~Replace cookie consent dialog~~ Accept and reject cookies May 6, 2022

lahdeero added 11 commits May 6, 2022 19:57

Add changelog and fix js-cookie dependency

e7459b7

Fix i18n and lint errors

dc9fd3c

Add role attributes to html

a630be4

Remove old test

b425a57

Add more logic to select_cookies

826ad8f

Copy packa-lock.json to design app

2522c98

Accept essential cookies before system tests

c36b799

Fix css stylelint offenses

bfa7378

Update failing tests

10091d3

Update failing tests vol2

9ec7393

Comment broken seed

2d8b0c5

ahukkanen marked this pull request as draft May 10, 2022 07:52

lahdeero added 3 commits May 10, 2022 11:17

Merge branch 'develop' into feature/cookie-settings

308c83c

Fix conflicting selectors

429bd30

We used .ql-editor selector to find content inside editor (while editing), but decidim_sanitize_editor added same class (ql-editor) when we are rendering content with editor.

Dont continue javascript logic if modal missing

ca71f68

ahukkanen requested changes May 24, 2022

View reviewed changes

Add cookies documentation

97c7965

ahukkanen requested changes May 24, 2022

View reviewed changes

docs/modules/customize/pages/cookies.adoc Outdated Show resolved Hide resolved

docs/modules/customize/pages/cookies.adoc Show resolved Hide resolved

lahdeero added 2 commits May 25, 2022 10:42

Update cookies documentation

bc81ce3

Remove colon

d9db9ea

ahukkanen reviewed May 25, 2022

View reviewed changes

docs/modules/customize/pages/cookies.adoc Outdated Show resolved Hide resolved

Use antora docs formatting for the list

f8d6835

ahukkanen approved these changes May 25, 2022

View reviewed changes

andreslucena approved these changes May 26, 2022

View reviewed changes

andreslucena requested changes May 26, 2022

View reviewed changes

ahukkanen requested changes May 26, 2022

View reviewed changes

decidim-core/app/cells/decidim/data_consent/dialog.erb Outdated Show resolved Hide resolved

lahdeero added 2 commits May 27, 2022 11:59

Add session cookie and update documentation

69a09f5

Tell robots not to care about the dialog

267b44a

andreslucena approved these changes Jun 8, 2022

View reviewed changes

andreslucena requested a review from ahukkanen June 8, 2022 07:18

ahukkanen approved these changes Jun 8, 2022

View reviewed changes

ahukkanen merged commit 326e677 into decidim:develop Jun 8, 2022

ahukkanen deleted the feature/cookie-settings branch June 8, 2022 07:33

ahukkanen mentioned this pull request Aug 14, 2022

Fix iframe disabling producing invalid HTML #9685

Merged

ahukkanen mentioned this pull request Sep 19, 2022

Fix source format in the data consent docs for the example #9837

Merged

ahukkanen mentioned this pull request Mar 2, 2023

Video embeds aren't shown in short_description field #10130

Closed

andreslucena mentioned this pull request Jun 12, 2023

Show only categories with items in data consent modal #10989

Closed

andreslucena mentioned this pull request Jun 26, 2023

Add Content Security Policy support #10700

Merged

alecslupu added this to the 0.27.0 milestone Jul 14, 2023

Uh oh!

Conversation

lahdeero commented May 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎩 What? Why?

📌 Related Issues

Testing

📷 Screenshots

Uh oh!

lahdeero commented May 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ahukkanen commented May 10, 2022

Cookie notification

Disabled content notification

Uh oh!

ahukkanen left a comment

Choose a reason for hiding this comment

Uh oh!

ahukkanen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ahukkanen left a comment

Choose a reason for hiding this comment

Uh oh!

andreslucena left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andreslucena left a comment

Choose a reason for hiding this comment

Uh oh!

andreslucena commented May 26, 2022

Uh oh!

ahukkanen commented May 26, 2022

Uh oh!

ahukkanen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

andreslucena commented May 27, 2022

Uh oh!

andreslucena left a comment

Choose a reason for hiding this comment

Uh oh!

andreslucena commented Jun 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

lahdeero commented May 6, 2022 •

edited

Loading

lahdeero commented May 9, 2022 •

edited

Loading