모바일 웹 터치 행동(SWIPE, FLICK) 추적하기
기기조작 행동 또한 이벤트로 수집가능합니다.
안녕하세요. 인트렌치 컨설팅 유정훈 입니다.
이번 시간에는 모바일 웹에서 SWIPE 행동과 FLICK 행동이 발생할 경우 이를 GTM을 통해 추적하는 방법에 대해 살펴보도록 하겠습니다.
용어가 생소할 수 있으니 들어가기에 앞서 [그림 1] 에서 처럼 모바일 기기에서 발생하는 많은 행동 중에서 컨텐츠 주제인 SWIPE 행동과 FLICK 행동이 어떤 행동인지 살펴보겠습니다.
일반적으로 SWIPE 행동의 경우 모바일 화면 터치를 일정시간 유지하며 좌우로 이동하는 행동이며, FLICK 행동의 경우 모바일 화면 터치 후 바로 좌우로 이동하는 행동입니다.
[그림 1]
자~ 그럼 모바일 웹 행동을 추적을 위해 GTM 설정을 시작해 볼까요?
먼저 모바일 웹에서 행동을 추적할 수 있도록 기능을 구현해 주어야 하는데요.
처음부터 구현하려면 시간이 많이 걸리고 복잡하니 시간 단축을 위해 이미 기능이 구현되어 있는 오픈소스 를 찾아 GTM에 적용하겠습니다.
참고로 회사에서 사용하는 오픈소스의 경우 MIT 또는 BSD 라이센스를 갖는 오픈소스를 사용해야 법적으로 문제가 되지 않습니다.
저는 TouchSwipe 라는 jQuery Plugin 을 사용하겠습니다.
적용 단계를 살펴볼까요?
Step 1) 먼저 구글에서 ‘TouchSwipe jQuery Plugin’ 을 검색합니다.
Step 2) 검색된 링크 중 [그림 2] 와 같은 링크를 클릭하여 github 페이지에 접속합니다.
[그림 2]
Step 3) github 페이지 접속 후 [그림 3] 의 ③ jquery.touchSwipe.min.js 파일의 내용을 복사합니다.
Step 4) 복사한 jquery.touchSwipe.min.js 내용을 [그림 4] GTM의 맞춤 HTML 태그 생성 후 붙여넣어 모든 페이지에서 동작하도록 설정합니다.
[그림 3]
[그림 4]
여기까지가 GTM을 통해 모바일 웹 Touch 행동 추적을 위한 기본 스크립트 설정 단계입니다.
이제 특정 배너에 Touch 행동을 추적할 수 있도록 설정하겠습니다.
적용 단계를 살펴볼까요?
Step 1) 먼저 특정 배너에 Touch 이벤트를 등록하기 위해 DOM 구조를 파악한 후
[그림 5]
Step 2) [그림 6] 의 ②와 같이 파악된 DOM 구조에 Touch 이벤트 리스너를 등록하겠습니다.
Step 3) 그 다음 [그림 6] 의 ③, ④ 내용과 같이 좌우 SWIPE 및 FLICK 이벤트 발생 시 이벤트 태그가 동작되도록 설정하겠습니다. 참고로 이벤트 태그 발동 설정은 dataLayer.push() 호출을 통해 설정하겠습니다.
[그림 6]
Step 4) 그 다음 Step 3) 에서 설정한 내용을 GTM 변수를 통해 받을 수 있도록 설정하겠습니다. 설정방법은 [그림 7] 스크립트 ①, ②, ③ 내용 중 Key가 되는 값을 각각의 GTM 데이터 영역 변수를 생성 및 입력하여 저장합니다.
[그림 7]
Step 5) 드디어 설정 마지막 단계! 입니다.
마지막으로 좌우 SWIPE 및 FLICK 이벤트 발생 시 사용자 행동 추적을 할 수 있도록 GTM 이벤트 태그를 생성하여 [그림 8] 과 같이 ①, ② 내용을 설정하겠습니다.
[그림 8]
설정은 모두 마쳤습니다.
그럼~ 실제 페이지(https://entrench-consulting.com/tool/swiper/swiper.html)에 접속하여 배너의 SWIPE, FLICK 행동 시 동작을 감지하여 이벤트 추적이 되는지 확인해 볼까요?
먼저 페이지에서 배너의 SWIPE, FLICK 행동을 진행하겠습니다.
[그림 9]
그 다음 GA 실시간 리포트를 확인해 보겠습니다.
확인결과 [그림 10] 과 같이 배너의 SWIPE, FLICK 행동 시 각 동작에 대한 이벤트가 GA 실시간 리포트에서 확인되었습니다.
[그림 10]
이번 시간에는 Android 및 iOS 기기에서 사용자 행동 중 SWIPE, FLICK 행동을 추적하는 방법에 대해 살펴보았습니다. GTM을 활용하여 모바일 기기에서 발생하는 SWIPE, FLICK 등 사용자 행동 추적 방법을 고민하고 계시는 분들께 도움이 되었으면 합니다. 이상 마치겠습니다.
인트렌치 컨설팅이 어떤 회사인지 궁금하신가요?
그로스 해킹을 통해 서비스 전환율을 개선하세요.
