This script allows to track click events in Matomo by adding html attributes on elements to track.
Matomo must be already present in the page.
- Install
@dcode-evo/mtm-click-trackerpackage into the project- via GitHub package npm
repository
@dcode-evo:registry=https://npm.pkg.github.com(Working with the npm registry)
npm install @dcode-evo/mtm-click-tracker
- via local package file
npm install file://./dcode-evo-mtm-tracker-1.0.0.tgz
- via GitHub package npm
repository
- Add script
mtm-ct-auto.jsinto your html file<head> ... <script src="node_modules/@dcode-evo/mtm-click-tracker/dist/mtm-ct-auto.js"></script> </head>
- HTML/JS
npm run demo - Angular
npm run demo-ng
Add specific attributes on element you want to track
<a
data-mtm-click
data-mtm-category="my-click-category"
data-mtm-action="click-on-link"
data-mtm-name="link-with-tracking"
data-mtm-value="1"
href="#"
>Click me</a>or
<!-- order is important: "category, action, name, value" -->
<a
data-mtm-click="my-click-category, click-on-link, link-with-tracking, 1"
href="#"
>Click me</a>- Add script
mtm-click-tracker.js<head> ... <script src="node_modules/@dcode-evo/mtm-click-tracker/dist/mtm-click-tracker.js"></script> <!-- Init MtmClickTracker with debug enabled --> <script> // passing `true` will enable debug and log tracking data on every click on "tracked" elements into console. var tracker = new MatomoClickTracker(true); </script> </head>
You can destroy the click tracker event listener by calling destroy() method.
<script src="node_modules/@dcode-evo/mtm-click-tracker/dist/mtm-click-tracker.js">;</script>
<script>
var tracker = new MatomoClickTracker();
function kill() {
tracker.destroy();
}
</script>This script is a Vanilla JS (written in TypeScript) and can run beside any framework.