[Google Tag Manager Tips] GTM으로 서베이 타겟팅하기

구글 태그매니저로 서베이 타겟팅하기

웹 서핑을 하다 보면 가끔씩 서베이가 화면에 노출되는 사이트들을 종종 경험하셨을 겁니다. 혹시, 아래와 같이 갑자기 화면에 노출된 서베이를 참여해보신 경험이 있으신가요?

이미지 출처 : Hotjar

구글 애널리틱스나 앰플리튜드와 같은 로그 분석도구의 활용은 고객의 행동 데이터를 토대로 여러 현상들을 관측하고 특이점을 찾는 데는 용이하지만, 고객이 왜(Why) 그런 행동을 했는지에 대한 명확한 원인을 찾기는 쉽지 않습니다. 서베이를 통해 고객의 다양한 의견을 수집한다면, 이 정보들이 앞서 언급한 Why에 대한 원인을 찾는데 큰 도움이 될 수 있습니다. 이외에도 서베이를 진행하면 이용자의 서비스 만족도, 불편사항 등 고객의 다양한 의견들을 얻어 서비스를 개선하는데 활용할 수 있습니다.

서베이 도구

시중에는 SurveyMonkey, Qualaroo, hotjar, Qualtrics 등등 다양한 서베이 도구들이 존재합니다. 도구들이 다양한 만큼 서베이와 관련된 기능들도 다양합니다. 서베이 화면에 대한 디자인 편집, 서베이 항목별 분기 설정 기능은 물론이고 여러 디바이스 환경 및 채널에서 진행할 수 있는 서베이를 쉽고 간단하게 제작할 수 있습니다.

분량상 이번 포스트에서는 hotjar라는 도구의 서베이 기능에 대해서만 다루고자 합니다. 이 도구를 선택한 주관적인(?) 이유는 다음과 같습니다.

구글 태그매니저와의 호환성 – Hotjar 전용 태그
팝업 형태의 서베이 방식 지원 – 페이지 내에 삽입하지 않고도 서베이 진행 가능
무료 버전을 쓰더라도 괜찮은 퀄리티의 서베이 제작 가능 – 분기, 타겟팅, 참여자에 대한 처리 등
익숙함… 🙂

Hotjar 서베이 생성하기

Hotjar 계정이 없으신 분들은 아래 이미지를 클릭하여 회원가입을 먼저 진행해 주세요. 회원가입은 무료이고 최초 가입자에 한해서 결제정보 등록 없이 [비즈니스 플랜] 요금제를 30일 동안 무료로 체험할 수 있습니다.

참고. 회원가입 후 뜨는 설치 방법을 선택하는 화면에서는 우측 상단의 [Do it later]을 클릭해주세요.

가입을 완료하셨다면 좌측 메뉴에서 [Surveys]를 클릭하고 서베이를 생성합니다.

GTM으로 타겟 서베이하기_hotjar surveys 생성하기

서베이는 주제에 맞춰서 설정해야 하기 때문에 지금은 몇가지 중요한 기능에 대해서만 알아보겠습니다. 서베이는 아래에 나온 순서대로 제작됩니다.

Details : 서베이에 대한 제목과 설명 입력
Location : 서베이를 노출할 위치를 설정
Questions : 서베이 문항과 분기 설정
Appearance : 서베이 화면 디자인 설정
Targeting : 서베이 참여 조건 설정
Behavior : 서베이가 노출되는 시점, 빈도 설정
Forward Response : 참여자가 서베이 응답시 전송할 알림 설정
Review & Activate : 최종 확인 및 서베이 활성화

1. Targeting

서베이 도구에서는 타겟팅 기능을 제공합니다. 그렇지만, 아쉽게도 이런 기능을 제대로 사용하려면 유료 플랜을 결제해야 하는 경우가 대부분이고, 정교한 타겟팅을 하기 위해서는 어쩔 수 없이 개발이나 태그관리자의 도움을 받아야 합니다.

Hotjar의 Targeting 탭에서는 특정 페이지에서만 서베이가 실행될 수 있도록 조건을 설정할 수 있습니다. 추가적으로, Hotjar의 [플러스 플랜] 요금제를 사용하면 특정 이벤트가 실행되는 시점에 서베이를 진행할 수 있습니다.

출처 : Hotjar Document 페이지

Hotjar로 이벤트를 전송하는 자바스크립트 코드는 아래와 같습니다. 페이지 조건은 GTM을 활용하여 설정할 수 있으므로 따로 설정하지 않으셔도 됩니다.

Copy to Clipboard

2. Behavior

Behavior 탭에서는 아래와 같이 서베이가 노출되는 시점과 빈도를 설정할 수 있습니다. 시점의 경우에는 GTM에서 직접 정의를 할 것이기 때문에 첫번째 항목을 선택합니다. 빈도는 첫번째가 무난하나 상황에 맞게 설정하시면 됩니다.

GTM으로 타겟 서베이하기_hotjar behavior 항목

GTM 활용하기

Hotjar 설치

Hotjar를 설치하기 위해서는 Site ID를 알아야합니다. Site ID는 Hotjar에 로그인한 상태에서 아래 링크를 접속하여 확인할 수 있습니다.

– Site ID 확인 : https://insights.hotjar.com/site/list

GTM으로 타겟 서베이하기_hotjar Site ID 확인

GTM에서 Hotjar를 설치하는 방법은 간단합니다. 태그 유형이 [Hotjar Tracking Code]인 것을 찾고 ID만 입력하면 됩니다. 트리거는 기본으로 제공되는 [All Pages]를 선택합니다.

GTM으로 타겟 서베이하기_hotjar 설치하기

서베이 타겟팅하기

타겟팅은 서베이 내용과 무관한 이용자를 조사에서 제외하여 결과의 신뢰성을 높이기 위해 사용합니다. 간단한 예시로 서비스 만족도에 대해 평가하는 서베이를 진행한다고 가정하겠습니다. 이 서베이가 만약 타겟팅 설정 없이 진행된다면, 서비스를 경험한 적이 없는 신규 사용자에게도 서베이가 노출될 것입니다. 그럴 경우 이 사용자는 서비스에 대한 경험이 없는 상태로 설문조사에 참여하여 결과 데이터의 신뢰를 떨어 뜨릴 수 있습니다.

이제 본격적으로 GTM을 활용하여 서베이 타겟팅을 하는 방법에 대해 알아보겠습니다.

1. 콘텐츠 완독

콘텐츠에 대한 품질 관리를 위한 목적으로 콘텐츠를 완독한 사용자들을 대상으로한 서베이를 진행할 수 있습니다.

구글 애널리틱스 완독률 트래킹

이때는 태그매니저의 [요소 공개 상태] 트리거를 활용할 수 있습니다. 콘텐츠가 종료되는 시점에 위치한 요소의 ID나 CSS Selector 구문을 확인하여 아래와 같이 트리거를 생성합니다.

참고. 요소 공개 상태 트리거에 대한 자세한 내용은 아래 링크를 참고하세요.
– https://dachata.com/google-tag-manager/post/how-to-use-impression-trigger/

구글 애널리틱스 요소 공개 트리거 조건 설정

그 다음, Hotjar로 이벤트를 전송하는 [맞춤 HTML] 태그를 아래와 같이 만들고 트리거를 연결해주면 됩니다.

GTM으로 타겟 서베이하기_hotjar target survey 완독 예시

이 코드에서는 이벤트 명으로 'post_complete'을 사용했기 때문에, Hotjar의 타겟팅 조건에 아래와 같이 post_complete라는 이벤트를 설정해야 합니다.

GTM으로 타겟 서베이하기_hotjar target survey 완독 이벤트 설정

모든 설정이 완료되면 아래와 같이 완독 시점에 서베이 창이 노출되는 것을 확인할 수 있습니다.

GTM으로 타겟 서베이하기_완독시 서베이가 노출되는 예시

* 참고. BASIC 버전에서는 어떻게 해야하나요?

무료 평가판 사용 기간이 끝난 경우에는 원하는 시점에 Hotjar를 설치하는 방식으로 서베이 타겟팅이 가능합니다. 이때는 Hotjar의 Targeting 메뉴의 조건에 이벤트를 설정하지 않고 아래와 같이 페이지 조건만 사용합니다

GTM으로 타겟 서베이하기_hotjar surveys 이벤트 조건 미사용 화면

그리고, 기존에 GTM에 생성한 Hotjar 설치코드의 트리거를 서베이를 시작하길 원하는 시점으로 변경합니다. 그리고 [맞춤 HTML]을 활용한 이벤트 전송 태그는 사용하지 않습니다.

GTM으로 타겟 서베이하기_hotjar 설치코드 트리거 변경 예시

단, 이 방법을 사용하는 경우에는 아래와 같은 주의사항이 있습니다.

서베이가 진행되는 시점에만 Hotjar를 설치하기 때문에, Hotjar의 히트맵과 녹화 등 다른 기능들을 정상적으로 사용할 수 없습니다.
한 번에 여러 개의 서베이를 진행할 경우, 각 서베이 별로 노출되는 시점을 정의할 수 없으므로 서베이가 노출되는 페이지가 겹치지 않게 유의해야 합니다.

2. 페이지 N회 조회자

이 방법을 사용하면 사전에 정의한(Rule Base) 패턴에 맞춰 행동한 고객에게 서베이를 진행할 수 있습니다. 이해를 돕기 위해 몇 가지 예시를 들자면 아래와 같습니다.

서비스의 페이지를 5회 이상 조회한 이용자
제품을 3번 이상 조회한 이용자
5개가 넘는 게시글을 읽은 이용자
퍼널 중간에 이탈한 이용자

위 예시들은 페이지 조회 정보를 활용한다는 공통점이 있습니다. 그렇다면 조회 정보는 어디에 저장해야 할까요? 만약, 페이지 내의 변수에 정보를 저장한다면 페이지가 변경되면서 해당 정보들이 모두 날라갈 것입니다.

이러한 문제를 방지하기 위해서 브라우저 스토리지를 활용할 수 있습니다. 브라우저 스토리지는 우리가 흔히 아는 쿠키 외에도 로컬 스토리지, 세션 스토리지라는 저장소가 있으며 다음과 같은 특징을 갖고 있습니다.

쿠키 스토리지 : 만료 기간이 있으며, Apple의 ITP 2.2 정책으로 인해 Safari 브라우저에서는 쿠키 만료 기간이 1일로 제한됐습니다.
로컬 스토리지 : 만료 기간이 없지만 하위 도메인이 다양한 서비스에서는 도메인 별로 액세스가 제한되어 활용이 어렵다는 단점이 있습니다. Apple의 ITP 2.3 정책으로 인해 Safari 브라우저에서는 7일의 만료 기간을 갖습니다.
세션 스토리지 : 저장된 값은 현재 떠 있는 탭 내에서만 유지됩니다. 탭이 닫히면 사라진다는 특징이 있습니다. Apple의 ITP 2.3 정책으로 인해 Safari 브라우저에서는 7일의 만료 기간을 갖습니다.

위 특징을 참고하여 상황에 맞게 브라우저를 선택하면 됩니다. 저는 이 중에서 로컬 스토리지를 서베이 타겟팅에 활용해 보겠습니다.

예시로 "다차타의 콘텐츠를 최소 5개 이상 조회한 이용자들을 대상"으로 "콘텐츠 만족도를 조사"하는 서베이를 진행한다고 가정하겠습니다. 먼저, 이를 위해 콘텐츠 조회시 실행되는 트리거를 다음과 같이 생성합니다. 이때, 반드시 트리거 유형을 [초기화]로 설정합니다.

GTM으로 타겟 서베이하기_태그매니저 포스트 초기화 트리거