title: Matomo tag manager implementation in Vue
body: <p>I am using the Vue plugin for Matomo which is found here: <a href="https://github.com/AmazingDreams/vue-matomo" rel="nofollow noreferrer">https://github.com/AmazingDreams/vue-matomo</a></p>
  
  <p>I imported the VueMatomo plugin in my main.js entry file like so:</p>
  
  <pre><code>import VueMatomo from 'vue-matomo';
  </code></pre>
  
  <p>Then, I assign the VueMatomo as a global method in my main.js file like so:</p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p>How do I implement tags within this plugin?  Would I just set the trackerUrl to my container url like this:</p>
  
  <pre><code>// Overrides the autogenerated tracker endpoint entirely
  // Default: undefined
  trackerUrl: 'https://mycontainer.js'
  </code></pre>
  
  <p>Also how do I send custom data. For example:</p>
  
  <pre><code>'user':{        
      'role':'consumer', 
      'type':'purchaser'
  }
  </code></pre>
  
  <p>edit: In the Matomo tag manager documentation it says to put this in the head tag.</p>
  
  <pre><code>&lt;!-- MTM --&gt;
  &lt;script type="text/javascript"&gt;
  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);
  &lt;/script&gt;
  &lt;!-- End MTM --&gt;
  </code></pre>
  
  <p>So is that still required with the vue-matomo plugin or can you put </p>
  
  <pre><code>g.src='https://mycontainer.js'
  </code></pre>
  
  <p>somewhere else?</p>