[Google Tag Manager] 10. 구글태그관리자를 활용하여 가상페이지 설정하기

구글 태그매니저(GTM)를 이용해서 구글애널리틱스 가상페이지 추적하기

 

 

# 가상 페이지뷰란?

가상 페이지뷰는 웹브라우저에서 웹페이지 로딩이 없음에도 구글 애널리틱스로 ‘페이지뷰’ 히트(hit) 정보를 전송하는 것을 의미합니다.

 

# 언제 가상 페이지뷰를 사용하는가?

일반적으로 페이지뷰 히트는 웹페이지가 로드되면서 구글 애널리틱스 추적코드가 실행될 때 발생합니다. 하지만 웹페이지를 새로고침하거나 새로운 페이지로 이동하지 않더라도 아래와 같은 상황에서는 페이지뷰 히트 전송을 통해 사용자 상호작용(user interactions)을 추적할 수 있습니다.

– 페이지 새로고침이 없는 양식제출

– 웹사이트 내 (PDF) 파일 다운로드

– 동적으로 구성된 다단계 구매페이지

– 원페이지 웹사이트에서의 메뉴 버튼 클릭과 같은 페이지 내 이동 등

 

# 가상 페이지뷰 vs 이벤트 설정

가상 페이지뷰와 이벤트 설정 모두 웹사이트 내에서 사용자의 행위가 발생함에도 불구하고 기본 스크립트(GATC, Google Analytics Tracking Code)가 실행되지 않아 데이터 수집이 되지 않을 때, 추가적인 설정을 통해 데이터를 수집하는 방법에 해당합니다.

가상 페이지뷰 설정은 이벤트 설정에 비해 해당 페이지뷰를 퍼널 단계로 사용할 수 있다는 장점이 있습니다. 한편 페이지뷰수가 부풀려지는 단점도 있습니다. 가상 페이지뷰 설정 방식을 통한 데이터 추적은 대체로 이벤트 설정을 통해서도 처리할 수도 있기 때문에 상황에 따라 적절한 추적 방법을 선택할 필요가 있습니다.

 

# 구글 태그매니저를 통해 가상 페이지뷰 설정하기

이벤트 설정과 마찬가지로 가상 페이지뷰도 다양한 상황에서 다양한 방법으로 설정이 가능합니다만, 이번 포스팅에서는 1) 원페이지 웹사이트 내 GNB 버튼 클릭과 2) 회원가입 프로세스의 완료버튼 클릭을 각각 가상페이지로 설정하는 방법을 설명해 보도록 하겠습니다.

 

 

1) 원페이지 웹사이트 내 GNB 메뉴버튼 클릭

원페이지 웹사이트의 경우 말그대로 웹사이트가 하나의 웹페이지로 구성되어 있기 때문에 특정한 메뉴 버튼을 클릭했을 때 새로운 페이지가 열리지 않고 해당 메뉴 부분으로 커서만 이동합니다. 페이지가 로드되지 않기 때문에 추적코드가 실행되지 않으며 따라서 해당 액션에 대한 데이터를 수집할 수도 없습니다.

이러한 메뉴버튼 클릭 행위는 다른 통상적인 웹사이트라면 새로운 페이지를 여는 것에 해당하기 때문에 이벤트 설정보다는 가상페이지로 설정하는 게 낫다고 봅니다.

 

1단계 : 고유 식별자 확인

2단계 : 이벤트 태그 생성

3단계 : 트리거 생성

 

1단계 : 고유 식별자 확인

 

위 화면은 ‘3분 창업’이라는 카테고리 내 ‘창업절차’ 메뉴 버튼을 클릭했을 때 보이는 화면과 ‘인테리어’ 메뉴 버튼을 클릭했을 때 보이는 화면을 캡처하여 좌우로 나란히 보여주고 있는데요, 이미 언급한대로 웹사이트가 하나의 페이지로 되어있기 때문에 위 두 화면은 각각 다른 링크가 클릭되어 다른 컨텐츠를 보여줌에도 불구하고 페이지 주소가 동일합니다. 그래서 아래와 같이 각 버튼에 고유한 값이 있는지 확인합니다.

 

<a href="#none" class="btn_depth1" data-index="1">미친 브랜드</a>

 

<a href="#none" class="btn_depth2">회사소개</a>

 

최상단 카테고리에 ‘미친 브랜드’ 버튼 및 그 아래 ‘회사소개’ 버튼의 요소검사 결과를 보면, 클래스 값이 각각 ‘btn_depth1’ 및 ‘btn_depth2’로 되어 있으며 또 해당 메뉴의 텍스트를 포함하고 있습니다. 여기서 클래스 값이 고유한 값에 해당하기에 이를 트리거의 조건으로 사용하고 텍스트는 페이지 정보에 사용합니다.

 

2단계 : 이벤트 태그 생성

– 태그 이름 : 가상페이지 ← 임의로 지정

– 태그 유형 : ‘유니버설 애널리틱스 (Google 애널리틱스)’ 선택

– 추적 ID : {{safe mode}} ← 추적 ID, 사용자 정의 변수

– 추적 유형 : ‘페이지뷰’ 선택

– 설정할 입력란

⋅ page : {{Page Path}}{{Click Text}}

⋅ title : 업체명-{{Click Text}}

가상페이지 태그를 생성하여 page와  title 필드 값을 추가하고 트리거(아래 설명 참조) 또한 새로 생성하여 추가합니다.

 

기타 설정 > 설정할 입력란에서 새로운 입력란을 두 개 생성한 후, 페이지(page) 필드에는 기존 페이지({{Page Path}}) 변수에 텍스트({{Click Text}}) 변수를 추가합니다. 그리고 꼭 필요한 항목은 아니지만 페이지 제목(title) 필드 또한 기존 페이지 제목(예시에서는 변수값을 사용하지 않고 업체명을 사용함)에 텍스트 변수를 추가하여 페이지별 상호 구분이 되도록 하면 좋습니다.

 

3단계 : 트리거 생성

– 트리거 이름 : 가상페이지 ← 임의로 지정

– 트리거 유형 : ‘클릭 – 모든 요소’ 선택

– 실행 조건 (일부 클릭) : Click Classes가 ‘btn_depth’를 포함

 

가상페이지 태그는 추적 유형이 ‘페이지뷰’에 해당하지만 태그가 실행되는 조건은 새로운 페이지가 로드되는 시점이 아니고, 위와 같이 ‘btn_depth’를 클래스 값으로 갖는 버튼이 클릭되는 시점이 됩니다. 이와 같이 설정을 완료하면 아래와 같이 가상페이지 정보가 추가된 페이지 데이터가 수집됩니다.

 

 

 

 

2) 회원가입 완료버튼 클릭

지금부터 설명하려는 웹사이트는 회원가입 프로세스가 1) 약관 동의 2) 회원정보 입력 3) 회원가입 완료 총 3단계롤 구성되어 있습니다. 하지만 이 웹사이트는 특이하게도 1단계와 2단계는 고유의 페이지 주소가 존재하는 한편 3단계 완료페이지는 별도의 페이지가 없습니다. 알림창으로 가입여부만 알려주고 바로 메인페이지 화면이 뜨도록 설계되었습니다.

따라서 회원가입 완료 행위를 추적하기 위해서는 3단계 완료 버튼 클릭을 이벤트로 혹은 가상페이지로 설정해야 합니다. 여기에서는 이벤트 처리를 안하고 가상페이지로 설정을 했는데요, 그 이유는 앞에서도 설명한대로 가상페이지로 추적을 해야 퍼널 분석이 가능하기 때문입니다.

 

1단계 : 페이지 주소 패턴 확인

2단계 : 이벤트 태그 생성

3단계 : 트리거 생성

 

1단계 : 페이지 주소 패턴 확인

 

 

한 웹사이트의 회원가입 단계별 화면입니다. 페이지 주소는 아래와 같습니다.

 

1단계(약관동의) :  http://www.jounhealth.co.kr/members/join_step/join_step1.page

2단계(정보입력) : http://www.jounhealth.co.kr/members/join_step/join_step2.page?agree1=Y&agree2=Y

3단계(가입완료) : 해당 페이지 주소가 없습니다. 회원가입 완료 시 알람창으로 가입이 완료되었다는 텍스트를 보여준 후 확인을 누르면 메인페이지로 이동합니다.

 

따라서 2단계에서 정보입력을 한 후 완료 버튼을 클릭할 때 이를 트리거로 삼아서 가상페이지 정보를 GA로 전송합니다.

 

2단계 : 이벤트 태그 생성

– 태그 이름 : 가상페이지 ← 임의로 지정

– 태그 유형 : ‘유니버설 애널리틱스 (Google 애널리틱스)’ 선택

– 추적 ID : {{ua tracking id}} ← 추적 ID, 사용자 정의 변수

– 추적 유형 : ‘페이지뷰’ 선택

– 설정할 입력란

⋅ page : /members/join_step/join_step3.page

기타 설정 > 설정할 입력란에서 새로운 입력란을 생성한 후, 페이지(page) 필드에 생성하고자 하는 가상페이지 주소(/members/join_step/join_step3.page)를 입력합니다.

 

3단계 : 트리거 생성

– 트리거 이름 : 가상페이지 ← 임의로 지정

– 트리거 유형 : ‘맞춤 이벤트’ 선택

– 이벤트 이름 : ‘membership’ 입력 ← 임의로 지정

이 트리거에서는 트리거 유형을 ‘맞춤 이벤트’로 하고 이벤트 이름을 ‘membership’으로 하였습니다. 풀어서 설명하자면 데이터영역에 ‘membership’이벤트 이름이 존재하는 경우 태그를 실행시킨다는 의미입니다. 회원가입 2단계 완료 버튼 클릭시 필요한 정보가 제대로 기입되었는지를 확인하는 절차(유효성 검사)가 존재하고 이 절차를 통과한 클릭이 발생하면 데이터영역에 ‘membership’이라는 값을 갖는 이벤트 정보를 전송합니다. 역으로 해석해서 데이터영역에 ‘membership’이란 값을 갖는 이벤트가 존재하면 정상적인 회원가입 완료가 발생했다라고 간주할 수 있습니다.

데이터영역에 ‘membership’이라는 이벤트 변수를 전송/저장하기 위해서는 소스 코드를 수정해야 하는 등 사실 그 방법이 좀 복잡하기에 여기서는 생략합니다. 좀 더 자세한 사항은 이전 포스팅([Google Tag Manager] 7. 구글태그관리자를 활용한 이벤트 설정 – 양식제출)을 참조하시기 바랍니다.

 

위와 같이 설정이 완료되면 회원가입 완료시 가상페이지가 생성되어 아래와 같이 그 페이지를 확인할 수 있습니다.

 

또한 위와 같이 완료페이지가 존재해야 아래와 같이 단계별 목표 설정을 통한 퍼널분석이 가능합니다.

 

위 예시에서는 가입완료 버튼 클릭시 맞춤 이벤트 정보를 데이터영역으로 전송하고 이를 트리거로 삼아서 가상의 완료페이지의 다시 GA로 전송하는 방법을 사용했습니다만, 사실 가입완료페이를 별도로 하나 만들면 간단하게 처리될 수 있는 사례이기도 합니다.

 

 

—————————————————————————

국내 대표적인 온라인마케팅 커뮤니티/매체인 아이보스에서 구글 애널리틱스 4(GA4) 강의를 진행하고 있습니다. 커리큘럼 등 자세한 사항은 아래 링크를 참조하세요.

GA4 실무과정: https://www.ibossedu.co.kr/edu-goods-380

 

GA4 구축 문의하기(오컴데이터)
GA4 기업교육  문의하기(오컴데이터)