Konstantinos/DERC-2262/Datalayer issue fix + partytown integration (#…

…6068)

* fix: performance

* fix: hero images optimized

---------

Co-authored-by: “konstantinosG-deriv” <“[email protected]”>

gatsby-node.js

@@ -2,8 +2,13 @@
 const language_config = require(`./i18n-config.js`)
 const language_config_en = require(`./i18n-config-en.js`)
 const path = require('path')
+const { copyLibFiles } = require('@builder.io/partytown/utils')
 
 const translations_cache = {}
+
+exports.onPreBuild = async () => {
+    await copyLibFiles(path.join(__dirname, 'static', '~partytown'))
+}
 // Based upon https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
 exports.onCreatePage = ({ page, actions }) => {
     const { createRedirect, createPage, deletePage } = actions

gatsby-ssr.js

@@ -1,42 +1,55 @@
 import React from 'react'
+import { Partytown } from '@builder.io/partytown/react'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import './src/components/localization/config'
 import GlobalProvider from './src/store/global-provider'
 
 export const wrapRootElement = ({ element }) => {
-  return <GlobalProvider>{element}</GlobalProvider>
+    return <GlobalProvider>{element}</GlobalProvider>
 }
 
 export const wrapPageElement = WrapPagesWithLocaleContext
 
 export const onRenderBody = ({ setHeadComponents }) => {
-  const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID || ''
+    const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID || ''
 
-  setHeadComponents([
-    <script
-      key="partytown-vanilla-config"
-      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
-          }
-        }`,
-      }}
-    />,
-    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}');`,
-        }}
-      />
-    ),
-  ])
-}
+    setHeadComponents([
+        // Partytown setup
+        <Partytown key="partytown" />,
+        <script
+            key="partytown-vanilla-config"
+            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
+                    }
+                }`,
+            }}
+        />,
+
+        // 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}');`,
+                }}
+            />
+        ),
+    ])
+}

package.json

@@ -5,6 +5,7 @@
     "author": "Deriv",
     "dependencies": {
         "@artsy/fresnel": "^6.1.0",
+        "@builder.io/partytown": "^0.8.1",
         "@deriv/analytics": "^1.3.4",
         "@deriv/deriv-api": "^1.0.11",
         "@hookform/resolvers": "^3.0.1",
@@ -147,6 +148,7 @@
     "scripts": {
         "analyze-bundle": "GENERATE_JSON_STATS=true gatsby build && npx webpack-bundle-analyzer -m static -r ./webpack-bundle-report/report.html ./public/stats.json",
         "build": "GATSBY_CPU_COUNT=2 gatsby build --log-pages",
+        "partytown": "partytown copylib public/~partytown",
         "develop": "GATSBY_CPU_COUNT=2 gatsby develop -o",
         "format": "prettier --write '**/*.js' '*.js'",
         "stylelint": "stylelint 'src/**/*.js' --formatter verbose",

src/components/hooks/use-livechat.tsx

@@ -16,6 +16,7 @@ export const useLivechat = (): [boolean, TLC_API] => {
 
     const loadLiveChatScript = (callback) => {
         const livechat_script = document.createElement('script')
+        livechat_script.type = 'text/partytown'
         livechat_script.innerHTML = `
         window.__lc = window.__lc || {};
         window.__lc.license = ${licence_key};

src/features/components/molecules/language-switcher/index.tsx

@@ -34,7 +34,7 @@ const LanguageSwitcher = () => {
             onOpenChange={setOpen}
         >
             <DropdownMenu.Trigger asChild>
-                <div className={styles.trigger}>
+                <div role="button" className={styles.trigger}>
                     <Typography.Paragraph size="medium" font_family={'UBUNTU'} weight="bold">
                         {currentLang.short_name}
                     </Typography.Paragraph>