Partytown을 사용하여 Google 애널리틱스 gtag를 Next.js에 추가하는 방법 🎉

먼저 저에게 많은 도움을 주신 개츠비his article님께 감사드립니다🙏.

초고속 Next.js 웹사이트를 막 완성했고 모든 성능 측정항목이 더 높은 수준을 가리키고 있지만 Google Analytics를 추가해야 하고 PageSpeed ​​Insights의 불꽃놀이를 얻기 위한 꿈은 달성할 수 없게 됩니다... 이 메시지는 친숙하게 들립니다. 맞아요😭:
Reduce the impact of third-party code
너는 누구에게 전화하려고하니? Partytown 🎉
예, 이 놀라운 라이브러리를 사용하면 분석과 같은 외부 스크립트의 실행을 서비스 작업자에게 "위임"하여 타사 코드의 영향을 줄일 수 있습니다!

좋습니다. Google Analytics와 함께 새 Next.js 애플리케이션을 만드는 Next.js canary branch에 있는 예제에서 시작할 수 있습니다.

yarn create next-app --example with-google-analytics with-google-analytics-app

이제 Partytown 차례입니다. 12.1.1 버전 Next.js에서 experimental support to its Script component: worker 전략을 추가합니다. 이 기본 구현 덕분에 Partytown을 Next.js 프로젝트에 쉽게 추가할 수 있습니다.

모든 실험적 기능으로 nextjs.config.js 파일에서 활성화해야 합니다.

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

그런 다음 설정을 완료하려면 즐겨 사용하는 패키지 관리자를 사용하여 의존성에 Partytown 라이브러리를 추가해야 합니다.

yarn add @builder.io/partytown

Google 애널리틱스 실행을 서비스 작업자로 이동하는 방법은 무엇입니까?_app.js 폴더에서 pages 파일을 열고 일부 편집해야 합니다.

먼저 범용 사이트 태그의 전략을 worker로 변경해야 합니다.

<Script
   strategy="worker"
   src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>

인라인 스크립트를 다음과 같이 변경합니다.

 <script
    type="text/partytown"
    dangerouslySetInnerHTML={{
        __html: `
            window.dataLayer = window.dataLayer || [];
            window.gtag = function gtag(){window.dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', '${gtag.GA_TRACKING_ID}', { 
                page_path: window.location.pathname,
            });
        `,
    }}
/>

두 번째 스크립트에도 Script 구성 요소를 사용하고 싶지만 아직 지원되지 않는 것 같아서 "일반"script 태그를 사용했지만 사용자 정의 유형"text/partytown"을 사용했습니다.

이 코드는 Google 가이드의 원래 코드처럼 보이지만 약간의 차이가 있습니다.

- function gtag(){window.dataLayer.push(arguments);}
+ window.gtag = function gtag(){window.dataLayer.push(arguments);}

gtag를 전역 함수로 정의하면 Partytown에서 참조하도록 할 수 있습니다. create a custom document page 이 스크립트를 Head 구성 요소에 추가하기만 하면 됩니다.

<script
    data-partytown-config
    dangerouslySetInnerHTML={{
      __html: `
          partytown = {
            lib: "/_next/static/~partytown/",
            forward: ["gtag"]           
          };
        `,
    }}
/>

이 간단한 단계를 통해 이제 Next.js 앱에서 완전히 Google Analytics를 지원하지만... 분리된 서비스 워커에서 실행됩니다 🚀