This article describes how to track click events with JavaScript SDK.

Prerequisites

  • Basic knowledge of JavaScript and HTML.

  • Basic knowledge of Treasure Data.

  • Basic knowledge of Treasure Data JavaScript SDK.


Treasure Data recommends that you implement any new features or functionality at your site using the Treasure Data JavaScript SDK version 3 Beta. 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-beta/td.min.js.

Tracking Clicks on Links

When you have links to external sites on which you can not track pageview and would like to track which link the user clicked,

  1. Track click actions by calling trackEvent function in link-tag using onClick.

  2. The following example sends the default tracking data and link_url data to pageviews table when the user clicks the link.

  3. 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>
  • No labels