Sivagurunathan N. Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mixpanel Link Tracking Example</title>
<script type="text/javascript">
(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(a,j,d){function k(c,l){var m=l.split(".");2==m.length&&(c=c[m[0]],l=m[1]);c[l]=function(){c.push([l].concat(Array.prototype.slice.call(arguments,0)))}}var n=f.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.mixpanel.com/track.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e);for(g="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove people.unset".split(" "),i=0;i<g.length;i++)h=g[i],k(b,h);b._i.push([a,j,d])};b.__SV=1.2;}})(document,window.mixpanel||[]);
// --- Mixpanel Initialization and Tracking ---
mixpanel.init('YOUR_MIXPANEL_PROJECT_TOKEN', { // <-- REPLACE with your actual Mixpanel token
debug: true, // Set to false in production to stop console logs
track_pageview: 'fullUrl', // Automatically track page views with full URL
autocapture: {
pageview: false, // track_pageview handles this
click: false, // **IMPORTANT: Disable default click autocapture** to avoid duplicates with track_links
input: true,
scroll: true,
submit: true
},
// Add other global configuration options here if needed
});
// Register global properties that should be sent with ALL events
// Example:
// mixpanel.register({
// 'User Role': 'Guest',
// 'Source Campaign': 'Summer Sale 2025'
// });
// --- Track specific link clicks using mixpanel.track_links() ---
// This function efficiently tracks clicks on all <a> tags.
// It prevents default navigation, sends the event, and then navigates.
mixpanel.track_links('a', 'Anchor Clicked', function(element) {
// This function defines the properties for the 'Anchor Clicked' event.
// 'element' is the actual DOM element (the <a> tag) that was clicked.
const href = element.href;
// Filter out hash links or javascript: links if you don't want to track them
if (!href || href.startsWith('#') || href.startsWith('javascript:')) {
return false; // Returning false tells track_links NOT to track this specific link
}
return {
'Anchor Text': element.textContent.trim(), // Captures the visible text of the link
'Href': href, // Captures the full URL
'Element ID': element.id || 'N/A', // Captures the ID, if present
'Element Class': element.className || 'N/A' // Captures the class, if present
};
});
</script>
</head>
<body>
<h1>Website Content</h1>
<p>Click these links to see Mixpanel tracking in action:</p>
<a href="https://www.example.com/products" id="products-link" class="nav-item">View Products</a><br>
<a href="/about-us" class="footer-link">About Our Company</a><br>
<a href="https://mixpanel.com/docs/" target="_blank">Mixpanel Documentation</a><br>
<a href="#top-of-page">Jump to Top</a> (This link will **not** be tracked due to the filter)<br>
<a href="javascript:void(0);">Do Something Else</a> (This link will **not** be tracked)<br>
<p>Other content on your page...</p>
</body>
</html>
