JavaScript

最終更新 2026/10/03

ヒント

接続する前に、まず接続前の準備をお読みください。

JavaScript SDKの実行環境はブラウザである必要があります。IE 8以前のバージョンには現在対応していません。

JavaScript SDKのサイズは約58 KBです

最新バージョン: v2.6.1

更新日: 2026-07-31

リソースのダウンロード: ソースコードダウンロード

注意

このドキュメントはv2.0.0以降のバージョンに適用されます。以前のバージョンについては、JS接続ガイド（V1）、SDKダウンロード（V1）を参照してください

1. SDKの統合

SDKの対応範囲：

クライアントフレームワーク：Vue2、Vue3、React、Angular

デスクトップフレームワーク：Electron

1.1 自動統合

npm install thinkingdata-browser --save

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

次に、SDKを初期化します。具体的な設定パラメータについては、ステップ2を参照してください。

import ta from "thinkingdata-browser";
var config = {
    appId: "APP_ID",
    serverUrl: "https://YOUR_SERVER_URL",
    autoTrack: {
     pageShow: true, //ページ表示イベントを有効にする。イベント名はta_page_show
     pageHide: true, //ページ非表示イベントを有効にする。イベント名はta_page_hide
     pageView: true, //シングルページ閲覧イベントを有効にする。イベント名はta_pageview
     pageClick:true //ページ要素クリックイベントを有効にする。イベント名はta_page_click
    }
};
ta.init(config);

1.2 手動統合

ステップ1：JavaScript SDKをダウンロードします

圧縮ファイルには2種類の規格のスクリプトが含まれているので、必要に応じてスクリプトを選択できます。以下で説明する非同期読み込みではthinkingdata.min.jsファイルを、同期読み込みではthinkingdata.umd.min.jsを使用する必要があります。

ステップ2：JavaScript SDKの読み込み

SDKは、非同期読み込みと同期読み込みのどちらの方法でも使用できます。実際の使用では2つの方法に大きな違いはないため、どちらを選んでもかまいません。

SDKを初期化する際には、いくつかの設定パラメータを渡す必要があります:

appId: プロジェクトのAPP_IDです。設定が必要です。プロジェクトの申請時に発行されるので、ここに入力してください
serverUrl: データのアップロード先URLです。設定が必要です

クラウドサービスを利用している場合は、次のURLを入力してください: https://global-receiver-ta.thinkingdata.cn

プライベートデプロイ版を利用している場合は、次のURLを入力してください: https://データ収集アドレス

非同期読み込み
同期読み込み

非同期読み込みの場合は、thinkingdata.min.jsを使用し、以下のコードをhtmlの<script>内に配置して、対応するパラメータを設定してください：

<!--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
        name: 'ta', //グローバルな呼び出し用の変数名。任意に設定でき、以降の呼び出しではこの名前を使用します
        sdkUrl:'./thinkingdata.min.js', //計測スクリプトのURL
        serverUrl:'https://YOUR_SERVER_URL', //データのアップロード先URL
        autoTrack: {
           pageShow: true, //ページ表示イベントを有効にする。イベント名はta_page_show
           pageHide: true, //ページ非表示イベントを有効にする。イベント名はta_page_hide
           pageView: true, //シングルページ閲覧イベントを有効にする。イベント名はta_pageview
           pageClick:true //ページ要素クリックイベントを有効にする。イベント名はta_page_click
        },
        loaded: function(ta) {
           // var currentId = ta.getDistinctId();
           // ta.identify(currentId);
           // ta.quick('autoTrack');
        }
    });
</script>
<!--Thinking Analytics SDK END-->

非同期読み込み特有のパラメータの説明:

nameはグローバルな呼び出し用の変数名です
sdkUrlはSDKのURLです。設定が必要です
loadedは初期化のコールバック関数です。コードスニペットによる読み込みは非同期読み込みのため、戻り値のあるメソッドの呼び出しが失敗したり、SDKの読み込みが完了する前にトリガーされたtrackで異常が発生したりする可能性があります。そのため、パラメータにloadedプロパティを用意しています。loaded内のコールバック関数は、初期化の完了後、データの送信を開始する前に呼び出されます。例えば、ここでユーザーIDを設定すると、SDKの読み込み前に発生したデータにもそのユーザーIDが設定されます。

同期読み込みの場合は、thinkingdata.umd.min.jsを使用し、以下のコードを初期化コードに配置して、対応するパラメータを設定してください：

<!--Thinking Analytics SDK BEGIN-->
<script src="./thinkingdata.umd.min.js"></script>
<script>
// SDKの設定オブジェクトを作成
var config = {
    appId: 'APP_ID',
    serverUrl: 'https://YOUR_SERVER_URL',
    autoTrack: {
     pageShow: true, //ページ表示イベントを有効にする。イベント名はta_page_show
     pageHide: true, //ページ非表示イベントを有効にする。イベント名はta_page_hide
     pageView: true, //シングルページ閲覧イベントを有効にする。イベント名はta_pageview
     pageClick:true //ページ要素クリックイベントを有効にする。イベント名はta_page_click
    }
};
// SDKインスタンスをグローバル変数ta、または指定した他の変数に代入
window.ta = thinkingdata;
// 設定オブジェクトでSDKを初期化
ta.init(config);
</script>
<!--Thinking Analytics SDK END-->

2. よく使う機能

よく使う機能を使用する前に、まずユーザー識別ルールを確認することをお勧めします。SDKはデフォルトで乱数をゲストIDとして使用し、ゲストIDをローカルに永続的に保存します。ユーザーがログインするまでは、ゲストIDが識別IDとして使われます。注意:ゲストIDはローカルキャッシュを削除すると変わります。

2.1 アカウントIDの設定

ユーザーがログインした際に、loginを呼び出してユーザーのアカウントIDを設定できます。AEプラットフォームではアカウントIDが優先的に識別子として使われます。設定したアカウントIDは保存され、loginを複数回呼び出すと以前のアカウントIDが上書きされます：

// ユーザーのログインの一意な識別子です。このデータは送信データの#account_idに対応し、この場合#account_idの値はTAになります
ta.login("TA");

このメソッドではログインイベントは送信されません

2.2 共通イベントプロパティの設定

共通イベントプロパティとは、すべてのイベントに付与されるプロパティのことです。setSuperPropertiesを呼び出して共通イベントプロパティを設定できます。イベントを送信する前に、共通イベントプロパティを設定しておくことを推奨します。ユーザーの会員レベルや流入チャネルなどの重要なプロパティは、すべてのイベントに設定する必要があります。その場合は、これらのプロパティを共通イベントプロパティとして設定できます。

var superProperties = {};
superProperties["channel"] = "ta";//文字列
superProperties["age"] = 1;//数値
superProperties["isSuccess"] = true;//ブール値
superProperties["birthday"] = new Date();//時間
superProperties["object"] = {key:"value"};//オブジェクト
superProperties["object_arr"] = [{key:"value"}];//オブジェクトグループ
superProperties["arr"] = ["value"];//配列
ta.setSuperProperties(superProperties);//共通イベントプロパティを設定

共通イベントプロパティはキャッシュに保存されるため、Webページを開くたびに呼び出す必要はありません。setSuperPropertiesを呼び出して以前に設定済みの共通イベントプロパティを送信した場合は、以前のプロパティが上書きされます。

Keyはプロパティの名前で、文字列型です。英字で始まり、数字、英字、アンダースコア"_"のみを含めることができます。最大長は50文字です。英字の大文字と小文字は区別されず、AEではすべて小文字に変換されます
Valueはプロパティの値で、文字列、数値、ブール値、時間、オブジェクト、オブジェクトグループ、配列に対応しています

イベントプロパティとユーザープロパティの要件は、共通イベントプロパティと同じです

2.3 イベントの送信

trackを直接呼び出してカスタムイベントを送信できます。事前に整理したトラッキングドキュメントに従って、イベントのプロパティと送信条件を設定することをお勧めします。ここでは、ユーザーが商品を購入する場合を例にします：

ta.track("product_buy",{product_name:"商品名"});

イベント名は文字列型で、英字で始まり、数字、英字、アンダースコア"_"を含めることができます。最大長は50文字です。

Array型はv1.3.0以降で対応しており、AEプラットフォーム2.5以降が必要です。

Object型にはAEプラットフォーム3.5以降が必要です

2.4 ユーザープロパティの設定

一般的なユーザープロパティは、userSetを呼び出して設定できます。このインターフェースで送信したプロパティは、既存のプロパティ値を上書きします。そのユーザープロパティが以前に存在しない場合は新しく作成され、タイプは渡されたプロパティのタイプと同じになります。ここでは、ユーザー名の設定を例にします：

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

3. ベストプラクティス

次のサンプルコードには、上記のすべての操作が含まれています。次の手順で使用することをお勧めします:

import ta from "thinkingdata-browser";
var config = {
    appId: "APP_ID",
    serverUrl: "https://YOUR_SERVER_URL/sync_js",
    autoTrack: {
     pageShow: true, //ページ表示イベントを有効にする。イベント名はta_page_show
     pageHide: true, //ページ非表示イベントを有効にする。イベント名はta_page_hide
     pageView: true, //シングルページ閲覧イベントを有効にする。イベント名はta_pageview
     pageClick:true //ページ要素クリックイベントを有効にする。イベント名はta_page_click
    }
};
//SDKを初期化
ta.init(config);

//ユーザーがログイン済みの場合は、ユーザーのアカウントIDを一意の識別子として設定できます
ta.login("TA");

//共通イベントプロパティを設定
var superProperties = {};
superProperties["channel"] = "ta";//文字列
superProperties["age"] = 1;//数値
superProperties["isSuccess"] = true;//ブール値
superProperties["birthday"] = new Date();//時間
superProperties["object"] = {key:"value"};//オブジェクト
superProperties["object_arr"] = [{key:"value"}];//オブジェクトグループ
superProperties["arr"] = ["value"];//配列
ta.setSuperProperties(superProperties);//共通イベントプロパティを設定

//イベントを送信
ta.track("product_buy", //イベント名
 //イベントプロパティ
 {product_name:"商品名"});
 
//ユーザープロパティを設定
ta.userSet({username: "TA" });

このページは役に立ちましたか？

1. SDKの統合​

1.1 自動統合​

1.2 手動統合​

2. よく使う機能​

2.1 アカウントIDの設定​

2.2 共通イベントプロパティの設定​

2.3 イベントの送信​

2.4 ユーザープロパティの設定​

3. ベストプラクティス​