Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add a Google Tag Manager loader #12

Merged
merged 2 commits into from
Nov 13, 2024
Merged

Conversation

dcoa
Copy link

@dcoa dcoa commented Nov 6, 2024

Description
This PR create a loader function in the component footer to add GTM scripts into the MFE.

This PR is a simplified version of the upstream proposal openedx/frontend-platform#631

How to test

  1. Create a new environment and integrate the current footer in the MFEs.
  2. Configure the loader with GOOGLE_TAG_MANAGER_ID and GOOGLE_TAG_MANAGER_ENVIRONMENT, as the example:
MFE_CONFIG["GOOGLE_TAG_MANAGER_ID"]="GTM-WHZV2TB"
MFE_CONFIG["GOOGLE_TAG_MANAGER_ENVIRONMENT"]="&gtm_auth=hufwZYrqT6ksy4j52734fw&gtm_preview=env-83&gtm_cookies_win=x"
  1. Go to the browser and inspect the html to check the scripts loaded.

@dcoa dcoa marked this pull request as ready for review November 6, 2024 03:12
@igobranco
Copy link
Member

@dcoa
I started up the tutor dev with your PR footer, but the learning MFE didn't startup, the browser console shows this error:

Module configuration error: GOOGLE_TAG_MANAGER_ID is required by ProcessEnvConfigService
Module configuration error: GOOGLE_TAG_MANAGER_ENVIRONMENT is required by ProcessEnvConfigService.

I double checked that the mfe_config API for the learning MFE is returning the right configurations:
http://apps.test06.nau.fccn.pt:2000/api/mfe_config/v1?mfe=learning

{
....
    "GOOGLE_TAG_MANAGER_ID": "GTM-WHZV2TB",
    "GOOGLE_TAG_MANAGER_ENVIRONMENT": "&gtm_auth=hufwZYrqT6ksy4j52734fw&gtm_preview=env-83&gtm_cookies_win=x",
....
}

Additionally can you rebase with the latest commits?

@dcoa
Copy link
Author

dcoa commented Nov 11, 2024

I made the changes could you try again? @igobranco

@igobranco
Copy link
Member

@dcoa what changes? Now I don't see it the console error, but it still not working. Are you really loading the GTM JS? Are you seeing any UI change on the right lower side of the screen?
I'm seeing a couple of warning on the console, with its stacktrace, but the spinner never ends... when I checkout the nau/redwood.master branch the webpack recompiles and the MFE works. When I checkout this PR branch it won't work.

@dcoa
Copy link
Author

dcoa commented Nov 13, 2024

@igobranco could you try one more time?, thanks.

Screenshot from 2024-11-13 11-28-55

Copy link
Member

@igobranco igobranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dcoa LGTM ✔️
I have confirmed that GTM is loading!
I had to apply some configuration changes on GTM triggers configuration to load the external libraries: CookieScript and our Vasco Chatbot. So they can be loaded using any tutor local URL/domain.
image

@igobranco igobranco merged commit 4072edd into nau/redwood.master Nov 13, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants