@owlmeans/web-gtm 0.1.18-rc.2

package/build/index.d.ts

@@ -0,0 +1,30 @@
+import type { ConsentOptions } from '@owlmeans/consent';
+export interface GtmOptions extends ConsentOptions {
+    /** Container id, e.g. `GTM-XXXXXXX`. */
+    id: string;
+    /** The queue name, when a page runs more than one container. */
+    dataLayerName?: string;
+}
+/**
+ * The inline `<head>` snippet, consent first and the container second.
+ *
+ * The ORDER is the whole point of this package. Google Tag Manager decides what a tag may do from
+ * the consent state present when the container loads, and a React bundle cannot get there first —
+ * by the time an island mounts, the container has been running for hundreds of milliseconds. A
+ * site whose defaults arrive after `gtm.js` is not configured differently; it is unconfigured for
+ * the window that matters, and nothing in the page reports it.
+ *
+ * Emit this into the document head, above everything else, as an inline script.
+ */
+export declare const gtmHeadScript: (opts: GtmOptions) => string;
+/** The `<noscript>` iframe, for the body. */
+export declare const gtmNoscriptFrame: (opts: GtmOptions) => string;
+/**
+ * Load the container from script, for a host that cannot emit into its own head.
+ *
+ * The head snippet is strictly better and should be preferred; this exists for a single-page app
+ * whose HTML is not ours to edit. It still pushes the defaults first, and it still refuses to load
+ * a second time.
+ */
+export declare const loadGtm: (opts: GtmOptions) => void;
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvD,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,SAAU,UAAU,KAAG,MAWhD,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,SAAU,UAAU,KAAG,MAEsB,CAAA;AAE1E;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,SAAU,UAAU,KAAG,IAkB1C,CAAA"}

package/build/index.js

@@ -0,0 +1,52 @@
+import { consentBootstrapScript, consentStore } from '@owlmeans/consent';
+/**
+ * The inline `<head>` snippet, consent first and the container second.
+ *
+ * The ORDER is the whole point of this package. Google Tag Manager decides what a tag may do from
+ * the consent state present when the container loads, and a React bundle cannot get there first —
+ * by the time an island mounts, the container has been running for hundreds of milliseconds. A
+ * site whose defaults arrive after `gtm.js` is not configured differently; it is unconfigured for
+ * the window that matters, and nothing in the page reports it.
+ *
+ * Emit this into the document head, above everything else, as an inline script.
+ */
+export const gtmHeadScript = (opts) => {
+    const layer = opts.dataLayerName ?? 'dataLayer';
+    return `${consentBootstrapScript(opts)};` +
+        `(function(w,d,s,l,i){w[l]=w[l]||[];` +
+        `w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});` +
+        `var f=d.getElementsByTagName(s)[0],j=d.createElement(s),` +
+        `dl=l!='dataLayer'?'&l='+l:'';j.async=true;` +
+        `j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;` +
+        `f.parentNode.insertBefore(j,f)})` +
+        `(window,document,'script',${JSON.stringify(layer)},${JSON.stringify(opts.id)})`;
+};
+/** The `<noscript>` iframe, for the body. */
+export const gtmNoscriptFrame = (opts) => `<iframe src="https://www.googletagmanager.com/ns.html?id=${encodeURIComponent(opts.id)}"` +
+    ` height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
+/**
+ * Load the container from script, for a host that cannot emit into its own head.
+ *
+ * The head snippet is strictly better and should be preferred; this exists for a single-page app
+ * whose HTML is not ours to edit. It still pushes the defaults first, and it still refuses to load
+ * a second time.
+ */
+export const loadGtm = (opts) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const marker = `owl-gtm-${opts.id}`;
+    if (document.getElementById(marker) != null) {
+        return;
+    }
+    // Defaults before the container, every time — the same rule the head snippet exists to keep.
+    consentStore.init(opts);
+    const layer = opts.dataLayerName ?? 'dataLayer';
+    const script = document.createElement('script');
+    script.id = marker;
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(opts.id)}`
+        + (layer !== 'dataLayer' ? `&l=${encodeURIComponent(layer)}` : '');
+    document.head.appendChild(script);
+};
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAUxE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAgB,EAAU,EAAE;IACxD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,WAAW,CAAA;IAE/C,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,GAAG;QACvC,qCAAqC;QACrC,+DAA+D;QAC/D,0DAA0D;QAC1D,4CAA4C;QAC5C,2DAA2D;QAC3D,kCAAkC;QAClC,6BAA6B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAA;AACpF,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAgB,EAAU,EAAE,CAC3D,4DAA4D,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG;IAC1F,wEAAwE,CAAA;AAE1E;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAgB,EAAQ,EAAE;IAChD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAM;IACR,CAAC;IACD,MAAM,MAAM,GAAG,WAAW,IAAI,CAAC,EAAE,EAAE,CAAA;IACnC,IAAI,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QAC5C,OAAM;IACR,CAAC;IACD,6FAA6F;IAC7F,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAEvB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,WAAW,CAAA;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,EAAE,GAAG,MAAM,CAAA;IAClB,MAAM,CAAC,KAAK,GAAG,IAAI,CAAA;IACnB,MAAM,CAAC,GAAG,GAAG,8CAA8C,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;UACpF,CAAC,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACpE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;AACnC,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@owlmeans/web-gtm",
+  "version": "0.1.18-rc.2",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 2 && nodemon -e ts,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty",
+    "test": "bun test ./tests"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@owlmeans/consent": "^0.1.18-rc.2"
+  },
+  "devDependencies": {
+    "@owlmeans/dep-config": "workspace:*",
+    "@types/bun": "^1.4.0",
+    "nodemon": "^3.1.14",
+    "typescript": "^7.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,65 @@
+import { consentBootstrapScript, consentStore } from '@owlmeans/consent'
+import type { ConsentOptions } from '@owlmeans/consent'
+
+export interface GtmOptions extends ConsentOptions {
+  /** Container id, e.g. `GTM-XXXXXXX`. */
+  id: string
+  /** The queue name, when a page runs more than one container. */
+  dataLayerName?: string
+}
+
+/**
+ * The inline `<head>` snippet, consent first and the container second.
+ *
+ * The ORDER is the whole point of this package. Google Tag Manager decides what a tag may do from
+ * the consent state present when the container loads, and a React bundle cannot get there first —
+ * by the time an island mounts, the container has been running for hundreds of milliseconds. A
+ * site whose defaults arrive after `gtm.js` is not configured differently; it is unconfigured for
+ * the window that matters, and nothing in the page reports it.
+ *
+ * Emit this into the document head, above everything else, as an inline script.
+ */
+export const gtmHeadScript = (opts: GtmOptions): string => {
+  const layer = opts.dataLayerName ?? 'dataLayer'
+
+  return `${consentBootstrapScript(opts)};` +
+    `(function(w,d,s,l,i){w[l]=w[l]||[];` +
+    `w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});` +
+    `var f=d.getElementsByTagName(s)[0],j=d.createElement(s),` +
+    `dl=l!='dataLayer'?'&l='+l:'';j.async=true;` +
+    `j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;` +
+    `f.parentNode.insertBefore(j,f)})` +
+    `(window,document,'script',${JSON.stringify(layer)},${JSON.stringify(opts.id)})`
+}
+
+/** The `<noscript>` iframe, for the body. */
+export const gtmNoscriptFrame = (opts: GtmOptions): string =>
+  `<iframe src="https://www.googletagmanager.com/ns.html?id=${encodeURIComponent(opts.id)}"` +
+  ` height="0" width="0" style="display:none;visibility:hidden"></iframe>`
+
+/**
+ * Load the container from script, for a host that cannot emit into its own head.
+ *
+ * The head snippet is strictly better and should be preferred; this exists for a single-page app
+ * whose HTML is not ours to edit. It still pushes the defaults first, and it still refuses to load
+ * a second time.
+ */
+export const loadGtm = (opts: GtmOptions): void => {
+  if (typeof document === 'undefined') {
+    return
+  }
+  const marker = `owl-gtm-${opts.id}`
+  if (document.getElementById(marker) != null) {
+    return
+  }
+  // Defaults before the container, every time — the same rule the head snippet exists to keep.
+  consentStore.init(opts)
+
+  const layer = opts.dataLayerName ?? 'dataLayer'
+  const script = document.createElement('script')
+  script.id = marker
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtm.js?id=${encodeURIComponent(opts.id)}`
+    + (layer !== 'dataLayer' ? `&l=${encodeURIComponent(layer)}` : '')
+  document.head.appendChild(script)
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "@owlmeans/dep-config/tsconfig.base.json"
+  ],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "rootDir": "./src/",
+    "outDir": "./build/"
+  },
+  "exclude": ["./dist/**/*", "./build/**/*", "./tests/**/*", "./*.ts"]
+}