Introduction to Matomo Tracker
Matomo Tracker is an open-source analytics solution that helps you understand your website visitors’ behavior. With a comprehensive set of APIs, Matomo Tracker offers numerous functionalities for effective tracking and analysis. This blog post introduces Matomo Tracker, explains its diverse APIs with code snippets, and provides an example application to get you started.
Getting Started with Matomo Tracker
First, you need to include the Matomo Tracker JavaScript file in your web pages:
<script type="text/javascript">
var _paq = window._paq || [];
(function() {
var u="https://your-matomo-website.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
Tracking Page Views
To track page views, you can use the following code:
<script type="text/javascript">
_paq.push(['trackPageView']);
</script>
Tracking Events
Track specific events such as button clicks:
<script type="text/javascript">
_paq.push(['trackEvent', 'Videos', 'play', 'Gone With the Wind']);
</script>
Tracking Custom Dimensions
Custom dimensions allow you to add additional data to your tracked events:
<script type="text/javascript">
_paq.push(['setCustomDimension', customDimensionId = 1, customDimensionValue = 'Member']);
</script>
Tracking Goals
Define goals within your Matomo instance and track conversions:
<script type="text/javascript">
_paq.push(['trackGoal', goalId = 1]);
</script>
Tracking Ecommerce
Track ecommerce interactions on your site:
<script type="text/javascript">
_paq.push(['addEcommerceItem',
sku = 'SKU12345',
name = 'Product Name',
category = 'Product Category',
price = 100.00,
quantity = 1
]);
_paq.push(['trackEcommerceOrder',
orderId = 'Order123',
grandTotal = 100.00
]);
</script>
Application Example
Here’s an example of a simple web application using Matomo Tracker APIs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Matomo Tracker Example</title>
<script type="text/javascript">
var _paq = window._paq || [];
(function() {
var u="https://your-matomo-website.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="trackButtonClick()">Play Video</button>
<script type="text/javascript">
_paq.push(['trackPageView']);
function trackButtonClick() {
_paq.push(['trackEvent', 'Videos', 'play', 'Gone With the Wind']);
}
</script>
</body>
</html>
Conclusion
Matomo Tracker is a powerful tool for tracking and analyzing user interactions on your website. The APIs discussed here offer extensive options for customizing your analytics to suit your business needs. Start implementing Matomo Tracker today to gain deeper insights into your web traffic.
Happy tracking!
Hash: be1ddff5af987fff94b3bc797223f06a7558dbf19982cf691a812ff6e54b9c2b
