From 1f5f0a32c864dfa68c0f41f59f623580053a4fbc Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli Date: Mon, 12 Nov 2018 20:03:49 +0100 Subject: [PATCH] Add AdSense, GDPR code --- index.html | 19 ++++++++++- js/application.js | 23 +++++++++++-- js/local_storage_manager.js | 15 +++++++-- privacy.html | 53 +++++++++++++++++++++++------ style/main.css | 58 ++++++++++++++++++++++++++++++++ style/main.scss | 67 +++++++++++++++++++++++++++++++++++++ 6 files changed, 218 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index e28bf5a..7e2635d 100644 --- a/index.html +++ b/index.html @@ -68,6 +68,23 @@ +
+ + +
+ +
+

2048 uses cookies to analyse traffic to the site and to serve ads. Learn More

+ Got it +
+

2048

@@ -83,7 +100,7 @@
- x + ×

New: Get the new 2048 app for iOS and Android!

diff --git a/js/application.js b/js/application.js index 9b52c57..d5fa2ae 100644 --- a/js/application.js +++ b/js/application.js @@ -3,9 +3,12 @@ window.requestAnimationFrame(function () { new GameManager(4, KeyboardInputManager, HTMLActuator, LocalStorageManager); // TODO: This code is in need of a refactor (along with the rest) - var storage = new LocalStorageManager; - var noticeClose = document.querySelector(".notice-close-button"); - var notice = document.querySelector(".app-notice"); + var storage = new LocalStorageManager; + var noticeClose = document.querySelector(".notice-close-button"); + var notice = document.querySelector(".app-notice"); + var cookieNotice = document.querySelector(".cookie-notice"); + var cookieNoticeClose = document.querySelector(".cookie-notice-dismiss-button"); + if (storage.getNoticeClosed()) { notice.parentNode.removeChild(notice); } else { @@ -19,4 +22,18 @@ window.requestAnimationFrame(function () { } }); } + + if (storage.getCookieNoticeClosed()) { + cookieNotice.parentNode.removeChild(cookieNotice); + } else { + cookieNoticeClose.addEventListener("click", function () { + cookieNotice.parentNode.removeChild(cookieNotice); + storage.setCookieNoticeClosed(true); + if (typeof gtag !== undefined){ + gtag("event", "closed", { + event_category: "cookie-notice", + }); + } + }) + } }); diff --git a/js/local_storage_manager.js b/js/local_storage_manager.js index 9bf595c..fdc9171 100644 --- a/js/local_storage_manager.js +++ b/js/local_storage_manager.js @@ -19,9 +19,10 @@ window.fakeStorage = { }; function LocalStorageManager() { - this.bestScoreKey = "bestScore"; - this.gameStateKey = "gameState"; - this.noticeClosedKey = "noticeClosed"; + this.bestScoreKey = "bestScore"; + this.gameStateKey = "gameState"; + this.noticeClosedKey = "noticeClosed"; + this.cookieNoticeClosedKey = "cookieNoticeClosed"; var supported = this.localStorageSupported(); this.storage = supported ? window.localStorage : window.fakeStorage; @@ -70,3 +71,11 @@ LocalStorageManager.prototype.setNoticeClosed = function (noticeClosed) { LocalStorageManager.prototype.getNoticeClosed = function () { return JSON.parse(this.storage.getItem(this.noticeClosedKey) || "false"); }; + +LocalStorageManager.prototype.setCookieNoticeClosed = function (cookieNoticeClosed) { + this.storage.setItem(this.cookieNoticeClosedKey, JSON.stringify(cookieNoticeClosed)); +}; + +LocalStorageManager.prototype.getCookieNoticeClosed = function () { + return JSON.parse(this.storage.getItem(this.cookieNoticeClosedKey) || "false"); +}; diff --git a/privacy.html b/privacy.html index 325aa32..50ca32c 100644 --- a/privacy.html +++ b/privacy.html @@ -62,14 +62,14 @@

Privacy Policy and Cookie Statement

- https://gabrielecirulli.github.io/2048 is operated and maintained by Gabriele Cirulli, + https://gabrielecirulli.github.io/2048 and https://play2048.co are operated and maintained by Gabriele Cirulli, @iirelu and - @sigod. This document outlines the data handling practices for this website. + @sigod. This website is hosted on servers operated by GitHub Inc. This document outlines the data handling practices for this website.

What personal data do you collect?

-

For analytics purposes, anonymous and aggregated data may be collected, using Google Analytics. This data includes:

+

For analytics purposes, anonymous and aggregated data may be collected, using Google Analytics. Google AdSense, used on this website for advertsing purposes, may also collect similar data. This data includes:

-

For more information on how Google Analytics uses this data see: +

AdSense is used to publish ads on this site. Users in the European Economic Area (EEA) are served non-personalized ads (NPA), which do not track users and are not based on the user's past behavior on this or other websites. The following data may be used in order to serve NPAs:

+ + + +

For all other users, personalized ads may be displayed. Personalized ads may use the following information:

+ + + +

For more information on how Google Analytics and Google AdSense use this data see:

@@ -100,12 +122,23 @@ game at any point and allow you to pick it back up from where you left off. This data is kept in your browser and never sent to servers operated by us or a third-party. No personally-identifiable information is included.

-

This website embeds social media features from Twitter. For information on Twitter's Cookie Policy please see: - https://help.twitter.com/en/rules-and-policies/twitter-cookies -

-

This website uses Google Analytics. For information on Google Analytic's Cookie Policy please see: - https://support.google.com/analytics/answer/6004245 -

+

Other notices about services used by this website

+ + +

If you have any questions, feel free to email me@gabrielecirulli.com diff --git a/style/main.css b/style/main.css index a8b5209..8dffd67 100644 --- a/style/main.css +++ b/style/main.css @@ -1104,3 +1104,61 @@ hr { .privacy { word-wrap: break-word; } + +/* extras */ +.sidebar { + width: 180px; + top: 0; + bottom: 0; + right: 0; + position: fixed; + display: flex; + align-items: center; + justify-content: center; } + +@media (max-width: 880px) { + .sidebar, + .sidebar .adsbygoogle { + display: none; } } + +.cookie-notice { + position: fixed; + font-size: 15px; + z-index: 999; + right: 20px; + bottom: 20px; + width: 20%; + min-width: 460px; + background: #e8e5db; + padding: 10px; + margin-top: 30px; + box-sizing: border-box; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; } + @media screen and (max-width: 520px) { + .cookie-notice { + width: auto; + left: 20px; + min-width: auto; } } + .cookie-notice, .cookie-notice p a { + color: #a09488; } + .cookie-notice p { + margin-bottom: 0; + flex: 1; } + .cookie-notice, .cookie-notice p { + line-height: 20px; } + +.cookie-notice-dismiss-button { + display: inline-block; + background: #8f7a66; + border-radius: 3px; + padding: 0 20px; + text-decoration: none; + color: #f9f6f2; + height: 40px; + line-height: 42px; + cursor: pointer; + flex: 0 0 auto; + margin-left: 20px; } diff --git a/style/main.scss b/style/main.scss index ab2abb0..02f027d 100644 --- a/style/main.scss +++ b/style/main.scss @@ -853,3 +853,70 @@ hr { .privacy { word-wrap: break-word; } + +// Ads & Cookie Notice + +/* extras */ + +.sidebar { + width: 180px; + top: 0; + bottom: 0; + right: 0; + position: fixed; + display: flex; + align-items: center; + justify-content: center; +} + +@media (max-width: 880px) { + .sidebar, + .sidebar .adsbygoogle { + display: none; + } +} + +.cookie-notice { + position: fixed; + font-size: 15px; + z-index: 999; + right: 20px; + bottom: 20px; + width: 20%; + min-width: 460px; + background: #e8e5db; + padding: 10px; + margin-top: 30px; + box-sizing: border-box; + border-radius: 3px; + + display: flex; + align-items: center; + justify-content: center; + + @include smaller($mobile-threshold) { + width: auto; + left: 20px; + min-width: auto; + } + + &, p a { + color: #a09488; + } + + p { + margin-bottom: 0; + flex: 1; + } + + &, p { + line-height: 20px; + } +} + +.cookie-notice-dismiss-button { + @include button; + flex: 0 0 auto; + margin-left: 20px; +} + -- GitLab