모바일 웹 터치 슬롯 꽁 머니(SWIPE, FLICK) 추적하기

안녕하세요. 인트렌치 컨설팅 유정훈 입니다.

이번 시간에는 모바일 웹에서 SWIPE 슬롯 꽁 머니과 FLICK 슬롯 꽁 머니이 발생할 경우 이를 GTM을 통해 추적하는 방법에 대해 살펴보도록 하겠습니다.

용어가 생소할 수 있으니 들어가기에 앞서[그림 1]에서 처럼 모바일 기기에서 발생하는 많은 슬롯 꽁 머니 중에서 컨텐츠 주제인 SWIPE 슬롯 꽁 머니과 FLICK 슬롯 꽁 머니이 어떤 슬롯 꽁 머니인지 살펴보겠습니다.

일반적으로 SWIPE 슬롯 꽁 머니의 경우 모바일 화면 터치를 일정시간 유지하며 좌우로 이동하는 슬롯 꽁 머니이며, FLICK 슬롯 꽁 머니의 경우 모바일 화면 터치 후 바로 좌우로 이동하는 슬롯 꽁 머니입니다.

[그림 1]

자~ 그럼 모바일 웹 슬롯 꽁 머니을 추적을 위해 GTM 설정을 시작해 볼까요?

먼저 모바일 웹에서 슬롯 꽁 머니을 추적할 수 있도록 기능을 구현해 주어야 하는데요.

처음부터 구현하려면 시간이 많이 걸리고 복잡하니 시간 단축을 위해 이미 기능이 구현되어 있는 오픈소스 를 찾아 GTM에 적용하겠습니다.

참고로 회사에서 사용하는 오픈소스의 경우 MIT 또는 BSD 라이센스를 갖는 오픈소스를 사용해야 법적으로 문제가 되지 않습니다.

저는 Touch슬롯 꽁 머니 라는 jQuery Plugin 을 사용하겠습니다.

적용 단계를 살펴볼까요?

Step 1) 먼저 구글에서 ‘Touch슬롯 꽁 머니 jQuery Plugin’ 을 검색합니다.

Step 2) 검색된 링크 중[그림 2]와 같은 링크를 클릭하여 github 페이지에 접속합니다.

[그림 2]

Step 3) github 페이지 접속 후[그림 3]의 ③jquery.touch슬롯 꽁 머니.min.js파일의 내용을 복사합니다.

Step 4) 복사한jquery.touch슬롯 꽁 머니.min.js내용을[그림 4]GTM의 맞춤 HTML 태그 생성 후 붙여넣어 모든 페이지에서 동작하도록 설정합니다.

[그림 3]

[그림 4]

여기까지가 GTM을 통해 모바일 웹 Touch 슬롯 꽁 머니 추적을 위한 기본 스크립트 설정 단계입니다.

이제 특정 배너에 Touch 슬롯 꽁 머니을 추적할 수 있도록 설정하겠습니다.

적용 단계를 살펴볼까요?

Step 1) 먼저 특정 배너에 Touch 이벤트를 등록하기 위해 DOM 구조를 파악한 후

[그림 5]

Step 2)[그림 6]의 ②와 같이 파악된 DOM 구조에 Touch 이벤트 리스너를 등록하겠습니다.

Step 3) 그 다음[그림 6]의 ③, ④ 내용과 같이 좌우 슬롯 꽁 머니 및 FLICK 이벤트 발생 시 이벤트 태그가 동작되도록 설정하겠습니다. 참고로 이벤트 태그 발동 설정은 dataLayer.push() 호출을 통해 설정하겠습니다.

[그림 6]

Step 4) 그 다음 Step 3) 에서 설정한 내용을 GTM 변수를 통해 받을 수 있도록 설정하겠습니다. 설정방법은[그림 7]스크립트 ①, ②, ③ 내용 중 Key가 되는 값을 각각의 GTM 데이터 영역 변수를 생성 및 입력하여 저장합니다.

[그림 7]

Step 5) 드디어 설정 마지막 단계! 입니다.

마지막으로 좌우 SWIPE 및 FLICK 이벤트 발생 시 사용자 슬롯 꽁 머니 추적을 할 수 있도록 GTM 이벤트 태그를 생성하여[그림 8]과 같이 ①, ② 내용을 설정하겠습니다.

[그림 8]

설정은 모두 마쳤습니다.