Update cookie banner functionality

chromeos · Dec 7, 2022 · ea4b88d
1 parent 0d47172
commit ea4b88d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 21 deletions.
diff --git a/site/_components/cookie-disclaimer.njk b/site/_components/cookie-disclaimer.njk
@@ -21,8 +21,8 @@
  <div class="cookie-disclaimer__wrapper">
  <p id="cookieDisclaimer" class="type--h5">{{content.disclaimer | replace('((t))', settings) | safe}}</p>
  <div class="cookie-disclaimer__buttons">
- <a href="{{ctas.info.url}}?hl={{localeCode}}" class="cta cta--medium">{{ctas.info.text}}</a>
- <button class="cta cta--high">{{ctas.accept}}</button>
+ <button class="cta cta--high" data-type="decline">{{ctas.decline}}</button>
+ <button class="cta cta--high" data-type="accept">{{ctas.accept}}</button>
  </div>
  </div>
 </dialog>

diff --git a/site/_layouts/_wrapper.njk b/site/_layouts/_wrapper.njk
@@ -23,7 +23,6 @@
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans:400,500|Google+Sans+Text:400,400i,500,700,700i|Google+Sans+Mono:400,600&display=swap" />
  <link rel="stylesheet" href="/sass/style.scss" />
  <script type="module" defer src="/js/main.js"></script>
- <script defer src="https://www.googletagmanager.com/gtag/js?id=UA-168234575-1" type="module"></script>
  </head>
  <body id="body">
  {% from 'header.njk' import header %} {{ header(nav, search.placeholder, subscribe.cta, locale) }}

diff --git a/site/en/_data/cookieDisclaimer.yml b/site/en/_data/cookieDisclaimer.yml
@@ -1,11 +1,9 @@
 title: Cookie Consent.
 content:
- disclaimer: Google uses cookies to deliver its services, to personalize ads, and to analyze traffic. You can adjust your privacy controls anytime in ((t)).
+ disclaimer: ChromeOS.dev uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. ((t)).
  settings:
- text: Google settings
- url: https://support.google.com/accounts/answer/3118621
-ctas:
- accept: Ok, Got it.
- info:
  text: Learn more.
- url: https://www.google.com/policies/technologies/cookies
+ url: https://policies.google.com/technologies/cookies
+ctas:
+ accept: Agree
+ decline: No thanks
diff --git a/site/es/_data/cookieDisclaimer.yml b/site/es/_data/cookieDisclaimer.yml
@@ -1,11 +1,9 @@
 title: Acuerdo al uso de cookies.
 content:
- disclaimer: Google usa cookies para brindar sus servicios, personalizar anuncios y analizar el tráfico. Puedes cambiar los controles de privacidad en la ((t)), en cualquier momento.
+ disclaimer: ChromeOS.dev utiliza cookies para ofrecer y mejorar la calidad de sus servicios y para analizar el tráfico. Si está de acuerdo, las cookies también se utilizan para mostrar publicidad y personalizar el contenido y los anuncios que ve. ((t)).
  settings:
- text: configuración de Google
- url: https://support.google.com/accounts/answer/3118621?hl=es
-ctas:
- accept: Ok, Acepto.
- info:
- text: Más información.
+ text: Más información
  url: https://www.google.com/policies/technologies/cookies?hl=es
+ctas:
+ accept: Aceptar
+ decline: No, gracias
diff --git a/site/js/components/cookie-disclaimer.js b/site/js/components/cookie-disclaimer.js
@@ -25,23 +25,33 @@ export class CookieDisclaimer {
  */
  constructor(elem, spotReference) {
  this.elem_ = elem;
- this.acceptButton_ = this.elem_.querySelector('.cta--high');
+ this.acceptButton_ = this.elem_.querySelector('[data-type="accept"]');
+ this.declineButton_ = this.elem_.querySelector('[data-type="decline"]');
  this.spotReference_ = spotReference;
  this.acceptButton_.addEventListener('click', this.acceptCookieUsage.bind(this));
+ this.declineButton_.addEventListener('click', this.declineCookieUsage.bind(this));
+ this.cookieStore = 'chromeos-accepts-cookies--v2';
  this.checkCookieUsageAcceptance();
  }
 
  /**
  * Checks if the user has accepted the use of the cookies.
  */
  checkCookieUsageAcceptance() {
- const acceptsCookies = localStorage.getItem('chromeos-accepts-cookies');
+ const acceptsCookies = localStorage.getItem(this.cookieStore);
 
- if (!acceptsCookies) {
+ if (acceptsCookies !== 'true' && acceptsCookies !== 'false') {
  this.openDialog();
  this.keyHandler();
  this.acceptButton_.focus();
  }
+
+ if (acceptsCookies === 'true') {
+ const gaScript = document.createElement('script');
+ gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-168234575-1';
+ gaScript.type = 'module';
+ document.head.appendChild(gaScript);
+ }
  }
 
  /**
@@ -75,7 +85,16 @@ export class CookieDisclaimer {
  * Sets the cookie usage acceptance flag.
  */
  acceptCookieUsage() {
- localStorage.setItem('chromeos-accepts-cookies', true);
+ localStorage.setItem(this.cookieStore, true);
+ this.closeDialog();
+ this.checkCookieUsageAcceptance();
+ }
+
+ /**
+ * Sets the cookie usage acceptance flag to decline.
+ */
+ declineCookieUsage() {
+ localStorage.setItem(this.cookieStore, false);
  this.closeDialog();
  }