JS SDK with Google Tag Manager

Treasure Data JavaScript SDK works well with Google Tag Manager.

Table of Contents

Prerequisites

  • Basic knowledge of JavaScript / HTML.
  • Basic knowledge of Treasure Data.
  • Basic knowledge of Treasure Data JavaScript SDK

Instruction

First, please create a new tag as Custom HTML Tag inside your container.



Then, please put these lines into Configure Tag section, with your write-only API key and database name. Following tag should be accosiated and fired by ‘All Pages’ trigger.

<!-- 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","set","trackEvent","trackPageview","trackClicks","ready"],a=0;a<s.length;a++){var c=s[a];e[t].prototype[c]=r(c)}var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/1.7.1/td.min.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("Treasure",this);
  // Configure an instance for your database
  var td = new Treasure({
    host: 'in.treasuredata.com',
    writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
    database: 'DATABASE_NAME'
  });
  // Enable cross-domain tracking
  td.set('$global', 'td_global_id', 'td_global_id');
  // track pageview information to 'pageviews' table
  td.trackPageview('pageviews');
</script>

How to track Click URL variable

When you have links to external sites on which you can not track pageview but would like to track which link user clicked, you can set Click Trigger and fire additional js tag which sends data to TD with {{Click URL}} variable when user clicked the link. {{Click URL}} has url information to the link. Set up procudure is as follows.

1. Enable {{Click URL}} Varibale



2. Define click trigger



3. Set tag for the click trigger



<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","set","trackEvent","trackPageview","trackClicks","ready"],a=0;a<s.length;a++){var c=s[a];e[t].prototype[c]=r(c)}var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/1.7.1/td.min.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("Treasure",this);

// Configure an instance for your database
var td = new Treasure({
host: 'in.treasuredata.com',
writeKey: 'YOUR_WRITE_ONLY_APIKEY_IS_HERE',
database: 'DATABASE_NAME'
});
// Enable cross-domain tracking
td.set('$global', 'td_global_id', 'td_global_id');

// Track pageview information to 'pageviews' table
var click_url = {{Click URL}};
td.set('pageviews', {click_url: click_url});
td.trackPageview('pageviews');
</script>

Then you will see additionl click_url column in the pageview table like this.



You may have two td tag registered for All Pages and click trigger.




Last modified: Feb 05 2017 09:49:56 UTC

If this article is incorrect or outdated, or omits critical information, please let us know. For all other issues, please see our support channels.