TD JavaScript SDK(TD JS SDK)には、Treasure Dataを通じてウェブサイトの行動を追跡できるsite tagが含まれています。TD JS SDKを使用する利点は、収集する情報が、audience scoring、identity resolution、その他を含む、CDPとしてのTreasure Dataを際立たせる多くのツールに力を与えることです。
Treasure Data JS SDKが実行されるたびに、指定されたtableに新しいレコードが作成され、収集するように指示されたすべてのattributeおよびbehavior dataが追加されます。このデータには、指定した値と、Identity Resolutionおよび個人による行動の追跡に使用できるTreasure Dataで生成されたClientおよびGlobal IDを含めることができます。
このチュートリアルでは、TD JavaScript SDKを使用してウェブサイトの行動を追跡するプロセスについて説明します。
Treasure Dataは、Treasure Data JavaScript SDK version 3を使用したサイトでの新機能や機能の実装を推奨しています。cookieの管理方法が異なります。これらの記事のほとんどを参照する際は、提案されたeventコレクターとTreasure Data JavaScript SDK version 3の呼び出しをソリューション内で定義する必要があることに注意してください。
- 前提条件
- テストウェブサイトのセットアップまたは既存のウェブサイトの使用
- テストウェブサイトのセットアップ
- 既存のウェブサイトの使用
- 新しいDatabaseとTableの作成
- Treasure Data Write-only API Keyの取得
- ウェブサイトへのDirect Tagの実装
- TD JavaScript SDKの追加
- API Write-only KeyとTreasure Database情報の追加
- Direct Tagのテスト
- TD Consoleでの結果の確認
- td_idの追加
- Website Trackingの開始を確認してください
squarespace.comを使用してテストウェブサイトをセットアップするか、既存のウェブサイトを使用できます。
squarespace.comに移動し、右上隅のGet Startedを選択します。
templatesにスキップして、希望する古いtemplateを選択します。
Googleログインを使用してアカウントを作成します。このチュートリアルを実行するために14日間のトライアルを使用できます。
左側のナビゲーションでSettings > Advanced > Code Injectのパスに従います。
既存のウェブサイトを使用し、headerに呼び出しを追加することで、TD JS SDKをテストすることもできます。TD JS SDKの追加の詳細は、JavaScriptコードをラップするHTML tag <script>を使用して、HTMLファイルのheaderまたはbodyで指定できます。
TD Consoleを開きます。
Data Workbench > Databasesに移動します。
New Databaseを選択します。名前を
<yourname>_website_trackingにします。Createを選択します。
作成した新しいdatabaseで、New Tableを選択します。名前を
pageviews_<yourname>にします。Createを選択します。
My Settings > API Keysに移動します。
必要に応じて、accessを検証します。
このアカウントのAPI Keyはこのページにあります。実装のためにこのページを使用可能な状態にしておきます。
Treasure DataJavaScript SDKはGitHubで入手できます。READMEには、JavaScript SDK APIの説明が含まれています。
squarespace.comのウェブサイトに戻り、Settings > Advanced > Code Injectionに移動するか、ページheaderにコードを挿入するためのウェブサイト設定に移動します。
追跡したい各ページのheader(
<head>)に以下のTD JS SDKコードを追加します。
<!-- 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>TD JS SDKの後のheader、またはbodyやfooterに以下のコードスニペットを追加して、ページビューデータを送信するTreasure Data databaseを指定します。
表にリストされている
<xxxx>プレースホルダーを置き換えて、write-only API keyを含め、trackerオブジェクトを取得し、サイトからの情報を保存するTreasure Data databaseを指定します。
<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>| プレースホルダー | 例 |
|---|---|
| <YOUR_WRITE_ONLY_APIKEY_IS_HERE> | xxxx/xxxxxxxxxxxxxxxxxxxxxAPI keyの取得方法を学びます。 |
| <DATABASE_NAME> | jasonsmith_website_tracking |
| <pageviews_table> | pageviews_jasonsmith |
- SquareSpaceの左側パネルでSettings > Availabilityに移動し、覚えやすいパスワードでサイトを表示可能にします。
2. ウェブサイトのベースURLをコピーします。
ChromeブラウザでIncognitoウィンドウを新しく開き、URLを貼り付けてサイトにアクセスします。
サイトがパスワードを求めます。パスワードを入力する前に、右上のMore Optionsメニューを選択します。
5. More Tools > Developer Toolsに移動します。
Networkを選択します。 ウェブサイトとbrowser間の通信で起こっていることすべてをリアルタイムで確認できます。
ウェブサイトのパスワードを入力します。 consoleですべての画像ファイルおよび他の要素がロードされるのが表示されます。
すべてのtagに'td'が含まれているため、'td'を検索します。
- サイトの他のページに移動して、tagがそこにも表示されるかどうかを確認します。
TD Consoleに移動します。
Data Workbench > Databasesに移動します。
作成した
<yourname>_website_trackingdatabaseを検索して選択します。作成した
pageviews_<yourname>tableを選択します。tableでtracking結果を確認できます。
次のステップは、個別にtracking eventを有効にすることです。さまざまなドメインでのデータプライバシー規制、特にGDPRに準拠するために、TD JS SDKはanonymousモードで動作します。これは、td_client_idやtd_global_idなど、個人を特定できる特定のeventメタデータを収集しないことを意味します。
個々のユーザーを追跡し、ユーザーsession内およびsession間でデータを分析し、追跡された行動を実際の個人と関連付けるなどを行う場合は、td_client_idとtd_global_idが必要です。
SquareSpaceに戻ります。
Settings > Advanced > Code Injectionに移動するか、HTMLファイル内のJavaScriptコードをラップするHTML tag < script>を挿入するウェブサイトに移動します。
この例に示すように、既存のコードに以下のコマンドを挿入します。
td.setSignedMode()
- データが収集される前にIDが設定されるように、td.trackPageviewの前への配置が重要です。
JSで行の先頭に'//'を使用すると、注釈を追加できます。これは、後で解読できるようにJSコードにラベルを付けるのに重要です。