📦

Web Analytics Starter Kit

Tinybird Web Analytics template

0 installs

Trust: 52 — Fair

Files

Ask AI about Web Analytics Starter Kit

I know everything about Web Analytics Starter Kit. Ask me about installation, configuration, usage, or troubleshooting.

0/500

Loading tools...

Reviews

Documentation

Web Analytics template for Tinybird

Build your own web analytics platform using Tinybird's Events API and Endpoints. Built with privacy and speed as top priorities, this template lets you get real-time metrics in a pre-built dashboard in just a few minutes without any knowledge about Tinybird.

After you've finished the basic setup, expand your analytics with custom events tailored to your specific use cases (eCommerce, marketing, etc.), keeping the same real-time performance.

Get started

Set up the data project

To deploy this template on Tinybird:

git clone https://github.com/tinybirdco/web-analytics-starter-kit
cd web-analytics-starter-kit/tinybird
pnpm install
npx tinybird login
npx tinybird deploy

Track web events

Add this snippet within your site <head> section:

<script
  defer
  src="https://unpkg.com/@tinybirdco/flock.js"
  data-token="YOUR_TRACKER_TOKEN"
></script>

Get your tracker token from https://cloud.tinybird.co/tokens

If everything is working correctly, you should start receiving page_hit events as visitors view and interact with your website.

Track custom events

The script also provides you with a function to track custom events. Add this to your application at any point:

Tinybird.trackEvent('add_to_cart', {
  partnumber: 'A1708 (EMC 3164)',
  quantity: 1,
})

Additional tracker parameters

These parameters can be used with the tracker snippet:

Parameter	Mandatory	Description
`data-token`	Yes	Your `tracker` token. It's already created for you, you can find it on the Tinybird UI under "Manage Auth Tokens"
`data-proxy`	No	Your domain URL to proxy the request, if you follow the optional steps for "GDPR Best Practices". Cannot be used together with `data-proxy-url`.
`data-proxy-url`	No	A complete proxy URL endpoint for the tracking request. Use this when you need to specify a custom tracking endpoint beyond just the domain. Cannot be used together with `data-proxy`.
`data-host`	No	Tinybird host URL. Defaults to `https://api.tinybird.co/`, but could be `https://api.us-east.tinybird.co` or a dedicated cluster. The banner already generates the snippet with the proper host.
`data-datasource`	No	If you iterate the landing data source, or you just want to ingest the event in a different one, you can specify the landing data source name.
`data-pathname`	No	Override the `pathname` field sent with every event. Useful for SPAs where `window.location` is polluted with campaign parameters, or when you need to send a virtual/canonical URL (e.g. a content ID instead of the full path).
`web-vitals`	No	Tracks web vitals using the web-vitals library

Implementing custom attributes

Attributes name must have data-tb_ prefix. Every attribute included with this requirement would be saved in the payload column of your analytics_events datasource and will be included in every event.

For example:

<script
  src="https://unpkg.com/@tinybirdco/flock.js"
  data-token="YOUR_TRACKER_TOKEN"
  data-tb-my-custom-attr="custom-attr-value"
></script>

Would append "my_custom_attr":"<custom-attr-value>" to the rest of variables saved in payload column.

Multi-tenancy and multi-domain

The analytics_events table has support to gather data from multiple tenants and domains. Add data-domain and data-tenant-id to your script:

<script
  src="https://unpkg.com/@tinybirdco/flock.js"
  data-token="YOUR_TRACKER_TOKEN"
  data-domain="project_domain"
  data-tenant-id="project_tenant_id"
></script>

All project endpoints can be filtered by tenant_id and domain or you can use JWT tokens including the required scopes and fixed_params.

To filter endpoints for a tenant, use this as fixed params in the JWT token:

"fixed_params": {
    "tenant_id": "your-tenant-id"
}

Learn how to create JWT tokens

Web vitals

Track web vitals like this:

<script
  src="https://unpkg.com/@tinybirdco/flock.js"
  data-token="YOUR_TRACKER_TOKEN"
  web-vitals="true"
></script>

You'll start receiving events with web_vital action, the payload looks like this:

{"name":"LCP","value":68,"delta":68,"id":"v3-1752067824029-4726354841567","pathname":"/","href":"http://localhost:8081/"}
{"name":"TTFB","value":41.10000002384186,"delta":41.10000002384186,"id":"v3-1752067821037-7353415626830","pathname":"/","href":"http://localhost:8081/"}
{"name":"FCP","value":120,"delta":120,"id":"v3-1752067821037-7485331818919","pathname":"/","href":"http://localhost:8081/"}
{"name":"INP","value":0,"delta":0,"id":"v3-1752067821037-7066346355405","pathname":"/","href":"http://localhost:8081/"}
{"name":"CLS","value":0,"delta":0,"id":"v3-1752067821037-6535975895510","pathname":"/","href":"http://localhost:8081/"}

These are the different metrics tracked and their meaning:

Metric	What it Measures	Your Value	Good Value	Status
LCP	Load performance	68 ms	< 2500 ms	Excellent
TTFB	Server responsiveness	41.1 ms	< 500 ms	Excellent
FCP	First contentful paint	120 ms	< 1800 ms	Excellent
INP	Interaction responsiveness	0 ms	< 200 ms	No data
CLS	Visual stability	0	< 0.1	Perfect

Visualize the metrics on a readymade dashboard

Go to https://analytics.tinybird.live and paste your Workspace admin token.

Get your dashboard token from https://cloud.tinybird.co/tokens.

Advanced

Local development

See the tinybird and dashboard READMEs.

Create a Tinybird account and a workspace.
Clone this repository:

git clone https://github.com/tinybirdco/web-analytics-starter-kit
cd web-analytics-starter-kit/tinybird
pnpm install
npx tinybird login

This will create a .env.local file with TINYBIRD_TOKEN and TINYBIRD_HOST values.
Run pnpm dev to sync changes to a Tinybird branch, or pnpm deploy for production.

Hosting your own dashboard on Vercel

If you want to customize & host your own dashboard, you can easily deploy the project to Vercel using the button below:

GDPR

Tinybird is GDPR compliant as a platform, but it is your responsibility to follow GDPR's rules on data collection and consent when implementing your web analytics.

Need help?: Community Slack • Tinybird Docs