<div id="readability-page-1" class="page"><article id="mainContent">
 
 <cite>나를찾는아이</cite>
 2022. 12. 19. 15:51
 
 
 
 <div>
 GA4를 설치하였다면 정상적으로 이벤트가 전달되는지 테스트를 해봐야겠죠?

실시간 디버깅을 해봅시다

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

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

<pre id="code_1671167586644" data-ke-language="javascript" data-ke-type="codeblock"><code> &lt;Script
 id="google-analytics"
 src={`https://www.googletagmanager.com/gtag/js?id=G-여기`}
 strategy="afterInteractive"
 onLoad={() =&gt; {
 (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, // 디버그모드 켬
 });
 }}
 /&gt;</code></pre>

여기서 debug_mode를 true로 전달해주세요


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

<a href="https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna" target="_blank" rel="noopener">https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna</a>
<figure id="og_1671169278810" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="Google Analytics Debugger" data-og-description="Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript." data-og-host="chrome.google.com" data-og-source-url="https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna" data-og-url="https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna" data-og-image="https://scrap.kakaocdn.net/dn/bnFvWJ/hyQU4CWq28/fO83YermntCJQmkrV5B5lK/img.jpg?width=128&amp;height=128&amp;face=0_0_128_128"><a href="https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna" target="_blank" rel="noopener" data-source-url="https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna">

<div>
Google Analytics Debugger
Prints useful information to the JavaScript console by enabling the debug version of the Google Analytics Javascript.
chrome.google.com
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bnFvWJ/hyQU4CWq28/fO83YermntCJQmkrV5B5lK/img.jpg?width=128&amp;height=128&amp;face=0_0_128_128"></figure>


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


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 2.41.31.png" data-origin-width="198" data-origin-height="174">
 
 <img src="https://blog.kakaocdn.net/dn/nQPop/btrTP3BO9Tj/yp930oTI73QsDCgpRXDcmK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-12-16 오후 2.41.31.png" data-origin-width="198" data-origin-height="174">
 
 
</figure>

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


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 2.39.39.png" data-origin-width="1254" data-origin-height="314">
 
 <img src="https://blog.kakaocdn.net/dn/28EL5/btrTPhnjmV6/nPA1RRmrM0dbEGLHAJXfkk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-12-16 오후 2.39.39.png" data-origin-width="1254" data-origin-height="314">
 
 
</figure>

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

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


콘솔에서도 확인할수 있고

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

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

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 2.48.49.png" data-origin-width="2284" data-origin-height="1528">
 
 <img src="https://blog.kakaocdn.net/dn/b1iYki/btrTPAtrHfw/NvEieYME9kAbnfoNUMXPIk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2022-12-16 오후 2.48.49.png" data-origin-width="2284" data-origin-height="1528">
 
 
</figure>

이렇게 말이죠

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

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


 
 
 </div>
 

 
 </article></div>

나를 찾는 아이

Kyoung min, Kim

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
 
 
설치를 완료하고 크롬 브라우저의 주소표시줄 옆에 생긴 아이콘을 클릭하면 ON이라고 표시되며 디버거가 활성화됩니다(끌때는 아이콘을 한번더 클릭하면됩니다)
 
 
 
그리고 여러분이 GA4를 설치한 웹사이트를 실행해보세요
 
 
 
콘솔에 이렇게 나타난다면 실시간으로 디버깅이 되고 있는 것입니다
 
GA 이벤트가 발생할때마다 콘솔에서 어떤정보들이 전송되는지 상세 정보를 확인할수 있어요
 
 
콘솔에서도 확인할수 있고
 
애널리틱스 홈페이지 좌측 하단의 어드민을 클릭하고
 
메뉴중 DebugView를 클릭해도 디버그 뷰를 확인할수 있습니다
 
 
이렇게 말이죠
 
특정 디버그 기기에서 발생하는 이벤트들만 확인하려면 디버그기기를 선택하시면 됩니다
 
(디버그 기기에 표시되는 이름을 어떻게 바꾸는건지는 모르겠는데, 저는 mac에서 브라우저를 열어서 그런지 Apple이라고 표시되네요)

GA4 실시간 디버깅하기

댓글