How to integrate Matomo Tag Manager in an AMP Website?

Question

AMP restricts custom JavaScript which leads to an AMP error, when I implement Matomo Tag Manager as a regular JavaScript tag.

How do I integrate the Matomo Tag Manager in an AMP compliant way?

I already tried to adjust the default Matomo Tag Manager script to match AMP guidelines, but it did not work (the script was not loaded).

The default script looked like this:

<!-- Matomo Tag Manager -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mypage.com/js/container_abc.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End Matomo Tag Manager -->

They way I tried to adjust it was like this:

<!-- Matomo Tag Manager -->
<amp-script layout="container" src='https://mypage.com/js/container_abc.js'>
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
</amp-script>
<!-- End Matomo Tag Manager -->

I expected that the AMP error would be resolved and that the Matomo Tag Manager would be loaded.

The actual result showed that the script was not loaded (there was no.network request).

Answer 1

I think the problem is that with amp-script you need the user to manually initialize your code - be it by clicking a button or any other action. Since this is a tracking script, I don't think there is a way to do that.

From the docs:

JavaScript inside the Web Worker allows minimal change to the DOM on load. Changes allowed during this phase are:

Registering event handlers.

Splitting a TextNode into multiple TextNodes, to allow for frameworks that require it.

Answer 2

Can you see an error in the browser console?

I know very little about AMP, but the documentation lists a lot of limitations: amp.dev https://amp.dev/documentation/components/amp-script/

Documentation: Allows running custom JavaScript to render UI.

For example if it is a cross-origin request (matomo is on another domain) then you need to add a meta[name=“amp-script-src”] with the hash of the script (implying that you are not allowed to modify anything in tag manager after adding the script to the site.

After all the point of AMP seems to be to not allow “normal” JavaScript execution (everything is running in a web-worker which again might break Matomo Tag Manager in tons of ways).

There is also a limit of 150KB to keep in mind.

Answer 3

Matomo offers both javascript and pixel tracking. As AMP format has a lot of limitation for javascript, we use pixel tracking in an amp-img tag for AMP websites.

<amp-img referrerpolicy="no-referrer-when-downgrade" src="https://sub.domain.ext/matomo.php?idsite=X&amp;rec=1" style="border:0" alt="" width="1" height="1" ></amp-img>

With sub.domain.ext being your Matomo domain and X the id of the website you're tracking.