Custom Analytics

Any widget could have custom analytics parameters defined, and can be tracked in your fouita dashboard

This is an example of what the analytics of a widget would look like.

fouita analytics

Add analytics to your widget

To add analytics we will use a Fouita utility function to be able to send the tracked actions.
We will create a component with some event listener, and the tracker function.

  // this is necessary for fouita to know what widget is concerned
  export let __service
  function track(action) {
    // code to send tracked actions, action)

<div class="p-4 bg-tertiary/25">
  <button class="bg-tertiary/75 p-2 text-white" on:click={() => track('Click Button')}>
   Click here

That's it, now we need to save our widget and use it inside the page to see if tracking is working the way we like.

When we click on the button, the action "Click Button" will be tracked.

Note: you need to wait at least a minute for the tracking to get updated in the dashboard

fouita analytics

Lets add a new tracking variable and see how the analytics would look like.

<div on:mouseenter={() => track('Hover All')} class="p-4 bg-tertiary/25">
  <button class="bg-tertiary/75 p-2 text-white" 
          on:mouseenter={() => track('Hover')} 
          on:click={() => track('Click Button')}>
   Click here

The updated Analytics would look like this:

fouita analytics

That's it, we have covered how to add custom analytics keys

Note: if you update a key value in analytics, it will add another key with new metrics, and the old key will disappear when there is no time range that covers it anymore.
For example, if we try to change the key "Hover" to "Mouse Enter", we will keep seeing "Hover" alongside a new key metric "Mouse Enter". This stays as long as the "Hover" happened on the selected time range (last day, last week, last month, last year). Otherwise, it will disappear.
The missing pieces of your website.
kairouan, tunisia
built using fouita!