If you do not feel comfortable adding javascript, a line at a time, to a web page, read no farther.  

But if you enjoy adding javascript, a line at a time, to a web page, you will be happy to know there are two ways to do that with Matomo. 

The manual JS way (like a paleolithic sort of HTML developer) is to go directly into your header/footer and run a single line. This is pedagogically useful. As Wes Bos would say, "Gotta learn Vanilla JS before you learn shortcuts".

If you are timid about how Javascript works in a web page, try this right now. Go to a random web page (any web page), and open devtools >> console. In the console of your browser, you can manually add any variable, on the fly. All of the following should work. Note, this is just for fun; try the following.

var _paq = { name: "Evan" };  // Make an object, with one parameter, a string
_paq;                              // Look at what is in the object called _paq
_paq.aaa=42;                 // Add a property to our object, aaa
_paq.bbbb=[1,2,3,4,5];  // Add a property to our object, bbbb
_paq.bbbb.push(42);     // Arrays have a built in method, push. We push an integer onto the object
_paq.bbbb;                    // We inspect the property bbbb on the object _paq

Again, this is all just pedagogical for the moment.

Now go to a page which has Matomo running. May I suggest https://littlefurnace.com?

Open devtools >> console. In the console of your browser, try the following.
_paq;  // Wow, the _paq object is already defined. It holds many Matomo things.
_paq.push(['trackContentImpression', 'News Topic', 'events', 'Current page URL', {dimension5: 'event'}]);

That second line is how Matomo allows us to DO things. The _paq object is listening for pushes; it is waiting for you to push the name of a method it knows. In this case we pushed trackContentImpression. This was sort of new to me the first time I saw it: the way to make Matomo do something is to give it the name of a method it knows. And at the same time, you should pass in any required parameters.

You can find a list of Matomo methods here: https://developer.matomo.org/api-reference/tracking-javascript

Once you understand the above, you may be like a kid in a candy store.  Enjoy!

But there's a problem now with maintainability. These Javascript things you are writing are sort of a mess for your team to read and monitor, going forward in time (visualize a time in the future, when you have left your team: how will they read your code?).

Tag Manager
So to avoid being a paleolithic programmer, take advantage of a tag manager. Tealium and Google Tag Manager are nice. Matomo Tag Manager is almost as nice and it maintains the continuity of your toolchain as staying private, free, et cetera. 

In MTM, you can do all of the methods we showed above.  To implement JS in tag manager you need to go to
(Optional) Matomo Tag Manager >> Trigger >> New trigger. Then make a trigger.
Matomo Tag Manager >> Tag >> New Tag. Then make "custom HTML" for your tag.

I am out of time in writing this guide but your next steps can be derived from how we made a tag here.

I will put asterisks next to a couple special instructions for the case where a user may already have deployed an existing (but failed) configuration.

1. Make a new container. MTM >> Container >> make a new container, save [*If you already have a container, do this anyway. You can always remove an unneeded container. Multiple Matomo containers run fine and won’t interfere. Also, Matomo can run alongside other javascript, such as alongside Google Tag Manager, just in case you want to be kind to your visitors with Matomo and then unkind with GTM].
   
2. Get the script at Dashboard >> Tag Manager >> (container name) >> Install code. Take that javascript, including the (script) and (/script), and put it into your webpages. [* Do you need this if you already put in one MTM script into your HTML? Yes! You need to add this script each time you make a container. Please note that the easiest number of containers to maintain in the long run is one container.] It has to be on every page you are monitoring. If you have a site header, put it there, since the header is everywhere on your site.
   
3. MTM >> Variable >> New variable (the type of variable should be “Matomo configuration”)

4. The Matomo interface will show you a list of values. You can accept the default values or check/uncheck. I like to enable heartbeat tracker for example.
5. New Tag >> Analytics >> Matomo Analytics

5. For your tag fields (see below), set these :

1. leave as is
2. leave as is
3. doesn’t matter, name it something useful to remember
4. Choose “Matomo Configuration”
5. Leave as Page View if you are removing the default tracking code (you will need something to track page views)
6. Leave blank
   

6. Easy to forget the last step: PUBLISH!


Remove the default Javascript tracker from your website. If you don’t, it will cause double the number of pageviews (redundant pageviews). If you don’t know, the default JS tracker is the 8 or so lines of code that you might have added to your HTML on the first day you used Matomo.
Now look at your HTML. Is it how you want it?

Here is the script which connects Matomo Tag Manager.

image797×325 49.5 KB

You don’t need both! You can have both if you are careful that one is not redundantly tracking what the other is. The main thing as a beginner is don’t track pageviews in both. As a beginner, easiest solution for ensuring that is to remove one of them. Also that makes maintenance easier in the future, a year from now when you, or someone on your team is wondering what to troubleshoot or configure.

1. How to use devtools to confirm some MTM containers are attached to your site.

Check to see that deployment is working for your container (or containers).

 In screenshot above notice that I have three containers in my dashboard. Let's check the live site for containers:

1 and 2 show the HTML of the page requesting to load the container. We conclude there are only two chunks of script in our HTML calling for a MTM container to load. 

Let's look in the HTML. If we search the source code for the website we will indeed see two containers have been requested by the page (not three).

A note about having multiple containers in Matomo Tag Manager
The easiest case is to have one container on your site.

But MTM is only okay at organizing your tags. So you may have been motivated to create two or more tag manager containers, treating them as folders.  CAVEAT: Be organized.  Down the road, someone (maybe you!) will not know how these were set up and will go around in circles, not realizing there are multiple containers of your tags.

As we saw, above, only two of the three containers from the Matomo dashboard were even active in our site.

4.  (you can accept the default values or check/uncheck. I like to enable heartbeat tracker for example)
5. New Tag >> Analytics >> Matomo Analytics

4. Set these :

1. leave as is
2. leave as is
3. doesn't matter, name it something useful to remember
4. Choose "Matomo Configuration"
5. Leave as Page View if you are removing the default tracking code (you will need something to track page views)
6. Leave blank
7. Easy to forget the last step:  PUBLISH!
8. Remove the Javascript tracker from your website. If you don't, it will cause double the number of pageviews (redundant pageviews)

Okay, now check your HTML. Is it how you want it?

Here is the normal Javascript Tracker that most people have on their page when they start using Matomo.

Here is the script which connects Matomo Tag Manager.  

You don't need both! You can have both if you are careful that one is not redundantly tracking what the other is.  The main thing as a beginner is don't track pageviews in both. As a beginner, easiest solution for ensuring that is to remove one of them.