Site analytics

[jbmoelker]

User story

As a Marketer, I want to track the success of my campaigns.

Checklist

• [ ] Define type of analytics (recommend alternative tracking, like Plausible)
• [ ] Set events (optional)
• [ ] Define cookies that come with the chosen form of tracking

[jbmoelker]

Should we add an agnostic layer like the analytics package by David Wells (~13.2kb minified + gzipped)? This way Head Start can easily be used with different analytics providers in different projects. We could easily add adapters for Plausible etc.

[jbmoelker]

How do we track specific events?

• Global analytics provider that listens to all (click, ...) events? Components could have add attributes that the provider can use. Like a data-analytics="{ "action": "share", "url": "..." }" which the provider can access using event.target.dataset.analytics.
• Components could dispatch a CustomEvent with data (like { "action": "share", "url": "..." }). This means all components that want something to be tracked, need to their own <script>. Using events means there's a loose coupling.
• Components could use (import) shared analytics helpers in a client-side <script>. This is similar to the CustomEvent setup except that there's a tight coupling and no provider required as a global listener.
• An Analytics component that wraps components we want to track. For example something like <Analytics track={ event: 'click', data: 'play' }><VideoComponent /></Analytics>.
• ...

[jbmoelker]

Can we offload third party analytics to the server or a web worker, so they don't block our own scripts on the main thread and don't negatively impact user experience?

We could use Partytown to achieve this.