Shopify Hydrogen

The Shopify Hydrogen setup is largely the same as the React integration guide, except it goes further into how to add to the framework’s app root component.

Install

npm install @builder.io/partytown
yarn add @builder.io/partytown
pnpm install @builder.io/partytown

Configure

The <Partytown/> component is imported from the @builder.io/partytown/react submodule. The config properties are JSX props.

The following is an example of including the <Partytown/> component in a root Shopify component. Notice the <Partytown/> component before the <DefaultSeo/> component.

import { DefaultRoutes } from '@shopify/hydrogen';
import { Suspense } from 'react';

import DefaultSeo from './components/DefaultSeo.server';
import NotFound from './components/NotFound.server';
import AppClient from './App.client';
import LoadingFallback from './components/LoadingFallback';
import { Partytown } from '@builder.io/partytown/react';

export default function App({ log, pages, ...serverState }) {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <AppClient helmetContext={serverState.helmetContext}>
        <Partytown debug={true} forward={['dataLayer.push']} />
        <DefaultSeo />
        <DefaultRoutes pages={pages} serverState={serverState} log={log} fallback={<NotFound />} />
      </AppClient>
    </Suspense>
  );
}

The example above is setting the forward config for Google Tag Manager.

Partytown Script

Add the type="text/partytown" prop for each script that should run from a web worker. The example below is using the React specific way of inlining a script with dangerouslySetInnerHTML.

<Partytown debug={true} forward={['dataLayer.push']} />
<script
  type="text/partytown"
  dangerouslySetInnerHTML={{
    __html: '// inlined third-party 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 could run before the build:

  "scripts": {
    "dev": "npm run partytown && vite",
    "build": "npm run partytown && yarn build:client && yarn build:server && yarn build:worker",
    "build:client": "vite build --outDir dist/client --manifest",
    "build:server": "vite build --outDir dist/server --ssr src/entry-server.jsx",
    "build:worker": "cross-env WORKER=true vite build --outDir dist/worker --ssr worker.js",
    "partytown": "partytown copylib public/~partytown"
  }