Arnaud73 / ngx-matomo

Matomo (aka. Piwik) web analytics for Angular applications
MIT License
102 stars 48 forks source link

Readme instructions for configuration with Tags? #60

Closed emiltorp closed 3 years ago

emiltorp commented 3 years ago

I've gotten this embed code from our Matomo Manager, a custom Tag Manager container.

<!-- Company Name Tag Manager -->
<script type="text/javascript">
var _mtm = window._mtm = window._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.src='https://company-matomo-server/js/container_4A3s32aA.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Company Name Tag Manager -->

But the documentation are not clear how to configure npx-matomo with tags. I've tried this configuration but that actually froze the browser for some reason.

matomoConfig: {
    scriptUrl: 'https://company-matomo-server/js/container_4A3s32aA.js',
    trackers: [],
    routeTracking: {
      enable: true
    }
  }

Sure, I can figure out trackerUrl and siteId if thats needed. But I want to configure it the "correct" way. Is Matomo tags supported?

Arnaud73 commented 3 years ago

Hi, Currently, in order to get it work, do not provide a scriptUrl in the configuration : it will make the browser load the script, which is already loaded by the code injected by your tag manager. However, if the code behind https://company-matomo-server/js/container_4A3s32aA.js is the regular Matomo tracker script, it won't define any tracker to which to send your data to. In this case (which is the most likely), you still need to provide a tracker in the trackers list (URL of the tracker endpoint in your Matomo instance and the site id).

emiltorp commented 3 years ago

Already injected by your tag manager? You mean that I should embed that code on my index.html page? I thought I could just skip the provided injection code entirely when using ngx-matomo.

So this in the index.html:

<!-- Company Name Tag Manager -->
<script type="text/javascript">
var _mtm = window._mtm = window._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.src='https://company-matomo-server/js/container_4A3s32aA.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Company Name Tag Manager -->

And this in app.module configuration:

matomoConfig: {
    scriptUrl: '',
    trackers: [{
        trackerUrl: 'https://company-matomo-server/matomo.php',
        siteId: 3
    }],
    routeTracking: {
      enable: true
    }
  }
emiltorp commented 3 years ago

Just as an update. I read the configuration file from our tag manager and found out that it had trackers. So what i ended up with was the following config:

matomoConfig: {
    scriptUrl: 'https://company-matomo-server/js/container_4A3s32aA.js',
    trackers: [],
    routeTracking: {
      enable: true
    }
  }

The reason it didn't work the first time was that the configuration in the Tag Manager was slightly faulty, after a fix there it worked. Have just enabled routeTracking though, no custom tracking events.