skills.rest
treasure-data
treasure-dataOFFICIAL
Explore all skills by this author →
WebsiteGitHub

td-javascript-sdk

Track page views and events in web applications using the Treasure Data JavaScript SDK.

21|24|Updated Oct 21, 2025
Search Tags:#javascript#sdk#spa#e-commerce#treasure data#web analytics#event tracking#client-side
One-click install
npx skills add https://github.com/treasure-data/td-skills --skill td-javascript-sdk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: td-javascript-sdk
Source: https://github.com/treasure-data/td-skills/tree/main/sdk-skills/javascript
Command: npx skills add https://github.com/treasure-data/td-skills --skill td-javascript-sdk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires td-js-sdk.

What problem does it solve?

This Skill provides expert assistance for importing data to Treasure Data using the JavaScript SDK, simplifying browser-based event tracking, page analytics, and client-side data collection for web applications. It helps users capture rich user behavior data directly from their websites, enabling deeper insights and personalization.

Core Features & Use Cases

  • Event Tracking: Guides on implementing addRecord(), trackPageview(), and trackEvent() for comprehensive user interaction and page view tracking.
  • E-commerce & Form Tracking: Provides patterns for tracking e-commerce events (product views, add to cart, purchases) and detailed form interactions (starts, submissions, abandonments).
  • Privacy & SPA Support: Explains how to implement privacy controls (consent management, anonymous mode) and track events in Single Page Applications (SPAs) with virtual page views.
  • Use Case: A marketing team wants to understand user journeys on their e-commerce website, from product views to purchases. This skill helps a frontend developer implement the TD JavaScript SDK to track all these events, including user IDs and session data, ensuring accurate attribution and funnel analysis.

Quick Start

Add SDK loader to your HTML <head>

<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}},n=["addRecord","blockEvents","fetchServerCookie","fetchGlobalID","fetchUserSegments","resetUUID","ready","setSignedMode","setAnonymousMode","set","trackEvent","trackPageview","trackClicks","unblockEvents"],s=0;s<n.length;s++){var c=n[s];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 i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(o,i)}}("Treasure",this); </script>

Initialize and track a pageview

<script type="text/javascript"> var treasure = new Treasure({ database: 'your_database_name', writeKey: 'your_write_only_api_key' }); treasure.trackPageview('pageviews'); </script>

Frequently Asked Questions about td-javascript-sdk

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I track user events and page views on my website with JavaScript?▼

Event tracking with JavaScript involves implementing client-side data collection using the TD JavaScript SDK. Initialize with your database and write key, then use methods like `trackPageview()`, `trackEvent()`, and `addRecord()` to capture user interactions, page views, and custom events directly from the browser, sending them to Treasure Data for analysis.

Can I use JavaScript SDK for event tracking in a single-page application?▼

Yes, the JavaScript SDK supports single-page applications by tracking virtual page views and user interactions without full page reloads. Configure the SDK with your database credentials and use `trackPageview()` and `trackEvent()` methods to capture navigation and interaction events as users move through your SPA.

What's the best way to track e-commerce events like product views and purchases?▼

Track e-commerce events using the JavaScript SDK's `addRecord()` and `trackEvent()` methods to capture product views, add-to-cart actions, and purchase completions. Include user IDs and session data with each event to enable accurate attribution, funnel analysis, and conversion tracking across your customer journey.

How do I implement privacy controls and anonymous mode in web event tracking?▼

The JavaScript SDK provides `setAnonymousMode()` and consent management capabilities to implement privacy controls. Use these methods to allow users to opt into anonymous tracking or consent-based data collection, ensuring compliance with privacy requirements while maintaining event tracking functionality.

Do I need server-side implementation to use the JavaScript SDK for web analytics?▼

The JavaScript SDK is browser-only and requires no server-side implementation for basic event tracking. However, the metadata notes explicit caveats for server-side usage; client-side initialization with database name and write key is sufficient for page views, user interactions, and form tracking on web applications.

What data does the JavaScript SDK automatically capture with each tracked event?▼

The JavaScript SDK automatically includes context data with tracked events, such as session information and client identifiers. Configure the SDK with `clientId`, `startInSignedMode`, and other options to customize what automatic context is captured alongside your custom events and page views.

Related Skills

Explore More Marketing & Sales Skills→
sethdavis512sethdavis512

react-router-framework-mode

Configure React Router framework-mode routes, loaders, actions, and navigation.

Community
Advanced
TheWayWithinTheWayWithin
13

saas-analytics

Implements product analytics for SaaS apps via provider-agnostic interfaces.

Community
Intermediate
Vivekmano27Vivekmano27

analytics-setup

Configure privacy-first analytics with PostHog across React, Flutter, and NestJS.

Community
Advanced
pelcherspelchers

tracking-user-analytics

Track user events, pageviews, and properties with consent controls.

Community
Advanced