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?

Have you figure out how to do it? – Popeye Mar 27 '23 at 03:39 — Popeye, Mar 27 '23 at 03:39

score 2 · Answer 1 · answered Apr 30 '19 at 16:50

2

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.

answered Apr 30 '19 at 16:50

Ohgodwhy

49,779
11
80
110

Okay, I figured out how to send more data using _paq.push. But I still don't understand how to implement the container. – Jackson Apr 30 '19 at 18:42
@Josh I have no idea what the idea or purpose of the container is. I just know how the Matomo integration works. Sorry. – Ohgodwhy Apr 30 '19 at 20:11

Matomo tag manager implementation in Vue

1 Answers1