The latest release of System - Google Tag Manager brings custom click events to the plugin. What does that do? Let me explain.
Custom click events transform website analytics by letting site owners track specific user interactions—like clicks on buttons, links, or forms—with precision and context, revealing not just that something happened, but who clicked what when and why it matters. Unlike basic analytics that count page views or sessions, custom events can capture actions tied to business goals, such as product purchases, sign-ups, or content engagement, and enrich them with data like item IDs or user choices pulled from attributes or functions. This granularity helps marketers optimize campaigns, developers troubleshoot usability, and site owners measure success, all while staying privacy-compliant when paired with consent tools. It’s a low-effort, high-impact way to turn raw data into actionable insights, making your Joomla site a smarter tool for growth.
For the purposes of this example, I'm going to show you exactly what I did to track download events in my Extension Repository. Every download goes to the repository, and on each download page there are 3 links a user could click to download something. Analytics already tracks these click events - but they're designated as "downloads", which is what I want. So, we make a few configurations in the plugin - on the Events tab.
Settings
The plugin allows multiple click events, so you can track as much as you want.
Event Name
This is the event name sent to Google - for identification purposes only. Keep it simple.
Selector
In my case, every download link in the repo has a boolean "download" attribute, so the selector a[download] is enough to find all of these links. Your tracked items will definitely have a different selector, so you're going to need to know how query selectors work, or you'll need to learn.
Data
The data value can be either a list of element attributes to collect, or a window scoped function. If the links contained data attributes that held the extension's name - I would have used those. However, the links from ARS don't have that data attached, so I must get it elsewhere. Fortunately, it exists on the page and I know how to get it, so I created a javascript function and inserted it into the document head using my System - Head Tag plugin. However you get the function onto the page, it must return a javascript object.
My particular function looks for a specific h3 tag and strips off the version number before returning an object that looks like this: {"name":"Captcha - HashCash"}
One question that you might have is - "How do I put a function into the window scope?" and that's pretty easy. Just declare it as a var in your script, and it will be in the window scope. This is the script that grabs the download name:
var downloadName = function(el){
let name = document.querySelector('h3.text-muted span').innerText.split(' ');
name.pop();
return {'name':name.join(' ')};
}How Will You Use It?
The sky is the limit, really. You could track users opening info modals, track tab switches...basically anything that can be clicked.
If you need other events, send me a message and explain what you're trying to do. If it makes sense to add another event type to track - I'll totally do it. I even built the plugin to make it easy for me to modify in this way. Let me know.
