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.
To deploy this template on Tinybird:
curl -sSL https://tinybird.co | bash
tb login
tb --cloud deploy --template https://github.com/tinybirdco/web-analytics-starter-kit/tree/main/tinybirdAdd 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.
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,
})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. |
web-vitals |
No | Tracks web vitals using the web-vitals library |
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-customer-id="CUSTOMER_ID"
></script>Would append "customer_id":"<CUSTOMER_ID>" to the rest of variables saved in payload column.
Use custom attributes for multi-tenant support.
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 |
Go to https://analytics.tinybird.co and paste your dashboard token.
Get your dashboard token from https://cloud.tinybird.co/tokens
See the tinybird and dashboard READMEs.
- Install the Tinybird CLI using
curl https://tinybird.co | bash - Create a Tinybird account and a workspace by running
tb login - Clone this repository:
git clone https://github.com/tinybirdco/web-analytics-starter-kit
cd web-analytics-starter-kit/tinybird- Make changes to the
tinybirdproject and deploy usingtb --cloud deploy.
If you want to customize & host your own dashboard, you can easily deploy the project to Vercel using the button below:
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
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
