🐛 Partytown Reverse Proxy Fix (#1006)

* Added debug partytown * Added forward * Added partytown scripts to build * Added datalayer.push * Fixed partytown implementation * Added proxy * Fixed to correct URL * Updated partytown with correct configuration * Removed unused packages, added schema validation * Added hard coded URLs meant to be proxied * Removed some hard coded links * Added shared link whitelist, removed lint warning * Fixed proxied implementation (scoping of variable in resolveUrl function must be in that function) * Removed constants file, duplicated constants (required) * Added builder.io proxy * Removed proxy API route * Added legacy google analytics to conditional * Removed lib file, as copied over in build step anyway
SSWConsulting · Jul 14, 2023 · 04b540f · 04b540f
1 parent ce89884
commit 04b540f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,6 @@ yarn-error.log*
 # Next bundle analyser
 /analyze
 
+# Partytown lib files
+/public/~partytown
+
diff --git a/components/layout/analytics.tsx b/components/layout/analytics.tsx
@@ -1,17 +1,48 @@
-import Script from "next/script";
+import { Partytown } from "@builder.io/partytown/react";
+import Head from "next/head";
 
 const gtmId = process.env.NEXT_PUBLIC_GOOGLE_GTM_ID;
 
 export const Analytics = () => {
   return (
-    <Script id="google-tag-manager" strategy="worker">
-      {`
+    <Head>
+      <Partytown
+        debug={false}
+        forward={["gtag", "dataLayer.push", "_hsq.push, fbq"]}
+        resolveUrl={(url, location, type) => {
+          const proxiedWhitelist = [
+            "connect.facebook.net",
+            "snap.licdn.com",
+            "cdn3l.ink",
+            "googleads.g.doubleclick.net",
+            "js.hs-analytics.net",
+            "www.google.com",
+          ];
+
+          if (
+            (type === "script" &&
+              !url.pathname.includes("gtm.js") &&
+              proxiedWhitelist.includes(url.hostname)) ||
+            url.href.includes("https://www.google-analytics.com/analytics.js")
+          ) {
+            const proxiedUrl = new URL(
+              "https://cdn.builder.io/api/v1/proxy-api"
+            );
+            proxiedUrl.searchParams.append("url", url.href);
+            return proxiedUrl;
+          }
+          return url;
+        }}
+      />
+      <script id="google-tag-manager" type="text/partytown">
+        {`
         (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','${gtmId}');
       `}
-    </Script>
+      </script>
+    </Head>
   );
 };
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,4 @@
 const config = {
-  experimental: {
-    nextScriptWorkers: true,
-  },
   i18n: {
     locales: ["en"],
     defaultLocale: "en",

diff --git a/package.json b/package.json
@@ -3,8 +3,9 @@
   "version": "1.22.19",
   "private": true,
   "scripts": {
-    "dev": "tinacms dev -c \"node --require ./appInsight-api.js node_modules/next/dist/bin/next dev\"",
-    "build": "tinacms build && next build && next-sitemap --config next-sitemap.config.js",
+    "dev": "npm run partytown && tinacms dev -c \"node --require ./appInsight-api.js node_modules/next/dist/bin/next dev\"",
+    "build": "npm run partytown && tinacms build && next build && next-sitemap --config next-sitemap.config.js",
+    "partytown": "partytown copylib public/~partytown",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "start": "tinacms build && node_modules/next/dist/bin/next start -p $PORT",
     "export": "npm run build && next export",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -56,12 +56,12 @@ const App = ({ Component, pageProps }) => {
 
   return (
     <>
+      <Analytics />
       <DefaultSeo {...NEXT_SEO_DEFAULT} />
       <AzureAppInsights>
         <Component {...pageProps} />
       </AzureAppInsights>
       <ZendeskButton zendeskKey={zendesk} />
-      <Analytics />
     </>
   );
 };