@escape-game-over/atlas 0.1.44 → 0.1.45

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.44",
+    "version": "0.1.45",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,

package/src/analytics/google.ts

@@ -345,7 +345,7 @@ export function googleEmits(
 }
 
 /**
- * Google's tags: a connection and one inline block and the loader in the head,
+ * Google's tags: a connection and one inline block in the head,
  * Tag Manager's `<noscript>` fallback in the body.
  *
  * One block rather than several because `dataLayer` is a queue — consent, the
@@ -424,6 +424,7 @@ export function googleScripts(
             : "",
         tags.length > 0 ? "gtag('js',new Date());" : "",
         ...tags.map((id) => `gtag('config',${literal(id)});`),
+        loader(tags[0]),
         // Tag Manager's own loader, once per container. It appends its script
         // itself, so it runs after the consent calls already queued above.
         ...containers.map(
@@ -432,35 +433,14 @@ export function googleScripts(
         ),
     ].join("");
 
-    // The library is fetched once, for the first id, and every id gets its own
-    // `config` above. That is Google's documented arrangement rather than a
-    // shortcut: *"A single Google tag can have multiple tag IDs"*, and their
-    // own example loads `gtag/js?id=G-XXXXXX` once and then configures
-    // `GT-XXXXXX` and `DC-ZZZZZZ` against it. The `?id=` only bootstraps the
-    // library; the `config` calls are what register a destination.
-    //
-    // Loading it per id would fetch the same script several times and re-run
-    // its bootstrap — more bytes for nothing, and a second copy of a global.
-    //
-    // <https://developers.google.com/tag-platform/gtagjs/configure>
-    const first = tags[0];
     return {
         head: [
             // Ahead of the inline block, which is the only position that buys
-            // anything: for a container the loader's URL is written *by* that
-            // block, so this is the only mention of the origin the browser can
-            // act on before the script has run.
+            // anything: both loaders' URLs are written *by* that block, so this
+            // is the only mention of the origin the browser can act on before
+            // the script has run.
             preconnect(TAG_ORIGIN),
             { kind: "script", content: inline },
-            ...(first === undefined
-                ? []
-                : [
-                      {
-                          kind: "externalScript" as const,
-                          src: `${TAG_ORIGIN}/gtag/js?id=${encodeURIComponent(first)}`,
-                          attrs: {},
-                      },
-                  ]),
         ],
         // One per container, and only for Tag Manager: GA4 has no such
         // fallback, because `gtag.js` is the only way it collects anything.
@@ -470,3 +450,31 @@ export function googleScripts(
         })),
     };
 }
+
+/**
+ * `gtag.js`, appended once the page has loaded.
+ *
+ * Its parse and first run — including a forced reflow of its own — otherwise
+ * compete with the page for the load window. Nothing is lost by waiting:
+ * `dataLayer` is a queue, and every call above is replayed when it arrives.
+ * What waiting costs is a visitor who leaves before `load`, who is not counted.
+ *
+ * The library is fetched once, for the first id, and every id gets its own
+ * `config` above. That is Google's documented arrangement rather than a
+ * shortcut: *"A single Google tag can have multiple tag IDs"*, and their
+ * own example loads `gtag/js?id=G-XXXXXX` once and then configures
+ * `GT-XXXXXX` and `DC-ZZZZZZ` against it. The `?id=` only bootstraps the
+ * library; the `config` calls are what register a destination.
+ *
+ * Loading it per id would fetch the same script several times and re-run
+ * its bootstrap — more bytes for nothing, and a second copy of a global.
+ *
+ * <https://developers.google.com/tag-platform/gtagjs/configure>
+ */
+function loader(first: string | undefined): string {
+    if (first === undefined) return "";
+    const src = literal(
+        `${TAG_ORIGIN}/gtag/js?id=${encodeURIComponent(first)}`
+    );
+    return `(function(){function l(){var s=document.createElement('script');s.async=true;s.src=${src};document.head.appendChild(s)}document.readyState==='complete'?l():addEventListener('load',l)})();`;
+}