웹사이트에 ga4 설치하기

GA4의 설치는 애널리틱스 계정을 생성하고 웹페이지에 GA의 스크립트를 추가하는것으로부터 시작합니다

 

 

좌측 하단의 관리자를 클릭후 데이터 스트림 메뉴를 선택하세요

 

생성되어있는 스트림을 선택합니다

 

생성되어있는것이 없다면 스트림 추가를 통해 추가하시면 됩니다

 

 

스트림 상세정보의 하단에 태그 안내 보기를 클릭합니다

 

 

이 화면에서 나타난 스크립트를 복사하여 홈페이지에 넣으시면 됩니다

 

참고로 id값이 G-로 시작하지 않으면 GA4용 ID가 아닙니다

 

 

 

 

nextjs에서 사용할수 있는 스크립트입니다

 

G-로 시작하는 값 두군데를 여러분의 값으로 변경하여 사용하시면 됩니다

 

        <Script
          id="google-analytics"
          src={`https://www.googletagmanager.com/gtag/js?id=G-여기`}
          strategy="afterInteractive"
          onLoad={() => {
            (window as any).dataLayer = (window as any).dataLayer || [];
            function gtag(...args: any) {
              (window as any).dataLayer.push(args);
            }

            gtag("js", new Date());
            gtag("config", 'G-여기', {
              debug_mode: true, // 디버그모드 켬
            });
          }}
        />

 

참고로 전체 이벤트에 대해 debug_mode를 켜고자 하는 경우 추가 옵션으로 debug_mode: true를 전달하면 됩니다

 

설치 끝!