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.

<script>
  // this is necessary for fouita to know what widget is concerned
  export let __service
  function track(action) {
    // code to send tracked actions
    Fouita.Tracker.call(__service, action)
  }
</script>

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

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
  </button>
</div>

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.



https://img.fouita.com/0x2729/media/imgs/logoblanc-1633435942147.png?/rs:fit:130:130
The missing pieces of your website.
kairouan, tunisia
built using fouita!