Custom Matomo script for gathering user data

[Jessica Brown]

Matomo is one of the most unique and fun analytics application that I have used. The flow and navigation for someone who never has used Google Analytics is pleasant and easy to navigate.

During my gathering of analytics for CodeName, I wanted to be able to identify the user attached to the analytics. This is how I am doing it which seems to work really well. I may look into building a script to gather from the API, but this is pretty good as it is for my template.

 

<script>
    // Function to sanitize the input
    function sanitizeInput(input) {
        const div = document.createElement('div');
        div.textContent = input;
        return div.innerHTML;
    }

    var _paq = window._paq = window._paq || [];

    // Start defining the items to be used
    let memberId = document.documentElement.getAttribute('data-focus-member');
    let profilePicture = 'Default Image URL';
    let userName = 'Guest User';
  
    document.addEventListener('DOMContentLoaded', function () {

      // Look on the page for specific items to scrape data from the screen (User must be logged in)
      let profilePicture = document.querySelector('#cUserLink img')?.getAttribute('src') || 'Default Image URL';
      let userName = sanitizeInput(document.querySelector('#elUserLink')?.textContent.trim()) || 'Guest User';
      let memberId = document.documentElement.getAttribute('data-focus-member');
  
      
      // Push custom dimensions into Matomo for sort with Custom variables
      _paq.push(['setCustomDimension', 1, userName + ' (' + memberId + ')']); // Dimension 1 for userName
      _paq.push(['setCustomDimension', 2, profilePicture]); // Dimension 2 for profilePicture

      // If visitor is logged in, return user name and member Id to Matomo
      if (memberId) {
        _paq.push(['setUserId', userName + ' (' + memberId + ')']);
      } else {
        _paq.push(['setUserId', 'Guest User']);
      }
    });
  
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
      var u = "//matomo.jbrowns.com/";
      _paq.push(['setTrackerUrl', u + 'matomo.php']);
      _paq.push(['setSiteId', '1']);
      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>

What methods do you use to track visitors? Let's discuss.