Skip to main content

JavaScript

Last updated 10/03/2026
tip

Before you integrate the SDK, read Pre-integration preparation.

The JavaScript SDK must run in a browser. IE 8 and earlier are not supported yet.

The JavaScript SDK is about 58 KB in size

Latest version: v2.6.1

Update time: 2026-07-31

Downloads: Source code Download

Note

This document applies to v2.0.0 and later. For earlier versions, see JS Integration Guide (V1) and SDK download (V1)

1. Integrate the SDK​

Supported environments:

Client frameworks: Vue2, Vue3, React, Angular

Desktop framework: Electron

1.1 Automatic integration​

npm install thinkingdata-browser --save

"dependencies": {
    "thinkingdata-browser": "2.6.1",
},

Next, initialize the SDK. For the configuration parameters, see Step 2.

import ta from "thinkingdata-browser";
var config = {
    appId: "APP_ID",
    serverUrl: "https://YOUR_SERVER_URL",
    autoTrack: {
     pageShow: true, //Enable the page show event (ta_page_show)
     pageHide: true, //Enable the page hide event (ta_page_hide)
     pageView: true, //Enable the single-page view event (ta_pageview)
     pageClick:true //Enable the page element click event (ta_page_click)
    }
};
ta.init(config);

1.2 Manual integration​

Step 1: Download the JavaScript SDK

The package provides scripts in two formats, and you can choose the one you need. Asynchronous loading, described below, uses the thinkingdata.min.js file; synchronous loading uses thinkingdata.umd.min.js.

Step 2: Load the JavaScript SDK

You can load the SDK either asynchronously or synchronously. The two methods make little difference in practice, so you can choose either.

Pass in the following configuration parameters when you initialize the SDK:

  • appId: The APP_ID of your project. Required. It is provided when you apply for the project. Enter it here
  • serverUrl: The URL for uploading data. Required

If you use the cloud service, enter the following URL: https://global-receiver-ta.thinkingdata.cn

If you use an on-premises deployment, enter the following URL: https://your-data-collection-address

For asynchronous loading, use thinkingdata.min.js. Put the following code in the <script> of your HTML and configure the parameters:

<!--Thinking Analytics SDK BEGIN-->
<script>
    !function (e) { if (!window.ThinkingDataAnalyticalTool) { var n = e.sdkUrl, t = e.name, r = window, a = document, i = "script", l = null, s = null; r.ThinkingDataAnalyticalTool = t; var o = ["track", "quick", "login", "identify", "logout", "trackLink", "userSet", "userSetOnce", "userAdd", "userDel", "setPageProperty", "setSuperProperties", "setDynamicSuperProperties", "clearSuperProperties", "timeEvent", "unsetSuperProperties", "initInstance", "trackFirstEvent", "trackUpdate", "trackOverwrite"]; r[t] = function (e) { return function () { if (this.name) (r[t]._q = r[t]._q || []).push([e, arguments, this.name]); else if ("initInstance" === e) { var n = arguments[0]; r[t][n] = { name: n }; for (var a = 0; a < o.length; a++)r[t][n][o[a]] = r[t].call(r[t][n], o[a]); (r[t]._q1 = r[t]._q1 || []).push([e, arguments]) } else (r[t]._q = r[t]._q || []).push([e, arguments]) } }; for (var u = 0; u < o.length; u++)r[t][o[u]] = r[t].call(null, o[u]); r[t].param = e, r[t].__SV = 1.1, l = a.createElement(i), s = a.getElementsByTagName(i)[0], l.async = 1, l.src = n, s.parentNode.insertBefore(l, s) } }(
    {
        appId:'APP_ID', //APPID assigned by the system
        name: 'ta', //Global variable name for calls. You can set it to any value and use this name in subsequent calls
        sdkUrl:'./thinkingdata.min.js', //URL of the tracking script
        serverUrl:'https://YOUR_SERVER_URL', //Data upload URL
        autoTrack: {
           pageShow: true, //Enable the page show event (ta_page_show)
           pageHide: true, //Enable the page hide event (ta_page_hide)
           pageView: true, //Enable the single-page view event (ta_pageview)
           pageClick:true //Enable the page element click event (ta_page_click)
        },
        loaded: function(ta) {
           // var currentId = ta.getDistinctId();
           // ta.identify(currentId);
           // ta.quick('autoTrack');
        }
    });
</script>
<!--Thinking Analytics SDK END-->

Parameters specific to asynchronous loading:

  • name: The global variable name for calls
  • sdkUrl: The URL of the SDK. Required
  • loaded: The initialization callback. Loading the SDK with the code snippet is asynchronous, so methods that return values may fail, and track calls triggered before the SDK finishes loading may behave abnormally. The loaded property in the parameters solves this: the callback in loaded is called after initialization completes and before data reporting starts. For example, if you set the user ID here, the data generated before the SDK finished loading is assigned this user ID.

2. Common features​

Before you use the common features, we recommend that you read the user identification rules. By default, the SDK uses a random number as the distinct ID and stores it locally. Before a user logs in, the distinct ID is used as the user's identifier. Note: The distinct ID changes when the local cache is cleared.

2.1 Set the account ID​

When a user logs in, you can call login to set the user's account ID. The AE platform uses the account ID as the identifier first. The account ID you set is saved, and calling login multiple times overwrites the previous account ID:

// The unique login identifier of the user, which corresponds to #account_id in the reported data. In this case, the value of #account_id is TA
ta.login("TA");

This method does not upload a login event

2.2 Set super properties​

Super properties are properties that every event carries. You can call setSuperProperties to set super properties. We recommend setting super properties before you send events. Some important properties, such as a user's membership level and source channel, need to be set in every event; in this case, you can set them as super properties.

var superProperties = {};
superProperties["channel"] = "ta";//String
superProperties["age"] = 1;//Number
superProperties["isSuccess"] = true;//Boolean
superProperties["birthday"] = new Date();//Time
superProperties["object"] = {key:"value"};//Object
superProperties["object_arr"] = [{key:"value"}];//Object group
superProperties["arr"] = ["value"];//Array
ta.setSuperProperties(superProperties);//Set super properties

Super properties are saved in the cache, so you don't need to call this every time the web page is opened. If you call setSuperProperties to upload a super property that was set before, the new value overwrites the previous one.

  • Key is the name of the property and is of the string type. It must start with a letter, can contain only digits, letters, and underscores "_", and can be up to 50 characters long. Keys are not case-sensitive; AE converts all letters to lowercase
  • Value is the value of the property. Supported types are string, number, Boolean, time, object, object group, and array

Event properties and user properties have the same requirements as super properties

2.3 Send events​

You can call track directly to upload custom events. We recommend that you set the event properties and the conditions for sending events based on the tracking plan you prepared earlier. The following example uses a user purchasing a product:

ta.track("product_buy",{product_name:"Product name"});

The event name is of the string type. It must start with a letter, can contain digits, letters, and underscores "_", and can be up to 50 characters long.

The Array type is supported in v1.3.0 and later, and requires AE platform 2.5 or later.

The Object type requires AE platform 3.5 or later

2.4 Set user properties​

For general user properties, you can call userSet to set them. Properties uploaded through this API overwrite the existing property values. If the user property did not exist before, it is created with the same type as the value passed in. The following example sets the user name:

// username is now TA
ta.userSet({ username: "TA" });
//username is now AE
ta.userSet({ username: "TE" });

3. Best practices​

The following sample code includes all of the operations above. We recommend using them in the following order:

import ta from "thinkingdata-browser";
var config = {
    appId: "APP_ID",
    serverUrl: "https://YOUR_SERVER_URL/sync_js",
    autoTrack: {
     pageShow: true, //Enable the page show event (ta_page_show)
     pageHide: true, //Enable the page hide event (ta_page_hide)
     pageView: true, //Enable the single-page view event (ta_pageview)
     pageClick:true //Enable the page element click event (ta_page_click)
    }
};
//Initialize the SDK
ta.init(config);

//If the user has logged in, you can set the user's account ID as the unique identifier
ta.login("TA");

//Set super properties
var superProperties = {};
superProperties["channel"] = "ta";//String
superProperties["age"] = 1;//Number
superProperties["isSuccess"] = true;//Boolean
superProperties["birthday"] = new Date();//Time
superProperties["object"] = {key:"value"};//Object
superProperties["object_arr"] = [{key:"value"}];//Object group
superProperties["arr"] = ["value"];//Array
ta.setSuperProperties(superProperties);//Set super properties

//Send an event
ta.track("product_buy", //Event name
 //Event properties
 {product_name:"Product name"});
 
//Set user properties
ta.userSet({username: "TA" });
Was this page helpful?
On this page