cookie consent banner breaks sites with digital experiences

[donrestarone]

trafficstars

example: a-toi.ca

https://user-images.githubusercontent.com/35935196/190869660-48caec7c-b2b4-40c0-920d-04e5694f7b06.mov

We will need to investigate and determine if this bug is due to the individual site's implementation (is there anything a-toi.ca can do differently?) or if there is a bug in the framework

[gerodrig]

cookie consent banner breaks sites with digital experiences #1115

Problem description:

Pages with animation content are affected when accepting/rejecting cookies.

Technical description:

Cookie consent banner includes an anchor tag that redirects the users to the root path. This redirection includes query parameters that include service response if cookie was accepted or not. Based on this response user is redirected to href domain/cookies?cookies=true or domain/cookies?cookies=false where cookie selection saved in cookies and then user will be redirected back to root path. This action is triggered when accepts or rejects all cookies in banner modal that is loaded on the page for the first time. It is important to mention that if cookie is found this cookie banner consent won’t load.

Root Cause:

Page animations are cut/interrupted because cookies consent requires to redirect to another page as design under cookies controller.

app/controllers/cookies_controller.rb

class CookiesController < ApplicationController
	  def index
	    cookies[:cookies_accepted] = params[:cookies].presence
	

	    redirect_back fallback_location: root_path
	  end
	end

Workaround:

A proposed workaround is to modify the anchor tag to include target=”_self” which launch redirection to main page and will cause a reload of the page (see video). It is important to mention that redirection causes reload with other clients.

violet_rails/db/migrate/20220824121504_add_cookies_consent_ui_to_subdomain.rb

COOKIE_CONSENT_UI = 
  "<div class=\"cookies-consent__overlay position-fixed\" style=\"top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.5; z-index: 1000;\"></div>
  <div class=\"cookies-consent position-fixed bg-white d-md-flex justify-content-md-between\" style=\"bottom: 0; left: 0; width: 100%; padding: 2rem 1rem; z-index: 9000;\">
    <div class=\"cookies-consent__text-content col-md-8\" style=\"max-width: 700px;\">
      <h2 class=\"cookies-consent__title\" style=\"font-size: 1.4rem;\">We Value Your Privacy</h2>
      <p class=\"mb-4 mb-md-0\">
        We use cookies to enhance your browsing experience, serve personalized ads or content, and analyze our traffic. By clicking \"Accept All\", you consent to our use of cookies.
      </p>
    </div>
    <div class=\"cookies-consent__buttons-container d-flex flex-column col-md-4 col-xl-3\">
      <a class=\"btn btn-primary mb-3\" href=\"/cookies?cookies=true\ target="_self">Accept All</a>
      <a class=\"btn btn-outline-primary\" href=\"/cookies?cookies=false\" target="_self">Reject All</a>
    </div>  
  </div>"

Other solutions:

1. [Violet Framework change] Save cookies with a function. This will require code refactoring so a function can be triggered on client side to save the cookies locally.
2. [Animation change] Client can change the animation so state can be saved to keep animating after cookie refresh. In case for a-toi.ca as they implemented their animation with gsap they would have to save the animation and monitor the cookie banner so animation can continue when redirected back.

[donrestarone]

@gerodrig adding the target=”_self” looks like the easiest/cheapest change to make.

Do you want to test it out on the system? You can stage the change for feedback

[donrestarone]

I fixed this for a-toi.ca by upgrading to the newer consent controls that use button tags instead of a tags:

            <button id="accept-button" class="cookie-consent-button" data-value="true">Accept All</button>
            <button id="reject-button" class="cookie-consent-button" data-value="false">Reject All</button>