Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outlink and download tracking not working for links added after DOM ready (which many are these days eg angular, vue.js, react, ... SPA). #15780

Closed
thibautguedou3 opened this issue Apr 6, 2020 · 10 comments · Fixed by #17522
Assignees
Labels
Bug For errors / faults / flaws / inconsistencies etc.
Milestone

Comments

@thibautguedou3
Copy link

thibautguedou3 commented Apr 6, 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
Copy link
Member

tsteur commented Apr 6, 2020

@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']).

@tsteur tsteur added the Bug For errors / faults / flaws / inconsistencies etc. label Apr 6, 2020
@thibautguedou3
Copy link
Author

@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 tsteur changed the title Outlinks tracking not working on vueJS when using routing Outlink and download tracking not working for links added after DOM ready (which many are these days eg angular, vue.js, react, ... SPA). Apr 7, 2020
@tsteur tsteur added this to the 4.1.0 milestone Apr 7, 2020
@tsteur
Copy link
Member

tsteur commented Apr 7, 2020

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
Copy link
Author

thibautguedou3 commented Apr 8, 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
Copy link
Member

tsteur commented Apr 9, 2020

@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
Copy link
Author

@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
Copy link
Member

tsteur commented Apr 13, 2020

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.

tsteur added a commit that referenced this issue May 5, 2020
refs #15780

It's absolutely not solving #15780 but it can already greatly improve the situation where links are added between DOM Ready and DOM load. 

Putting this into 3.x as was looking into this as part of Matomo for WordPress https://wordpress.org/support/topic/tracking-downloads-served-through-zotpress/#post-12787301
tsteur added a commit that referenced this issue May 6, 2020
* Search for links on page load as well, not just on ready

refs #15780

It's absolutely not solving #15780 but it can already greatly improve the situation where links are added between DOM Ready and DOM load. 

Putting this into 3.x as was looking into this as part of Matomo for WordPress https://wordpress.org/support/topic/tracking-downloads-served-through-zotpress/#post-12787301

* rebuilt piwik.js
jonasgrilleres pushed a commit to 1024pix/pix-analytics that referenced this issue Sep 22, 2020
…15915)

* Search for links on page load as well, not just on ready

refs matomo-org#15780

It's absolutely not solving matomo-org#15780 but it can already greatly improve the situation where links are added between DOM Ready and DOM load. 

Putting this into 3.x as was looking into this as part of Matomo for WordPress https://wordpress.org/support/topic/tracking-downloads-served-through-zotpress/#post-12787301

* rebuilt piwik.js
jbuget pushed a commit to 1024pix/pix-analytics that referenced this issue Sep 26, 2020
…15915)

* Search for links on page load as well, not just on ready

refs matomo-org#15780

It's absolutely not solving matomo-org#15780 but it can already greatly improve the situation where links are added between DOM Ready and DOM load. 

Putting this into 3.x as was looking into this as part of Matomo for WordPress https://wordpress.org/support/topic/tracking-downloads-served-through-zotpress/#post-12787301

* rebuilt piwik.js
@mattab mattab modified the milestones: 4.1.0, 4.2.0 Dec 21, 2020
@mattab mattab modified the milestones: 4.2.0, 4.3.0 Feb 22, 2021
@sgiehl
Copy link
Member

sgiehl commented Apr 16, 2021

@tsteur What are the remaining tasks on this issue? Shall we detect all changes in DOM automatically and attach tracking events if needed? I guess we would need to use MutationObserver (and maybe fall back to Mutation events). But both wouldn't cover all older browsers.

@tsteur
Copy link
Member

tsteur commented Apr 18, 2021

Not sure if @flamisz maybe already started working on it (we talked about it a bit last week) but basically #15780 (comment) would need to be done and should work. We wouldn't want to use MutationObserver if any possible (eg for performance reasons etc)

@flamisz
Copy link
Contributor

flamisz commented Apr 18, 2021

I just looked into it a little bit, but did not start work on it, feel free 😄

@flamisz flamisz self-assigned this May 5, 2021
@mattab mattab modified the milestones: 4.3.0, 4.4.0 May 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug For errors / faults / flaws / inconsistencies etc.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants