brunch

You can make anything
by writing

C.S.Lewis

by 미스터리 Dec 07. 2022

GTM을 활용한 GA4 설치 방법 및 주의사항


 오늘은 Google tag manager(이하 GTM)을 활용하여 사이트에 Google Analytics4(이하 GA4)를 설치하는 방법에 대해서 알려드리도록 하겠습니다.




 읽으시면 도움이 되실 독자는 아래와 같습니다.   

사이트에 GA4를 설치하고자 하는 기업의 담당자

GA4의 여러 가지 설치 방법으로 인해 어려움을 겪고 있는 담당자

구글 태그 매니저를 활용하여 GA4 설치하는 방법을 알고자 하는 담당자

기존 UA(구글 유니버설 애널리틱스)에서 GA4를 새로이 설치하고자 하는 담당자


Google Analytics4 여러 가지 설치 방법


GA4 설치 방법 종류  


GA4의 gtag.js(g태그)로 데이터 집계가 될 수 있도록 설정하는 방식.

GTM을 통해서 GA4 구성 태그를 생성하여 데이터 집계를 할 수 있도록 설정하는 방식.


 구글에서는 구글 애널리틱스를 설치하기 위한 방법을 여러 가지로 제공하고 있습니다. 방법은 취향에 따라서 선택하셔도 되지만, GTM을 통해서 GA4를 설정하는 것이 차후 GTM에서 설정한 이벤트들을 관리하기에 용이하기 때문에 GTM을 통해서 GA4를 설치하는 방법을 추천드립니다. 

 이를 위해서는 GA4에서 제공하는 수동 태그를 사이트에 설치하시면 안 되는 점 꼭 기억하셔야 합니다. GA4 수동 태그를 사이트에 설치하고 GTM으로 GA4를 설치하게 되면 중복 데이터 발생으로 인해서 1명의 사용자를 2명으로 집계하게 될 수 있습니다. 




Google Tag Manager(GTM) 설치 코드 확인 1
Google Tag Manager(GTM) 설치 코드 확인 2


Google Tag Manager(GTM) 설치


 먼저, GTM을 통해서 GA4를 설치하기 위해서는 GTM의 설치 코드가 사이트 내 삽입되어 있어야 합니다. 이를 위해서 구글에 "GTM"을 검색한 뒤, 구글 태그 매니저로 접속하시어 태그 관리자 계정과 컨테이너를 생성하시고 위의 이미지와 같이 설치 코드를 확인하여 사이트에 삽입합니다. 


 첫 번째, 위의 소스 코드는 <head>와 </head> 태그 사이에 아래와 같이 넣어주시면 되며, 위치는 크게 상관없지만 <head> 태그 상단에 설치하시는 것이 일반적입니다. 
(실제로는 해당 태그뿐만 아니라 사이트를 구성하는 여러 태그들이 있기 때문에 헷갈리실 수도 있습니다.)




<head> 

<!-- Google Tag Manager -->

<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-NROOOOO');</script>

<!-- End Google Tag Manager -->

</head>




 그리고 다음 두 번째 코드는 <body>와 </body> 태그 사이에 아래와 같이 삽입하시면 되는데, 이 또한 위치는 <body> 태그 상단에 설치하는 것이 일반적이니 참고하시면 되겠습니다. 



<body>

<!-- Google Tag Manager (noscript) -->

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NROOOOO"

height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

</body>



 위의 소스 코드에서 "id=GTM-NROOOOO"으로 기재된 부분은 각 개인별 id가 부여되기 때문에 꼭 확인하셔야 합니다. 이 두 가지 코드를 사이트에 삽입하셨다면 GTM 설치는 완료가 되었습니다!




Google Analytics4 측정 ID 확인 과정 1
Google Analytics4 측정 ID 확인 과정 2
Google Analytics4 측정 ID 확인 과정 3


GTM에서 GA4를 잡기 위한 측정 ID 확인


 먼저 GTM에서 구성 태그를 생성하기 위해서는 GA4에서 설정 > 데이터 스트림 > 생성한 데이터 스트림 클릭 > "측정 ID" 복사를 진행해주시면 되겠습니다. 

 그 뒤 다시 GTM으로 이동해보도록 하죠!


GTM 태그 > 새로 만들기 클릭
GTM에 GA4 측정 ID 붙여 넣기


GTM에서 GA4 설정  


 해당 태그의 이름 설정(본인이 알기 쉽도록 설정)

 먼저, GTM으로 이동하셨다면 태그 탭으로 이동하시어 "새로 만들기" 버튼을 클릭해주세요.

 태그 유형은 Google 애널리틱스: GA4 구성으로 설정

 측정 ID에는 GA4 측정 ID 붙여 넣기

 트리거는 All Page 설정


 트리거를 All Page로 설정하는 이유는 사이트의 특정 부분만 사용자들을 분석하는 것이 아닌 사이트의 모든 페이지에서 사용자의 활동을 확인하기 위함입니다. 



미리 보기를 통한 태그 작동 여부 확인


 태그 설정이 완료되었다면 GTM 오른쪽 상단의 "제출"을 진행하기 전 "미리 보기"를 클릭하여 해당 태그의 작동 여부를 확인해야 합니다. 미리보기를 진행하지 않고 제출을 진행하는 경우 오류가 발생했을 때, 사이트에 영향이 있을 수 있으니 꼭 먼저 미리보기를 진행하셔야 합니다. 

 현재 위의 이미지와 같이 GA4_tistory 태그가 tags Fired가 되면서 잘 작동하고 있는 것을 확인할 수 있습니다. 




GA4 데이터 집계 작동 여부 확인


 GTM에서 GA4를 태그를 잡으셨고 미리 보기를 통해 태그가 잘 작동하는지까지 확인하셨다면, 24시간~48시간 이후 GA4에서 데이터가 제대로 집계되고 있는지를 확인하시면 되겠습니다. 

 데이터 확인을 위해 24~48시간 집계를 기다리는 이유는 구글에서 데이터가 집계되기까지 최대 24시간에서 48시간까지 시간이 소요될 수 있다고 명시했기 때문입니다. 또한, 실제로 고객사들을 확인하면서 간혹 최대 2일까지 데이터가 집계되지 않는 경우가 있어 Google 측에 재차 확인을 마친 상황이기 때문에 데이터가 당장 잡히지 않는다고 걱정하지 않으셔도 되겠습니다. 




 GA4는 마케팅을 함에 있어 의사결정에 중요한 영향을 미칠 수 있는 데이터를 집계하는 툴이라고 생각하시면 됩니다. 하지만 GA4의 데이터를 항상 신뢰할 수 있다고 이야기하기에는 어려움이 있습니다. 그렇기에 많은 마케터분들이 하나의 툴로 고객들을 분석하는 것이 아닌 여러 가지의 툴을 활용함으로써 데이터를 쌓고 이를 활용하여 고객을 분석하는 것이죠. 


 혹시나 설치하시는데에 어려움이 있으시다면 이메일로 문의를 주시면 도움이 될 수 있도록 하겠습니다. 


 이상 미스터리한 마케터였습니다.

감사합니다. 

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari