kremalicious / gatsby-plugin-matomo

🥂 Gatsby plugin to add Matomo (formerly Piwik) onto a site.
https://kremalicious.com/gatsby-plugin-matomo
MIT License
56 stars 17 forks source link

File download tracking #32

Open fi4sk0 opened 4 years ago

fi4sk0 commented 4 years ago

Hey there,

I'm using gatsby-plugin-matomo 0.8.3 and it's working perfectly (thanks!) for regular navigation on the page. The page also offers downloads (linked to static files) like this:

<a href="/static/somefile.zip" download="">Download</a>

Unfortunately, the downloads are not shown in the Matomo dashboard. Is there anything else to setup to get this working?

Thanks!

robinmetral commented 4 years ago

I think this would be covered by #2

kremalicious commented 4 years ago

enableLinkTracking is added by default with this plugin and I found this automatic outlink/download link tracking covering most use cases. For me, the Behavior > Outlinks & Behavior > Downloads lists in Matomo get populated as expected.

But that automatic detection is based on a pre-defined list of file extensions Matomo uses to detect download links. Are you using any other extension than in this list maybe? If so I could add an option to add more file extensions for the automatic link tracking.

7z|aac|arc|arj|apk|asf|asx|avi|bin|bz|bz2|csv|deb|dmg|doc|
exe|flv|gif|gz|gzip|hqx|jar|jpg|jpeg|js|mp2|mp3|mp4|mpg|
mpeg|mov|movie|msi|msp|odb|odf|odg|odp|ods|odt|ogg|ogv|
pdf|phps|png|ppt|qt|qtm|ra|ram|rar|rpm|sea|sit|tar|
tbz|tbz2|tgz|torrent|txt|wav|wma|wmv|wpd||xls|xml|z|zip

For full manual control you could always use the tracker object on window directly, like:

<a href="/static/somefile.zip" download onClick={() => window._paq.push(['trackLink', 'https://myurl.com/static/somefile.zip', 'download'])}>Download</a>

But that's rather cumbersome obviously

fi4sk0 commented 4 years ago

Thanks for clarifying. I found what the problem was: The downloads were hidden inside a foldout component. After switching to "hidden" instead of not rendering, it worked.

samajammin commented 4 years ago

Thanks @kremalicious!

enableLinkTracking is added by default with this plugin

I'm curious why I can't see it in the script code.

Here's the snippet I have in a <script> tag on my old site:

        var _paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            ...
        })();

Inspecting the DOM in dev mode with this plugin, I'm not seeing it:

    window.dev = true
    if (window.dev === true || !(navigator.doNotTrack === '1' || window.doNotTrack === '1')) {
      window._paq = window._paq || [];
      window._paq.push(['setTrackerUrl', 'https://matomo.ethereum.org/matomo.js/matomo.php']);
      window._paq.push(['setSiteId', '4']);
      window._paq.push(['enableHeartBeatTimer']);
      window.start = new Date();
      (function() {
          ...
      }
    }

Is it being configured under the hood somewhere?

kremalicious commented 4 years ago

good point @samajammin, enableLinkTracking is not added to the initial generated static page, but fired on client-side only in gatsby-browser.js for every route change on Gatsby's onRouteUpdate trigger: https://github.com/kremalicious/gatsby-plugin-matomo/blob/master/src/gatsby-browser.js#L36

I based this on somewhat of an educated guess, where I understood that for a single page application Matomo needs that so not only links on the initial page are tracked, but also on subsequent visited pages. And a user arriving on the first landing page will fire onRouteUpdate, which will then actually record the first page view hit, and enable link tracking for that route.

That being said, I never fully explored link tracking since it seemed to just work with that implementation. There's probably a case to be made, which needs to be verified and tested, to put enableLinkTracking within the initial tracking code and see how Gatsby behaves with its static and hydrated pages. So I'll keep this issue open for now in case anybody else has some experiences to share, thanks everyone so far for reporting back!

samajammin commented 4 years ago

Thanks for the quick response & explanation @kremalicious!

FWIW, the previous site used VuePress & the outlink tracking appeared to working when added to just the initial generated static page. Perhaps the only tracking we had was when the user landed on that given page though, so I can't verify if that's the correct approach.

I'll keep an eye on our data with this new configuration & let you know if this shows similar results or not.

samajammin commented 4 years ago

Following up on this for folks who are curious.

Since migrating our site to Gatsby (& using this Matomo plugin) on 6/25, we have seen a significant jump (~2x) in outlinks: Image 2020-07-03 at 10 59 38 AM

This would support your theory @kremalicious that link tracking should be enabled on every route change, though I'm not sure how to verify this.