Matomo tag manager implementation in Vue

Question

I am using the Vue plugin for Matomo which is found here: https://github.com/AmazingDreams/vue-matomo

I imported the VueMatomo plugin in my main.js entry file like so:

import VueMatomo from 'vue-matomo';

Then, I assign the VueMatomo as a global method in my main.js file like so:

Vue.use(VueMatomo, {
  // Configure your matomo server and site
  host: 'https://matomo.example.com', 
  siteId: 1, 

  // Enables link tracking on regular links. Note that this won't
  // work for routing links (ie. internal Vue router links)
  // Default: true
  enableLinkTracking: true,

  // Require consent before sending tracking information to matomo
  // Default: false
  requireConsent: false,

  // Whether to track the initial page view
  // Default: true
  trackInitialView: true,

  // Changes the default .js and .php endpoint's filename
  // Default: 'piwik'
  trackerFileName: 'piwik',

  // Whether or not to log debug information
  // Default: false
  debug: false
});

How do I implement tags within this plugin? Would I just set the trackerUrl to my container url like this:

// Overrides the autogenerated tracker endpoint entirely
// Default: undefined
trackerUrl: 'https://mycontainer.js'

Also how do I send custom data. For example:

'user':{        
    'role':'consumer', 
    'type':'purchaser'
}

edit: In the Matomo tag manager documentation it says to put this in the head tag.

<!-- MTM -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mycontainer.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End MTM -->

So is that still required with the vue-matomo plugin or can you put

g.src='https://mycontainer.js'

somewhere else?

Answer 1

Under the hood, the Vue Plugin simply exposes to you the Matomo tracking client SDK. You can call any of the native SDK functions listed in their SDK on their website by going through this.$matomo.

You can actually see that they do this in the source code:

const Matomo = MatomoJS.getTracker(trackerEndpoint, siteId)

// Assign matomo to Vue
Vue.prototype.$piwik = Matomo
Vue.prototype.$matomo = Matomo

Where MatomoJS is resolved through import Matomojs from './matomo' which is just a flat javascript file that packaged their public SDK.