documentation: add cookie consent and new analytics

documentation/_static/css/style.css

@@ -1,23 +1,23 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i&display=swap");
-/*
- * HSL(A) NOT TRANSFORMED TO RGB(A)
- *
- * Is now an accepted proposal: https://github.com/sass/sass/blob/master/accepted/color-4-rgb-hsl.md
- * But without implementation, yet.
- *
- * Use:
- * `color: hsl(15deg, 100%, 50%);`
- * `--flashy-pink: hsl(15deg, 100%, 50%);`
- * `$flashy-pink: hsl(15deg 100% 50%);`
- * `--transparent-flashy-pink: hsl(15deg, 100%, 50%, .7);`
- * `$transparent-flashy-pink: hsla(15deg, 100%, 50%, .7);`
- * `$transparent-flashy-pink: hsla(15deg 100% 50% / .7);`
- *
- * Parameters:
- *  parameter 1 (angle | 0): the hue of the color
- *  parameter 2 (0-100% | 0): the saturation of the color
- *  parameter 3 (0-100% | 0): the luminosity of the color
- *  parameter 4 (optional, 1 by default): the alpha channel of the color
+/*
+ * HSL(A) NOT TRANSFORMED TO RGB(A)
+ *
+ * Is now an accepted proposal: https://github.com/sass/sass/blob/master/accepted/color-4-rgb-hsl.md
+ * But without implementation, yet.
+ *
+ * Use:
+ * `color: hsl(15deg, 100%, 50%);`
+ * `--flashy-pink: hsl(15deg, 100%, 50%);`
+ * `$flashy-pink: hsl(15deg 100% 50%);`
+ * `--transparent-flashy-pink: hsl(15deg, 100%, 50%, .7);`
+ * `$transparent-flashy-pink: hsla(15deg, 100%, 50%, .7);`
+ * `$transparent-flashy-pink: hsla(15deg 100% 50% / .7);`
+ *
+ * Parameters:
+ *  parameter 1 (angle | 0): the hue of the color
+ *  parameter 2 (0-100% | 0): the saturation of the color
+ *  parameter 3 (0-100% | 0): the luminosity of the color
+ *  parameter 4 (optional, 1 by default): the alpha channel of the color
  */
 *,
 *::before,
@@ -2182,8 +2182,8 @@ body.modal--shown {
   border-right: 4px solid #DE6E26;
   padding-top: 32px;
   padding-bottom: 58px;
-  /* I've opted to hide the before element and use borders for this instead.
-  I didn't want to update the other base cards as to not break anything
+  /* I've opted to hide the before element and use borders for this instead.
+  I didn't want to update the other base cards as to not break anything
   but I don't think a whole new element is needed. */ }
   .base-card--new::before {
     content: none; }
@@ -4242,7 +4242,9 @@ a.base-card:hover:before {
     padding-bottom: 64px; }
   .layout--single-column {
     display: grid;
-    grid-template-areas: "header" "content" "footer"; }
+    grid-template-areas: "header"
+ "content"
+ "footer"; }
     .layout--single-column .layout__content {
       max-width: 960px;
       margin-left: auto;
@@ -4254,12 +4256,18 @@ a.base-card:hover:before {
     width: 100vw; }
   .layout--two-columns {
     display: grid;
-    grid-template-areas: "nav" "header" "content" "footer"; }
+    grid-template-areas: "nav"
+ "header"
+ "content"
+ "footer"; }
     @media (min-width: 36em) {
       .layout--two-columns {
         grid-template-columns: 320px 1fr;
         grid-template-rows: auto auto 1fr auto;
-        grid-template-areas: "nav nav" "header header" "sidebar content" "footer footer"; } }
+        grid-template-areas: "nav nav"
+ "header header"
+ "sidebar content"
+ "footer footer"; } }
     .layout--two-columns .layout__nav {
       grid-area: nav; }
     .layout--two-columns .layout__header {
@@ -4433,3 +4441,14 @@ a.base-card:hover:before {
     display: flex;
     justify-content: center;
     margin-bottom: 48px; }
+
+.cookie-consent {
+  padding-top: 0 !important;
+  width: 450px;
+  height: 325px;
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  background: #f9e1d3 !important;
+  z-index: 99;
+}

documentation/_templates/_parts/cookie-consent.html

@@ -0,0 +1,55 @@
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  var siteID = 13;
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(['requireCookieConsent']); // Don't use cookies unless we have consent
+  _paq.push(['setCookieDomain', '*.threesixtygiving.org']);
+  _paq.push(['setDomains', '*.threesixtygiving.org']);
+  _paq.push(['setDownloadExtensions', "json|csv|xlsx"]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="https://analytics.threesixtygiving.org/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    if(!siteID) throw new Error("siteID not set");
+    _paq.push(['setSiteId', siteID]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
+
+<script type="text/javascript">
+    function hideCookieConsentDialog(){
+      document.getElementsByClassName("cookie-consent")[0].style.display = 'none';
+    }
+
+    function noCookieConsent() {
+      document.cookie = "noEnhancedAnalytics=1; domain=threesixtygiving.org";
+    }
+
+    document.addEventListener('DOMContentLoaded', function(){
+      if (document.cookie.indexOf("mtm_cookie_consent") > -1 ||
+          document.cookie.indexOf("mtm_consent_removed") > -1 ||
+          document.cookie.indexOf("noEnhancedAnalytics") > -1) {
+         hideCookieConsentDialog();
+      }
+    });
+</script>
+
+<div role="dialog" aria-labelledby="cookie-dialog-title" aria-describedby="cookie-dialog-desc">
+  <div class="base-card base-card--new cookie-consent">
+    <div class="base-card__content">
+        <h2 class="base-card__title" id="cookie-dialog-title">Allow analytics cookies? <br/>
+          <a class="base-card__text" href="https://www.threesixtygiving.org/privacy/"> More Information &amp; Privacy Policy</a>
+        </h2>
+        <p class="base-card__text">
+            <a href="#" onclick="_paq.push(['rememberCookieConsentGiven']); hideCookieConsentDialog();" class="button">Yes</a>
+            <a href="#" onclick="noCookieConsent(); hideCookieConsentDialog();" class="button">No</a>
+            <a href="#" onclick="_paq.push(['optUserOut']); hideCookieConsentDialog();" class="button">Disable Analytics</a>
+        </p>
+        <p id="cookie-dialog-desc" style="font-style: italic;">360Giving uses privacy-respecting analytics. If you don't accept cookies, we will track only basic information about your visit. Click "Disable Analytics" if you don't want us to track at all. </p>
+    </div>
+  </div>
+ </div>

documentation/_templates/base.html

@@ -168,21 +168,9 @@
 
     </div>
 
-  {# Do not conflict with RTD insertion of analytics script #}
-  {% if not READTHEDOCS %}
-    {% if theme_analytics_id %}
-    <!-- Theme Analytics -->
-    <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-    ga('create', '{{ theme_analytics_id }}', 'auto');
-    ga('send', 'pageview');
-    </script>
-
-    {% endif %}
-  {% endif %}
+  {% block cookieconsent %}
+    {% include '_parts/cookie-consent.html' %}
+  {% endblock %}
 
   {%- block footer %} {% endblock %}
 

documentation/_templates/layout.html

@@ -19,20 +19,4 @@
     window.location.hash = window.location.hash.replace('#toc-', '#') // look for old anchors starting #toc- and remove that bit
 </script>
 <script type="text/javascript" src="{{ pathto('_static/js/index.js', 1) }}"></script>
-<!-- Piwik -->
-<script type="text/javascript">
-  var _paq = _paq || [];
-  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-  _paq.push(['disableCookies']);
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="//analytics.threesixtygiving.org/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '13']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-  })();
-</script>
-<!-- End Piwik Code -->
 {% endblock %}