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.
0 Comments
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.
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 :
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? 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.
Is this thing working? Is this thing on? 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. Scenario: You implemented Matomo Tag Manager but MTM is not tracking any pageviews for your site. Using MTM is a good move. Compared to Matomo's javascript tracker, Matomo Tag Manager is more maintainable, versionable, and can inject JS into your site without you going into the server. (Caveat, in case you didn't see the word inject just now: tag managers are a security risk. Don't give access to someone casually. An intern should probably not have User Permission to your MTM.) So, all you want to do is start tracking your site, same as you used to with the javascript tracker. Let's go:
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 :
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. |
AuthorEvan Genest Archives
December 2023
Categories |