matomo-org / tag-manager

Free Open Source Matomo Tag Manager - A simple way to manage and maintain all of your (third-party) tags on your website.

Free Open Source Matomo Tag Manager

Description

Are you a developer? Please consider contributing more tags to our open source tag manager. Learn more on how to develop custom tags, triggers, and variables.

When you install this version of Matomo Tag Manager, users with admin access will be able to create custom HTML tags, triggers, and variables that may execute JavaScript on your website. These custom templates could be misused to steal for example sensitive information from users (known as XSS). You can disable these custom templates under "Administration => General Settings". We will later have new permissions in Matomo that allow you to configure who will be able to use these kind of templates.

Matomo Tag Manager lets you manage and unify all your tracking and marketing tags. Tags are also known as snippets or pixels. Such tags are typically JavaScript code or HTML and let you integrate various features into your site in just a few clicks, for example:

• Analytics
• Conversion Tracking
• Newsletter signups
• Exit popups and surveys
• Remarketing
• Social widgets
• Affiliates
• Ads
• and more

It makes your life easier when you want to modify any of these snippets on your website as you will no longer need a developer to make the needed changes for you. Instead of waiting for someone to make these changes and to deploy your website, you can now easily make the needed changes yourself. This lets you not only bring changes to the market faster, but also reduces cost.

For example want to track an event into your Matomo whenever a certain button is clicked? It will take you only a few clicks to get the insights you need when you need them which in return lets you make decisions faster.

Matomo Tag Manager also comes in handy if you embed many third-party snippets into your website and want to bring in some order to oversee all the snippets that are embedded and have a convenient way to manage them. It also makes sure all that all snippets are implemented correctly and improves the performance of your website.

If you have different environments for your website or platform or want to test new changes before making them available globally you will be please to hear that we have you covered. With a click of a button you can deploy your tags to an environment of your choice.

Last but not least Matomo Tag Manager keeps track of all changes that you make and lets you restore snapshots at any given time.

Features

• Create an unlimited number of containers
• Create versions and releases of containers
• See what changed in each version
• Export / import of containers
• Preview / debug mode
• Configure multiple environments
• Blacklist certain tags, triggers, or variables
• Easily define your own tags, triggers, or variables
• Schedule tags to run only during a certain time range
• Limit how often a tag should run
• Assign block triggers to avoid a tag from being executed as soon as this trigger was fired
• Optionally delay the execution of a tag
• Assign conditions to a trigger to restrict when a specific trigger should be fired
• Define a default value for variables
• Define a lookup/regexp/match table for variable values with various available comparisons (contains, equals, starts with, ends with, regexp, ...)
• Data-Layer
• Supports Activity Log

Tags

• Matomo
• CustomHtml
• CustomImage
• Google Analytics
• More will follow

Are you a developer? If you use features regulary which are not available yet, or you have a product you want to integrate into the Tag Manager, please check out our developer documentation on how to add your own tags, triggers, and variables. It is really easy. Matomo Tag Manager is open source and we would love it if you contribute tags, triggers and variables to our project.

Triggers

• All Elements
• All Links
• All Download links
• Custom Event
• Dom Ready
• Element Visibility
• Form Submit
• Fullscreen
• History Change
• JavaScript Errors
• Page View
• Scroll Depth
• Timer
• Window Leave
• Window Loaded
• Window Unloaded

Variables

• Constant Value
• Random Number
• Cookie
• DataLayer
• Dom Element
• JavaScript Variable
• HTML Meta Content
• Referrer URL
• Time Since Load
• Page URL
• Page Title
• Page Hostname
• Page Path
• Page Hash
• Page URL Parameter
• First directory of page url
• Environment
• Container ID
• Container Version
• Container Revision
• Local Hour
• Local Date
• Local Time
• UTC Date
• ISO Date
• Weekday
• Screen size width
• Screen size height
• Screen size width (available)
• Screen size height (available)
• User Agent
• Lots of more variables for elements, clicks, scrolls, error, history, and form triggers

License

Matomo Tag Manager is released under the GPL v3 (or later) license, see LICENSE

Installation & Requirements

Matomo Tag Manager requires an installed Matomo Analytics see our installation guide and requirements guide.

Afterwards you can install the Tag Manager plugin in one click by going to "Administration => Marketplace".

Get involved!

We believe in liberating Web Analytics, providing a free platform for simple and advanced analytics and tag manager. Matomo was built by dozens of people like you, and we need your help to make Matomo better. Why not participate in a useful project today? Learn how you can contribute to Matomo.

Developer guides are available at developer.matomo.org/guides/tagmanager/settingup.

Security

Security is a top priority at Matomo. As potential issues are discovered, we validate, patch and release fixes as quickly as we can. We have a security bug bounty program in place that rewards researchers for finding security issues and disclosing them to us.

Learn more

Support for Matomo Tag Manager

For Free support, post a message in our community forums: forum.matomo.org

For Professional paid support, send a message to our network of Matomo professionals: matomo.org/support

Contact

Website: matomo.org

About us: matomo.org/team/

Contact us: matomo.org/contact/

tag-manager's Issues

New trigger: Copy text

It could be valuable to have this trigger as it allows you to for example track an event when someone copies something on your website which basically is an interaction. It helps you get more realistic bounce rate for example.

Confusing English Label TagManager.FireDelayHelp

Hi,
I came across a weird text in English, the wording is redundant and confusing.
I think it should be updated in English, the key is TagManager.FireDelayHelp and it reads:
"Lets you delay the execution of this tag once a fire trigger has been triggered. This can be useful if you want to wait for example for 3000ms (3 seconds) before executing the tag to allow for a blocking trigger to be triggered to avoid the tag from being triggered. The value is expected in milliseconds where 1000ms are equal to one second."
The part after the "(3 seconds) is particularly confusing.

Be able to copy tags

GTM has this feature. It is basically just a link provided within the settings of a given tag.
When you click on it, it directly create a new tag with the same settings of the previous one and you can already edit the settings to have this new tag up and running.

Improve description of HistoryChangeTrigger

tag-manager/lang/en.json

Line 256 in d90ff57

"HistoryChangeTriggerDescription": "Triggered when the window location changes.",

While it is clear to me that a change to windows.location is meant, the wording isn't perfectly clear and can be misunderstood as e.g. in the German translation:

tag-manager/lang/de.json

Line 229 in f233a84

"HistoryChangeTriggerDescription": "Wird ausgelöst wenn die Fensterposition ändert.",

I don't have a perfect solution, but maybe the straightforward Triggered when the current URL changes. is more understandable and clear enough.

In debug mode, add the possibility to change the debug frame height

It would be great to show an indicator that lets users dynamically change the height of the debug iframe. Using resize:vertical css won't really work as the indicator is shown in the very bottom right and not is not really usable there.

Add new tag: Change android address bar color

by setting <meta name="theme-color" content="#xxxxxx">

Individual Tag created - update installed - Individual Tag deleted

Hi there,
we have created our own event tag for etracker. By running the latest update, the files were deleted and we had to install the tag again. Furthermore we have to set up the tags again, as it doesn't work anymore.

How can we avoid this?

Add possibility to import an exported container from Google Tag Manager

We could try to see if it is possible to import them. Problem is that not all trigger/variable parameters can be mapped maybe and we would need to see how much they behave the same or different. Also most tags wouldn't be possible to import them.

After the import we would need to give an overview of what was imported, what wasn't imported (down to each parameter of trigger/variable/tag), and ideally when something was imported whether it maybe behaves differently in Matomo.

Also we have probably couple options that GTM doesn't have, so need to see how this affects behaviour and what default values to use for those options.

We'd need a map of all their tags/triggers/variables and their parameters to make this happen. Not sure if this is documented somewhere.

how i can launch matomo tag manager independent? like old seven-tag , i need to launch separate from matomo

Clean up feature for the container

Hi,

Would it be possible to integrate a feature in order to delete all the tags and triggers within a given container?

Typical use case is the following one: when working on test environment, we sometimes need to add many tags and triggers. Then we would like to start back from scratch without creating a new container and changing the source code. A clean up feature will really help here.

Thanks

Add new tag: Drift chat

see https://help.drift.com/article/how-to-setup-drift-in-google-tag-manager/

Bug: Changing name of variable causes removing trigger in a tag

If you use a variable in a tag, eg "const.enviroment" and you rename to "environment" the trigger will be removed.

Double pageview generated with single Matomo Pageview tag

Hi! Tag Manager is great, but I am having an issue while setting it up.

I created container, included JS into my website, and then created Matomo pageview tag to trigger on each pageview (I suppose this is the correct way):

This is the trigger:

And when loading the website I have two pageview requests generated:

The Debugger:

Can anyone help to tell on the reason for this, or maybe it's little bug?

As a test I included standard tracking code for Analytics as Custom HTML tag with the same trigger, and then I have single pageview tracker for each load of the page, as it should be.

Thanks in advance for the help!

Need a built-in check for code errors

When there is a mistake within a custom HTML, variable or custom JS, MTM still accept it. Whereas GTM would refuse to execute the code.

Update button remains disabled during some actions

Reproduce

• Open an Tag
• Click on the little remove Icon to remove an item under "Don't execute this tag when any of these triggers have been triggered."

Now the update button remains disabled.

„Match CSS Selector“ comparison doesn’t trigger click events

Hi there,
when configuring a trigger with the new css selector comparison, the trigger doesn’t fire even though the console returns a positive value for the selector. Do you have an assumption, why this is happening?

Thank you and best regards!

Add some statistical reports

First, this is an absolutely great enhancement to Matomo!

As I can say at this moment, I don't have any Problems with the Tag Manager.

What I missing are some statistical reports like:

• tag loads
• tag loads over the past x days

and so on.

Add Tag/Container Reporting

As Matomo Tag Manager is based on Matomo Analytics and directly integrated, it would be also great to show detailed insights into all containers.

For example how often was a certain container or tag loaded, how often was a certain trigger triggered, ... After how much time was a trigger typically triggered etc.

Allow to Deactivate / Activate Tags instead of delete them

Let users download generated JS container

This will be especially useful in case their analytics domain/path contains eg Matomo and is blocked by ad blockers or similar. By downloading the JS file they can embed the generated file manually and reduce risk of the generated container being blocked. Also they could directly minify it and merge it with other JS files to reduce the number of loaded files.

Obviously, when using this method, the JS container file needs to be updated manually on the website after publishing it.

Add new tag: Verify your site ownership

Helps you verify site ownership for Google see https://support.google.com/webmasters/answer/35179?hl=en
eg by adding a meta <meta name="google-site-verification" content="String_we_ask_for">

(to be tested if GA executes the JS of the container and recognizes it)

Add "Match CSS Selector" trigger condition

Hi there,
how can I use the variable "DomElementVariable". Do we have to execute the command

$ ./console generate:tagmanager-preconfigured-variable
?
Thank you for helping out!

Add option to bundle Matomo tracking code (or always do it)

When the Matomo tag is included in a container, in all cases we are loading the Matomo tracking code async as soon as the tag manager container is being loaded.

To avoid having two requests in such cases (one for the tag manager container and one for the matomo tracking code), it would be great to directly embed the tracking code into the container. This will also simplify the logic of loading the matomo tracking code and increase performance plus especially reduce load on the server by having less requests.

Show pre-configured values in real time when selecting one

When selecting a pre-configured variable for example, or configuring a variable. It would be kind of epic if we could manage to at least show the user directly the value of what the pre-configured variable currently resolves to.

Eg the ISO Date variable would show directly in the UI when selecting a variable eg "2018-02-19T23:30:15.101Z". Same for Page host, Page path, ... just so people better get an understanding of the value.

Show container size and maybe show info when certain size reached

It may be useful to show the size of the container in KB. Might be also useful to show the approx size gzipped.

Could maybe also show an info that when container is eg > 200KB or so, that it may be worth checking if the container could be defined slightly different. We would also link to an FAQ why it is good to try keep container size low.

FYI: There are no limits in Matomo Tag Manager.

Create code editor with higlights of variables etc.

GTM has this. In the past when they didn't, one could use a Firefox or a Google Chrome extension in order to have it as a fix.
So basically it is just indicating with some colours, what is a script tag, what is a variable...

Implement versioning for tag, trigger, and variable templates

We already have versioning for a regular container / for end user. This issue is more about developers who develop tags, triggers, and variables.

At some point we will be needing versioning for the templates as it will be no longer possible to keep BC for example etc.

It won't be implemented just yet as it is not needed and should be fairly "easy" to be added later. Eg each template can define a version which is by default 1. When a template defines a new version, eg 2, then we load templateName.v2.web.js instead of templateName.v1.web.js or templateName.web.js.

We save the current version of the template in the container_tag, container_trigger, ... table and will load the template based on the last saved version.

Auto-increment or auto-filled the name of a new version

Hi,
When creating a new version in Matomo Tag Manager, it would be nice to have the version name field already filled in with a default value.
For example: 1 for version 1, 2 for version 2...
Users will still have the possibility to enter a custom name if they have the time to do it.
We could save heaps of time on the long run.
Thanks

favour privacy-friendly third-party-tags

While researching new tags, I noticed that a huge selection of third-party-tags in TagManager has one disadvantage: It makes it easy for Matomo-Users to infringe the website users privacy with a few clicks and without thinking about the implications by adding Facebook, Twitter and Google Analytics to the website.

To counteract, we could highlight tags that only depend on privacy-focused, open-source and/or self-hosted services. (Obviously Matomo, but also Sentry.io)

An alternative would be doing the opposite and adding F-Droid-like anti-feature warnings to all other, but I'm afraid that they will probably be the majority.

Add new tag: Facebook messenger

see eg https://www.simoahava.com/analytics/add-facebook-messenger-chat-google-tag-manager/

Add new trigger: Tab/Window active/visible

Could trigger an event when the window becomes inactive (blur) and also check the visibility API https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

We already have a variable for this AFAIK, but be also good to have a trigger.

Allow users to read values from form fields into a variable

It is already possible to read the value from a DOM element inner text or attribute. It is not yet possible to read the current value of a form element. This is because the value attribute only stores the initial value of a form element, but not the changed value.

We could add new "Form element" variable for example that reads the current .value instead of the value attribute. For checkboxes and multi select fields, when multiple fields are selected, it would turn it maybe into a comma separated list of values. When no value is given for checkboxes we use 1/0?

This allows users to use those values as part of tracking etc. Should be basically more or less a copy of the "DOM Element" variable. Maybe we would also allow to select an element by element attribute "name" besides CSS selector and element ID.

Any other thoughts/ideas?

Typo in TagManager.MetaContentVariableDescription English Label

Hi,
I think there is a typo in the English labels, TagManager.MetaContentVariableDescription reads "Ready a value from a "meta" HTML element." I think "Reads a value from a "meta" HTML element." was intended.

Interesting Tag Manager use cases: create & publish small guides

99 Things You Can Do with Google Tag Manager

This page contains lots of great examples of tag manager use cases, it would be so valuable to create guides and FAQs for some of the best ones.

Empty strings on Trigger Setup

Please look at the Screenshot. Actually it is not possible to check for an "empty" string.
The first 5 arguments are working. In the last part I would check for an empty string, but the Tag Manager seems to ignore this field when its not filled.

Add new trigger: Print

Be awesome to have a trigger when someone prints something. Would only work on desktop.

Make Matomo tag parameters descriptions translatable

tag-manager/Template/Tag/CustomHtmlTag.php

Line 39 in cb98268

$field->description = 'This tag is ideal when you need to add for example custom styles or custom JavaScript or when you are looking for a specific tag which is not yet supported. With this tag you can append any HTML to the bottom of your page, add styles, or execute JavaScript. Note: You can replace content within the HTML with variables by putting a variable name in curly brackets like this {{PageUrl}}.';

At the moment the descriptions of tag parameters are not translated. Ideally there should be a default translation key similar to the tag description.

New variable: Lookup table

GTM provides a lookup table which might be useful to some users.

console generate:tagmanager-tag (Not working)

Reference: https://developer.matomo.org/guides/tagmanager/custom-tag

Execute: ./console generate:tagmanager-tag

Ends up in

You have to enter the name of an existing plugin

Add options to choose where custom HTML is loaded

Like:

• Load HTML in the "BEGINNING" of the "< body />"
• Load HTML in the "END" of the "< body />"
• Load HTML in the "BEGINNING" of the "< head />"
• Load HTML in the "END" of the "< head />"

GA Implementation (Conversion/Analytics) should always use anonymize-IP settings

Tel-Link with DOM-Content

I tried to create a Matomo Analytics Tag for a phone link. But the trigger for "All Links Click" doesn't react. I'm not sure if this is because of the non-standard href-value or the nested DOM-structure inside the link. In the link-tag are two spans (an icon and the display text). Is this a bug or does anyone know a way to make this work?

Add possibility to sync container files with CDN

In the beginning we would probably only support one CDN, for example Amazon CloudFront. But we would make it pluggable so any adapters can be added. @mattab as this could be useful for matomo.js tracker file as well, should be maybe instead add this feature to core and tag-manager would simply use the core feature?

Make it even easier to define templates for tags, triggers, and variables (only based on JS)

Currently a template is defined by having eg a Template/Tag/MatomoAnalytics.php and Template/Tag/MatomoAnalytics.web.js file. We could make this potentially easier although it also has some drawbacks.

We could make it as easy as in the simplest case let developers only define a file eg
Template/Tag/MatomoAnalytics.web.js where the ID would be extracted from the file name as MatomoAnalytics and the name be Matomo Analytics. It would be also possible to define a translation with the translation key PluginName_MatomoAnalytics. Because it ends with .web.js we would know it is for the web context and it would be placed in the Others category.

However, it is recommended to define a description, possibly help, parameters, ... and therefore we should require developers to also define like a JSON file Template/Tag/MatomoAnalytics.json. The format be like: {id: "MatomoAnalytics", name: "PluginName_MatomoAnalytics", description: "foo bar", help: "foo bar", context: ["web"], order: 999, category: "Page View", logo: "...", parameters: [{key: "idSite", "name": "Site ID", type: "string", uiControl: "text", validators: ["NotEmpty", "UrlLike"]....}]}

However there are obviously a few downsides. For example there is no auto completion (in PHP there are constants), there is a lot more documentation needed and in JSON it is much easier to introduce typos etc because of this. Also we would likely need to document both ways the PHP and JSON way and having two ways to do the same thing is not always ideal. As there might be cases where you still need PHP, it would be the preferred way to use PHP from the beginning.

Provide list of available variables when '{{' is typed

In GTM, when you start writing your own custom HTML and that you use {{ a drop-down list is appearing fulfilled with all variables already available.

Creating Matomo Analytics Tag fails

When I try to create a Tag of the type Matomo Analytics, I am trying to use the dropdown to select my existing Matomo configuration(Assign a Matomo configuration), but the list is empty. (I have 2 sites configured, so there should be a result.) I even restarted my servers to try to remove the possibility of a caching issue.

Is it possible to implement and manage cookies and privacy status with the tag manager?

Thanks for the tag manager it looks like a great addition, but I am not fully sure what I will use it for as yet, but I am sure that will become clear with time.

I wondered -> Is it possible to implement and manage cookies and privacy status with the tag manager?

Thanks in advance

How to handle tags that depend on the integration of an SDK

While researching ideas for tags, I came across many tags that need the inclusion of an SDK before events or other things can be done (most famously facebook)

Now if the SDK is only needed for one tag (e.g. the facebook customer chat plugin) one could simply add the SDK to the tag, but what if there are also other facebook-related tags?

How can embedding the SDK multiple times (and setting the options every time) be avoided?

Update button disabled if you remove a condition from a trigger

The update button will be still disabled if you remove a condition from a trigger. The update button will only be active if you change at least one character in the conditions or in the name.

Document best practice for loading script in tag

I am planning to add a few tags in the next days and came across a question:

The docs for sentry.io suggest adding it like this:

<script src="https://cdn.ravenjs.com/3.26.2/raven.min.js" crossorigin="anonymous"></script>
<script>Raven.config('https://<key>@sentry.io/<project>').install();</script>

I guess this is quite common for tags, so how do you think should the JS file be loaded? Like this?

var script = document.createElement('script');
script.onload = function () {
    //do stuff with the script
};
script.src = something;

document.head.appendChild(script);

_{Thinking about it a sentry.io tag may not be that useful as for some features it needs to be loaded between the library code and application code.}