Conversation
This commit adds the ability to configure or disable Google Analytics tracking in self-hosted WordPress Playground instances through environment variables. The implementation uses Vite's template syntax for conditional inclusion at build time, ensuring no analytics code is included in the final HTML when analytics is disabled. Changes: - Update index.html to use Vite template conditionals for Google Analytics - Add .env and .env.example files with default configuration - Add CONFIGURATION.md with documentation on available options - Update .gitignore to handle local environment files properly - Add reference to configuration options in README.md
Adds a Vite plugin that silently injects Google Tag Manager code into HTML files during build when VITE_GOOGLE_ANALYTICS_ID is set. Plugin respects --verbose flag for detailed logging and maintains clean HTML formatting.
| const log = (msg: string, isError = false) => { | ||
| // Only log if it's an error or verbose mode is enabled | ||
| if (isError || verbose) { | ||
| isError ? console.error(msg) : console.log(msg); |
There was a problem hiding this comment.
Nitpick: linter complains about the console statement. It is configured this way to enforce using the logger module in Playground code, but this is just a build script and the rule doesn't really apply. Feel free to silence this check for these lines of for the entire file.
There was a problem hiding this comment.
I agree. I've added the ignore rule for the entire file.
|
Looks great, thank you! My only request would be to add a Playgwright E2E test in packages/playground/website/playwright/e2e/website-ui.spec.ts to make sure CI will tell us if and when this check breaks. As for the current CI test failures – they are unrelated to this PR. |
|
Hey @adamziel 👋 I've added a test for the default case, when the VITE_GOOGLE_ANALYTICS_ID constant is not present (which means no code should be printed). I'm not sure if I can create a test that checks when the VITE_GOOGLE_ANALYTICS_ID is present. For that, I would have to create the |
|
I'm away for the week so I'll defer to @bgrgicak for the answer and approval |
| test('should not load GTM code when VITE_GOOGLE_ANALYTICS_ID is missing', async ({ | ||
| website, | ||
| }) => { | ||
| await website.goto('./'); | ||
|
|
||
| // By default, the VITE_GOOGLE_ANALYTICS_ID is not set, so GTM should not be loaded | ||
| // Check if GTM script is not present in the head | ||
| const gtmScript = await website.page | ||
| .locator('script[src*="googletagmanager.com"]') | ||
| .count(); | ||
| expect(gtmScript).toBe(0); | ||
| }); |
There was a problem hiding this comment.
@andreilupu can we please add a test that confirms GTM is loaded, and window.gtag is defined, if the VITE_GOOGLE_ANALYTICS_ID environment variable is provided?
|
Before we merge this PR we need to ensure the production Playground website builds with @andreilupu we should be able to do this by adding the It's not sensitive info, so adding it to the .yml file seems ok. |
|
This PR seems stale so I'll close it. Feel free to reopen at any point but also no pressure – it can stay closed and that's fine. |
…#3322) ## Note This PR was already discussed once in this [issue](#2167), and in the past I've already provided [this PR](#2167), but it got stale, life happened, and I missed the memo. I'm trying a second time with a fresh rebase from upstream/trunk. ## Summary Remove hardcoded GA4 scripts from `index.html`, `wordpress.html`, and `gutenberg.html`. Introduce a Vite plugin that injects the gtag snippet at build time only when the `VITE_GOOGLE_ANALYTICS_ID` environment variable is set and passes a strict format check (`G-XXXXXXXXXX`). The production deploy workflow on playground.wordpress.net now supplies the measurement ID through its build step `env` block, so the existing behavior on playground.wordpress.net is preserved. Self-hosted instances that omit the variable ship no analytics code at all. ## Motivation for the change, related issues This needs to be implemented; otherwise, all the self-hosted instances of Playground will report to the Google Analytics property connected to playground.wordpress.net ## Implementation details I've created a Vite Plugin that inserts the GA4 code only when there is a specific env variable present ## Testing Instructions (or ideally a Blueprint) This doesn't affect Playground itself, only the website files, so I'm not sure how to test it other than check if the code source has the GA4 code when the `VITE_GOOGLE_ANALYTICS_ID` is present. --------- Co-authored-by: Claude Opus 4.6 <[email protected]> Co-authored-by: Bero <[email protected]>
3 participants
Motivation for the change, related issues
Since WordPress Playground can be self-hosted, the GTM code should be configurable for those wanting to self-host.
The initial discussion was here
Implementation details
Sadly I found out that vite doesn't support if conditions
.htmltemplates so my initial implementation with<? if(...) ?>didn't work.So what I did was:
.env.examplefile and .gitignored the one that should be in production.index.htmlbut alsogutenberg.htmlandwordpress.htmlTesting Instructions (or ideally a Blueprint)
.env.localfile inpackages/playground/websitewhere you need to add a variable like this:npm run build:websitecommand.dist/packages/playground/wasm-wordpress-net/index.htmlfile. There, you should find the GTM code with the id you've inserted.VITE_GOOGLE_ANALYTICS_IDvariable, or without a.env.localfile. In this case, the GTM code should not be present.