From 1eee0fa90797ce9ad54c87ff28f8767c7a19a8c0 Mon Sep 17 00:00:00 2001 From: Carlos Vinicius Date: Wed, 1 Feb 2023 15:52:54 -0300 Subject: [PATCH 1/6] feature/partytown: Added possibility for user to choose loading outside the main thread and validations for use debugging tag assistant --- CHANGELOG.md | 5 +++++ docs/README.md | 18 ++++++++++++++++++ manifest.json | 13 +++++++++++-- pixel/head.html | 11 ++++++++++- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1827f356..4f519d97 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/docs/README.md b/docs/README.md index 86d52ab0..cffe9dad 100644 --- a/docs/README.md +++ b/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 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). + +### 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). diff --git a/manifest.json b/manifest.json index b0bfe712..ec7f60c5 100644 --- a/manifest.json +++ b/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", diff --git a/pixel/head.html b/pixel/head.html index fcdfffe9..1dd82300 100644 --- a/pixel/head.html +++ b/pixel/head.html @@ -1,6 +1,7 @@ From 260059ec5117d2fdb652be65966ad1b0977052cf Mon Sep 17 00:00:00 2001 From: Carlos Vinicius Date: Wed, 1 Feb 2023 17:16:13 -0300 Subject: [PATCH 2/6] feature/partytown: Added param in validType function --- pixel/head.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pixel/head.html b/pixel/head.html index 1dd82300..4395c21b 100644 --- a/pixel/head.html +++ b/pixel/head.html @@ -2,6 +2,7 @@ (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 { @@ -16,7 +17,7 @@ } })() - function validType() { + function validType(typeScript) { const href = window.location.search const [, query] = href.split('?') const searchParams = new URLSearchParams(query) From e9ba868bfedd1ff1236e20d3cf5cb3f8c5bb5936 Mon Sep 17 00:00:00 2001 From: Carlos Vinicius Date: Thu, 2 Feb 2023 23:10:30 -0300 Subject: [PATCH 3/6] feature/partytown: added param on type function --- pixel/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pixel/head.html b/pixel/head.html index 4395c21b..2d860498 100644 --- a/pixel/head.html +++ b/pixel/head.html @@ -11,7 +11,7 @@ // 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.type='text/' + validType();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) } From 03e1dd638509a83b723b9541d61df48e817b5360 Mon Sep 17 00:00:00 2001 From: Carlos Vinicius Date: Thu, 23 Mar 2023 11:17:56 -0300 Subject: [PATCH 4/6] Applying vtex recommendations --- .eslintrc | 6 ++---- docs/README.md | 6 ++++-- manifest.json | 13 +++++-------- package.json | 2 +- pixel/head.html | 9 +++++---- react/package.json | 5 ++++- react/tsconfig.json | 30 +++++++++++++++++++++++------- react/yarn.lock | 12 ++++++++++++ 8 files changed, 56 insertions(+), 27 deletions(-) diff --git a/.eslintrc b/.eslintrc index bc9d79b9..9713dfdd 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,8 +2,6 @@ "extends": "vtex", "root": true, "env": { - "node": true, - "es6": true, - "jest": true + "node": true } -} +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index cffe9dad..cb3de30b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -105,7 +105,7 @@ Once you have set up the Google Analytics variables and tags, follow Google's of ## 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. +To improve third-party scripts' loading time we may use the [Partytown](https://partytown.builder.io/) library. ### What is [Partytown](https://partytown.builder.io/)? @@ -114,13 +114,15 @@ Partytown is a lazy-loaded library to help relocate resource intensive scripts i 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 your 3rd party apps are loaded off the main thread and your site load time is much less. +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 ec7f60c5..6cc62fc2 100644 --- a/manifest.json +++ b/manifest.json @@ -4,7 +4,7 @@ "version": "3.3.2", "title": "Google Tag Manager", "description": "Google Tag Manager", - "mustUpdateAt": "2023-02-01", + "mustUpdateAt": "2019-04-03", "scripts": { "postreleasy": "vtex publish --verbose" }, @@ -41,14 +41,11 @@ "description": "Enter the ID (GTM-XXXX) from your Google Tag Manager", "type": "string" }, - "typeScript": { - "title": "Script attribute type", + "allowPartytown": { + "title": "Allow scripts with Partytown", "description": "Define whether the type attribute execute script on a secondary thread or not.", - "default": "javascript", - "enum": [ - "javascript", - "partytown" - ] + "default": false, + "type": "boolean" }, "allowCustomHtmlTags": { "title": "Allow Custom HTML tags", 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 2d860498..05a7f605 100644 --- a/pixel/head.html +++ b/pixel/head.html @@ -1,7 +1,7 @@ diff --git a/react/package.json b/react/package.json index 7fa4298f..26bd16be 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 c05e598f..74fba26c 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5096,6 +5096,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" From 1303831c1b00668742377b6a841f0ec471bffb07 Mon Sep 17 00:00:00 2001 From: Carlos Vinicius Date: Fri, 24 Mar 2023 10:16:21 -0300 Subject: [PATCH 5/6] Applying vtex recommendations --- .eslintrc | 7 +++++-- CHANGELOG.md | 2 +- manifest.json | 4 ++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/.eslintrc b/.eslintrc index 9713dfdd..5e10103d 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,6 +2,9 @@ "extends": "vtex", "root": true, "env": { - "node": true + "node": true, + "es6": true, + "jest": true } -} \ No newline at end of file +} + diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f519d97..a1f3f274 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [3.3.2] - 2023-01-24 ### Added -- Added the `partytown` library to enable shopkeepers to load third party scripts off the main thread. +- `Partytown` option to enable shopkeepers to load third-party scripts off the main thread. ## [3.3.1] - 2022-04-04 diff --git a/manifest.json b/manifest.json index 6cc62fc2..22c7d48e 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "google-tag-manager", "vendor": "vtex", - "version": "3.3.2", + "version": "3.3.1", "title": "Google Tag Manager", "description": "Google Tag Manager", "mustUpdateAt": "2019-04-03", @@ -43,7 +43,7 @@ }, "allowPartytown": { "title": "Allow scripts with Partytown", - "description": "Define whether the type attribute execute script on a secondary thread or not.", + "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" }, From b9ef2dabb14fc4752f99231044a86aa313467fad Mon Sep 17 00:00:00 2001 From: Daniel Zanzini Date: Wed, 6 Sep 2023 15:51:02 +0200 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2a838e4..eb2e3c0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] -## [3.3.2] - 2023-01-24 - ### Added - `Partytown` option to enable shopkeepers to load third-party scripts off the main thread.