Skip to content

Commit

Permalink
docs: overhaul SvelteKit guide (#436)
Browse files Browse the repository at this point in the history 
* docs: overhaul SvelteKit guide

* fix building in clean repo

* remove unnecessary step

* Update sveltekit.md
  • Loading branch information
@benmccann
benmccann authored Aug 2, 2023
1 parent ad4bf21 commit c9be0a1
Showing 1 changed file with 39 additions and 104 deletions.
143 changes: 39 additions & 104 deletions docs/sveltekit.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
title: SvelteKit
---

SvelteKit does not offer any built in integrations, so we will add Partytown manually. Credit belongs to [monogram.io](https://monogram.io/blog/add-partytown-to-svelte) for this guide.
SvelteKit uses Vite to build, so we can use `partytownVite`.

1. Add the Partytown script to `src/routes/+layout.svelte`
2. Copy the Partytown files to the local filesystem using the Vite plugin
3. Reverse-Proxying scripts
4. Then adding 3rd party scripts

3. Optional: reverse-proxying scripts
4. Optional: `svelte-preprocess` configuration
5. Then adding 3rd party scripts

## 1. Add the Partytown script to `src/routes/+layout.svelte`

Adapting from [the HTML integration guide](https://partytown.builder.io/html)
Expand All @@ -17,18 +18,7 @@ Adapting from [the HTML integration guide](https://partytown.builder.io/html)
// src/routes/+layout.svelte
<script>
import { onMount } from 'svelte'
import { partytownSnippet } from '@builder.io/partytown/integration'
// Add the Partytown script to the DOM head
let scriptEl
onMount(
() => {
if (scriptEl) {
scriptEl.textContent = partytownSnippet()
}
}
)
</script>
<svelte:head>
Expand All @@ -40,14 +30,13 @@ Adapting from [the HTML integration guide](https://partytown.builder.io/html)
}
</script>
<!-- `partytownSnippet` is inserted here -->
<script bind:this={scriptEl}></script>
{@html '<script>' + partytownSnippet() + '</script>'}
</svelte:head>
```

## 2. Copy the Partytown files to the local filesystem using the Vite plugin

Adopting [this strategy](https://partytown.builder.io/copy-library-files#vite) from the Partytown+Vite docs:
Adopting [this strategy](https://partytown.builder.io/copy-library-files#vite) from the Partytown + Vite docs:

```js
// vite.config.js
Expand All @@ -61,116 +50,62 @@ const config = {
plugins: [
sveltekit(),
partytownVite({
// `dest` specifies where files are copied to in production
dest: join(process.cwd(), 'static', '~partytown')
dest: join(process.cwd(), '.svelte-kit/output/client/~partytown')
})
]
}

export default config
```

## 3. Reverse-Proxying scripts

This will vary depending on hosting platform. See [Partytown's recommended guides](https://partytown.builder.io/proxying-requests#reverse-proxy).

```svelte
// src/routes/+layout.svelte
<script>
partytown = {
forward: ['dataLayer.push'],
resolveUrl: (url) => {
const siteUrl = 'https://monogram.io/proxytown'
if (url.hostname === 'www.googletagmanager.com') {
const proxyUrl = new URL(`${siteUrl}/gtm`)
const gtmId = new URL(url).searchParams.get('id')
gtmId && proxyUrl.searchParams.append('id', gtmId)
return proxyUrl
} else if (url.hostname === 'www.google-analytics.com') {
const proxyUrl = new URL(`${siteUrl}/ga`)
return proxyUrl
}
return url
}
}
</script>
```
## 3. Optional: reverse-proxying scripts

## 4. Then adding 3rd party scripts
This will only be necessary depending on which scripts you are using. The implementation will vary depending on hosting platform. See [Partytown's recommended guides](https://partytown.builder.io/proxying-requests#reverse-proxy).

This is where we FINALLY use party town to add those scripts (note `type="text/partytown"` below). This example shows Google Tag Manager.
## 4. Optional: `svelte-preprocess` configuration

Most users will be using `vitePreprocess` and will not need to update their `svelte.config.js` file. However, if you're are using `svelte-preprocess`, you will need to set the `preserve` option:
```js
// svelte.config.js

const config = {
preprocess: [
preprocess({
preserve: ['partytown']
})
],
preprocess: preprocess({
preserve: ['partytown']
})
...
}
```

and
## 5. Then adding 3rd party scripts

This is where we FINALLY use partytown to add those scripts (note `type="text/partytown"` below). This example shows Google Tag Manager. Putting it together with the previous changes, our `+layout.svelte` looks like:

```svelte
// src/routes/+layout.svelte
<svelte:head>
<script>
// Config options
partytown = {
forward: ['dataLayer.push'],
resolveUrl: (url) => {
const siteUrl = 'https://example.com/proxytown'
if (url.hostname === 'www.googletagmanager.com') {
const proxyUrl = new URL(`${siteUrl}/gtm`)
const gtmId = new URL(url).searchParams.get('id')
gtmId && proxyUrl.searchParams.append('id', gtmId)
return proxyUrl
} else if (
url.hostname === 'www.google-analytics.com'
) {
const proxyUrl = new URL(`${siteUrl}/ga`)
return proxyUrl
}
<script>
import { partytownSnippet } from '@builder.io/partytown/integration'
</script>
return url
}
}
</script>
<!-- Insert `partytownSnippet` here -->
<script bind:this={scriptEl}></script>
<!-- GTM script + config -->
<script
type="text/partytown"
src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID-HERE"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
<slot />
gtag('js', new Date())
gtag('config', 'YOUR-ID-HERE', {
page_path: window.location.pathname
})
</script>
<svelte:head>
<script>
partytown = {
forward: ['dataLayer.push']
};
</script>
{@html '<script>' + partytownSnippet() + '</script>'}
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-ZX7H2KPXNZ"></script>
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZX7H2KPXNZ');
</script>
</svelte:head>
```

Reminder to visit https://monogram.io/blog/add-partytown-to-svelte if you need a blog-style guide on this.
Acknowledgements: credit belongs to monogram.io for [an earlier version of this guide](https://monogram.io/blog/add-partytown-to-svelte).

1 comment on commit c9be0a1

@vercel
Copy link

@vercel vercel bot commented on c9be0a1 Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

partytown – ./

partytown-git-main-builder-io.vercel.app
partytown-builder-io.vercel.app
partytown.builder.io
partytown.vercel.app

Please sign in to comment.