google tag manager integration

.gitignore

@@ -4,4 +4,5 @@ node_modules/
 /lib/
 /react/
 /tests/~partytown/
-/tests/videos/
+/tests/videos/
+/tsc/

package.json

@@ -14,7 +14,7 @@
     "/react/"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "tsc && rollup -c",
     "dev": "rollup -c -w --configDev",
     "serve": "sirv tests --port 4000 --dev",
     "serve.test": "sirv tests --port 5000  --dev --quiet",
@@ -26,21 +26,21 @@
     "test.webkit": "start-server-and-test serve.test http://localhost:5000/ playwright.webkit"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.18.8",
-    "@playwright/test": "^1.14.0",
+    "@microsoft/api-extractor": "^7.18.9",
+    "@playwright/test": "^1.14.1",
     "@rollup/plugin-typescript": "^8.2.5",
     "@types/fs-extra": "^9.0.12",
     "fs-extra": "^10.0.0",
     "gzip-size": "^6.0.0",
     "np": "^7.5.0",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.0",
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "sirv-cli": "^1.0.14",
-    "start-server-and-test": "^1.13.1",
+    "start-server-and-test": "^1.14.0",
     "ts-jest": "^27.0.5",
     "tslib": "^2.3.1",
-    "typescript": "^4.3.5"
+    "typescript": "^4.4.3"
   },
   "prettier": {
     "trailingComma": "es5",

src/integrations/gtm.ts

@@ -0,0 +1,9 @@
+/**
+ * https://developers.google.com/tag-manager/quickstart
+ */
+export const googleTagManager = (containerId: string) => `
+/* Google Tag Manager */
+(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','dataLayer',${JSON.stringify(
+  containerId
+)});
+/* End Google Tag Manager */`;

src/integrations/utils.ts

@@ -0,0 +1,9 @@
+export { PT_SCRIPT_TYPE } from '../lib/utils';
+
+export const appendForwardConfig = (forwardConfig: string) =>
+  [
+    `(function(w,p,f,c){`,
+    `c=w[p]=w[p]||{};`,
+    `(c[f]=c[f]||[]).push(${JSON.stringify(forwardConfig)})`,
+    `})(window,'partytown','forward');`,
+  ].join('');

src/react/api-extractor.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "bundledPackages": [],
+  "bundledPackages": ["react"],
   "compiler": {
     "tsconfigFilePath": "<projectFolder>/tsconfig.json"
   },
-  "mainEntryPointFilePath": "<projectFolder>/src/react/api.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/tsc/react/index.d.ts",
   "apiReport": {
     "enabled": true,
     "reportFileName": "api.md",

src/react/api.md

@@ -4,13 +4,25 @@
 
 ```ts
 
-// @alpha (undocumented)
-export function Partytown(props?: PartytownProps): any;
+// @public
+export const GoogleTagManager: ({ containerId }: GoogleTagManagerProps) => any;
 
-// Warning: (ae-forgotten-export) The symbol "PartytownConfig" needs to be exported by the entry point api.d.ts
+// @public
+export const GoogleTagManagerNoScript: ({ containerId }: GoogleTagManagerProps) => any;
+
+// @public
+export type GoogleTagManagerProps = {
+    containerId: string;
+};
+
+// @public
+export const Partytown: (props?: PartytownProps | undefined) => any;
+
+// Warning: (ae-forgotten-export) The symbol "PartytownConfig" needs to be exported by the entry point index.d.ts
 //
-// @alpha (undocumented)
-export type PartytownProps = PartytownConfig;
+// @public
+export interface PartytownProps extends PartytownConfig {
+}
 
 // (No @packageDocumentation comment for this package)
 

src/react/index.ts

@@ -0,0 +1,7 @@
+export { Partytown, PartytownProps } from './partytown';
+
+export {
+  GoogleTagManager,
+  GoogleTagManagerNoScript,
+  GoogleTagManagerProps,
+} from './integrations/gtm';

src/react/integrations/gtm.tsx

@@ -0,0 +1,60 @@
+import React, { Fragment } from 'react';
+import { googleTagManager } from '../../integrations/gtm';
+import { appendForwardConfig, PT_SCRIPT_TYPE } from '../../integrations/utils';
+
+/**
+ * https://developers.google.com/tag-manager/quickstart
+ *
+ * @public
+ */
+export type GoogleTagManagerProps = {
+  /**
+   * Google Tag Manager Container ID, formatted as GTM-XXXXXX
+   */
+  containerId: string;
+};
+
+/**
+ * The Google Tag Manager Partytown component should be added after the opening `<head>`
+ * tag, but before the `<Partytown/>` component. This component will add the
+ * [Data Layer](https://developers.google.com/tag-manager/devguide) to the main thread
+ * window, and will load GTM within the web worker. Any updates to `dataLayer.push(...)`
+ * will be forwarded to the Partytown web worker.
+ *
+ * https://developers.google.com/tag-manager/quickstart
+ *
+ * @public
+ */
+export const GoogleTagManager = ({ containerId }: GoogleTagManagerProps): any => (
+  <Fragment>
+    <script
+      dangerouslySetInnerHTML={{
+        __html: appendForwardConfig('dataLayer.push'),
+      }}
+    />
+    <script
+      type={PT_SCRIPT_TYPE}
+      dangerouslySetInnerHTML={{
+        __html: googleTagManager(containerId),
+      }}
+    />
+  </Fragment>
+);
+
+/**
+ * The GTM No Script component should be added immediately after the opening `<body>` tag.
+ *
+ * https://developers.google.com/tag-manager/quickstart
+ *
+ * @public
+ */
+export const GoogleTagManagerNoScript = ({ containerId }: GoogleTagManagerProps): any => (
+  <noscript>
+    <iframe
+      src={'https://www.googletagmanager.com/ns.html?id=' + encodeURIComponent(containerId)}
+      height="0"
+      width="0"
+      style={{ display: 'none', visibility: 'hidden' }}
+    ></iframe>
+  </noscript>
+);

src/react/partytown.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { PartytownConfig } from '../lib/types';
+import PartytownSnippet from '@snippet';
+
+/**
+ * Props for `<Partytown/>`, which extends the Partytown Config.
+ *
+ * https://github.com/BuilderIO/partytown#config
+ *
+ * @public
+ */
+export interface PartytownProps extends PartytownConfig {}
+
+/**
+ * The React `<Partytown/>` component should be placed within the `<head>`
+ * of the document, and after any integrations such as `<GoogleTagManager/>`.
+ *
+ * @public
+ */
+export const Partytown = (props?: PartytownProps): any => {
+  props = { ...props };
+  const forward = props.forward || [];
+  delete props.forward;
+
+  const config = [
+    `(function(w,p,f,c){`,
+    Object.keys(props).length > 0
+      ? `c=w[p]=Object.assign(w[p]||{},${JSON.stringify(props)});`
+      : `c=w[p]=w[p]||{};`,
+    `c[f]=(c[f]||[])`,
+    forward.length > 0 ? `.concat(${JSON.stringify(forward)})` : ``,
+    `})(window,'partytown','forward');`,
+  ];
+
+  return (
+    <script
+      data-partytown="lib"
+      dangerouslySetInnerHTML={{
+        __html: config.join('') + PartytownSnippet,
+      }}
+    />
+  );
+};

tsconfig.json

@@ -8,6 +8,9 @@
     "importsNotUsedAsValues": "error",
     "esModuleInterop": true,
     "outDir": "tsc",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "skipLibCheck": true,
     "sourceMap": false,
     "jsx": "react"
   },