Track download clicks with Plausible

Author: RealOrangeOne

_includes/script.html

@@ -11,5 +11,6 @@
 {% endif %}
 
 <script defer data-domain="studentrobotics.org" src="https://plausible.io/js/plausible.js"></script>
+<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
 
 <script src="{{ '/js/navigation.js' | prepend: site.baseurl }}"></script>

_layouts/updates.html

@@ -17,25 +17,30 @@ <h1>Documentation</h1>
     <div class="column m-9-12 doc">
       {{ content }}
 
-      <table>
+      <table id="updates-table">
         <tr>
           <th></th>
           <th>Release Date</th>
           <th>Download</th>
           <th>Licences</th>
         </tr>
         {% for kit_version in site.data.kit_versions %}
-          <tr id="{{ kit_version.version | slugify }}">
+          {% assign version = kit_version.version %}
+          <tr id="{{ version | slugify }}">
             <td>
               {% if forloop.first %}
-              <code><strong>{{ kit_version.version }}</strong></code>
+              <code><strong>{{ version }}</strong></code>
               {% else %}
-              <code>{{ kit_version.version }}</code>
+              <code>{{ version }}</code>
               {% endif %}
             </td>
             <td>{{ kit_version.released | date_to_string }}</td>
-            <td><a href="https://kit-downloads.studentrobotics.org/kit-software/{{ kit_version.version }}/srobo-robot-{{ kit_version.version }}.img.xz">Download <code>{{ kit_version.version }}</code></a></td>
-            <td><a href="https://kit-downloads.studentrobotics.org/kit-software/{{ kit_version.version }}/srobo-robot-{{ kit_version.version }}-licences">Licences</a></td>
+            <td>
+              <a class="kit-download-link" data-version="{{ version }}" href="https://kit-downloads.studentrobotics.org/kit-software/{{ version }}/srobo-robot-{{ version }}.img.xz">
+                Download {{ version }}
+              </a>
+            </td>
+            <td><a href="https://kit-downloads.studentrobotics.org/kit-software/{{ version }}/srobo-robot-{{ version }}-licences">Licences</a></td>
           </tr>
         {% endfor %}
       </table>

js/updates.js

@@ -0,0 +1,17 @@
+function handleDownloadClick(event) {
+  plausible("Kit download", {props: {version: event.target.dataset.version}});
+
+  // Delay navigation so that Plausible is notified of the click
+  setTimeout(function() {
+    location.href = event.target.href;
+  }, 150);
+  event.preventDefault();
+}
+
+function addDownloadTracking() {
+  document.querySelectorAll("#updates-table .kit-download-link").forEach(function(link) {
+    link.addEventListener("click", handleDownloadClick);
+  });
+}
+
+window.addEventListener('load', addDownloadTracking);

updates/index.md

@@ -1,6 +1,7 @@
 ---
 layout: updates
 title: Updates
+extra_js: updates
 ---
 
 # Updates