diff --git a/index.html b/index.html index e28bf5a69819c448cc09edeb010333f5897e1615..7e2635dd811d33fa1b1918abb2886b3205f270f1 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 9b52c57d568c78d4c8d072645ae9ede473f362d1..d5fa2ae1fcb4fc7a83e9f3a766e68caec2052c98 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 9bf595c935bb031154ba509349a6eb9e5c9e19a4..fdc9171e8ef46d5938e283b851edba7ab2b7d801 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 325aa32ca138d74fccb5753ba058066e9267e94b..50ca32c0e503ae9846f92cb22d27546d757e05fb 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 a8b5209ad781551f304d119993bab3e80d65d9b4..8dffd670e57dbb58ff78188d574a1cfff66222b4 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 ab2abb0b7ef62076f65ab5ca76f8e29abefa3c3f..02f027d173ac404c4793434b72748aebba4dbf85 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; +} +