Fix gtm partytown integration (#6038)

* chore: fix gtm partytown integration * chore: remove defer Downloading the script asynchronously is enough
binary-com · Nov 27, 2023 · 442a6e8 · 442a6e8 · vercel · Nov 27, 2023
1 parent e6731d2
commit 442a6e8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -48,9 +48,6 @@ module.exports = {
         `https://assets.customer.io/assets/track.js`,
         `https://static.deriv.com/scripts/cookie.js`,
         `https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js`,
-        `https://cdn.livechatinc.com/tracking.js`,
-        `https://www.google-analytics.com/analytics.js`,
-        `https://www.googletagmanager.com/gtm.js?id=${process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID}`,
     ],
     plugins: [
         // [TODO] Enable this when we have a proper setup to enable caching, Otherwise it will cause one of them stop working.

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -14,29 +14,38 @@ export const onRenderBody = ({ setHeadComponents }) => {
     const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID || ''
 
     setHeadComponents([
+        // Partytown setup
         <Partytown key="partytown" forward={['dataLayer.push']} />,
         <script
             key="partytown-vanilla-config"
-            type="text/partytown"
             dangerouslySetInnerHTML={{
                 __html: `partytown = {
-          resolveUrl(url, location) {
-            // Use a secure connection
-            if (url?.protocol === 'http:') {
-              url = new URL(url.href.replace('http', 'https'))
-            }
-            // Point to our proxied URL
-            const proxyUrl = new URL(location.origin + '/__third-party-proxy')
-            proxyUrl.searchParams.append('url', url)
-            return proxyUrl
-          }
-        }`,
+                    resolveUrl(url, location) {
+                        // Use a secure connection
+                        if (url?.protocol === 'http:') {
+                            url = new URL(url.href.replace('http', 'https'))
+                        }
+                        // Point to our proxied URL
+                        const proxyUrl = new URL(location.origin + '/__third-party-proxy')
+                        proxyUrl.searchParams.append('url', url)
+                        return proxyUrl
+                    }
+                }`,
             }}
         />,
+
+        // GTM setup
         gtmTrackingId && (
             <script
                 key="gtm-script"
                 type="text/partytown"
+                async
+                src={`https://www.googletagmanager.com/gtm.js?id=${gtmTrackingId}`}
+            ></script>
+        ),
+        gtmTrackingId && (
+            <script
+                key="gtm-script"
                 dangerouslySetInnerHTML={{
                     __html: `(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', '${gtmTrackingId}');`,
                 }}