Google Universal Analytics, Google Analytics 4 and all MFEs

Working Groups Frontend
1

My next question is analytics based, but not necessarily Open edX based.

Currently in lms/templates/main.html there is a code snippet allowing site operators to collect traffic through Google Universal Analytics.

Google Universal Analytics is going away on July 1, 2023.

Will the code snippet be updated to support Google Analytics 4?

And since we are now in a more Micro Frontend friendly architecture, will the code snippet be added to each MFE so that operators don’t have to fork each MFE in order to add it if they want to follow traffic through the Learning MFE for example?

Who should I talk to?

1 Like
2

Hi @sambapete ! This sounds like it fits under the purview of the data working group, so I’ve added it to the agenda for the next meeting.

GA is widely used and a very useful tool, and so I can’t see any reason why we shouldn’t continue to support it, and expand its usage into the MFEs.

1 Like
3

@sambapete, @jill,

I’ve been talking to @BrianMesick about this, and we think it’s important enough to warrant a new epic/discovery around it.

This is the draft description: Modular Web Analytics · Issue #148 · openedx/frontend-wg · GitHub. There’s precious little in there, yet, but it should be enough to get a conversation started. I don’t know if it’ll become an OEP, ADR, or just a PR somewhere, but whatever we do, if we want to continue supporting Google Analytics we need to do it by Palm.

Given the relative urgency, I think this is a good candidate for a funded contribution. I’ll have a talk internally to see if tCRIL would want to fund it ourselves.

Alternatively, if any core contributors want to pick this up to work using their monthly 20 hours, it would, of course, be awesome. :slight_smile:

2 Likes
4

It’s worth noting that there are two Univeral Analytics flavors - regular and the enterprise scale 360. Regular is the one that @sambapete is referencing above, while 360 will live on until July 1 2024. It’s not clear to me currently what the community uptake is on 360, but that is what edx.org is using so they may not feel the same time pressure as other parts of the community. However, I’m sure they would like better coverage for MFEs so that conversation is ongoing.

I’m happy to continue the technical portion of this conversation over in the Issue that Adolfo created, but just wanted to get this bit of context out to the wider audience.

2 Likes
5

That’s an interesting point. Smaller site operators may not be able to afford 360 for example while someone as big as edx.org can.

I can tell you for sure that our site cours.edulib.org would never be able to afford the prices I’ve seen on What is Google Analytics 360? | FoundSM - Google Analytic Marketing Partner.

The cost of Google Analytics 360 starts out at $150,000 per year and billed at $12,500 a month. Costs can increase as well based on the size of the website. The cost also includes the full suite of tools in the Google Marketing Platform.

3 Likes
6

Thanks for explaining why this hasn’t been fixed. +1 as a person who’s just running a small site and would in no universe ever be able to afford $150k a year for google analytics! We really need Google Analytics 4 fixed before we lose all visibility!

1 Like
7

For anyone following this post- we have introduced a funded contribution for getting this work over the line before Google’s deadline: tCRIL Funded Contribution - Google Analytics 4 Upgrade

1 Like
8

@arbrandes @BrianMesick

After reading over this I noticed that our edx-platform main.html is coming into the frontend-app-learning sequential vertical <iframe/> elements.

This does not satisfy all the MFEs (Account, Profile, Gradebook, etc) or all routes in frontend-app-learning like Outline, Progress.

Looking into how Segment analytics is handled in the frontend-platform code below it makes sense to have a separate configuration for Google Analytics too.

// Initialize for Segment in frontend-platform.
frontend-platform/initialize.js at master · openedx/frontend-platform (github.com)

# We problem need to add something like this for Google Analytics 4
import {
  configure as GoogleAnalyticsService
} from './analytics';

configureAnalytics(GoogleAnalyticsService, {
      config: getConfig(),
      loggingService: getLoggingService(),
      httpClient: getAuthenticatedHttpClient(),
    });

# Then we'd need to implement the `GoogleAnalyticService` as a `AnalyticsService` with Google Analytics 4 in mind.
src/frontend-platform/src/analytics/GoogleAnalyticsService.js

After reading how to implement Google Analytics for React in this post How to Setup and Add Google Analytics to your React App | by Mohammad Faisal | JavaScript in Plain English it seemed to make since about how we may cover the React SPA issue.

Also, here is a npm package react-ga4 - npm (npmjs.com) for Google Analytics 4 that we could use when implementing the GoogleAnalyicsService component.

I realize that Segment can have a destination for Google Analytics 4 too and maybe this would circumvent any need to extend the frontend-platform analytics component. To configure Segment properly for Google Analytics deliver you’d need to setup the correct mappings for each event though. Also what happens if you want to just use Google Analytics and not Segment.

Let me know if I’m in the right understanding about how one would approach adding Google Analytics 4 into the MFEs by use of extending the analytic component in frontend-platform. Has any work been done to date on integrating Google Analytics 4 into the MFEs?

cc @traek728 @becdavid

9

Thanks for looking into this, Zachary.

Not yet, but we put out a call for a funded contribution to fix the issue for Palm, and I believe we’ve selected a vendor, already. This means work should start soon.

10

Thanks @arbrandes for the response. We’ll keep check to see what happens with the Palm updates for this feature request. Is there any way that someone can keep us informed through this post once this is implemented?

11

@Zachary_Trabookis, I suggest taking a peek into this issue and this wiki page every so often. From those you should be able to glean what the status of the work is!

2 Likes
12

@arbrandes At Configuring Google Analytics — Latest documentation it says “Google Analytics 4 is supported in most edx-platform LMS templates and the following micro-frontends (MFEs) in the upcoming Olive.4 and Palm named releases”.

I just wanted to confirm, I’m not able to test this as of today’s Olive, because it’s not “Olive.4”, correct?

(I did actually test it, via making the change from the admin interface as specified, and I just saw no updates to the page HTML. So I want to make sure the reason that’s true is because it’s just not actually in the current Olive release?)

13

That is correct. This change will only be available once Olive.4 is released (in about two weeks).

2 Likes
14

@arbrandes I checked the ticket and it says it’s done. However, I’m running Palm and while I do see GA4 on the front page, I don’t see the javascript included on any sub-pages (which I assume are the MFE pages.)

Following the official documentation I set a Django “Site Configuration” like the following:

{
    "GOOGLE_ANALYTICS_4_ID": "G-MYID",
    "MFE_CONFIG": {
        "GOOGLE_ANALYTICS_4_ID": "G-MYID"
    }
}

I also set a tutor plugin of

from tutor import hooks
hooks.Filters.ENV_PATCHES.add_items([
    (
        "openedx-common-settings",
        "GOOGLE_ANALYTICS_4_ID = 'G-MYID'"
    ),
    (
        "mfe-lms-common-settings",
        "MFE_CONFIG['GOOGLE_ANALYTICS_4_ID'] = 'G-MYID'"
    ),
])

(Though I think the Site Configuration overules what’s in the tutor plugin, since I had a typo to start with and the Site Configuration was being used instead of the tutor plugin.)

But like I say, it’s only showing up as tracking activity on the front page, not any interior class pages. Is this expected to be working on Palm?

15

@arbrandes additionally I believe google analytics 4 may be breaking the generation of certificates? Does the “ga_4_id” in the below error refer to the Google Analytics 4 ID? The below is the error I get when I simply try to preview the certificate on a test page. (And when I remove the GA4 stuff it seems to go away…)

lms-1                | 2024-04-11 11:31:13,043 INFO 7 [lms.djangoapps.certificates.views.webview] [user 3] [ip 45.88.220.222] webview.py:598 - certificate language is: en for the course: course-v1:deleteme_test2+deleteme_test2+deleteme_test2
lms-1                | 2024-04-11 11:31:13,054 ERROR 7 [common.djangoapps.util.views] [user 3] [ip 45.88.220.222] views.py:148 - Error in django view.
lms-1                | Traceback (most recent call last):
lms-1                |   File "/openedx/edx-platform/common/djangoapps/util/views.py", line 139, in inner
lms-1                |     return func(request, *args, **kwargs)
lms-1                |   File "/openedx/venv/lib/python3.8/site-packages/edx_django_utils/plugins/pluggable_override.py", line 77, in wrapper
lms-1                |     return prev_fn(*args, **kwargs)
lms-1                |   File "/openedx/edx-platform/./lms/djangoapps/certificates/views/webview.py", line 666, in render_html_view
lms-1                |     response = _render_valid_certificate(request, context, custom_template)
lms-1                |   File "/openedx/edx-platform/./lms/djangoapps/certificates/views/webview.py", line 756, in _render_valid_certificate
lms-1                |     return render_to_response("certificates/valid.html", context)
lms-1                |   File "/openedx/edx-platform/common/djangoapps/edxmako/shortcuts.py", line 188, in render_to_response
lms-1                |     return HttpResponse(render_to_string(template_name, dictionary, namespace, request), **kwargs)
lms-1                |   File "/openedx/edx-platform/common/djangoapps/edxmako/shortcuts.py", line 178, in render_to_string
lms-1                |     return template.render(dictionary, request)
lms-1                |   File "/openedx/edx-platform/common/djangoapps/edxmako/template.py", line 82, in render
lms-1                |     return self.mako_template.render_unicode(**context_dictionary)
lms-1                |   File "/openedx/venv/lib/python3.8/site-packages/mako/template.py", line 444, in render_unicode
lms-1                |     return runtime._render(
lms-1                |   File "/openedx/venv/lib/python3.8/site-packages/mako/runtime.py", line 874, in _render
lms-1                |     _render_context(
lms-1                |   File "/openedx/venv/lib/python3.8/site-packages/mako/runtime.py", line 916, in _render_context
lms-1                |     _exec_template(inherit, lclcontext, args=args, kwargs=kwargs)
lms-1                |   File "/openedx/venv/lib/python3.8/site-packages/mako/runtime.py", line 943, in _exec_template
lms-1                |     callable_(context, *args, **kwargs)
lms-1                |   File "/tmp/mako_lms/1ff981c2157d500713c1ce6bf7fdbce2/certificates/accomplishment-base.html.py", line 95, in render_body
lms-1                |     __M_writer(js_escaped_string(ga_4_id ))
lms-1                | TypeError: 'Undefined' object is not callable
lms-1                | [pid: 7|app: 0|req: 127/457] 172.18.0.4 () {60 vars in 3737 bytes} [Thu Apr 11 11:31:13 2024] GET /certificates/course/course-v1:deleteme_test2+deleteme_test2+deleteme_test2?preview=honor => generated 10105 bytes in 79 msecs (HTTP/1.1 200) 7 headers in 502 bytes (1 switches on core 0)
16

Please see this PR to fix an error on certificate page: fix: add missing function import in certificate template (#33904) by kaustavb12 · Pull Request #34171 · openedx/edx-platform · GitHub.

Also, this commit was cherry-picked into palm.master in this PR, can you try to switch your tutor installation to palm.master branch and check if this error still can be reproduced?