tinybirdco/web-analytics-starter-kitPublic

NotificationsYou must be signed in to change notification settings
Fork45
Star396

Tinybird Web Analytics template

License

MIT license

396 stars 45 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 123 Commits
.github/workflows		.github/workflows
assets/img		assets/img
dashboard		dashboard
middleware		middleware
tinybird		tinybird
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
TEMPLATE.md		TEMPLATE.md
dashboard-template.png		dashboard-template.png
package-lock.json		package-lock.json

Repository files navigation

Web Analytics template for Tinybird

Build your own web analytics platform usingTinybird'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:

curl -sSL https://tinybird.co| bashtb logintb --cloud deploy --template https://github.com/tinybirdco/web-analytics-starter-kit/tree/main/tinybird

Track web events

Add this snippet within your site<head> section:

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

Get yourtracker token fromhttps://cloud.tinybird.co/tokens

If everything is working correctly, you should start receivingpage_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.
`web-vitals`	No	Tracks web vitals using theweb-vitals library

Implementing custom attributes

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

For example:

<scriptsrc="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

Theanalytics_events table has support to gather data from multiple tenants and domains. Adddata-domain anddata-tenant-id to your script:

<scriptsrc="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 bytenant_id anddomain or you can use JWT tokens including the required scopes andfixed_params.

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

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

Learnhow to create JWT tokens

Web vitals

Track web vitals like this:

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

You'll start receiving events withweb_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 tohttps://analytics.tinybird.live and paste yourWorkspace admin token.

Get yourdashboard token fromhttps://cloud.tinybird.co/tokens.

Advanced

Local development

See thetinybird anddashboard READMEs.

Install the Tinybird CLI usingcurl https://tinybird.co | bash
Create aTinybird account and a workspace by runningtb login
Clone this repository:

git clone https://github.com/tinybirdco/web-analytics-starter-kitcd web-analytics-starter-kit/tinybird

Make changes to thetinybird project and deploy usingtb --cloud deploy.

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