tag-manager icon indicating copy to clipboard operation
tag-manager copied to clipboard

Custom event trigger with _mtm doesn’t work

Open Laul0 opened this issue 4 years ago • 21 comments

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

  • Matomo Platform: Self-Hosted (docker)
  • Matomo version: 3.13.5
  • Target Site: SharePoint Online

Laul0 avatar May 24 '20 23:05 Laul0

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?

tsteur avatar May 25 '20 00:05 tsteur

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.

Laul0 avatar May 25 '20 15:05 Laul0

@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.

tsteur avatar May 26 '20 02:05 tsteur

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 avatar Jun 18 '20 18:06 Chardonneaur

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

Chardonneaur avatar Jun 18 '20 18:06 Chardonneaur

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

tsteur avatar Jun 18 '20 21:06 tsteur

@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.

Chardonneaur avatar Jul 03 '20 16:07 Chardonneaur

@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?

tsteur avatar Jul 05 '20 20:07 tsteur

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.

Laul0 avatar Jul 12 '20 22:07 Laul0

@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

tsteur avatar Jul 12 '20 23:07 tsteur

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

Chardonneaur avatar Jul 16 '20 13:07 Chardonneaur

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

Laul0 avatar Jul 16 '20 13:07 Laul0

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?

christiankaindl avatar Sep 02 '22 18:09 christiankaindl

@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

AltamashShaikh avatar Sep 05 '22 07:09 AltamashShaikh

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

christiankaindl avatar Sep 05 '22 11:09 christiankaindl

@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

AltamashShaikh avatar Sep 06 '22 02:09 AltamashShaikh

@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! :)

christiankaindl avatar Sep 06 '22 08:09 christiankaindl

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.

Laul0 avatar Sep 06 '22 13:09 Laul0

@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 🙏

christiankaindl avatar Sep 06 '22 14:09 christiankaindl

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 :

  • window._mtm.push({'event': 'mtm.PageView'}); should trigger the "Page View" trigger
  • window._mtm.push({'event': 'mtm.DOMReady'}); should trigger the "Dom Ready" trigger
  • window._mtm.push({'event': 'mtm.WindowLoad'}); should trigger the "Window Load" trigger

SW-Vincent avatar Mar 23 '23 10:03 SW-Vincent

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

AltamashShaikh avatar Mar 27 '23 05:03 AltamashShaikh