Tag Manager with React/Redux app

Tag Manager
1

Has anyone had success with implementing _mtm with SPA?

I’ve tried to find documentation which will provide more than code snipped to be put in index.html but no luck.

With tracking client is more or less clear how to proceed and it worked.

2

Hi,

I am not sure how MTM would work any different in a SPA than in a “regular” website.

The only thin you need to pay attention is that MTM should be initialized as early in the app as possible as it obviously can’t react to anything that happens before

3

@Lukas thanks for answer.

This is very first time for me to work with Matomo so maybe I have conceptual misunderstanding of how tag manager works.

I expect that _mtm.push({event: "blahblah"}) send event data to matomo analytic server (aka issuing GET or POST request) but it just adds event to list: MatomoTagManager.dataLayer.events?

With tracking client I can programmatically send data to analytic server with _paq.push(['trackPageView']);

4

_mtm.push is the dataLayer and doesn’t send anything to Matomo Analytics directly. Only to the dataLayer of the Tag Manager. See Data Layer: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3

You would need to use _paq.push(['trackEvent', 'category', 'name', 'action']); for example.

5

@thomas_matomo thanks a lot for clarification - this helps a lot.

6

Lukas,
Our organization is moving toward a single page ReactJS based solution. We are evaluating multiple tracking tools. Matomo with Tag Manager is our preferred solution and I’m responsible to provide evaluation. I have issues with Tagging page elements rendered by ReactJS.
Do you know if the Tag Manager scan the DOM at the time of the Click event or is it setting all the callbacks on the page load? The Tag Manager might not work if the callbacks are set on the page load.

Thanks in advance …
Leo

7

See the 3 different trigger files here: tag-manager/AllLinksClickTrigger.web.js at master · matomo-org/tag-manager · GitHub and tag-manager/AllElementsClickTrigger.web.js at master · matomo-org/tag-manager · GitHub and tag-manager/AllDownloadsClickTrigger.web.js at master · matomo-org/tag-manager · GitHub

It does a TagManager.dom.addEventListener(parameters.document.body, 'click', function (event) {... }

so events should be propagated as long as bubbling is not stopped.

If you’re wanting to self host it would be otherwise easy to add a different behaviour see Tags: Develop - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3

8

I’m a little confused, would it be possible to get clarification on thomas_matomo’s 11/18 answer? What is the purpose of using the tag manager’s data layer if the you need to use the regular JavaScript Tracking Client to send data to Matomo Analytics? Is there any way to persist the events tracked in the data layer up to the analytics server?

1 Like