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

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [3.3.2] - 2023-01-24
+
+### Added
+- Added the `partytown` library to enable shopkeepers to load third party scripts off the main thread.
+
 ## [3.3.1] - 2022-04-04
 
 ### Fixed

docs/README.md

@@ -103,6 +103,24 @@ 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 the performance of the sites we will work with 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).
+
+### 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 your 3rd party apps are loaded off the main thread and your site load time is much less.
 ## 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

@@ -1,10 +1,10 @@
 {
   "name": "google-tag-manager",
   "vendor": "vtex",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "title": "Google Tag Manager",
   "description": "Google Tag Manager",
-  "mustUpdateAt": "2019-04-03",
+  "mustUpdateAt": "2023-02-01",
   "scripts": {
     "postreleasy": "vtex publish --verbose"
   },
@@ -41,6 +41,15 @@
         "description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
         "type": "string"
       },
+      "typeScript": {
+        "title": "Script attribute type",
+        "description": "Define whether the type attribute execute script on a secondary thread or not.",
+        "default": "javascript",
+        "enum": [
+          "javascript",
+          "partytown"
+        ]
+      },
       "allowCustomHtmlTags": {
         "title": "Allow Custom HTML tags",
         "description": "Beware that using Custom HTML tags can drastically impact the store's performance",

pixel/head.html

@@ -1,6 +1,8 @@
 <script>
   (function() {
     var gtmId = "{{settings.gtmId}}";
+    var typeScript = "{{settings.typeScript}}"
+
     if (!gtmId) {
       console.error('Warning: No Google Tag Manager ID is defined. Please configure it in the apps admin.');
     } else {
@@ -9,9 +11,17 @@
       // 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/' + validType(typeScript);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 validType(typeScript) {
+    const href = window.location.search
+    const [, query] = href.split('?')
+    const searchParams = new URLSearchParams(query)
+
+    return !!searchParams.get('gtm_debug') ? 'javascript' : typeScript
+  }
 </script>