Tracking access links on Google Analytics

docs/_layouts/layout.html

@@ -33,6 +33,7 @@
 <script type="text/javascript" src="/_static/scripts/lightbox.js"></script>
 <script type="text/javascript" src="/_static/scripts/content-root.js"></script>
 <script type="text/javascript" src="/_static/scripts/custom-behaviour.js"></script>
+<script type="text/javascript" src="/_static/scripts/google-analytics-access-link-events.js"></script>
 
 {{ super() }}
 {% endblock %}

docs/_static/scripts/google-analytics-access-link-events.js

@@ -0,0 +1,32 @@
+// If a class of the format 'access-link-something' exists in a classList, return 'something'.
+function labelFromClassList(classList) {
+    let list = Array.prototype.slice.call(classList)
+    var prefix = "access-link-";
+
+    for (var i = 0; i < list.length; i++) {
+        if (list[i].indexOf(prefix) === 0) {
+            return list[i].substring(prefix.length);
+        }
+
+        return null;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    var accessLinks = document.querySelectorAll("[class^='access-link-']");
+
+    for (var i = 0; i < accessLinks.length; i++) {
+        accessLinks[i].addEventListener("click", function(event) {
+            console.log({
+                "category": "access-link",
+                "label": labelFromClassList(event.currentTarget.classList),
+                "value": event.target.href,
+            });
+            // gtag("event", "click", {
+            //     "category": "access-link",
+            //     "label": labelFromClassList(event.currentTarget.classList),
+            //     "value": convertTorelativeUrl(event.target.href),
+            // });
+        });
+    }
+});

docs/_templates/product-v2.rst

@@ -301,6 +301,7 @@
          .. grid-item-card:: :fas:`map-location-dot`
             :link: {{ item.link }}
             :link-alt: {{ access_labels.map }}
+            :class-item: access-link-map
 
             {{ item.name or access_names.map }}
          {% endfor %}
@@ -309,6 +310,7 @@
          .. grid-item-card:: :fas:`magnifying-glass`
             :link: {{ item.link }}
             :link-alt: {{ access_labels.explorer }}
+            :class-item: access-link-explorer
 
             {{ item.name or access_names.explorer }}
          {% endfor %}
@@ -317,6 +319,7 @@
          .. grid-item-card:: :fas:`database`
             :link: {{ item.link }}
             :link-alt: {{ access_labels.data }}
+            :class-item: access-link-data
 
             {{ item.name or access_names.data }}
          {% endfor %}
@@ -325,6 +328,7 @@
          .. grid-item-card:: :fas:`laptop-code`
             :link: {{ item.link }}
             :link-alt: {{ access_labels.code_sample }}
+            :class-item: access-link-code-example
 
             {{ item.name or access_names.code_sample }}
          {% endfor %}
@@ -333,6 +337,7 @@
          .. grid-item-card:: :fas:`globe`
             :link: {{ item.link }}
             :link-alt: {{ access_labels.web_service }}
+            :class-item: access-link-web-service
 
             {{ item.name or access_names.web_service }}
          {% endfor %}
@@ -342,6 +347,7 @@
             :link: {{ item.link }}
             :link-alt: {{ item.label or "" }}
             :class-card: {{ item.class }}
+            :class-item: access-link-custom
 
             {{ item.name }}
          {% endfor %}
@@ -778,46 +784,46 @@
       {% if access_links_maps_list %}
       * - **{{ access_labels.map }}**
         - {% for item in access_links_maps_list %}
-          * `{{ item.name or access_names.map }} <{{ item.link }}>`_
+          * :raw-html:`<a href="{{ item.link }}" class="access-link-map">{{ item.name or access_names.map }}</a>`
           {% endfor %}
         - Learn how to `use DEA Maps </guides/setup/dea_maps/>`_.
       {% endif %}
 
       {% if access_links_explorers_list %}
       * - **{{ access_labels.explorer }}**
         - {% for item in access_links_explorers_list %}
-          * `{{ item.name or access_names.explorer }} <{{ item.link }}>`_
+          * :raw-html:`<a href="{{ item.link }}" class="access-link-explorer">{{ item.name or access_names.explorer }}</a>`
           {% endfor %}
         - Learn how to `use the DEA Explorer </setup/explorer_guide/>`_.
       {% endif %}
 
       {% if access_links_data_list %}
       * - **{{ access_labels.data }}**
         - {% for item in access_links_data_list %}
-          * `{{ item.name or access_names.data }} <{{ item.link }}>`_
+          * :raw-html:`<a href="{{ item.link }}" class="access-link-data">{{ item.name or access_names.data }}</a>`
           {% endfor %}
         - Learn how to `access the data via AWS </guides/about/faq/#download-dea-data>`_.
       {% endif %}
 
       {% if access_links_code_samples_list %}
       * - **{{ access_labels.code_sample }}**
         - {% for item in access_links_code_samples_list %}
-          * `{{ item.name or access_names.code_sample }} <{{ item.link }}>`_
+          * :raw-html:`<a href="{{ item.link }}" class="access-link-code-example">{{ item.name or access_names.code_sample }}</a>`
           {% endfor %}
         - Learn how to `use the DEA Sandbox </guides/setup/Sandbox/sandbox/>`_.
       {% endif %}
 
       {% if access_links_web_services_list %}
       * - **{{ access_labels.web_service }}**
         - {% for item in access_links_web_services_list %}
-          * `{{ item.name or access_names.web_service }} <{{ item.link }}>`_
+          * :raw-html:`<a href="{{ item.link }}" class="access-link-web-service">{{ item.name or access_names.web_service }}</a>`
           {% endfor %}
         - Learn how to `use DEA's web services </guides/setup/gis/README/>`_.
       {% endif %}
 
       {% for item in access_links_custom_list %}
       * - **{{ item.label or "" }}**
-        - * `{{ item.name }} <{{ item.link }}>`_
+        - * :raw-html:`<a href="{{ item.link }}" class="access-link-custom">{{ item.name }}</a>`
         - {{ item.description or "" }}
       {% endfor %}
    {% else %}