# Web Tracking Using the TD Javascript SDK Tutorial

The TD JavaScript SDK (TD JS SDK) includes a site tag that allows you to track website behavior through Treasure Data. The advantage for you using TD JS SDK is that the information it collects powers many of the tools that set Treasure Data apart as a CDP including audience scoring, identity resolution, and others.

Each time Treasure Data JS SDK runs it creates a new record in a specified table and adds all of the attribute and behavior data that it is instructed to collect. This data can include values specified by you and Treasure Data generated Client and Global IDs that can be used for Identity Resolution and tracking of behaviors by an individual.

This tutorial takes you through the process of using TD JavaScript SDK to track website behavior.

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

* [Prerequisites](#prerequisites)
* [Set Up Test Website or Use Your Existing Website](#set-up-test-website-or-use-your-existing-website)
* [Setting up Test Website](#setting-up-test-website)
* [Use Your Existing Website](#use-your-existing-website)
* [Create New Database and Table](#create-new-database-and-table)
* [Get Treasure Data Write-only API Key](#get-treasure-data-write-only-api-key)
* [Implement Direct Tag on Website](#implement-direct-tag-on-website)
* [Add the TD JavaScript SDK](#add-the-td-javascript-sdk)
* [Add the API Write-only Key and Treasure Data Database Information](#add-the-api-write-only-key-and-treasure-data-database-information)
* [Testing the Direct Tag](#testing-the-direct-tag)
* [Check Results on TD Console](#check-results-on-td-console)
* [Adding td_ids](#adding-td_ids)


## Prerequisites

* Review [Getting Started with Website Tracking](/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/getting-started-with-website-tracking)


### Set Up Test Website or Use Your Existing Website

You can set up a test website using [squarespace.com](http://squarespace.com) or you can use an existing website.

#### Setting up Test Website

1. Go to [squarespace.com](http://squarespace.com/) and select **Get Started** in the upper right corner.
2. Skip to templates, and select any old template you would like.
3. Use your Google login to create an account. You can use the 14-day trial to run through this tutorial.
4. In the left navigation follow the path **Settings** > **Advanced** > **Code Inject**.


![](/assets/image-20200622-224937.aaf460f15b8b29f66e775f4323d5ae25f7fe0ee2a00a60a908a9073b5b3f65a9.ad50cbca.png)

#### Use Your Existing Website

You can also test the TD JS SDK out by using your existing website and adding the call into the header. Additional details for the TD JS SDK can be specified in the header or the body of the HTML file using the HTML tag `<script>` that wraps around JavaScript code.

### Create New Database and Table

1. Open **TD Console**.
2. Navigate to **Data Workbench** > **Databases**.
3. Select **New Database**. Name it `<yourname>_website_tracking`.
4. Select **Create**.
5. In the new database you just created, select **New Table**. Name it `pageviews_<yourname>`.
6. Select **Create**.


### Get Treasure Data Write-only API Key

1. Navigate to **My Settings** > **API Keys.**
2. If necessary, validate access.
3. Your API Keys for this account are on this page. Keep this page available for implementation.


![](/assets/image-20201012-194950.bdec9343e9cbea77dbe32ff9a60b34003967e7322e468d343a9cb1b92a4be98b.ad50cbca.png)

# Implement Direct Tag on Website

### Add the TD JavaScript SDK

The [Treasure DataJavaScript SDK is available on GitHub](https://github.com/treasure-data/td-js-sdk). The README contains a description of JavaScript SDK API.

1. Go back to your website on [squarespace.com](http://squarespace.com) and navigate to **Settings** > **Advanced** > **Code Injection** OR navigate to your website settings for inserting code into the page header.
2. Add the following TD JS SDK code to the header (`<head>`) of each of the pages that you want to track.



```html
<!-- 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);
</script>
```

### Add the API Write-only Key and Treasure Data Database Information

1. Add the following code snippet to the header after the TD JS SDK or in the body or footer to indicate to which Treasure Data database you want to send the page views data.
2. Replace the `<xxxx>` placeholders listed in the table to include your write-only API key, get a tracker object, and indicate the Treasure Data database where you want to have information from the sites saved to.



```html
    <script type="text/javascript">
      // 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_table>');
    </script>
```

| **Placeholders** | **Examples** |
|  --- | --- |
| <YOUR_WRITE_ONLY_APIKEY_IS_HERE> | xxxx/xxxxxxxxxxxxxxxxxxxxxLearn how to [get your API key](/products/my-settings/getting-your-api-keys). |
| <DATABASE_NAME> | jasonsmith_website_tracking |
| <pageviews_table> | pageviews_jasonsmith |


# Testing the Direct Tag

1. On the left panel of your SquareSpace to **Settings** > **Availability** and make the site visible with a password that will be easy for you to remember.


![](/assets/image2023-2-10_13-21-43.e45ce8dadba3e2366325cf6671cc29db0575cf944c6e6ddc65c95af509fd42b6.ad50cbca.png)
2. Copy the base URL of your website.

1. Open a new Incognito window in your Chrome browser and paste in the URL to go to the site.
2. The site prompts you for a password. Before entering the password, select the **More Options** menu in the upper right side.


![](/assets/image-20200915-221929.5f7b60087080c40743f68920fc408a168f6d26ffd85eb362159ad21230498d3d.ad50cbca.png)
5. Navigate to **More Tools** > [Developer Tools](https://developers.google.com/web/tools/chrome-devtools/).

![](/assets/image-20200915-221636.71e198f8feb839fae43d4aba980dfb6801400f5376ab1bd303a250b2115613ae.ad50cbca.png)

![](/assets/image-20200915-222341.04fbf90fc93b525b9bf2f871ee5f63b6a04941415e44572f1db6a1b88b249d5f.ad50cbca.png)

1. Select **Network**.
You can see everything that is happening in the communication between the website and your browser in real time.
2. Enter the password for the website.
You will see all of the image files and other elements loading in the console.
3. Search for ‘td’ as all our tags contain this.


![](/assets/image2022-9-7_18-57-48.848ecd68ec2c7db83045fb281dfd228069eec7418ea564a34c05f2a18ded1522.ad50cbca.png)

1. Navigate to other pages on the site to see if the tags are showing up there also.


### Check Results on TD Console

1. Navigate to **TD Console**.
2. Navigate to **Data Workbench** > **Databases.**


![](/assets/image-20200916-153622.f12b269b0cf9faa41b31303086ea90879969ddd1b6709297739372e6b5ecabd0.ad50cbca.png)

1. Search for and select the `<yourname>_website_tracking` database you created.
2. Select the `pageviews_<yourname>` table you created.
3. You can see the tracking results in the table.


![](/assets/image-20200916-154120.754e55644467cb4b60a7c252c82b464cd6891080c91d9ee50a20eb36046a62f8.ad50cbca.png)

# Adding td_ids

The next step is to enable tracking events by individual. To comply with data privacy regulations in various domains, and specifically GDPR, the TD JS SDK operates in **anonymous mode** , which means that it does not collect certain event metadata that is personally identifiable such as td_client_id and td_global_id.

td_client_id and td_global_id are needed if you want to track individual users and analyze their data within and across user sessions, associate the tracked behavior with a real-world individual, and more.

1. Go back to SquareSpace.
2. Navigate to **Settings** > **Advanced** > **Code Injection** or to your website inserting the HTML tag < script> that wraps around JavaScript code in the HTML file.
3. Insert the following command into the existing code as shown in this example.



```javascript
td.setSignedMode()
```

![](/assets/image-20201012-195148.01275316dbbe761878cc109874e69b99d4a6d83b724a1de6e3214d8b09f6d989.ad50cbca.png)

1. The placement before td.trackPageview is important so that the IDs are being set before the data is collected.


Using `'//'` at the beginning of a line in JS will allow you to add an annotation. This is important in labeling your JS code because you can then decipher it later.