feat(google-analytics): support multiple measurement ids

Author: caugner

Diff for: .github/workflows/prod-build.yml

@@ -195,7 +195,7 @@ jobs:
           # If it's used on other domains (e.g. stage or dev builds), it's OK
           # because ultimately Google Analytics will filter it out since the
           # origin domain isn't what that account expects.
-          BUILD_GOOGLE_ANALYTICS_MEASUREMENT_ID: UA-36116321-5
+          BUILD_GOOGLE_ANALYTICS_MEASUREMENT_ID: UA-36116321-5,G-PWTK27XVWP
 
           # This enables the MDN Plus
           REACT_APP_ENABLE_PLUS: true

Diff for: docs/envvars.md

@@ -151,6 +151,12 @@ If set, the rendered HTML will have a Google Analytics snippet. For example, to
 test use: `export BUILD_GOOGLE_ANALYTICS_MEASUREMENT_ID=G-XXXXXXXX`. By default
 it's disabled (empty string).
 
+For dual tagging (UA + GA4), multiple IDs can be separated by a comma:
+
+```env
+export BUILD_GOOGLE_ANALYTICS_MEASUREMENT_ID=UA-00000000-0,G-XXXXXXXX
+```
+
 ### `BUILD_ALWAYS_ALLOW_ROBOTS`
 
 **Default: `false`**

Diff for: tool/cli.ts

@@ -867,8 +867,8 @@ program
     default: path.join(BUILD_OUT_ROOT, "static", "js", "gtag.js"),
   })
   .option(
-    "--measurement-id <id>",
-    "Google Analytics measurement ID (defaults to value of $GOOGLE_ANALYTICS_MEASUREMENT_ID)",
+    "--measurement-id <id>[,<id>]",
+    "Google Analytics measurement IDs (defaults to value of $GOOGLE_ANALYTICS_MEASUREMENT_ID)",
     {
       default: GOOGLE_ANALYTICS_MEASUREMENT_ID,
     }
@@ -877,15 +877,17 @@ program
     tryOrExit(
       async ({ options, logger }: GoogleAnalyticsCodeActionParameters) => {
         const { outfile, measurementId } = options;
-        if (measurementId) {
+        const measurementIds = measurementId.split(",").filter(Boolean);
+        if (measurementIds.length) {
           const dntHelperCode = fs
             .readFileSync(
               new URL("mozilla.dnthelper.min.js", import.meta.url),
               "utf-8"
             )
             .trim();
 
-          const gaScriptURL = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(measurementId)}`;
+          const firstMeasurementId = measurementIds.at(0);
+          const gaScriptURL = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(firstMeasurementId)}`;
 
           const code = `
 // Mozilla DNT Helper
@@ -895,7 +897,9 @@ if (Mozilla && !Mozilla.dntEnabled()) {
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
-  gtag('config', '${measurementId}', { 'anonymize_ip': true });
+  ${measurementIds
+    .map((id) => `gtag('config', '${id}', { 'anonymize_ip': true });`)
+    .join("\n  ")}
 
   var gaScript = document.createElement('script');
   gaScript.async = true;