SvelteKit 프로젝트에 Partytown 추가

monogram.io에 원래 게시됨 .

분석의 힘

웹사이트 분석은 비즈니스 소유자와 웹 개발자 모두에게 유용한 도구입니다. Google Tag Manager 및 Segment와 같은 서비스에서 수집한 데이터를 사용하여 콘텐츠를 수정하고 대상 고객에게 도달할 수 있습니다.

캐치가 무엇입니까?

아이러니하게도 타사 분석 스크립트는 웹 사이트에서 제공되는 모든 JavaScript 중에서 성능에 가장 큰 부정적인 영향을 미칠 수 있습니다. 이는 이러한 스크립트를 다운로드, 구문 분석 및 실행하는 데 필요한 처리 능력 때문입니다. 그 결과 사용자 유지율이 감소하고 이탈률이 증가합니다.

async 및 defer와 같은 스크립트 태그 속성이 도움이 될 수 있지만 특히 사이트의 타사 스크립트 수가 증가함에 따라 향상된 성능을 보장하지는 않습니다.

Partytown: 타사 스크립트의 집

간단히 말해서 JavaScript는 CPU를 많이 사용합니다. 과도하게 사용하면 처리 병목 현상이 발생합니다. 이는 웹 사이트가 '버벅거리고' 응답하지 않는 일반적인 원인입니다.

Partytown은 이 문제를 해결하는 타사 스크립트를 처리하는 혁신적인 접근 방식입니다. 웹 작업자를 사용하여 백그라운드에서 스크립트를 실행하여 스크립트 실행으로 인해 TTI가 지연되지 않도록 합니다.

최근에 우리는 Partytown을 사용하여 두 개의 SvelteKit 프로젝트(이 웹사이트 포함!)에 Google 태그 관리자를 추가했습니다. 프로세스를 단계별로 살펴보고 그 과정에서 마주쳤던 몇 가지 장애물을 해결해 보겠습니다.

Partytown is still in beta. Some scripts may not behave correctly when used with it. We suggest opening a GitHub issue or reaching out on the Partytown Discord if you run into problems.

SvelteKit에 Partytown 추가

새로운 SvelteKit 프로젝트 시작

다음을 실행하여 새 프로젝트 부트스트랩

npm init svelte my-app

파티타운 설치

pnpm add @builderio/partytown

Partytown 스크립트를 src/routes/__layout.svelte에 추가합니다.

// 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(
        () =>
            scriptEl &&
            (scriptEl.textContent = partytownSnippet())
    )
</script>

<svelte:head>
    <!-- Config options -->
    <script>
        // Forward the necessary functions
        // to the web worker layer
        partytown = {
            forward: ['dataLayer.push']
        }
    </script>

    <!-- `partytownSnippet` is inserted here -->
    <script bind:this={scriptEl}></script>
</svelte:head>

Partytown 라이브러리 파일을 로컬 파일 시스템에 복사

Partytown의 내부 스크립트는 서비스 워커를 사용하기 때문에 사이트와 동일한 원본에서 제공되어야 합니다. 고맙게도 라이브러리에는 이를 수행하는 Vite 플러그인이 함께 제공됩니다.

// svelte.config.js

import adapter from '@sveltejs/adapter-auto'
import { partytownVite } from '@builder.io/partytown/utils'
import path from 'path'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),

        // The Vite config is accessible inside the SvelteKit config
        vite: {
            plugins: [
                partytownVite({
                    // `dest` specifies where files are copied to in production
                    dest: path.join(
                        process.cwd(),
                        'static',
                        '~partytown'
                    )
                })
            ]
        }
    }
}

export default config

dev 서버에서 파일은 로컬로 제공됩니다. 프로덕션에서는 dest에 지정된 경로에 복사됩니다.

프록시 스크립트

웹 작업자를 통해 HTTP 요청을 할 때 일부 타사 스크립트에서 CORS 문제가 발생합니다. Google 태그 관리자의 경우입니다.

Partytown은 교차 출처 오류를 방지하기 위해 요청을 리버스 프록시할 것을 권장합니다.

Monogram에서는 Vercel을 사용하여 SvelteKit 웹사이트를 배포합니다. 따라서 루트 디렉터리에 vercel.json 파일을 만들고 역방향 프록시 구성을 추가합니다. Google 태그 관리자는 Google 애널리틱스 스크립트를 가져오기 위해 두 번째 요청을 하기 때문에 두 개의 스크립트를 프록시해야 합니다.

{
    "rewrites": [
        {
            "source": "/proxytown/gtm",
            "destination": "https://www.googletagmanager.com/gtag/js"
        },
        {
            "source": "/proxytown/ga",
            "destination": "https://www.google-analytics.com/analytics.js"
        }
    ]
}

프록시 구성을 완료하려면 __layout.svelte의 Partytown 구성에 resolveUrl 함수를 추가합니다.

// 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>

리버스 프록시를 사용할 수 없는 경우 웹사이트와 동일한 도메인에서 스크립트를 제공할 수 있습니다.

Partytown에서 타사 스크립트 사용

모두가 기다려온 순간!

Partytown에서 처리할 스크립트를 svelte:head 요소에 추가합니다. 여기에 스크립트를 배치하고 type="text/partytown"속성을 추가하기만 하면 됩니다.

svelte.config.js에 다음을 추가하여 SvelteKit이 Partytown 스크립트에 대한 전처리를 우회하도록 지시합니다.

// svelte.config.js

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

svelte:head 요소는 이제 다음과 같습니다.

// 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
                }

                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)
        }

        gtag('js', new Date())
        gtag('config', 'YOUR-ID-HERE', {
            page_path: window.location.pathname
        })
    </script>
</svelte:head>

이벤트는 이제 일반dataLayer.push 방법을 사용하여 GTM으로 보낼 수 있습니다. 이러한 함수 호출을 Partytown으로 '전달'하기 때문입니다.

dataLayer.push({ ... })

그게 전부입니다! 오타나 버그를 발견했거나 추가할 사항이 있으면 댓글로 알려주세요.