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/tinybird
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.
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 Descriptiondata-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 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.
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
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 dashboardGo to https://analytics.tinybird.live and paste your Workspace admin token.
Get your dashboard token from https://cloud.tinybird.co/tokens.
See the tinybird and dashboard READMEs.
curl https://tinybird.co | bashtb logingit clone https://github.com/tinybirdco/web-analytics-starter-kit cd web-analytics-starter-kit/tinybird
tinybird project and deploy using tb --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
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4
