diff --git a/.eslintrc b/.eslintrc index bc9d79b9..5e10103d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,3 +7,4 @@ "jest": true } } + diff --git a/CHANGELOG.md b/CHANGELOG.md index ac0ae838..eb2e3c0d 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/docs/README.md b/docs/README.md index 86d52ab0..cb3de30b 100644 --- a/docs/README.md +++ b/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 vtex.partytown@0.x` 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). diff --git a/manifest.json b/manifest.json index ad3cb016..fa6437bf 100644 --- a/manifest.json +++ b/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", diff --git a/package.json b/package.json index 35bd6707..222ed030 100644 --- a/package.json +++ b/package.json @@ -30,4 +30,4 @@ "prettier": "^1.19.1", "typescript": "^3.7.5" } -} +} \ No newline at end of file diff --git a/pixel/head.html b/pixel/head.html index 5871253d..aac1edfa 100644 --- a/pixel/head.html +++ b/pixel/head.html @@ -1,6 +1,8 @@ diff --git a/react/package.json b/react/package.json index f180d7d4..dcb29220 100644 --- a/react/package.json +++ b/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/vtex.google-tag-manager@3.3.1/public/@types/vtex.google-tag-manager", + "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react", + "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime" } } diff --git a/react/tsconfig.json b/react/tsconfig.json index 5d95a952..b0b2f0c0 100644 --- a/react/tsconfig.json +++ b/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 } -} +} \ No newline at end of file diff --git a/react/yarn.lock b/react/yarn.lock index ff8739b7..5ebeddd9 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5077,6 +5077,18 @@ verror@1.10.0: core-util-is "1.0.2" extsprintf "^1.2.0" +"vtex.google-tag-manager@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.google-tag-manager@3.3.1/public/@types/vtex.google-tag-manager": + version "3.3.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.google-tag-manager@3.3.1/public/@types/vtex.google-tag-manager#95a9ab47ffd1885296137d184a57394b02c92f1d" + +"vtex.pixel-interfaces@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react": + version "0.0.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + +"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime": + version "8.132.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/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"