matomo-org / tag-manager

Free Open Source Matomo Tag Manager - A simple way to manage and maintain all of your (third-party) tags on your website.
https://matomo.org
GNU General Public License v3.0
169 stars 58 forks source link

Custom event trigger with _mtm doesn’t work #245

Open Laul0 opened 4 years ago

Laul0 commented 4 years ago

Summary

For catch a partial loading page, a custom event must be created and triggered in JavaScript directly but it does not work.

Current behavior

  1. Matomo Tag Manager is included and loaded into the page
  2. Create a custom trigger into Tag Manager (Name and eventName = PartialPageview)
  3. Enable preview mode
  4. mtm.PageView is triggered
  5. Try to trigger manually the event from the browser dev console
    _var _mtm = _mtm || [];
    _mtm.push({'event':'PartialPageview'});

Result: Nothing append.

Btw, All Elements Click works.

Expected behavior

After loading Matomo Tag Manager into the page, trigger custom event

Additional information

tsteur commented 4 years ago

Works nicely here.

BTW the example has a leading underscore in _var which should be var. Can you maybe send us a link where we can reproduce this?

Laul0 commented 4 years ago

Hi @tsteur,

Yes, I quickly wrote an example of test that I performed.

Because I am using a local self-hosted and a SharePoint online site, it will be difficult to give you a link easily. But it is possible via remote or if we plan a time range for your own tests.

tsteur commented 4 years ago

@Laul0 we usually don't do remote sessions or arrange a time unless there was maybe a support plan involved. Is there a way that it's possible to maybe save the website as HTML including all assets and send it to us or so? Or even better build a simple page outside of SharePoint where we can reproduce this? Like maybe you can simply create an HTML page, embed the container JS, and try to trigger the event.

Chardonneaur commented 4 years ago

I am facing a similar but opposite issue. If I follow the documentation at https://developer.matomo.org/guides/spa-tracking "or in your Single Page App, if you are using the 'Pageview Trigger' to trigger a Pageview, you can trigger a Tag Manager Event {event: 'mtm.PageView'} by calling the following line in JavaScript: _mtm.push({'event': 'mtm.PageView'});.

This would also work similarly when you use instead the 'DOM Ready Trigger' (call _mtm.push({'event': 'DOMReady'});) or when you use the 'Window Loaded Trigger' (call _mtm.push({'event': 'WindowLoad'});"

SPA tracking will work if I create a custom event named mtm.PageView but not with a pageview trigger. I tested with _mtm.push({'event': 'DOMReady'});) by applying a DOMReady trigger and it did not work too, same thing with WindowLoad.

Chardonneaur commented 4 years ago

Interesting as well, it seems that if I don't name the custom event mtm.PageView then the custom event is not recognized.

tsteur commented 4 years ago

@Chardonneaur feel free to email me a link where this can be reproduced and I have a look

Chardonneaur commented 4 years ago

@tsteur thank you for your answer, I just recorded a video showing the issue that I am facing https://youtu.be/VW_zAGbK6pY unless I don't understand the documentation properly, but to me clicking on the button should fire the popup.

tsteur commented 4 years ago

@Chardonneaur any chance you could share a URL to that page somehow or zip the files and send it to us so we can debug it?

Laul0 commented 4 years ago

Hi @Chardonneaur,

I finally found a solution for my use case and maybe that will resolve your issue too.

I performed a copy/paste from the documentation to trigger custom events:

var _mtm = _mtm || [];
_mtm.push(...);

I noted my custom scripts worked but no event was send to the Matomo server... Because the context of my Single Page changed the scope of the variable _mtm changed too. To retrieve the main/original variable, I just add window front of the variable to force the scope:

var _mtm = window._mtm || [];
_mtm.push(...);

I still need to do few tests to be sure it works properly but it is on the right way.

Hoping that will help you.

tsteur commented 4 years ago

@Laul0 that would explain the issue 👍 BTW few days ago we changed the default code for _mtm so that when people copy/ paste it, it'll automatically work https://github.com/matomo-org/tag-manager/pull/259/files

Chardonneaur commented 4 years ago

@Laul0 thank you, did it work for you? I tested by my side with the new Matomo code and it didn't work.

Laul0 commented 4 years ago

It seems to be working. I didn't perform all tests yet but it is on the right way.

christiankaindl commented 2 years ago

I am facing the same issue in my Next.js application. I really can't find out how to trigger a page view manually, even after trying a bunch of things:

Following the docs I initially used the History Change trigger in addition to the Pageview trigger, but that resulted in lots of wrong page titles being recorded (because the Next.js router is async). Then I tried approach 2 from the docs: I removed the History Change trigger and manually called window._mtm.push({ event: 'mtm.PageView' })—that didn't work at all (nothing being recorded). No events were being recorded in the dashboard, no matter how often I called window._mtm.push({ event: 'mtm.PageView' }).

Lastly I tried using a custom trigger (called it client-side-navigation) and added it to my Pageview tag. That also did not work. I am now pushing both the mtm.PageView event as well as my custom one for debugging purposes. Don't know what I am doing wrong, is there anything else I can try? This is the site: https://dev.gesetzefinden.at


While trying to fix this I looked around a lot, but couldn't find any place where built-in events like mtm.PageView would be documented. At least when viewing the trigger in the dashboard this should be mentioned somewhere. Is there documentation for built-in events?

AltamashShaikh commented 2 years ago

@christiankaindl window._mtm.push({'event': 'client-side-navigation'}); works for me

Screenshot from 2022-09-05 12-48-19 Screenshot from 2022-09-05 12-48-42

christiankaindl commented 2 years ago

Thanks for the response @AltamashShaikh! You're right, it does show up in the network tab, just not immediately (switching tabs triggers it sometimes?).

Then it is a different problem: the network request is being done, but I still don't see it registering in my dashboard. In the video below you can see that after some time a network request is registered, but nothing shows up in the dashboard even though I am using the built-in mtm.PageView (the initial page view when loading the page does show up!):

https://user-images.githubusercontent.com/15364860/188434421-e1bf0569-af0e-41c2-a07b-73148ba34ebd.mov

AltamashShaikh commented 2 years ago

@christiankaindl Thats a Heartbeat ping request. I can see window._mtm.push({ event: 'mtm.PageView' }) is not working for you..can you try with window._mtm.push({'event': 'client-side-navigation'}); for now? I will try to find some time to debug the cause meanwhile

christiankaindl commented 2 years ago

@AltamashShaikh Sadly I don't see it working even with my custom event (see video below), otherwise I would gladly use that as a workaround! Again, the initial visit is recorded, but nothing after that shows up in the dashboard (this time in Chrome):

https://user-images.githubusercontent.com/15364860/188578594-ed72db7d-bdb4-43fa-a766-23909976b381.mov

And this is how my Tag is configured:

Screen Shot 2022-09-06 at 09 58 18

If I can follow up with any debug information that you may need, feel free to ask. Thanks very much for your help! :)

Laul0 commented 2 years ago

Hi @christiankaindl,

Did you check your event log page? Most of the time, this behavior is linked to a partial loading page. In other words, your page does not refresh completely. If this is the case, you must trigger the event when the content of the page is loaded and not when the page is refreshed.

christiankaindl commented 2 years ago

@Laul0 you're right! After a hard-refresh (Cmd+Shift+R), the custom event started working! omg, thank you! I guess it is true, there are only two hard things in computer science. And one of them is caching... 😅 I think the browser simply used a cached version of the Matomo script.

That makes only mtm.PageView not working, but I'm just glad there is a workaround 🙏

SW-Vincent commented 1 year ago

Hi,

It doesn't look like this issue has been solved (the above solutions are workarounds). Is there any news about a fix that would make the intended behaviour work again ?

By intended behaviour i mean :

AltamashShaikh commented 1 year ago

@SW-Vincent We have added this for prioritisation and our product team will have a look and schedule this one accordingly