GA4 실시간 디버깅하기

GA4를 설치하였다면 정상적으로 이벤트가 전달되는지 테스트를 해봐야겠죠?

 

실시간 디버깅을 해봅시다

 

먼저 여러분의 웹사이트에 GA4 스크립트를 넣어야겠죠?

 

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

 

        <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를 true로 전달해주세요

 

 

그리고 크롬에서 구글애널리틱스 디버거(Google Analytics Debugger)(익스텐션)를 설치해야합니다

 

https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

Google Analytics Debugger

 

 

설치를 완료하고 크롬 브라우저의 주소표시줄 옆에 생긴 아이콘을 클릭하면 ON이라고 표시되며 디버거가 활성화됩니다(끌때는 아이콘을 한번더 클릭하면됩니다)

 

 

 

그리고 여러분이 GA4를 설치한 웹사이트를 실행해보세요

 

 

 

콘솔에 이렇게 나타난다면 실시간으로 디버깅이 되고 있는 것입니다

 

GA 이벤트가 발생할때마다 콘솔에서 어떤정보들이 전송되는지 상세 정보를 확인할수 있어요

 

 

콘솔에서도 확인할수 있고

 

애널리틱스 홈페이지 좌측 하단의 어드민을 클릭하고

 

메뉴중 DebugView를 클릭해도 디버그 뷰를 확인할수 있습니다

 

 

이렇게 말이죠

 

특정 디버그 기기에서 발생하는 이벤트들만 확인하려면 디버그기기를 선택하시면 됩니다

 

(디버그 기기에 표시되는 이름을 어떻게 바꾸는건지는 모르겠는데, 저는 mac에서 브라우저를 열어서 그런지 Apple이라고 표시되네요)