Skip to content

tinybirdco/web-analytics-starter-kit

Repository files navigation

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.

Tinybird Web Analytics Dashboard

Get started

Set up the data project

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

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.
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="TOKEN-ID"
  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.

Web vitals

Track web vitals like this:

<script
  src="https://unpkg.com/@tinybirdco/flock.js"
  data-token="TOKEN-ID"
  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.co and paste your dashboard token.

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

Advanced

Local development

See the tinybird and dashboard READMEs.

  1. Install the Tinybird CLI using curl https://tinybird.co | bash
  2. Create a Tinybird account and a workspace by running tb login
  3. Clone this repository:
git clone https://github.com/tinybirdco/web-analytics-starter-kit
cd web-analytics-starter-kit/tinybird
  1. Make changes to the tinybird project and deploy using tb --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:

Deploy with Vercel

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 SlackTinybird Docs