Tag Manager in nextjs App doesn't show any events

Tag Manager
1

Hi,

I am trying to track my nextjs/react app using Matomo (hosted by friendly analytics) but I don’t see any events in my dashboard.

The out of the box tracking for pageviews, downloads etc. works fine. However, there are a couple or custom events I want to track, like the opening of certain accordions (i.E. glossary entries).

My research suggests, I need or should use the Tag Manager for that. So I initialize the tag manager in my layout.tsx using the provided script inside an effect:

const _mtm = (window._mtm = window._mtm || []);

    _mtm.push({ "mtm.startTime": new Date().getTime(), event: "mtm.Start" });

    const d = document;

    const g = d.createElement("script");

    const s = d.getElementsByTagName("script")[0];

    g.async = true;

    g.src = FRIENDLY_ANALYTICS_SCRIPT_URL;

    s?.parentNode?.insertBefore(g, s);

On AccordionOpen, I call this function:

if (typeof window !== "undefined" && (window as any)._mtm) {

  (window as any)._mtm.push({

    event: "openGlossaryEntry",

    title: entryTitle,

  });

}

In Matomo, I defined a trigger for the event openGlossaryEntry and a tag that is configured to fire, when the trigger is matched. The tag uses the same config as PageView which is working.

The trigger has trackingType = Event and Categorie, name and value have values.

In Debug Mode, when opening such an accordion, I see in the Logs:

“firing this tag”

{“type”:“Matomo”,“name”:“Glossar-Accordion”, …}

and then

"event: "

{“tags”:[{“action”:“Fire”,“type”:“Matomo”,“name”:“Glossar-Accordion”,“numExecuted”:1}]..}

And the Tag is shown in the Tags panel as fired tag.

But no network request follows that.

In window._mtm, I see the events in the array. Window._paq remains empty (not sure, if this is the expected behaviour?).

In my Matomo Dashboard, I would expect to see the events under events, but I don’t.

I’d be really grateful for any advice. Thanks!