Merge pull request #91 from amywieliczka/matomo

Implement matomo tracking on Calisphere's SPA
amywieliczka · Sep 19, 2023 · 2faf209 · 2faf209
2 parents a9feb5e + 32128df
commit 2faf209
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 5 deletions.
diff --git a/app/scripts/ItemView.js b/app/scripts/ItemView.js
@@ -1,4 +1,4 @@
-/*global Backbone, DISQUS, ga, get_cali_ga_dimensions, get_inst_ga_dimensions */
+/*global Backbone, DISQUS, ga, _paq, get_cali_ga_dimensions, get_inst_ga_dimensions */
 /*exported ItemView */
 
 'use strict';
@@ -60,6 +60,12 @@ var ItemView = Backbone.View.extend({
         action = 'open request modal';
         break;
     }
+    if (typeof _paq !== 'undefined') {
+      _paq.push([
+        'trackEvent', category, action, 
+        label, undefined, get_cali_ga_dimensions()
+      ]);
+    }
     if (typeof ga !== 'undefined') {
       var dimensions = get_cali_ga_dimensions();
       ga('caliga.send', 'event',
@@ -94,6 +100,13 @@ var ItemView = Backbone.View.extend({
   },
 
   carouselAfterChange: function(e, slick) {
+    if (typeof _paq !== 'undefined') {
+      _paq.push(['trackEvent',
+        'related content',
+        'paginate items',
+        $('.carousel__search-results').data('set'),
+        undefined, get_cali_ga_dimensions()]);
+    }
     if (typeof ga !== 'undefined') {
       var dimensions = get_cali_ga_dimensions();
       ga('caliga.send', 'event',
@@ -167,6 +180,13 @@ var ItemView = Backbone.View.extend({
   },
 
   exhibitCarouselBeforeChange: function() {
+    if (typeof _paq !== 'undefined') {
+      _paq.push(['trackEvent',
+        'related content',
+        'paginate exhibitions',
+        $('.carousel__search-results').data('set'),
+        undefined, get_cali_ga_dimensions()]);
+    }
     if (typeof ga !== 'undefined') {
       var dimensions = get_cali_ga_dimensions();
       ga('caliga.send', 'event',
@@ -178,6 +198,13 @@ var ItemView = Backbone.View.extend({
   },
 
   goToExhibition: function() {
+    if (typeof _paq !== 'undefined') {
+      _paq.push(['trackEvent',
+        'related content',
+        'select exhibition',
+        $('.carousel__search-results').data('set'),
+        undefined, get_cali_ga_dimensions()]);
+    }
     if (typeof ga !== 'undefined') {
       var dimensions = get_cali_ga_dimensions();
       ga('caliga.send', 'event',
@@ -223,6 +250,13 @@ var ItemView = Backbone.View.extend({
     if ( e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) { return; }
 
     if ($(e.currentTarget).data('item_number') !== undefined) {
+      if (typeof _paq !== 'undefined') {
+        _paq.push(['trackEvent',
+          'related content',
+          'select item',
+          $('.carousel__search-results').data('set'),
+          undefined, get_cali_ga_dimensions()]);
+      }
       if (typeof ga !== 'undefined') {
         var dimensions = get_cali_ga_dimensions();
         ga('caliga.send', 'event',
@@ -263,6 +297,13 @@ var ItemView = Backbone.View.extend({
     // don't need carousel specific item data for the related collections
     delete data_params.itemNumber;
     if (e !== undefined) {
+      if (typeof _paq !== 'undefined') {
+        _paq.push(['trackEvent',
+          'related content',
+          'paginate collections',
+          $('.carousel__search-results').data('set'),
+          undefined, get_cali_ga_dimensions()]);
+      }
       if (typeof ga !== 'undefined') {
         var dimensions = get_cali_ga_dimensions();
         ga('caliga.send', 'event',
@@ -339,6 +380,13 @@ var ItemView = Backbone.View.extend({
         traditional: true
       });
     } else {
+      if (typeof _paq !== 'undefined') {
+        _paq.push(['trackEvent',
+          'related content',
+          'select collection',
+          $('.carousel__search-results').data('set'),
+          undefined, get_cali_ga_dimensions()]);
+      }
       if (typeof ga !== 'undefined') {
         var dimensions = get_cali_ga_dimensions();
         ga('caliga.send', 'event',

diff --git a/app/scripts/calisphere.js b/app/scripts/calisphere.js
@@ -82,10 +82,11 @@ $(document).ready(function() {
   // based on https://support.google.com/analytics/answer/1136920?hl=en
   // We capture the click handler on outbound links and the contact owner button
 
+  var outboundSelector = 'a[href^="http://"], a[href^="https://"]';
+  outboundSelector += ', button[onclick^="location.href\=\'http\:\/\/"]';
+  outboundSelector += ', button[onclick^="location.href\=\'https\:\/\/"]';
+
   if (typeof ga !== 'undefined') {
-    var outboundSelector = 'a[href^="http://"], a[href^="https://"]';
-    outboundSelector += ', button[onclick^="location.href\=\'http\:\/\/"]';
-    outboundSelector += ', button[onclick^="location.href\=\'https\:\/\/"]';
     $('body').on('click', outboundSelector, function() {
       var url = '';
       if($(this).attr('href')) {
@@ -117,6 +118,37 @@ $(document).ready(function() {
       return false;
     });
   }
+  if (typeof _paq !== 'undefined' ) {
+    $('body').on('click', outboundSelector, function() {
+      var url = '';
+      if($(this).attr('href')) {
+        url = $(this).attr('href');
+      } else if($(this).attr('onclick')) {
+        var c = $(this).attr('onclick');
+        url = c.slice(15, c.length-2);
+      }
+
+      // https://developer.matomo.org/guides/tracking-javascript-guide#tracking-a-custom-dimension-for-one-specific-action-only
+      _paq.push(['trackEvent', 'outbound', 'click', url,
+        undefined, get_cali_ga_dimensions(), 
+        timeoutGACallback(function(){
+          // click captured and tracked, send the user along
+          document.location = url;
+        })]);
+      return false;
+    });
+
+    $('.button__contact-owner').on('click', function() {
+      var url = $(this).attr('href');
+
+      _paq.push(['trackEvent', 'buttons', 'contact', url,
+        undefined, get_cali_ga_dimensions(), 
+        timeoutGACallback(function() {
+          document.location = url;
+        })]);
+      return false;
+    });
+  }
   // ***********************************
 
   // Add banner notice for users without session storage
@@ -247,8 +279,14 @@ var cluster_search = function(col_id, facet_field) {
 
 var on_ready_pjax_end_handler = function() {
   // send google analytics on pjax pages 
-  /* globals ga: false */
+  /* globals ga: false, _paq: false */
   /* jshint latedef: false */
+  if (typeof _paq !== 'undefined') {
+    _paq.push(['setCustomUrl', window.location.href]);
+    _paq.push(['setDocumentTitle', document.title]);
+    _paq.push(['trackPageView', document.title, get_cali_ga_dimensions()]);
+    _paq.push(['enableLinkTracking']);
+  }
   if (typeof ga !== 'undefined') {
     var dimensions = get_cali_ga_dimensions();
     ga('caliga.set', 'location', window.location.href);

diff --git a/calisphere/templates/400.html b/calisphere/templates/400.html
@@ -39,6 +39,21 @@
       ga('require', 'linkid');
       ga('set', 'anonymizeIp', true);
     </script>
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//matomo.cdlib.org/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '5']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </head>
   <body>
     <div class="my-container">

diff --git a/calisphere/templates/403.html b/calisphere/templates/403.html
@@ -38,6 +38,22 @@
       ga('require', 'linkid');
       ga('set', 'anonymizeIp', true);
     </script>
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//matomo.cdlib.org/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '5']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
+
   </head>
   <body>
     <div class="my-container">

diff --git a/calisphere/templates/404.html b/calisphere/templates/404.html
@@ -212,5 +212,9 @@ <h3 class="msg-404">404: Not Found</h3>
       ga('caliga.set', 'location', window.location.href);
       ga('caliga.send', 'event', 'error', '404', 'source: django');
     }
+    if (typeof _paq !== 'undefined') {
+      _paq.push(['setCustomUrl', window.location.href]);
+      _paq.push(['trackEvent', 'error', '404', 'source: django']);
+    }
   </script>
 </html>
diff --git a/calisphere/templates/500.html b/calisphere/templates/500.html
@@ -39,6 +39,21 @@
       ga('require', 'linkid');
       ga('set', 'anonymizeIp', true);
     </script>
+    <!-- Matomo -->
+    <script>
+      var _paq = window._paq = window._paq || [];
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(['trackPageView']);
+      _paq.push(['enableLinkTracking']);
+      (function() {
+        var u="//matomo.cdlib.org/";
+        _paq.push(['setTrackerUrl', u+'matomo.php']);
+        _paq.push(['setSiteId', '5']);
+        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
   </head>
   <body>
     <div class="my-container">

diff --git a/calisphere/templates/calisphere/ga_site_code.html b/calisphere/templates/calisphere/ga_site_code.html
@@ -23,3 +23,20 @@
   gtag('config', '{{ ga4SiteCode }}');
 </script>
 {% endif %}
+
+{% if matomoSiteCode %}
+<!-- Matomo -->
+<script>
+  var _paq = window._paq = window._paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  (function() {
+    var u="//matomo.cdlib.org/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '{{ matomoSiteCode }}']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
+
+{% endif %}
diff --git a/calisphere/templates/calisphere/home.html b/calisphere/templates/calisphere/home.html
@@ -22,6 +22,12 @@
       document.getElementsByTagName('html')[0].classList.remove('no-jquery');
     </script>
     {% include "calisphere/ga_site_code.html" %}
+    <script>
+      if (typeof _paq !== 'undefined') {
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+      }
+    </script>
   </head>
   <body>
 

diff --git a/public_interface/context_processors.py b/public_interface/context_processors.py
@@ -30,6 +30,7 @@ def settings(request):
         'ucldcNuxeoThumbs': settings.UCLDC_NUXEO_THUMBS,
         'gaSiteCode': settings.GA_SITE_CODE,
         'ga4SiteCode': settings.GA4_SITE_CODE,
+        'matomoSiteCode': settings.MATOMO_SITE_CODE,
         'contactFlag': settings.CONTRUBUTOR_CONTACT_FLAG,
         'permalink': permalink,
         'multiple_indexes': multiple_indexes,

diff --git a/public_interface/settings.py b/public_interface/settings.py
@@ -85,6 +85,7 @@ def getenv(variable, default):
 
 GA_SITE_CODE = getenv('UCLDC_GA_SITE_CODE', False)
 GA4_SITE_CODE = getenv('UCLDC_GA4_SITE_CODE', False)
+MATOMO_SITE_CODE = getenv('UCLDC_MATOMO_SITE_CODE', False)
 UCLDC_WALKME = getenv('UCLDC_WALKME', False)
 
 # SECURITY WARNING: don't run with debug turned on in production!