This article describes how to track click events with JavaScript SDK.
Basic knowledge of JavaScript and HTML.
Basic knowledge of Treasure Data.
Basic knowledge of Treasure Data JavaScript SDK.
Treasure Data recommends you verify the implementation of any new features or functionality at your site using the Treasure Data JavaScript SDK version 3 before you start using it in production. It manages cookies differently. Be aware when referring to most of these articles that you need to define the suggested event collectors and Treasure Data JavaScript SDK version 3 calls in your solutions.For example, change //cdn.treasuredata.com/sdk/2.5/td.min.js to //cdn.treasuredata.com/sdk/3.0.0/td.min.js.
When you have links to external sites on which you can not track pageview and would like to track which link the user clicked,
Track click actions by calling trackEvent function in link-tag using onClick.
The following example sends the default tracking data and link_url data to pageviews table when the user clicks the link.
Optionally, review Google Tag Manager.
<html>
<head>
<!-- Treasure Data -->
<script type="text/javascript">
!function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],n=0;n<s.length;n++){var c=s[n];e[t].prototype[c]=r(c)}var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.5/td.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)}}("Treasure",this);
// Configure an instance for your database
var td = new Treasure({
protocol: 'https',
host: 'in.treasuredata.com',
writeKey: 'xxxxx', // PLEASE MODIFY HERE
database: 'xxxxx' // PLEASE MODIFY HERE
});
// Enable cross-domain tracking
td.set('$global', 'td_global_id', 'td_global_id');
// track pageview information to 'pageviews' table
td.trackPageview('pageviews');
function tracklink(link_url) {
td.trackEvent('pageviews', {link_url: link_url});
}
</script>
</head>
<body>
Hello Treasure Data!
<A href="hellotd_link1.html" onClick="tracklink('hello_link1.html')">link1</A>
<A href="hellotd_link2.html" onClick="tracklink('hello_link2.html')">link2</A>
<A href="hellotd_link3.html" onClick="tracklink('hello_link3.html')">link3</A>
</body>
</html>