[BUG] - No longer collecting star-rating data for tutorials, since transition to GA4

[carljparker]

Add Link

The problem occurs with all the tutorials, but here is an example that I have been working with:

https://pytorch.org/tutorials/beginner/basics/quickstart_tutorial.html

Describe the bug

Near the footer of each tutorial page is a UX of five stars which provides an opportunity for a user to rate the tutorial. (Refreshing the page resets the star rating.)

Prior to the transition to GA4 in June, 2023, we received event data when a user clicked on one of these stars. Since the transition to GA4 we are no longer seeing this data on the Google Analytics site.

One possibility is that the data is still collected, but that I just don't see where it is reported on the Google Analytics site; the reporting UX for GA4 is different than for Universal Analytics (UA)--the previous version of Google Analytics. This seems unlikely given my exploration of the site and the reporting UX.

Another possibility is that the mechanism that we were using is no longer supported by GA4. This seems more likely because the code to send the star rating still exists on our tutorial pages--but it no longer appears to do anything. That said, it could be possible to update that the code to make it compatible with GA4.

In the event that the existing code cannot be adapted to GA4, a fallback option is to use the expanded click-detection of GA4 to detect when the stars on clicked on--and report that using the GA4 reporting UX.

Describe your environment

MacBook Pro ~ 14-inch, 2021

• Apple M1 Pro
• 16 GB RAM
• Storage: 303.33 GB available of 494.38 GB

Google Chrome ~ Version 119.0.6045.199 (Official Build) (arm64)

[carljparker]

In the transition from Universal Analytics (UA) to Google Analytics 4 (GA4), PR 182 (in pytorch_sphinx_theme/layout.html in the pytorch_sphinx_theme repo) deleted a JavaScript function definition that is used by the star-rating code:

function gtag(){dataLayer.push(arguments);}

You can see this function, gtag() used in the following block of code (in _templates/layout.html in the tutorials repo):

    gtag('event', 'click', {
      'event_category': 'Tutorial Rating',
      'event_label': $("h1").first().text(),
      'value': $(this).attr("data-count")
    });

If I put Google Tag Manager (GTM) in Preview mode, bring up a tutorial in Chrome, use Chrome's debug tools to define this function ad hoc, and then click on a star rating, I see the star rating appear in the data layer displayed by GTM.

Recommend that we restore this JavaScript function definition (roughly) in its original location in pytorch_sphinx_theme/layout.html in the pytorch_sphinx_theme repo.