Introduction

구매까지는 여러 단계의 퍼널이 존재합니다. 각 단계의 전환률을 높여 구매로 이어지게 하는 것이 중요한데, 이를 위해 무엇을 할 수 있을까요?

GTM(Google Tag Manager)과 actionSpeak를 함께 사용하면 팝업을 통해 고객의 여정에 적극적으로 참여하여 전환률 향상을 기대할 수 있습니다.

예를 들어

• 첫 고객를 위한 회원가입 혜택 안내 팝업 → 회원가입 전환률 향상
• 상품을 장바구니에 담지 않고 망설이는 고객에게 할인 쿠폰을 제공하는 팝업 → 장바구니 전환률 향상
• 상품을 장바구니에 담고 구매를 망설이는 고객에게 시간 제한이 있는 특별 할인 쿠폰을 제공하는 팝업 → 구매 전환률 향상
• 재방문 고객을 위한 환영 메세지와 상품 추천 팝업 → 재구매률 향상

이러한 전략들은 구매 퍼널의 각 단계별 전환율을 높이고, 결과적으로 전반적인 구매 전환율 향상에 기여할 수 있습니다.

이 글에서는 구체적인 예시로, 재방문 고객을 위한 환영 메세지와 상품 추천 팝업을 보여주는 방법에 대해 알아보겠습니다.

GTM이란?

차량 속도 및 번호: 변수, 속도 위반: 트리거, 담당 공무원에게 보고: 태그

GTM(Google Tag Manager)는 홈페이지의 감시카메라입니다. 고객이 웹사이트에서 어떤 행동을 했는지 감시하고, 제 3자(GA4, actionSpeak, 페이스북 픽셀 등)에게 알리고 싶은 정보와 함께 보고하는 역할을 합니다.

감시카메라에 빗대어 다시 설명하자면, 특정 차량의 속도(변수)가 제한 속도를 넘었을 때(트리거), 차량 번호(변수)를 담당 공무원에게 보고(태그)하는 것입니다.

이 글의 예시로는 고객의 재방문(고객의 방문 횟수가 2회 이상일 때)을 트리거로 하고, actionSpeak에 보고하여 팝업을 보여주는 것을 태그로 하겠습니다.

• 변수: 고객의 방문 횟수
• 트리거: 고객의 방문 횟수가 2회 이상일 때
• 태그: actionSpeak에 보고하여 팝업 노출

GTM 설치

1. GTM(Google Tag Manager)에 로그인하여 [계정 만들기]를 클릭합니다.
   

2. 계정 및 컨테이너 정보를 입력하여 [만들기]를 클릭합니다.

• 계정 이름: 회사나 브랜드 이름을 입력합니다.
• 컨테이너 이름: 웹사이트 주소를 입력합니다.
• 타겟 플랫폼: 웹을 선택합니다.
  

3. 설치 코드를 복사하여 웹사이트의 head 태그와 body 태그에 붙여넣습니다.

• 아임웹 사용자 팁: 복사한 설치 코드를 ‘사이트 관리 > 환경설정 > SEO(검색엔진최적화)’ 에서 추가할 수 있습니다.
  

4. 설치 확인

• 설치한 웹사이트의 URL을 붙여넣고 [테스트]를 클릭하여 설치를 확인합니다.
  

변수 설정

고객의 웹사이트 방문 횟수를 알기 위한 변수를 만들겠습니다.

1. ‘변수 > 사용자 정의 변수’ 에서 [새로 만들기]를 클릭합니다.
   

2. 변수 유형으로 [맞춤 자바스크립트]를 선택합니다.
   

3. 맞춤 자바스크립트에 하단 코드를 붙여넣고 저장합니다.

   function() {
     return localStorage.getItem('as-visit-count');
   }

   

4. 변수가 추가된 것을 확인합니다.
   

트리거 설정

고객의 웹사이트 방문 횟수가 2회 이상일 때 작동하는 트리거를 만들겠습니다.

1. ‘트리거 메뉴’ 에서 [새로 만들기]를 클릭합니다.
   

2. 트리거의 유형으로 [페이지뷰]를 선택합니다.
   

3. 트리거의 실행 조건으로 [일부 페이지뷰]를 선택하고, 위에서 만든 방문 횟수 변수를 2 이상으로 설정한 후 저장합니다.
   

4. 트리거가 추가된 것을 확인합니다.
   

태그 설정

이미지 추가

태그를 만들기 전에 팝업에 사용할 이미지를 추가하겠습니다.

1. actionSpeak에 로그인하여 ‘웹사이트 관리 > 이미지 관리’에서 이미지를 추가합니다.

• 이미지 이름: 태그 설정 시 추가할 이미지의 구분 값
  

2. 추가한 이미지가 팝업에서 어떻게 보여지는지 미리보기를 클릭하여 확인합니다.
   

actionSpeak 템플릿 추가

1. ‘템플릿 > 태그 템플릿’ 에서 [갤러리 검색]을 클릭합니다.
   

2. ‘ActionSpeak Show Popup Tag’를 찾아 [작업공간에 추가]를 클릭합니다.
   

3. 태그 템플릿에 추가된 것을 확인합니다.
   

태그 추가

1. ‘태그 메뉴’ 에서 [새로 만들기]를 클릭합니다.
   

2. 태그 유형으로 [ActionSpeak Show Popup Tag]를 선택합니다.
   

3. 설정 값을 입력합니다.

• 이미지 이름: actionSpeak에서 설정한 이미지의 고유 이름
• 링크: 클릭 시 이동할 페이지의 URL
• 지속 시간: 팝업이 지속되는 시간
• 제한 시간 표시: 팝업의 남은 시간을 보여줄지 여부
• 빈도: 동일 고객에게 팝업이 노출되는 횟수
• 대기 시간: 팝업이 나타나기 전 대기 시간
  

4. 태그의 트리거로 [재방문]을 선택하고 저장합니다.
   

5. 태그가 추가된 것을 확인합니다.
   

미리보기 및 제출

미리보기

1. [미리보기]를 클릭합니다.
   

2. 웹사이트 URL을 입력하고 [연결]을 클릭합니다.
   

3. 화면에서 마우스 우측 클릭 또는 아래 단축키로 개발자 도구를 엽니다.

• MacOs 단축키: Cmd + Option + i
• Windows 단축키: Ctrl + Shift + i
  

4. [Application]을 클릭합니다.
   

5. 'LocalStorage > 웹사이트URL'에서 as-visit-count의 값을 2로 설정합니다.
   

6. 화면을 새로고침하고 팝업을 확인합니다.

• MacOs 단축키: Cmd + r
• Windows 단축키: Ctrl + F5
  

제출

1. [제출]을 클릭합니다.