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!

2

I think there are two separate things here: the Matomo Tag Manager data layer (_mtm) and the Matomo JavaScript tracker queue (_paq).

Pushing this:

window._mtm.push({
  event: "openGlossaryEntry",
  title: entryTitle,
});

only tells Matomo Tag Manager that a custom data layer event happened. It does not automatically send an analytics event to Matomo unless your Matomo Analytics tag is correctly configured to send an Event hit.

For a React/Next.js app, I would first test the simplest possible setup without Tag Manager:

window._paq = window._paq || [];
window._paq.push([
  "trackEvent",
  "Glossary",
  "Open Entry",
  entryTitle
]);

Matomo events require at least a Category and an Action. The optional Name can be your glossary entry title, and the optional Value must be numeric if you use it.

So your accordion handler could be:

export function trackGlossaryOpen(entryTitle) {
  if (typeof window === "undefined") return;

  window._paq = window._paq || [];
  window._paq.push([
    "trackEvent",
    "Glossary",
    "Open Entry",
    entryTitle
  ]);
}

If this creates a network request and appears in Matomo, then your base tracker is working and the issue is specifically in the Tag Manager configuration.

If you want to keep using Tag Manager, I would check these points:

  1. Make sure your tag type is “Matomo Analytics”, not only a debug/custom tag.

  2. Set Tracking Type to “Event”.

  3. Make sure Event Category and Event Action are not empty.

  4. If you use Event Value, it must be a number.

  5. If you want to use entryTitle, create a Data Layer Variable for title, then use that variable as the Event Name.

  6. Publish the container, not only test it in preview/debug mode.

  7. Check whether consent/privacy settings are blocking the analytics request.

  8. Check the browser Network tab for requests to matomo.php or your Friendly Analytics endpoint.

  9. Make sure the Matomo configuration variable uses the correct Matomo URL and Site ID.

  10. Verify that your event tag is attached to the custom event trigger openGlossaryEntry.

One important point: seeing the event inside window._mtm only proves that the data layer event was pushed. It does not prove that Matomo Analytics received an event. The actual analytics hit is usually sent through the tracker, which is why testing _paq.push(["trackEvent", ...]) is a good debugging step.

In my opinion, for simple UI interactions like opening an accordion, direct _paq.push(["trackEvent", ...]) is often easier and less fragile than setting up a Tag Manager trigger + variables + event tag.