웹사이트에 GA4 연결하기 (1) GA4를 웹사이트와 연결하는 세 가지 방법
Note: 이 글은 GA, GTM이 모두 처음인 분을 위한 튜토리얼입니다. 기존에 UA(Universal Analytics)를 사용하고 계시던 분이 GA4를 추가 연결하는 방법을 찾고 있다면 UA(Universial Analytics)에서 GA4(Google Analytics 4)로 전환하기 글을 참고해주세요.
웹사이트에 GA4 연결하기 시리즈 모아보기
GA4를 웹사이트와 연결하는 세 가지 방법
GA 계정 만들기
GTM 계정 만들고 웹사이트에 설치하기
GTM에 첫 GA4 태그 만들기 - Google 태그 (2023-09 이후 설치 방법) [✨ 로그인 전용]
GTM에 첫 GA4 태그 만들기 - GA4 구성 태그 (2023-09 이전 설치 방법, Legacy)
이번 글에서는 GTM을 포함한 GA를 연결하는 다양한 방법들에 대해서 가볍게 소개해보겠습니다. 🏃🏻‍♀️ ’난 복잡한 내용은 생략하고 연결부터 해보고 싶어!’라고 생각하신다면 GTM을 사용해 웹사이트에 GA4 연결하기 (2) 부터 읽어주세요.
약어 정리
- GTM(Google Tag Manager): 구글 태그 관리자
- GA4(Google Analytics 4): 구글 애널리틱스 4
- UA(Universal Analytics): GA4 이전 버전
GA4를 웹사이트와 연결하는 세 가지 방법
1. 워드프레스 등 솔루션에서 제공하는 플러그인을 사용한다
GA4를 연결하는 방법에는 여러 가지가 있는데요. 
가장 간단한 방법은 내 웹사이트를 호스팅하고 있는 솔루션(워드프레스, 우피 등)의 플러그인을 사용하는 방법입니다. 예를 들면, 우피(oopy)라는 솔루션에서는 GA4를 간단하게 연결할 수 있는 아래와 같은 플러그인을 제공합니다. 아직 정확히는 모르더라도, ‘G-’로 시작하는 어떤 아이디를 넣고 저장 버튼을 누르면 연결이 되겠구나 하는 것을 짐작하실 수 있죠?
스크린샷 2022-06-30 오후 4.40.48.png
이 방법은 가장 간단하지만, 추가적인 기능 사용에 있어서 제약이 있을 수 있습니다. 플러그인을 사용하는 방법을 제외한 나머지 두 방법은 확장성이 있지만, 잘 이해하고 사용하려면 약간의 지식이 필요합니다. 차근차근 함께 살펴보겠습니다.
스크린샷 2022-06-30 오후 4.45.19.png
2. GTM을 이용한다.
이 튜토리얼을 통해서 최종적으로 해보려는 것이 바로 GTM을 활용하는 방법인데요!
GTM은 구글에서 제공하는 태그 관리 시스템(Tag Management System)입니다. 태그 관리 시스템이라는 것을 통해 우리는 웹사이트, 앱의 코드를 직접 수정하지 않고도 마케팅 태그(Tags)를 만들고 수정하고 삭제할 수 있습니다. 개발자의 도움을 받지 않고도 마케터 등 새로운 유형의 데이터를 수집하고 싶은 사람이 직접 GTM 관리자 화면에서 몇 번의 클릭을 통해 태그를 만들 수 있다는 것이 가장 큰 장점입니다.
태그(Tags)는 뭘까?
태그(Tags)는 개발자가 웹페이지를 만드는 데 사용하는 표준 HTML 태그와 비슷하지만 약간 다릅니다. HTML 태그는 <head>, <body>, <p> 등과 같은 태그를 말하는데요. 애널리틱스 및 마케팅에서 태그는 자바스크립트로 만든 태그 코드를 말하며 이는 데이터를 수집해서 태그 발급 업체(GA4, 페이스북 비즈니스 관리자 등)으로 전달하는 역할을 수행합니다.

HTML 태그는 또 뭐지? 궁금하시다면 
→ 생활코딩 WEB1 - HTML & Internet 강의를 가볍게 들어보시길 추천해요!
우리는 앞으로 GTM을 이용해서 GA4로 데이터를 전달하는 태그를 만들어볼 거예요.
스크린샷 2022-06-30 오후 7.57.36.png
3. gtag.js(Global site tag)를 이용한다.
GTM을 이용한 튜토리얼을 시작하기 전에 gtag에 대해서도 간략하게 설명하고 넘어가겠습니다. gtag는 데이터를 수집해서 GA로 보내주는 역할을 하는 자바스크립트 라이브러리입니다. GTM이 관리자 화면에서 태그를 만들고 수정할 수 있는 것과는 달리, 새로운 태그를 심기 위해서는 웹사이트의 코드를 수정해야 한다는 점이 비개발자이면서 태그를 관리해야 하는 사람들에게 가장 큰 차이점으로 다가올 것 같습니다.
‘그러면 gtag를 굳이 왜 사용해야 하지?’ 궁금하신 분들도 있을 텐데요. gtag를 사용하는데에는 나름의 다양한 이유가 있을 수 있습니다. 예를 들어, GTM이라는 태그 관리 시스템을 효율적으로 사용하기 위해서는 웹, 앱 화면을 구축하는 프론트엔드 개발이 구조적으로 잘 만들어져 있어야 합니다. 만약 난개발되어있는 상황이라면 GTM을 이용하는 것 보다는 gtag를 사용하는 것이 오히려 효율적일 수 있습니다. 또 사이트의 규모가 크지 않고 간단한 데이터만 수집한다면 굳이 GTM이라는 관리 도구를 더 사용하지 않고 gtag 만으로 태그 관리를 하고 싶을 수도 있습니다.
하지만 보고 싶은 웹 사용 데이터가 많아지고, 데이터를 트래킹해야 하는 마케팅 툴이 늘어난다면 gtag 로 일일이 페이지마다 태그를 심어서 관리하기에 점점 무리가 올 겁니다. 때문에 어느 정도 규모가 있는 프로젝트를 한다면 GTM 사용을 적극 권장합니다.
다음 글에서는 GA4, GTM 계정을 생성하는 것부터 시작해보겠습니다. 👋🏻
참고 자료
GTM 공식 문서: Google 태그 관리자와 gtag.js


웹사이트에 GA4 연결하기 (2) GA 계정 만들기

conversion_type

시리즈 내 순서

conversion_text

멤버 전용

대표 이미지

공개 가능

작성일

예상 읽기 시간

전환 텍스트

글쓴이

시리즈

상단 노출

전환 유형

요약

제목

이 글은 2023년 9월 업데이트 된 Google 태그 이전 방식인 GA4 구성 태그 설치 방법을 다룹니다.

웹사이트에 GA4 연결하기 (Legacy) GTM에 첫 GA4 태그 만들기 - GA4 구성 태그

GA4를 웹사이트와 연결하는 세 가지 방법

GTM을 포함한 GA를 연결하는 다양한 방법들에 대해서 가볍게 소개해보겠습니다.

웹사이트에 GA4 연결하기 (1) GA4를 웹사이트와 연결하는 세 가지 방법

웹사이트에 GA4 연결하기 (1) GA4를 웹사이트와 연결하는 세 가지 방법

Contents

함께 읽어보면 좋은 글

GA4 보고서의 기초 (4) 실시간 보고서

GA4 보고서의 기초 (1) 보고서 구조와 종류

웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기

데이터 분석 소식을
한 달에 한 번 받아보세요

웹사이트에 GA4 연결하기 (1) GA4를 웹사이트와 연결하는 세 가지 방법

Contents

함께 읽어보면 좋은 글

GA4 보고서의 기초 (4) 실시간 보고서

GA4 보고서의 기초 (1) 보고서 구조와 종류

웹사이트에 GA4 연결하기 (3) GTM 계정 만들고 웹사이트에 설치하기

데이터 분석 소식을 한 달에 한 번 받아보세요

데이터 분석 소식을
한 달에 한 번 받아보세요