Include matomo tracker

Author: JorgeMrtnzG

core/settings/project.py

@@ -212,6 +212,9 @@
 
 NOMINATIM_API_URL = os.getenv('NOMINATIM_API_URL', 'https://nominatim.openstreetmap.org/search.php')
 
+MATOMO_URL = os.getenv('MATOMO_URL')
+MATOMO_SITEID = os.getenv('MATOMO_SITEID')
+
 HDX_URL_PREFIX = Configuration.create(
     hdx_site=os.getenv('HDX_SITE', 'demo'),
     hdx_key=os.getenv('HDX_API_KEY'),

ui/app/app.js

@@ -24,6 +24,7 @@ import Help from "./components/Help";
 import Home from "./components/Home";
 import NavBar from "./components/NavBar";
 import Stats from "./components/Stats";
+import Banner from "./components/Banner";
 import { requireAuth } from "./components/utils";
 
 import "@blueprintjs/core/dist/blueprint.css";
@@ -42,13 +43,13 @@ addLocaleData([...de, ...en, ...es, ...fr, ...id, ...it, ...pt, ...nl]);
 FocusStyleManager.onlyShowFocusOnTabs();
 
 export default ({ history }) => {
-
   return (
     <IntlProvider>
       <ConnectedRouter history={history}>
         <div style={{ height: "100%" }}>
           <Auth />
           <NavBar />
+          <Banner />
           <Switch>
             <Route path="/authorized" component={Authorized} />
             <Route path="/configurations" component={Configurations} />

ui/app/components/Banner.js

@@ -0,0 +1,70 @@
+import React, { Component } from "react";
+import { FormattedMessage } from "react-intl";
+
+class Banner extends Component {
+  state = {
+    consent: localStorage.getItem("accept-consent", undefined),
+  };
+
+  Close = (accept) => {
+    localStorage.setItem("accept-consent", accept);
+    this.setState({ consent: accept });
+
+    let event = "forgetConsentGiven";
+    if (accept === true) {
+      event = "rememberConsentGiven";
+    }
+
+    // _paq object belongs to Matomo. Check v3.html page.
+    window._paq.push([event]);
+  };
+
+  render() {
+    if (this.state.consent) {
+      return null;
+    }
+
+    return (
+      <div className="banner">
+        <h2>
+          <FormattedMessage
+            id="ui.banner.title"
+            defaultMessage="About the information we collect"
+          />
+        </h2>
+
+        <p>
+          <FormattedMessage
+            id="ui.banner.message"
+            defaultMessage="We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity. You can learn about how we use the data about your visit or information you provide reading our {policyLink}. By clicking I Agree , you consent to the use of cookies."
+            values={{
+              policyLink: (
+                <a
+                  href="https://hotosm.org/privacy"
+                  className="red underline link fw6"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  privacy policy
+                </a>
+              ),
+            }}
+          />
+        </p>
+        <div className="banner-wrapper">
+          <button onClick={() => this.Close(false)}>
+            <FormattedMessage
+              id="ui.banner.not_agree"
+              defaultMessage="I do not agree"
+            />
+          </button>
+          <button onClick={() => this.Close(true)}>
+            <FormattedMessage id="ui.banner.agree" defaultMessage="I agree" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Banner;

ui/app/css/style.css

@@ -1428,3 +1428,23 @@ p {
   background-color: white;
   z-index: 100;
 }
+
+.banner {
+  width: 100vw;
+  padding: 2rem;
+  text-align: center;
+  position: fixed;
+  z-index: 99;
+  bottom: 0;
+  background-color: #fff;
+  border-top: 1px solid gray;
+}
+
+.banner-wrapper {
+  display: flex;
+  width: 14%;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: space-between;
+}
+

ui/templates/ui/v3.html

@@ -8,6 +8,21 @@
     <title>HOT Export Tool</title>
     <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
     <link rel="icon" href="{% static 'ui/images/favicon.ico' %}">
+    {% if MATOMO_URL and MATOMO_SITEID %}
+      <script type="text/javascript">
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+          var u='{{ MATOMO_URL }}';
+          _paq.push(['setTrackerUrl', u+'piwik.php']);
+          _paq.push(['setSiteId', '{{ MATOMO_SITEID }}']);
+          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+          g.type='text/javascript'; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+        })();
+      </script>
+    {% endif %}
   </head>
   <body>
     <div id="root" class="container-fluid" style="height:calc(100% - 105px)"></div>

ui/views.py

@@ -8,6 +8,7 @@
 from oauth2_provider.models import Application
 from django.contrib import admin
 from django.contrib.auth.admin import User, UserAdmin
+from django.conf import settings
 
 def authorized(request):
     # the user has now authorized a client application; they no longer need to
@@ -36,9 +37,13 @@ def logout(request):
 def v3(request):
     ui_app = Application.objects.get(name='OSM Export Tool UI')
 
-    return render(request, 'ui/v3.html', {
-        'client_id': ui_app.client_id
-    })
+    context = dict(client_id=ui_app.client_id)
+    if settings.MATOMO_URL is not None and settings.MATOMO_SITEID is not None:
+        context.update({
+            'MATOMO_URL': settings.MATOMO_URL,
+            'MATOMO_SITEID': settings.MATOMO_SITEID
+        })
+    return render(request, 'ui/v3.html', context)
 
 
 def redirect_to_v3(request):