@thibautguedou3 opened this Issue on April 6th 2020

Hi there,

We are using Matomo on a VueJS project but we have trouble tracking outlinks.

When a user navigates from our home page to an other page inside the app and then clicks on a link that redirects him outside the app, the link does not appear as an outlink on the Matomo dashboard. However, when the user clicks on an external link directly on the home page, the outlink appears correctly on the Matomo dasboard.

You can find a very simple vue project where you can reproduce the issue: https://github.com/thibautguedou3/matomo-vue-outlink

I can reproduce the issue both on Chrome and Safari

Platform: Mac OS

Could it be a configuration issue in the matomo script ?

<script type="text/javascript">
      var _paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
      _paq.push(["trackPageView"]);
      _paq.push(["enableLinkTracking"]);
      (function() {
        var u = "MATOMO_URL";
        _paq.push(["setTrackerUrl", u + "matomo.php"]);
        _paq.push(["setSiteId", "SITE_ID"]);
        var d = document,
          g = d.createElement("script"),
          s = d.getElementsByTagName("script")[0];
        g.type = "text/javascript";
        g.async = true;
        g.defer = true;
        g.src = "//cdn.matomo.cloud/MATOMO_URL/matomo.js";
        s.parentNode.insertBefore(g, s);
      })();
    </script>
@tsteur commented on April 6th 2020 Member

@thibautguedou3 do you have any suggestion on how to solve this? Matomo does listen to click events. I assume there might be links added after the DOM ready event maybe so Matomo didn't add a click listener?

BTW: We do have a tracker method that lets you track it manually. EG _paq.push(['trackLink', '...outlink url...', 'link']).

@thibautguedou3 commented on April 7th 2020

@tsteur thanks for your answer! Yes we are using the trackLink method manually for now but we were hopping to remove these manual calls once the bug has been fixed.

Ok I also think this has something to do with the moment when links are added to the DOM. Could it be possible for matomo to expose a method to "update" listeners on links on a page? Or simply delay the listeners addition.

There are still behaviours that I don't understand: I cannot see outlinks on pages that are not the home page even if I try to access them directly. So I think that there might be something else going on here.

@tsteur commented on April 7th 2020 Member

I've changed the title for now @thibautguedou3

I think it should be quite easy fixable by using some similar logic as in the tag manager:

function isClickNode(nodeName)
                {
                    return nodeName === 'A' || nodeName === 'AREA';
                }

                document.body.addEventListener( 'click', function (event) {
                    if (!event.target) {
                        return;
                    }

                    var target = event.target;
                    var nodeName = target.nodeName;

                    while (!isClickNode(nodeName) && target && target.parentNode) {
                        target = target.parentNode;
                        nodeName = target.nodeName;
                    }

                    if (target && isClickNode(nodeName)) {
                        processClick(target)
                    }
                }, true);

This should listen to all clicks on A or AREA links. We would set useCapture = true in case some framework maybe cancels click events (stops propagation etc). This means should link be changed afterwards through a different click handler a different URL might be tracked but this should be rare, and this can happen independent of this anyway.

I would say this should fix most of the issues, possible even these:

There are still behaviours that I don't understand: I cannot see outlinks on pages that are not the home page even if I try to access them directly. So I think that there might be something else going on here.

In the example you sent can this be easily reproduced?

@thibautguedou3 commented on April 8th 2020

@tsteur this seems fine to me! You are absolutely right to take into account the click events cancelation, this is quite common indeed.

In the example you sent can this be easily reproduced?

Normally if you launch the project and then browse to http://localhost:8080/about, you will never see the outlink (even if you reload directly on this about page)

@tsteur commented on April 9th 2020 Member

@thibautguedou3 I've cloned the repo of your but how do I use it? The index.html has basically no content and no scripts included?

@thibautguedou3 commented on April 9th 2020

@tsteur Once you've cloned it, you go into the created folder and run:

yarn
yarn serve

This should launch a dev server and you can see the result by browsing http://localhost:8080

@tsteur commented on April 13th 2020 Member

image
I've got it running now. The outlink is actually always tracked in my case. It is not working though when moving the Home or About and then clicking on the outlink. The above solution I mentioned should fix this.

Powered by GitHub Issue Mirror