feature/partytown: Added possibility for user to choose loading outsi…

.eslintrc

@@ -7,3 +7,4 @@
     "jest": true
   }
 }
+

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- `Partytown` option to enable shopkeepers to load third-party scripts off the main thread.
+
 ## [3.5.1] - 2023-05-10
 ### Fixed
 - Fix attributes received from `eventData` on event `vtex:addToWishlist` extracting `items.product` ans using `sku` instead `selectedSku`

docs/README.md

@@ -103,6 +103,26 @@ If you have any Google Analytics tags using the Google Analytics Settings variab
 Once you have set up the Google Analytics variables and tags, follow Google's official guide on [how to submit and publish your store’s container](https://support.google.com/tagmanager/answer/6107163).
 
 
+## How to run third party scripts off the main thread?
+
+To improve third-party scripts' loading time we may use the [Partytown](https://partytown.builder.io/) library.
+
+### What is [Partytown](https://partytown.builder.io/)? 
+
+Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.
+
+Before running the GTM application outside of the main thread, it is necessary to install `vtex install [email protected]` in the environment where it is being developed or produced.
+Learn more at [VTEX Partytown](https://github.com/vtex-apps/partytown).
+
+⚠️ Partytown is a third-party beta solution, and some scripts may not run well with it. Double-check your site behavior before promoting it to master.
+
+### Enable secondary thread loading
+
+Once the partytown app is installed, simply navigate to `/admin/apps/vtex.google-tag-manager@version/setup/` and select `text/partytown`.
+
+![alt text](https://ibb.co/646qtpb)
+
+Now, google-tag-manager scripts are loaded outside the main thread, improving your site loading time.
 ## Restrictions
 
 In order to avoid performance problems and unforeseen behavior, our VTEX IO Google Tag Manager solution uses the native GTM **blacklist** feature. You can read more about this feature on the [Google Developer Guide](https://developers.google.com/tag-manager/web/restrict).

manifest.json

@@ -41,6 +41,12 @@
         "description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
         "type": "string"
       },
+      "allowPartytown": {
+        "title": "Allow scripts with Partytown",
+        "description": "Define whether the type attribute executes script on a secondary thread or not. It's mandatory to have the partytown app installed to make it work",
+        "default": false,
+        "type": "boolean"
+      },
       "allowCustomHtmlTags": {
         "title": "Allow Custom HTML tags",
         "description": "Beware that using Custom HTML tags can drastically impact the store's performance",

package.json

@@ -30,4 +30,4 @@
     "prettier": "^1.19.1",
     "typescript": "^3.7.5"
   }
-}
+}

pixel/head.html

@@ -1,6 +1,8 @@
 <script>
   (function() {
     var gtmId = "{{settings.gtmId}}";
+    var allowPartytown = "{{settings.allowPartytown}}"
+
     var sendGA4EventsValue = "{{settings.sendGA4Events}}"
     var sendGA4Events = sendGA4EventsValue == 'true'
 
@@ -16,9 +18,18 @@
       // GTM script snippet. Taken from: https://developers.google.com/tag-manager/quickstart
       (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=
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.type='text/' + handleAllowPartytown(allowPartytown);j.async=true;j.src=
       'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
       })(window,document,'script','dataLayer',gtmId)
     }
   })()
+
+  function handleAllowPartytown(allowPartytown) {
+    const href = window.location.search
+    const [, query] = href.split('?')
+    const searchParams = new URLSearchParams(query)
+    const type = allowPartytown ? 'partytown' : 'javascript'
+
+    return !!searchParams.get('gtm_debug') ? 'javascript' : type
+  }
 </script>

react/package.json

@@ -7,6 +7,9 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^12.0.0",
-    "@vtex/test-tools": "^3.3.2"
+    "@vtex/test-tools": "^3.3.2",
+    "vtex.google-tag-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.google-tag-manager",
+    "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime"
   }
 }

react/tsconfig.json

@@ -4,8 +4,12 @@
     "esModuleInterop": true,
     "allowJs": true,
     "jsx": "react",
-    "lib": ["es2017", "dom", "es2018.promise"],
-    "module": "es6",
+    "lib": [
+      "es2017",
+      "dom",
+      "es2018.promise"
+    ],
+    "module": "esnext",
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
@@ -19,12 +23,24 @@
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
     "target": "es2017",
-    "typeRoots": ["node_modules/@types"],
-    "types": ["node", "jest", "graphql"]
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "jest",
+      "graphql"
+    ]
   },
-  "exclude": ["node_modules"],
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"],
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts"
+  ],
   "typeAcquisition": {
     "enable": false
   }
-}
+}

react/yarn.lock

@@ -5077,6 +5077,18 @@ [email protected]:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+"vtex.google-tag-manager@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.google-tag-manager":
+  version "3.3.1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.google-tag-manager#95a9ab47ffd1885296137d184a57394b02c92f1d"
+
+"vtex.pixel-interfaces@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react":
+  version "0.0.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef"
+
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime":
+  version "8.132.4"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime#66bb41bd4d342e37c9d85172aad5f7eefebfb6dc"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"