<div id="readability-page-1" class="page"><div>
                  <p><a href="/m/category/FRONTEND"><span>FRONTEND</span></a></p><h3>구글태그매니저(GTM)를 통해 GA4 연동하기</h3>
                </div><p><cite>나를찾는아이</cite>
                  <span> 2022. 12. 22. 13:04</span>
                </p><div>
                                <p data-ke-size="size16"><a href="https://support.google.com/tagmanager/answer/6102821?hl=ko">https://support.google.com/tagmanager/answer/6102821?hl=ko</a>&nbsp;</p>
<figure id="og_1671414124787" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="태그 관리자에 대한 개요 - 태그 관리자 고객센터" data-og-description="도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요" data-og-host="support.google.com" data-og-source-url="https://support.google.com/tagmanager/answer/6102821?hl=ko" data-og-url="https://support.google.com/tagmanager/answer/6102821?hl=ko" data-og-image=""><a href="https://support.google.com/tagmanager/answer/6102821?hl=ko" target="_blank" rel="noopener" data-source-url="https://support.google.com/tagmanager/answer/6102821?hl=ko">

<div>
<p data-ke-size="size16">태그 관리자에 대한 개요 - 태그 관리자 고객센터</p>
<p data-ke-size="size16">도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요</p>
<p data-ke-size="size16">support.google.com</p>
</div>
</a></figure>

<p data-ke-size="size16">GA4 스크립트를 직접 내 웹사이트에 넣는 방법도 있지만 좀 더 멋지게 사용할수 있는 방법입니다</p>

<p data-ke-size="size16">구글 태그매니저를 이용한 방법입니다</p>

<p data-ke-size="size16">구글 태그매니저가 뭐지? 다소 이해하기 어려운 개념일수도 있는데요</p>

<p data-ke-size="size16">"태그"라는 단어가 다소 모호해서 그렇지 않나 싶습니다</p>


<p data-ke-size="size16">구글 태그매니저는 애널리틱스를 비롯하여 다른 모든 스크립트들을 손쉽게 관리해줄수 있는 매니저라고 생각해보면 이해가 쉽지 않을까 싶네요</p>


<p data-ke-size="size16">구글태그매니저만 웹사이트에 추가해두면 다른 추가로 실행해야할 스크립트들을 매번 내 웹사이트에 직접 코드를 넣지 않아도</p>

<p data-ke-size="size16">구글태그매니저를 통해 스크립트들을 삽입할수 있어</p>

<p data-ke-size="size16">구글태그매니저를 넣는 코드 이외의 코드의 수정이 필요가 없습니다</p>

<p data-ke-size="size16">그리고 태그매니저에 이미 많은 회사의 태그 템플릿이 등록되어있어 이를 활용하면</p>

<p data-ke-size="size16">각 회사들의 script를 일일이 내 웹사이트에 심을 필요 없이 구글태그매니저만 심고 구글태그매니저를 통하여 실행시킬수 있습니다</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-19 오전 11.00.28.png" data-origin-width="1228" data-origin-height="1536">
    <span data-url="https://blog.kakaocdn.net/dn/pugzi/btrTSLoJYA6/Emwe5hUDTLTl6qukwQejRk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/pugzi/btrTSLoJYA6/Emwe5hUDTLTl6qukwQejRk/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-19 오전 11.00.28.png" data-origin-width="1228" data-origin-height="1536">
    </span>
    
</figure>


<p data-ke-size="size16">그림으로 도식화해보면 이렇습니다</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-16 오후 5.24.11.png" data-origin-width="1440" data-origin-height="628">
    <span data-url="https://blog.kakaocdn.net/dn/ETQvH/btrTPimWyfr/Plna4LW36EEmMpwrRVhU6k/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/ETQvH/btrTPimWyfr/Plna4LW36EEmMpwrRVhU6k/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 오후 5.24.11.png" data-origin-width="1440" data-origin-height="628">
    </span>
    
</figure>
<p data-ke-size="size16">GTM-XXXXX 키를 가진 구글태그매니저 스크립트를 내 웹사이트에 설치합니다</p>

<p data-ke-size="size16">그리고 구글 태그매니저에서 GA4를 구성합니다</p>

<p data-ke-size="size16">그렇게 되면 태그매니저를 통해서 수신되는 이벤트도 마찬가지로 GA4로 전송할수 있습니다</p>


<p data-ke-size="size16">구글태그매니저를 설치하기 위한 스크립트는 다음과 같습니다</p>

<p data-ke-size="size16"><a href="https://developers.google.com/tag-platform/tag-manager/web" target="_blank" rel="noopener">https://developers.google.com/tag-platform/tag-manager/web</a></p>
<figure id="og_1671414603322" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="웹페이지용 Google 태그 관리자 설치
  
 &nbsp;|&nbsp; Google Tag Manager for Web &nbsp;|&nbsp; Google Developers" data-og-description="웹사이트용 Google 태그 관리자입니다." data-og-host="developers.google.com" data-og-source-url="https://developers.google.com/tag-platform/tag-manager/web" data-og-url="https://developers.google.com/tag-platform/tag-manager/web?hl=ko" data-og-image="https://scrap.kakaocdn.net/dn/YKaY2/hyQWFwEPbq/OOXeWeTKkmq5wjDJUXWto1/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/bbO9lC/hyQWExLg0q/fyyttjpFLVKfSATkB3uMkK/img.png?width=1234&amp;height=871&amp;face=0_0_1234_871,https://scrap.kakaocdn.net/dn/bmTbfa/hyQWsc09BS/6tjM44YNpRbQUmsujaWKik/img.png?width=1412&amp;height=217&amp;face=0_0_1412_217"><a href="https://developers.google.com/tag-platform/tag-manager/web" target="_blank" rel="noopener" data-source-url="https://developers.google.com/tag-platform/tag-manager/web">

<div>
<p data-ke-size="size16">웹페이지용 Google 태그 관리자 설치 &nbsp;|&nbsp; Google Tag Manager for Web &nbsp;|&nbsp; Google Developers</p>
<p data-ke-size="size16">웹사이트용 Google 태그 관리자입니다.</p>
<p data-ke-size="size16">developers.google.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/YKaY2/hyQWFwEPbq/OOXeWeTKkmq5wjDJUXWto1/img.png?width=1200&amp;height=630&amp;face=0_0_1200_630,https://scrap.kakaocdn.net/dn/bbO9lC/hyQWExLg0q/fyyttjpFLVKfSATkB3uMkK/img.png?width=1234&amp;height=871&amp;face=0_0_1234_871,https://scrap.kakaocdn.net/dn/bmTbfa/hyQWsc09BS/6tjM44YNpRbQUmsujaWKik/img.png?width=1412&amp;height=217&amp;face=0_0_1412_217"></figure>

<p data-ke-size="size16">GTM-으로 시작하는 키 값은 여러분의 값으로 변경해주시면 됩니다</p>


<p data-ke-size="size16">head 태그 안에 이 스크립트를 넣어주세요</p>
<pre id="code_1671158925374" data-ke-language="javascript" data-ke-type="codeblock"><code>&lt;!-- Google Tag Manager --&gt;
&lt;script&gt;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-여기');&lt;/script&gt;
&lt;!-- End Google Tag Manager --&gt;</code></pre>

<p data-ke-size="size16">그리고 body가 끝나기 바로 전에 대체스크립트를 넣어줍니다</p>
<pre id="code_1671158942772" data-ke-language="javascript" data-ke-type="codeblock"><code>&lt;!-- Google Tag Manager (noscript) --&gt;
&lt;noscript&gt;&lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-여기"
height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;&lt;/noscript&gt;
&lt;!-- End Google Tag Manager (noscript) --&gt;</code></pre>

<p data-ke-size="size16">이렇게 되면 구글태그매니저의 설치가 완료되었습니다</p>


<p data-ke-size="size16">nextjs를 사용하시는 분들이라면&nbsp; _document.tsx에 아래의 내용을 작성해주시면 됩니다</p>

<pre id="code_1671420381600" data-ke-language="javascript" data-ke-type="codeblock"><code>import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    &lt;Html lang="en"&gt;
      &lt;Head&gt;
        &lt;Script id="google-tag-manager" strategy="afterInteractive"&gt;
          {`
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-여기');`}
        &lt;/Script&gt;
      &lt;/Head&gt;
      &lt;body&gt;
        &lt;Main /&gt;
        &lt;NextScript /&gt;
        &lt;noscript
          dangerouslySetInnerHTML={{
            __html: `
            &lt;iframe src="https://www.googletagmanager.com/ns.html?id=GTM-여기"
            height="0" width="0" style="display:none;visibility:hidden"&gt;&lt;/iframe&gt;
            `,
          }}
        /&gt;
      &lt;/body&gt;
    &lt;/Html&gt;
  );
}</code></pre>



<p data-ke-size="size16">구글태그매니저를 통해 GA4를 구성해보겠습니다</p>

<p data-ke-size="size16">구글 태그 관리자에서 태그를 선택하시고 "새로 만들기"를 눌러주세요</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-19 오전 10.51.41.png" data-origin-width="2480" data-origin-height="840">
    <span data-url="https://blog.kakaocdn.net/dn/btv1Iz/btrT3pYH3E9/1BLtYJpFWkDzSohCymNWnk/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/btv1Iz/btrT3pYH3E9/1BLtYJpFWkDzSohCymNWnk/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-19 오전 10.51.41.png" data-origin-width="2480" data-origin-height="840">
    </span>
    
</figure>

<p data-ke-size="size16">태그 유형중에 GA4 구성을 선택하시고</p>

<p data-ke-size="size16">측정 ID에 G-로 시작하는 여러분의 GA4 키값을 입력해주세요</p>

<p data-ke-size="size16">debug_mode를 활성화 하기 위해서는</p>

<p data-ke-size="size16">추가 필드를 설정하여</p>

<p data-ke-size="size16">아래 사진과 같이 debug_mode : true를 설정해주세요</p>


<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-19 오전 10.50.58.png" data-origin-width="1946" data-origin-height="1418">
    <span data-url="https://blog.kakaocdn.net/dn/cuJQCT/btrTVhnbMK5/NnKTRgDQPcEKHGXuLL8TWK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/cuJQCT/btrTVhnbMK5/NnKTRgDQPcEKHGXuLL8TWK/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-19 오전 10.50.58.png" data-origin-width="1946" data-origin-height="1418">
    </span>
    
</figure>
<p data-ke-size="size16">그리고 트리거에는 모든 페이지를 선택해주시면 됩니다</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2022-12-19 오전 10.51.05.png" data-origin-width="2004" data-origin-height="356">
    <span data-url="https://blog.kakaocdn.net/dn/ObvSv/btrTSxdbHZJ/GBCJq4XzJcdazhkSRImTN0/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/ObvSv/btrTSxdbHZJ/GBCJq4XzJcdazhkSRImTN0/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-19 오전 10.51.05.png" data-origin-width="2004" data-origin-height="356">
    </span>
    
</figure>


<p data-ke-size="size16">태그매니저는 태그와 트리거가 중요한 개념인데요</p>

<p data-ke-size="size16">특정 "태그"(스크립트라고 이해하면 더 쉬울수도 있습니다)를 "트리거"(언제 실행시킬지)가 발생하면 실행한다고 이해하시면 됩니다</p>


<p data-ke-size="size16">제가 위에서 설정한 내용은</p>

<p data-ke-size="size16">모든 페이지의 페이지뷰가 발생할때 GA4구성을 실행한다라고 이해하시면 됩니다</p>


<p data-ke-size="size16">여러분이 직접 GA4를 웹사이트에 설치할때와 같은 구성인 셈입니다</p>

<p data-ke-size="size16">debug_mode를 true로 설정하셨다면 이전에 알려드린 실시간 디버깅을 통해 구글태그매니저를 통한 GA4가 정상적으로 실행되는지 확인해보세요~</p>




            
            
                </div></div>

나를 찾는 아이

Kyoung min, Kim

https://support.google.com/tagmanager/answer/6102821?hl=ko 
 
GA4 스크립트를 직접 내 웹사이트에 넣는 방법도 있지만 좀 더 멋지게 사용할수 있는 방법입니다
 
구글 태그매니저를 이용한 방법입니다
 
구글 태그매니저가 뭐지? 다소 이해하기 어려운 개념일수도 있는데요
 
"태그"라는 단어가 다소 모호해서 그렇지 않나 싶습니다
 
 
구글 태그매니저는 애널리틱스를 비롯하여 다른 모든 스크립트들을 손쉽게 관리해줄수 있는 매니저라고 생각해보면 이해가 쉽지 않을까 싶네요
 
 
구글태그매니저만 웹사이트에 추가해두면 다른 추가로 실행해야할 스크립트들을 매번 내 웹사이트에 직접 코드를 넣지 않아도
 
구글태그매니저를 통해 스크립트들을 삽입할수 있어
 
구글태그매니저를 넣는 코드 이외의 코드의 수정이 필요가 없습니다
 
그리고 태그매니저에 이미 많은 회사의 태그 템플릿이 등록되어있어 이를 활용하면
 
각 회사들의 script를 일일이 내 웹사이트에 심을 필요 없이 구글태그매니저만 심고 구글태그매니저를 통하여 실행시킬수 있습니다
 
 
 
 
그림으로 도식화해보면 이렇습니다
GTM-XXXXX 키를 가진 구글태그매니저 스크립트를 내 웹사이트에 설치합니다
 
그리고 구글 태그매니저에서 GA4를 구성합니다
 
그렇게 되면 태그매니저를 통해서 수신되는 이벤트도 마찬가지로 GA4로 전송할수 있습니다
 
 
구글태그매니저를 설치하기 위한 스크립트는 다음과 같습니다
 
https://developers.google.com/tag-platform/tag-manager/web
 
GTM-으로 시작하는 키 값은 여러분의 값으로 변경해주시면 됩니다
 
 
head 태그 안에 이 스크립트를 넣어주세요

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-여기');</script>

 
그리고 body가 끝나기 바로 전에 대체스크립트를 넣어줍니다

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-여기"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

 
이렇게 되면 구글태그매니저의 설치가 완료되었습니다
 
 
nextjs를 사용하시는 분들이라면  _document.tsx에 아래의 내용을 작성해주시면 됩니다
 
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <Script id="google-tag-manager" strategy="afterInteractive">
          {`
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', 'GTM-여기');`}
        </Script>
      </Head>
      <body>
        <Main />
        <NextScript />
        <noscript
          dangerouslySetInnerHTML={{
            __html: `
            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-여기"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
            `,
          }}
        />
      </body>
    </Html>
  );
}
 
 
 
구글태그매니저를 통해 GA4를 구성해보겠습니다
 
구글 태그 관리자에서 태그를 선택하시고 "새로 만들기"를 눌러주세요
 
 
태그 유형중에 GA4 구성을 선택하시고
 
측정 ID에 G-로 시작하는 여러분의 GA4 키값을 입력해주세요
 
debug_mode를 활성화 하기 위해서는
 
추가 필드를 설정하여
 
아래 사진과 같이 debug_mode : true를 설정해주세요
 
 
그리고 트리거에는 모든 페이지를 선택해주시면 됩니다
 
 
 
태그매니저는 태그와 트리거가 중요한 개념인데요
 
특정 "태그"(스크립트라고 이해하면 더 쉬울수도 있습니다)를 "트리거"(언제 실행시킬지)가 발생하면 실행한다고 이해하시면 됩니다
 
 
제가 위에서 설정한 내용은
 
모든 페이지의 페이지뷰가 발생할때 GA4구성을 실행한다라고 이해하시면 됩니다
 
 
여러분이 직접 GA4를 웹사이트에 설치할때와 같은 구성인 셈입니다
 
debug_mode를 true로 설정하셨다면 이전에 알려드린 실시간 디버깅을 통해 구글태그매니저를 통한 GA4가 정상적으로 실행되는지 확인해보세요~

구글태그매니저(GTM)를 통해 GA4 연동하기

댓글