Inject gtm code conditionally #2167
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
adamziel
reviewed
Mar 11, 2025
| 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.
|
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.