Astro
The easiest way to add Partytown to an Astro site is adding the snippet to a <script> in the <head> using the partytownSnippet(config) function.
Install
npm install @builder.io/partytownConfigure
Import the @builder.io/partytown/integration submodule into the header of the .astro file, and create the snippet HTML with the partytownSnippet(config) function. The optional Partytown configuration is the first argument.
---
import { partytownSnippet } from '@builder.io/partytown/integration';
const partytownSnippetHtml = partytownSnippet({
debug: true,
forward: ['dataLayer.push']
});
---Partytown Script
Add the scripts to the body of the same .astro file. (Note that the set:html attribute is current available in astro@next.)
Add the type="text/partytown" attribute for each script that should run from a web worker.
<script set:html={partytownSnippetHtml}></script>
<script type="text/partytown">
/* Inlined Third-Party Script */
</script>Copy Library Files
Copy library files to public/~partytown. How the files are copied or served from your site is up to each site’s setup. A partytown copylib CLI copy task has been provided for convenience which helps copy the Partytown library files to the public directory. Below is an example of creating a “partytown” NPM script which runs before the astro build command:
"scripts": {
"build": "npm run partytown && astro build",
"partytown": "partytown copylib public/~partytown"
}