구글애널리틱스 쌩기초(3) GA4 초기 세팅 및 방법론
구글 애널리틱스 (GA4)

구글애널리틱스 쌩기초(3) GA4 초기 세팅 및 방법론

Mr.Zee 2022. 4. 6.

GA4 계정 새로 생성하기

    Case 1. UA 화면에서 새로 생성

⚙️ 관리 - 계정 - 계정 만들기

 

1> 계정 설정

계정 이름 ex) 브랜드 이름 혹은 주소 을 적고 다음을 눌러주세요.

 

2> 속성 설정

속성 이름에 알맞은 내용을 적어주자.

보고 시간대와 통화는 한국 시간, 한국 원으로 바꿔주는 게 좋다. (중도에 변경 가능)

 

3> 비즈니스 정보

 

그냥 작성하지 않고 '만들기'로 진행해주셔도 무방.

약관에 동의를 눌러주면 계정 생성이 끝난다.

 

Case2. 구글 가이드 따라가기

https://support.google.com/analytics/answer/1009694?hl=ko 

 

계정 추가 - 애널리틱스 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

여기까지 잘 따라 오셨다면 ⚙️ 관리 - 속성 - 데이터 스트림에서 이런 화면을 볼 수 있다.

 

자 일단은 '웹' 에 대한 데이터 스트림을 먼저 연결해보자.

 

웹사이트 주소를 입력해주고,

 

입력 방법 : 웹사이트 주소창 내 URL 복사 후 붙여 넣기 (이때 https:// 등은 지워야 한다.)

 

다 작성 후 아래 같은 화면이 나오면 잘 따라온 것.

여기서 측정 ID 값을 잘 복사해놓자.

 

메모장 등에 붙여 넣는 게 편하겠죠? (아니면 외우자.)

그럼 이제 실제 웹사이트에 ga4 관련 스크립트를 추가하는 일만 남았다. 여기가 은근히 초보 마케터들을 비롯해 웹 지식이 빈약한 이들에겐 1차 통곡의 구간인데, 요즘은 워낙 윹튜브도 잘되어 있고 해서 따라만 해도 성공이다.

 

이 부분은 일단 최대한 간단하게만 설명하고, 오히려 데이터 수집이 정확한지 확인하는 방법론에 좀 더 집중해보자.

GA4를 웹사이트에 설치하자. 스크립트 이해하기

GA4 설치에 앞서 간단하게 작동방식을 소개하자면, 먼저 GA4는 스크립트를 통해 발생한 데이터를 GA4 서버로 보내는 역할을 한다.

스크립트란 <script>.......</script> 이런 생김새를 가진 프로그래밍 언어로, 웹페이지를 불러올 때 자동으로 실행된다.

 

특히 스크립트는 웹사이트의 페이지를 기반으로 실행가능하기 때문에 아무래도 구글 애널리틱스 같은 웹로그 분석 툴들의 대다수는 스크립트 형태로 해당 웹사이트에서 오가는 네트워크 패킷에 대한 정보를 분석한다.

말 그대로 웹사이트와 서버는 무수히 많은 신호를 서로 주고 받는다.

여기까지 개념이 조금 잡혔다면,

 

아까 보았던 웹 스트림 세부 정보 하위 섹션에 있는 '새로운 온페이지 태그 추가'를 통한 스크립트가 조금 덜 낯설어졌을 것이다.

 

안내에 따라 코드를 잘 복사 해놓은 뒤 GA4를 설치하려는 웹사이트의 소스코드를 수정해주면 된다.

 

보통 <head>...</head> 영역 사이에 <meta name=''> 같은 메타태그들이 있는데 이들 태그보다 아래쯤 위치하면 이상적이다. 각 페이지마다 이상적인 위치는 차이가 있기에 개발자와 상의하는 것이 가장 좋으나, 우리는 개발자가 없는 환경...

 

우리 초보 마케터들이 고분군투 하는 환경을 염두에 두기 때문에 임시로 예시를 만들어 놓았으니 아래 예시들을 참고하여 잘 수정해보자.

 

하단의 "더 보기" 를 눌러보면 볼 수 있다.

더보기

HTML 페이지 예시

네이버 페이지를 예시로 들자면, 추천 위치는 meta name="description" 태그와 <title> 사이이다.

 

<html lang="ko"> 
<head> 
<meta charset="utf-8"> 
<meta name="referrer" content="always">  
<meta name="format-detection" content="telephone=no,address=no,email=no"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0">
<meta property="og:title" content="구글애널리틱스 : 네이버 통합검색"/> 
<meta property="og:image" content="https://ssl.pstatic.net/sstatic/search/common/og_v3.png"> 
<meta property="og:description" content="'구글애널리틱스'의 네이버 통합검색 결과입니다."> 
<meta name="description" lang="ko" content="'구글애널리틱스'의 네이버 통합검색 결과입니다."> 
<title>구글애널리틱스 : 네이버 통합검색</title>
<link rel="shortcut icon" href="https://ssl.pstatic.net/sstatic/search/favicon/favicon_191118_pc.ico"> 
<link rel="search" type="application/opensearchdescription+xml" href="https://ssl.pstatic.net/sstatic/search/opensearch-description.https.xml" title="Naver" />
<.........>
<div class="brand_search section brand_new_ui">
	<div class="brand_wrap">
    </div>
    <div class="direct_link_area">
	</div>
</div>
<head>

 이런식으로 들어가게끔 배치하거나, <script>가 모여있는 줄이 있다면 해당 영역으로 배치해도 충분하다. <head></head> 태그 안에 들어갈 수 있게만 수정하자.

<meta name="description" lang="ko" content="'구글애널리틱스'의 네이버 통합검색 결과입니다."> 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=측정 ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '측정 ID');
</script>
<title>구글애널리틱스 : 네이버 통합검색</title>

예제 2 카페 24 등 사이트내 설치방법.

더보기

카페 24 등 사이트라면 SEO 세팅하는 란 혹은 웹사이트에서 항상 공통으로 불러와지는 영역 (ex. header) 페이지에 해당 코드가 들어가 있어야 한다.

 

보통 카페24 admin 페이지에서 쇼핑몰 - 운영관리 - 검색엔진 최적화(SEO) 탭을 많이 활용한다.

 

최 하단에 코드 직접입력 Head 영역 란에 PC / 모바일 에 각각 입력해주자.

 

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=측정 ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '측정 ID');
</script>

카페 24등 웹사이트들은 비교적 간단하게 설치가 가능하기 때문에 GA4가 올바르게 실행되는지 확인하는 것도 수월한 편.

 

GA4 설치를 했다면 테스트 해보자.

자 이제 설치가 잘 완료되었는지 테스트할 차례이다.

 

GA4로 되돌아와서 메인 메뉴 홈으로 들어가 보자.

 

혹은 차트 아이콘을 눌러 '보고서 개요' 하단의 '실시간' 메뉴로 들어오자.

실시간 메뉴를 켜놓은 후 GA4가 설치된 웹사이트로 접속해본다.

 

접속 후 약 10~30초가 지난 후 데이터가 잡히기 시작하면 GA4 설치는 성공적으로 끝났다.

 

웹사이트 소스에 직접 설치하는 방법 이외에도 태그 매니저 등을 활용해 개발자 도움 혹은 웹사이트 소스코드 수정 없이도 작성은 가능하다.

다만, 일련의 방법들을 익히기 전에 GA4 기본 스크립트를 좀 더 눈에 익혀둬야 편하다.

 

측정 ID를 예로 들자면, 눈치 빠른 사람들은 기본 스크립트의 전반적인 구조는 똑같고 측정 ID 부분만 바뀐다는 걸 알 수 있다.

이런 부분을 이용해서 상당히 많은 웹사이트들은 기본 구조를 짜 놓고 측정 ID값만 제출하면 되는 편의를 제공하고 있으니

임대형 쇼핑몰 (카페 24, 고도몰, 식스 샵)등을 사용할 때 해당 서비스들의 유무를 눈여겨보자.

댓글

💲 추천 글