Look to implement page on-event tracking for google analytics to provide customer insights for Clima sub-pages

[danielh7-cs9]

Is your feature request related to a problem? Please describe.
No relation to a problem, feature enhancement to allow greater user insights into clima pages used.

Describe the solution you'd like
When Clima sub-page is loaded, create event to google analytics

[danielh7-cs9]

There a couple of ways to do this, but based on my research so far we may need to create additional GTMs and have the js called for certain functions.e.g when user clicks on tab.

Some initial research so far - https://community.plotly.com/t/using-google-analytics-with-dash-app/62347

[danielh7-cs9]

I've managed to get tracking on each of the clima subpages on my test clima by using Google tag manager.

For each GTM tag, there is an 'on-click' trigger which matches the html click text for each tab. Example below.

Each trigger is assigned to a specific GA4 GTM event tag.

As users view each tab, each tag is fired and reported back into GA4 dashboards. See below.

[danielh7-cs9]

Hey @FedericoTartarini, please see above for what I've implemented in my non-prod clima. I am able to gather tracking of each clima tabs/pages using triggers and mapping them to GTM events. Let me know if you think/want this implemented in production Clima.

[FedericoTartarini]

It looks great, you can show me this during our next meeting

[danielh7-cs9]

Hey @FedericoTartarini, I think I found a more elegant way of doing this with GTM with pulling from the datalayer directly.

I created a trigger to track click and fire when the class = "jsx-4020002479".

Note - my original plan was to match using CCS selector but I've tried many ways to match the code including Regex and it just wont fire.

Instead of an individual GTM tag per tab (in red below), we create one and configure the event parameters to return the click value from the datalayer {{Click Text}}

This means if you were to add new tabs to Clima, you wouldn't need to setup a new tag (assuming the trigger conditions the same).

Below are the event counts pushed into GA4.

There only cons I do not like with the above is:

1. At the moment I am matching using a class which seems to be generated from React. I'll see if I am able to use the CCS Selector correctly.
   
2. It is tracking the Select Weather tab but I don't think it is that much of a concern

[danielh7-cs9]

Trigger conditions using the Click element with CCS Selector is now working. The tag is firing with a conditional match on div id "tabs" nested elements using #tabs *

This will be the best approach for condition matching as the div id is defined statically in layout.py.

[t-kramer]

@FedericoTartarini It would be valuable to get this up and running asap. I'll look into this.

[FedericoTartarini]

@t-kramer to implement this properly we need to change the code of clima and make sure that when a person clicks on a tab then the URL changes. To do so you will need to follow this guide https://dash.plotly.com/urls