Inject gtm code conditionally #2167
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. |
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.