How to Use Partytown.js to Load Common Scripts Like Google Tag Manager or Google Analytics

Integrating third-party scripts such as Google Tag Manager (GTM) and Google Analytics can significantly impact your website's performance. Partytown.js offers a solution by offloading these scripts to a web worker, freeing up the main thread for more critical tasks. Below is a guide on how to use Partytown.js to load these common scripts effectively.

What is Partytown.js?

Partytown.js is a library designed to relocate resource-intensive scripts from the main thread to a web worker. This approach helps improve website performance by minimizing the impact of third-party scripts on the main thread. Partytown.js is particularly useful for scripts that do not need to be part of the critical rendering path, such as analytics and tracking scripts.

Setting Up Partytown.js

1. Installation:

• You can install Partytown.js using npm or yarn:

  npm install @builder.io/partytown

  or

  yarn add @builder.io/partytown

• Copy the Partytown library files to your public directory:

  npx partytown copylib public/~partytown

2. Include Partytown Script:

• Add the Partytown script to your HTML file to initialize the library:

  <script src="~partytown/partytown.js"></script>

Loading Google Tag Manager with Partytown.js

1. Modify Script Tags:

• Change the type attribute of your GTM script tags to text/partytown:

  <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID-HERE"></script>
  <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      window.gtag = function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'YOUR-ID-HERE');
  </script>

2. Forward Events:

• Configure Partytown to forward specific function calls to the web worker. For GTM, you need to forward dataLayer.push:

  <script>
      window.partytown = { forward: ['dataLayer.push'] };
  </script>

Loading Google Analytics with Partytown.js

1. Script Configuration:

• Similar to GTM, set the type attribute for Google Analytics scripts:

  <script type="text/partytown" src="https://www.google-analytics.com/analytics.js"></script>
  <script type="text/partytown">
      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
      ga('create', 'YOUR-GA-ID', 'auto');
      ga('send', 'pageview');
  </script>

2. Forwarding Functions:

• Ensure that any functions used by Google Analytics are forwarded:

  <script>
      window.partytown = { forward: ['ga'] };
  </script>

Considerations and Caveats

• Compatibility: Not all third-party scripts are compatible with Partytown. It's important to test each script individually to ensure it functions correctly when offloaded to a web worker.

• Incremental Adoption: Partytown allows incremental adoption. You can start by offloading a few scripts and gradually move more as you confirm compatibility and performance improvements.

• Debugging: Enable debugging in development to monitor how scripts are being processed by Partytown:

  window.partytown = { debug: true };

By using Partytown.js, you can significantly improve your website's performance by offloading heavy third-party scripts like Google Tag Manager and Google Analytics to a web worker, thus freeing up the main thread for more critical tasks.