next Script 태그 사용하기 - 구글 분석 코드 로드

tilnote2023-03-02 11:01

next에서 전역적으로 script를 사용하는데 몇 가지 방법이 있다.

_document의 Head component 안에서 사용하는 방법 : script 이용.

_document의 Head (next/document) 에서 사용하는 방법이다. 가장 확실하지만 이 경우에는 next에서 지원하는 지연 전략 (afterInteractive) 등을 사용할 수 없다. 나의 경우 라이트 하우스에서 성능을 올리기 위에 밑의 방법으로 변경했다. (구글 분석 코드)

 <Head>
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
     window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'YOUR_TRACKING_ID', { page_path: window.location.pathname });
    `,
    }}
  />
</Head>

_app에서 사용하는 방법

next/script의 Script 기능을 활용해서 _app 파일에서 로딩한 후 전역적으로 사용할 수 있다. 참고로 Script는 component 내 (body 내부)에 위치시켜야 작동한다.

<div>
  <Script
    strategy="afterInteractive"
    src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
  />
  <Script id="next-google-analytics" strategy="afterInteractive">
    {`
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'YOUR_TRACKING_ID', { page_path: window.location.pathname });
      `}
  </Script>
</div>

after interactive는 상호작용이 시작되고 js를 로딩하는 전략이다. 기본 값이다. beforeInteractive, afterInteractive, lazyOnload, worker 등 총 4개의 전략이 있다. 공식 문서를 참조하자.

공식 문서 : Basic Features: Handling Scripts | Next.js

두 번째 Script 코드를 보면 inline 스크립트를 실행시킨다. 이 경 dangerouslySetInnerHTML 로 기술하는 방식과 Script 사이에 중괄호로 기술하는 방식이 있다.

나의 경우 dangerouslySetInnerHTML 로는 잘 로드가 되지 않아 Script 사이의 중괄호 { } 안에 스크립트를 기술하는 방식으로 했다. 위의 코드의 두 번째 Script를 참조하자.

리액트

구글 분석