Partytown Integration Test

package.json

@@ -21,6 +21,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@builder.io/partytown": "^0.8.0",
 		"@playwright/test": "^1.35.0",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-vercel": "^2.4.3",

pnpm-lock.yaml

@@ -13,6 +13,9 @@ dependencies:
     version: 1.4.0
 
 devDependencies:
+  '@builder.io/partytown':
+    specifier: ^0.8.0
+    version: 0.8.0
   '@playwright/test':
     specifier: ^1.35.0
     version: 1.35.0
@@ -93,6 +96,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /@builder.io/partytown@0.8.0:
+    resolution: {integrity: sha512-M6H7nSMwW2dHd1/MQ+9J1Jqdw22uhl1nKv90kIiL9G7gjFVqqouQp4qSS1oZclmtW1XjAa4Q5UnbHB4iytmxZA==}
+    hasBin: true
+    dev: true
+
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}

src/routes/+layout.svelte

@@ -1,8 +1,70 @@
 <script>
 	import '../app.css';
 	import Navbar from '../components/Navbar.svelte';
+
+	import { onMount } from 'svelte'
+	import { partytownSnippet } from '@builder.io/partytown/integration'
+
+	// Add the Partytown script to the DOM head
+	let scriptEl
+	onMount(
+			() => {
+				if (scriptEl) {
+					scriptEl.textContent = partytownSnippet()
+				}
+			}
+	)
+
 </script>
 
+<svelte:head>
+	<!-- Config options -->
+	<script>
+		// Forward the necessary functions to the web worker layer
+		partytown = {
+			forward: ['dataLayer.push'],
+			resolveUrl: (url) => {
+				const siteUrl = 'https://sveltekit-og.ethercorps.io/proxytown';
+
+				if (url.hostname === 'www.googletagmanager.com') {
+					const proxyUrl = new URL(`${siteUrl}/gtm`)
+
+					const gtmId = new URL(url).searchParams.get('id')
+					gtmId && proxyUrl.searchParams.append('id', gtmId)
+
+					return proxyUrl
+				} else if (url.hostname === 'www.google-analytics.com') {
+					const proxyUrl = new URL(`${siteUrl}/ga`)
+
+					return proxyUrl
+				}
+
+				return url
+			}
+		}
+	</script>
+
+
+	<!-- `partytownSnippet` is inserted here -->
+	<script bind:this={scriptEl}></script>
+
+	<script
+			type="text/partytown"
+			src="https://www.googletagmanager.com/gtag/js?id=G-RQGCXL5D07"></script>
+	<script type="text/partytown">
+		window.dataLayer = window.dataLayer || []
+
+		function gtag() {
+			dataLayer.push(arguments)
+		}
+
+		gtag('js', new Date())
+		gtag('config', 'G-RQGCXL5D07', {
+			page_path: window.location.pathname
+		})
+	</script>
+</svelte:head>
+
 <div class="max-h-screen">
 	<Navbar />
 	<slot />

svelte.config.js

@@ -7,7 +7,8 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
 		preprocess({
-			postcss: true
+			postcss: true,
+			preserve: ['partytown']
 		})
 	],
 	kit: {

vercel.json

@@ -0,0 +1,12 @@
+{
+  "rewrites": [
+    {
+      "source": "/proxytown/gtm",
+      "destination": "https://www.googletagmanager.com/gtag/js"
+    },
+    {
+      "source": "/proxytown/ga",
+      "destination": "https://www.google-analytics.com/analytics.js"
+    }
+  ]
+}

vite.config.ts

@@ -1,8 +1,15 @@
+import { join } from 'path'
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
+import { partytownVite } from '@builder.io/partytown/utils'
 
 const config: UserConfig = {
-	plugins: [sveltekit()],
+	plugins: [sveltekit(),
+		partytownVite({
+			// `dest` specifies where files are copied to in production
+			dest: join(process.cwd(), 'static', '~partytown')
+		})
+	],
 	define: {
 		_a: 'undefined'
 	},