How does Matomo Tag Director incorporate into the AMP website?

General questions
1

When I deploy Matomo Tag Manager as a standard JavaScript Tag, AMP restricts custom JavaScript which leads to an AMP error.

How can I AMP-compliantly incorporate the Matomo Tag Manager for my site shuftipro.com?

I’ve already tried to set the default script to fit AMP guidelines for Matomo Tag Manager, but it doesn’t work (script was not loaded).

This was the default script:

<!-- 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).

2

Hi,

Can you see an error in the browser console?

I know very little about AMP, but the documentation lists a lot of limitations:

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.

1 Like
3

I think the problem is that may be with amp-script I had initialised it’s code manually - 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.

4

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. I have the same issue with my site (grief crystal healing) some moths ago but it has been resolved.