<div id="readability-page-1" class="page"><article id="mainContent">
                
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 12. 16. 14:37</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16"><a href="https://developers.google.com/analytics/devguides/collection/ga4" target="_blank" rel="noopener">GA4</a>의 설치는 애널리틱스 계정을 생성하고 웹페이지에 GA의 스크립트를 추가하는것으로부터 시작합니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오전 11.15.52.png" data-origin-width="2082" data-origin-height="1154">
    <span data-url="https://blog.kakaocdn.net/dn/rdsz5/btrTLJrCNB9/B9xPK0Hj9alK5RDPmI6onk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/rdsz5/btrTLJrCNB9/B9xPK0Hj9alK5RDPmI6onk/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 오전 11.15.52.png" data-origin-width="2082" data-origin-height="1154">
    </span>
    
</figure>

<p data-ke-size="size16">좌측 하단의 관리자를 클릭후 데이터 스트림 메뉴를 선택하세요</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오전 11.16.01.png" data-origin-width="2882" data-origin-height="1200">
    <span data-url="https://blog.kakaocdn.net/dn/bc7U2d/btrTLFJq5zj/msnY1h2uyUjXK7XdgQ29qk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bc7U2d/btrTLFJq5zj/msnY1h2uyUjXK7XdgQ29qk/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 오전 11.16.01.png" data-origin-width="2882" data-origin-height="1200">
    </span>
    
</figure>
<p data-ke-size="size16">생성되어있는 스트림을 선택합니다</p>

<p data-ke-size="size16">생성되어있는것이 없다면 스트림 추가를 통해 추가하시면 됩니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 2.17.16.png" data-origin-width="2370" data-origin-height="1724">
    <span data-url="https://blog.kakaocdn.net/dn/bMYfQR/btrTQgt4Jmw/8ZgGvMWdwxUlF12S7Ay8K0/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bMYfQR/btrTQgt4Jmw/8ZgGvMWdwxUlF12S7Ay8K0/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.17.16.png" data-origin-width="2370" data-origin-height="1724">
    </span>
    
</figure>

<p data-ke-size="size16">스트림 상세정보의 하단에 태그 안내 보기를 클릭합니다</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 2.17.27.png" data-origin-width="2206" data-origin-height="1612">
    <span data-url="https://blog.kakaocdn.net/dn/u0qND/btrTLJrDgJz/93CkehaekNQaXp1iKfqw4k/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/u0qND/btrTLJrDgJz/93CkehaekNQaXp1iKfqw4k/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.17.27.png" data-origin-width="2206" data-origin-height="1612">
    </span>
    
</figure>
<p data-ke-size="size16">이 화면에서 나타난 스크립트를 복사하여 홈페이지에 넣으시면 됩니다</p>

<p data-ke-size="size16">참고로 id값이 G-로 시작하지 않으면 GA4용 ID가 아닙니다</p>




<p data-ke-size="size16">nextjs에서 사용할수 있는 스크립트입니다</p>

<p data-ke-size="size16">G-로 시작하는 값 두군데를 여러분의 값으로 변경하여 사용하시면 됩니다</p>

<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>

<p data-ke-size="size16">참고로 전체 이벤트에 대해 debug_mode를 켜고자 하는 경우 추가 옵션으로 debug_mode: true를 전달하면 됩니다</p>

<p data-ke-size="size16">설치 끝!</p>


            
            
                </div>
            

                
              </article></div>

나를 찾는 아이

Kyoung min, Kim

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를 전달하면 됩니다
 
설치 끝!

웹사이트에 ga4 설치하기

댓글