From 97b851cec6e2f129a491bc146475413e314e1cec Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Wed, 11 Sep 2024 09:04:46 +0100
Subject: [PATCH] [Scorecards] Added click tracking for graphics

---
 scoring/static/scoring/js/main.js      | 23 +++++++++++++++++++++++
 scoring/templates/scoring/section.html | 14 +++++++-------
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/scoring/static/scoring/js/main.js b/scoring/static/scoring/js/main.js
index 4d58dbcc..92bfde1c 100644
--- 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
index fd722575..40d0146c 100644
--- 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,12 +143,12 @@ <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 %}
@@ -156,13 +156,13 @@ <h3 class="mb-0">Key takeaways</h3>
             <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 %}