Tag Manager AMP Support

[liquidlx]

Tag manager has support for amp pages? If doesnt have yet, are you planning to do something about that? We need to do create a component like Google Tag Manager have.

[tsteur]

Do you have some link with more information about this topic maybe?

[tsteur]

Not around AMP but what should be supported there or how you expect it to be differently.

[liquidlx]

AMP & Google Tag Manager: https://support.google.com/tagmanager/answer/9205783?hl=en

Creating AMP Component: https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/index.html?index=..%2F..index#0

[liquidlx]

AMP doesn't allow you to manipulate the DOM, it allows to create a amp-script tag that runs javascript in a web worker, so you cannot access the DOM, just the virtual DOM actually (link here]. Because of this restriction we can't include our tag manager, unless matomo have a AMP Component, that allows you to run JS.

Google Tag Manager doesnt have their own component, but uses the analytics one, so we can take an example of how Matomo Tag Manager will work looking at how the amp-auto-ads works link docs link github. The component amp-auto-ads needs to manipulate the DOM to insert the ads, so we can take as an example.

If you need more information let me know.

[tsteur]

I see, thanks. Generally, we could quite easily introduce an AMP context. If someone be keen to work on it, I could spend like 20 minutes on getting some ground work done for this to get things in the right direction and show how things could work. It would still need to be seen if it will be really possible but I reckon a proof of concept could be done quite quickly maybe. Let me know if you are interested

[delokman]

I see, thanks. Generally, we could quite easily introduce an AMP context. If someone be keen to work on it, I could spend like 20 minutes on getting some ground work done for this to get things in the right direction and show how things could work. It would still need to be seen if it will be really possible but I reckon a proof of concept could be done quite quickly maybe. Let me know if you are interested

I'm interested in how to use matomo tag manager to support Android, iOS and AMP platforms,

Please help me understand how to implement this

[tsteur]

Hi @delokman

step 1 add new context

The first step be to define a new context: See for example here I added an AMP context: https://github.com/matomo-org/tag-manager/compare/ampcontext?expand=1#diff-16fdc85d92abf991bfc9d1aa6a8b1281cdad305991882c1346b921543f916421R1

An Android and iOS Context already exists. The context defines basically two things:

1. How should the container be generated. eg for web or AMP it creates maybe a JS file vs for Android a JSON file
2. Installation instructions for the user.

step 2 add new tags/variables/triggers

See eg https://github.com/matomo-org/tag-manager/compare/ampcontext?expand=1#diff-eb5bcf00c892cafd14a4e43b32c6617c45946fa09453d6e737f16bc4cf385e77R31 where I added a new tag and added the method getSupportedContexts where I defined it supports this new AMP Context.

An existing tag could also be changed to support multiple contexts like

    public function getSupportedContexts()
    {
        return array(
            WebContext::ID,
            AMPContext::ID,
        );
    }

That's pretty much all that needs to be done. If you want to customise the output for each tag depending on the context, then you can do something like in https://github.com/matomo-org/tag-manager/blob/3.x-dev/Template/BaseTemplate.php#L198-L199

This method loadTemplate can be also overwritten by any tag, for example the MatomoTag to customise behaviour depending on the tag (which may be needed depending on the tag if one tag supports multiple contexts and the output should be different)

Hope this helps

[delokman]

Hi @delokman

step 1 add new context

The first step be to define a new context: See for example here I added an AMP context: https://github.com/matomo-org/tag-manager/compare/ampcontext?expand=1#diff-16fdc85d92abf991bfc9d1aa6a8b1281cdad305991882c1346b921543f916421R1

An Android and iOS Context already exists. The context defines basically two things:

1. How should the container be generated. eg for web or AMP it creates maybe a JS file vs for Android a JSON file
2. Installation instructions for the user.

step 2 add new tags/variables/triggers

See eg https://github.com/matomo-org/tag-manager/compare/ampcontext?expand=1#diff-eb5bcf00c892cafd14a4e43b32c6617c45946fa09453d6e737f16bc4cf385e77R31 where I added a new tag and added the method getSupportedContexts where I defined it supports this new AMP Context.

An existing tag could also be changed to support multiple contexts like

    public function getSupportedContexts()
    {
        return array(
            WebContext::ID,
            AMPContext::ID,
        );
    }

That's pretty much all that needs to be done. If you want to customise the output for each tag depending on the context, then you can do something like in https://github.com/matomo-org/tag-manager/blob/3.x-dev/Template/BaseTemplate.php#L198-L199

This method loadTemplate can be also overwritten by any tag, for example the MatomoTag to customise behaviour depending on the tag (which may be needed depending on the tag if one tag supports multiple contexts and the output should be different)

Hope this helps

@tsteur Thank you very much for your complete answer,I will do your explanation as soon as possible and tell you the result,Please keep this issue open,