Merge pull request #2 from betagouv/trecouvr/matomo-initial-setup

Setup Matomo

Author: trecouvr

docia/context_processors.py

@@ -6,5 +6,6 @@ def settings(request):
         "settings": {
             "PROCONNECT_ALLOWED": dj_settings.PROCONNECT_ALLOWED,
             "TCHAP_SUPPORT_CANAL_URL": dj_settings.TCHAP_SUPPORT_CANAL_URL,
+            "MATOMO_URL": dj_settings.MATOMO_URL,
         }
     }

docia/settings.py

@@ -333,3 +333,6 @@
     "TEST_REQUEST_DEFAULT_FORMAT": "json",
     "NON_FIELD_ERRORS_KEY": "non_field_errors",
 }
+
+
+MATOMO_URL = config.str("MATOMO_URL", default="")

docia/templates/docia/auth/login.html

@@ -1,4 +1,4 @@
-{% extends "dsfr/base.html" %}
+{% extends "docia/base.html" %}
 
 
 {% block header %}

docia/templates/docia/base.html

@@ -4,6 +4,21 @@
 <title>Dépenses Éclairées</title>
 {% endblock %}
 
+{% block opengraph %}
+  {% if settings.MATOMO_URL %}
+    <!-- Matomo Tag Manager -->
+    <script>
+      var _mtm = window._mtm = window._mtm || [];
+      _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
+      (function() {
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src='{{ settings.MATOMO_URL }}'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Tag Manager -->
+  {% endif %}
+{% endblock opengraph %}
+
 {% block header %}
   {% include "docia/blocks/header.html" %}
 {% endblock header %}

example.env

@@ -37,3 +37,5 @@ SMTP_USERNAME=
 SMTP_PASSWORD=
 
 TCHAP_SUPPORT_CANAL=
+
+MATOMO_URL=

static/js/clipboard.js

@@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', function() {
         // Create the copy button
         const copyButton = document.createElement('button');
         copyButton.textContent = 'Copier';
-        copyButton.className = 'fr-badge fr-badge--sm fr-ml-1w';
+        copyButton.className = 'btn-copy fr-badge fr-badge--sm fr-ml-1w copy-' + fieldName;
         copyButton.style.fontSize = '12px';
         copyButton.style.padding = '2px 6px';