diff --git a/packages/playground/website/vite-analytics-plugin.ts b/packages/playground/website/vite-analytics-plugin.ts
new file mode 100644
index 0000000000..6a3a8f390e
--- /dev/null
+++ b/packages/playground/website/vite-analytics-plugin.ts
@@ -0,0 +1,135 @@
+/* eslint-disable no-console */
+import { Plugin } from 'vite';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+// Plugin options interface
+interface AnalyticsPluginOptions {
+ verbose?: boolean;
+}
+
+/**
+ * Vite plugin to inject Google Analytics into the head tag of HTML files
+ *
+ * @param options Plugin options
+ * @returns {Plugin} A Vite plugin that processes HTML files during build
+ */
+export function analyticsInjectionPlugin(
+ options: AnalyticsPluginOptions = {}
+): Plugin {
+ // Default options
+ const { verbose = false } = options;
+
+ // Shared analytics script template
+ const getAnalyticsScript = (id: string) => {
+ return `
+
+
+`;
+ };
+
+ // Helper function for conditional logging
+ 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);
+ }
+ };
+
+ return {
+ name: 'vite-plugin-analytics-injection',
+ apply: 'build', // Only apply during build, not dev
+
+ writeBundle(options, bundle) {
+ const googleAnalyticsId = process.env.VITE_GOOGLE_ANALYTICS_ID;
+
+ if (!googleAnalyticsId) {
+ log(
+ 'Google Analytics disabled - no tracking will be added to HTML files.'
+ );
+ return;
+ }
+
+ log('Processing HTML files for Google Analytics injection...');
+
+ // Files to process - include all HTML files that need analytics
+ const htmlFiles = [
+ 'index.html',
+ 'wordpress.html',
+ 'gutenberg.html',
+ ];
+ const outputDir = options.dir || '';
+
+ let processedCount = 0;
+ let skippedCount = 0;
+ let notFoundCount = 0;
+
+ htmlFiles.forEach((htmlFile) => {
+ const outputPath = join(outputDir, htmlFile);
+
+ if (existsSync(outputPath)) {
+ log(`Processing ${htmlFile} for analytics...`);
+
+ try {
+ // Read file
+ const content = readFileSync(outputPath, 'utf8');
+
+ // Check if the file already has analytics (to avoid duplicate injection)
+ if (
+ content.includes(
+ `gtag('config', '${googleAnalyticsId}')`
+ )
+ ) {
+ log(
+ `Analytics already present in ${htmlFile}, skipping.`
+ );
+ skippedCount++;
+ return;
+ }
+
+ // Find the closing head tag
+ const headCloseIndex = content.indexOf('');
+ if (headCloseIndex === -1) {
+ log(
+ `Could not find tag in ${htmlFile}, skipping.`,
+ true
+ );
+ skippedCount++;
+ return;
+ }
+
+ // Insert the analytics script right before the closing head tag
+ const analyticsScript =
+ getAnalyticsScript(googleAnalyticsId);
+ const updatedContent =
+ content.substring(0, headCloseIndex) +
+ analyticsScript +
+ content.substring(headCloseIndex);
+
+ // Write back
+ writeFileSync(outputPath, updatedContent, 'utf8');
+ log(`Successfully injected analytics into ${htmlFile}`);
+ processedCount++;
+ } catch (error) {
+ log(`Error processing ${htmlFile}: ${error}`, true);
+ }
+ } else {
+ log(`File not found in build directory: ${outputPath}`);
+ notFoundCount++;
+ }
+ });
+
+ // Always show summary even in non-verbose mode
+ if (processedCount > 0) {
+ log(
+ `Analytics injection: ${processedCount} files processed, ${skippedCount} skipped, ${notFoundCount} not found.`
+ );
+ }
+ },
+ };
+}
diff --git a/packages/playground/website/vite.config.ts b/packages/playground/website/vite.config.ts
index b973bb0c06..532ab8e125 100644
--- a/packages/playground/website/vite.config.ts
+++ b/packages/playground/website/vite.config.ts
@@ -22,6 +22,7 @@ import { buildVersionPlugin } from '../../vite-extensions/vite-build-version';
import { listAssetsRequiredForOfflineMode } from '../../vite-extensions/vite-list-assets-required-for-offline-mode';
import { addManifestJson } from '../../vite-extensions/vite-manifest';
import virtualModule from '../../vite-extensions/vite-virtual-module';
+import { analyticsInjectionPlugin } from './vite-analytics-plugin';
const proxy: CommonServerOptions['proxy'] = {
'^/plugin-proxy': {
@@ -40,6 +41,9 @@ export default defineConfig(({ command, mode }) => {
? 'https://wordpress-playground-cors-proxy.net/?'
: 'http://127.0.0.1:5263/cors-proxy.php?';
+ // Check for verbose mode
+ const isVerbose = process.argv.includes('--verbose');
+
return {
// Split traffic from this server on dev so that the iframe content and
// outer content can be served from the same origin. In production it's
@@ -77,6 +81,7 @@ export default defineConfig(({ command, mode }) => {
},
},
plugins: [
+ analyticsInjectionPlugin({ verbose: isVerbose }),
react({
jsxRuntime: 'automatic',
}),