Add AdSense, GDPR code

1f5f0a32 · Gabriele Cirulli · ca93878f · 1f5f0a32 · 1f5f0a32 · 1f5f0a32
6 changed file
--- a/index.html
+++ b/index.html
@@ -68,6 +68,23 @@
  </script>
 </head>
 <body>
+  <div class="sidebar">
+    <ins
+      class="adsbygoogle"
+      style="display:inline-block;width:160px;height:600px"
+      data-ad-client="ca-pub-2670526606338388"
+      data-ad-slot="2901539552"
+    ></ins>
+    <script>
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    </script>
+  </div>
+  <div class="cookie-notice">
+    <p>2048 uses cookies to analyse traffic to the site and to serve ads. <a href="./privacy.html">Learn More</a></p>
+    <a class="cookie-notice-dismiss-button">Got it</a>
+  </div>
  <div class="container">
    <div class="heading">
      <h1 class="title">2048</h1>
@@ -83,7 +100,7 @@
    </div>
    <div class="app-notice">
-      <span class="notice-close-button">x</span>
+      <span class="notice-close-button">&times;</span>
      <p><strong class="important">New:</strong> Get the new 2048 app for <a href="https://itunes.apple.com/us/app/2048-by-gabriele-cirulli/id868076805" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.gabrielecirulli.app2048" target="_blank">Android!</a></p>
    </div>

--- a/js/application.js
+++ b/js/application.js
@@ -6,6 +6,9 @@ window.requestAnimationFrame(function () {
  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",
+        });
+      }
+    })
+  }
 });
--- a/js/local_storage_manager.js
+++ b/js/local_storage_manager.js
@@ -22,6 +22,7 @@ function LocalStorageManager() {
  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");
+};
--- a/privacy.html
+++ b/privacy.html
@@ -62,14 +62,14 @@
      <h2 class="title">Privacy Policy and Cookie Statement</h2>
    </div>
    <p>
-      <a href="https://gabrielecirulli.github.io/2048">https://gabrielecirulli.github.io/2048</a> is operated and maintained by Gabriele Cirulli,
+      <a href="https://gabrielecirulli.github.io/2048">https://gabrielecirulli.github.io/2048</a> and <a href="https://play2048.co">https://play2048.co</a> are operated and maintained by Gabriele Cirulli,
      <a href="https://github.com/iirelu">@iirelu</a> and
-      <a href="https://github.com/sigod">@sigod</a>. This document outlines the data handling practices for this website.
+      <a href="https://github.com/sigod">@sigod</a>. This website is hosted on servers operated by GitHub Inc. This document outlines the data handling practices for this website.
    </p>
    <h3>What personal data do you collect?</h3>
-    <p>For analytics purposes, anonymous and aggregated data may be collected, using Google Analytics. This data includes:</p>
+    <p>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:</p>
    <ul>
      <li>
@@ -83,14 +83,36 @@
      </li>
    </ul>
-    <p>For more information on how Google Analytics uses this data see:
+    <p>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:</p>
+    <ul>
+      <li>Coarse (such as city-level) geo-targeting based on current location;</li>
+      <li>Content on the current site;</li>
+    </ul>
+    <p>For all other users, personalized ads may be displayed. Personalized ads may use the following information:</p>
+    <ul>
+      <li>Sites or apps that have been visited in the past;</li>
+      <li>Past searches and location data;</li>
+      <li>Videos and ads that have been seen in the past;</li>
+      <li>Personal information provided in the past by the user, such as age range, gender, and topics of interest.</li>
+    </ul>
+    <p>For more information on how Google Analytics and Google AdSense use this data see:
      <ul>
+        <li>
+          <a href="https://privacy.google.com/how-ads-work.html">https://privacy.google.com/how-ads-work.html</a>
+        </li>
        <li>
          <a href="https://policies.google.com/technologies/partner-sites">https://policies.google.com/technologies/partner-sites</a>
        </li>
        <li>
          <a href="https://support.google.com/analytics/answer/6004245">https://support.google.com/analytics/answer/6004245</a>
        </li>
+        <li>
+          <a href="https://support.google.com/adsense/answer/7549925?hl=en">https://support.google.com/adsense/answer/7549925?hl=en</a>
+        </li>
      </ul>
    </p>
@@ -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.</p>
-    <p>This website embeds social media features from Twitter. For information on Twitter's Cookie Policy please see:
+    <h3>Other notices about services used by this website</h3>
+    <ul>
+      <li>This website embeds social media features from Twitter. For information on Twitter's Cookie Policy please see:
        <a href="https://help.twitter.com/en/rules-and-policies/twitter-cookies">https://help.twitter.com/en/rules-and-policies/twitter-cookies</a>
-    </p>
+      </li>
-    <p>This website uses Google Analytics. For information on Google Analytic's Cookie Policy please see:
+      <li>This website embeds a PayPal donation button which may store cookies on your device in order to function. For information on Paypal's Cookie Policy please see:
+        <a href="https://www.paypal.com/uk/webapps/mpp/ua/cookie-full">https://www.paypal.com/uk/webapps/mpp/ua/cookie-full</a>
+      </li>
+      <li>This website uses Google Analytics. For information on Google Analytics's Cookie Policy please see:
        <a href="https://support.google.com/analytics/answer/6004245">https://support.google.com/analytics/answer/6004245</a>
-    </p>
+      </li>
+      <li>This website uses Google AdSense. For information on Google AdSense's Cookie Policy please see:
+        <a href="https://support.google.com/adsense/answer/7549925?hl=en">https://support.google.com/adsense/answer/7549925?hl=en</a>
+      </li>
+    </ul>
    <p>If you have any questions, feel free to email
      <a href="mailto:me@gabrielecirulli.com">me@gabrielecirulli.com</a>

--- 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; }
--- 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;
+}