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
Comments
@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 |
@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. |
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 I would say this should fix most of the issues, possible even these:
In the example you sent can this be easily reproduced? |
@tsteur this seems fine to me! You are absolutely right to take into account the click events cancelation, this is quite common indeed.
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) |
@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? |
@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 |
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
* 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
…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
…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
@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. |
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) |
I just looked into it a little bit, but did not start work on it, feel free 😄 |
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 ?
The text was updated successfully, but these errors were encountered: