[Scorecards] Added click tracking for graphics

mysociety · Sep 17, 2024 · 97b851c · 97b851c
1 parent 7ec4648
commit 97b851c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js
@@ -435,3 +435,26 @@ if ( typeof window.fetch !== 'undefined' ) {
         }
     });
 }
+
+// Graphics click tracking
+var trackEvent = function(eventName, params, callback){
+    params = params || {};
+    callback = callback || function(){};
+    params['event_callback'] = callback;
+    setTimeout(callback, 2000);
+    gtag('event', eventName, params);
+};
+
+document.querySelectorAll('.js-social-graphic-download').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+        e.preventDefault();
+        var eventName = "download";
+        var params = {
+            url: el.getAttribute('href')
+        };
+
+        trackEvent(eventName, params, function(){
+            window.location.href = el.href;
+        });
+    });
+});
diff --git a/scoring/templates/scoring/section.html b/scoring/templates/scoring/section.html
@@ -133,7 +133,7 @@ <h3 class="fs-4 mb-0 text-center">
     <div class="mb-2 d-flex align-items-center justify-content-between">
         <h3 class="mb-0">Key takeaways</h3>
       {% if social_graphics.zip %}
-        <a class="btn btn-sm btn-outline-primary" href="{% static social_graphics.zip %}">Download all (.zip)</a>
+        <a class="btn btn-sm btn-outline-primary js-social-graphic-download" href="{% static social_graphics.zip %}">Download all (.zip)</a>
       {% endif %}
     </div>
 
@@ -143,26 +143,26 @@ <h3 class="mb-0">Key takeaways</h3>
       {% for image in social_graphics.images %}
         <div class="d-flex flex-column gap-3">
           {% if image.src_instagram %}
-            <a href="{% static image.src_instagram %}" class="d-block d-md-none" title="Opens in a new window" target="_blank">
+            <a href="{% static image.src_instagram %}" class="d-block d-md-none js-social-graphic-download" title="Opens in a new window" target="_blank">
                 <img loading="lazy" src="{% static image.src_instagram %}" alt="{{ image.alt }}">
             </a>
           {% endif %}
           {% if image.src_facebook %}
-            <a href="{% static image.src_facebook %}" class="d-none d-md-block" title="Opens in a new window" target="_blank">
+            <a href="{% static image.src_facebook %}" class="d-none d-md-block js-social-graphic-download" title="Opens in a new window" target="_blank">
                 <img loading="lazy" src="{% static image.src_facebook %}" alt="{{ image.alt }}">
             </a>
           {% endif %}
 
             <div class="d-flex gap-2 justify-content-center align-items-center">
                 <span class="text-muted fs-7">Download:</span>
               {% if image.src_facebook %}
-                <a href="{% static image.src_facebook %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2" download>
+                <a href="{% static image.src_facebook %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2 js-social-graphic-download" download>
                     <span style="background: currentColor; width: 1.5em; height: 0.75em; display: inline-block;"></span>
                     Wide
                 </a>
               {% endif %}
               {% if image.src_instagram %}
-                <a href="{% static image.src_instagram %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2" download>
+                <a href="{% static image.src_instagram %}" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-2 js-social-graphic-download" download>
                     <span style="background: currentColor; width: 0.75em; height: 0.75em; display: inline-block;"></span>
                     Square
                 </a>
@@ -177,8 +177,8 @@ <h3 class="mb-0">Key takeaways</h3>
             </a>
             <div class="d-flex gap-2 justify-content-center align-items-center">
                 <span class="text-muted fs-7">Download:</span>
-                <a href="{% static social_graphics.pdf.src_pdf %}" class="btn btn-sm btn-outline-primary" download>PDF</a>
-                <a href="{% static social_graphics.pdf.src_jpg %}" class="btn btn-sm btn-outline-primary" download>JPG</a>
+                <a href="{% static social_graphics.pdf.src_pdf %}" class="btn btn-sm btn-outline-primary js-social-graphic-download" download>PDF</a>
+                <a href="{% static social_graphics.pdf.src_jpg %}" class="btn btn-sm btn-outline-primary js-social-graphic-download" download>JPG</a>
             </div>
         </div>
       {% endif %}