안녕하세요. 그로스 해킹 에이전시, LABBIT 입니다. LABBIT은 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 오픈애즈에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열다섯 번째 이야기를 진행해보도록 할게요.  

구글 태그 매니저에서는 사용자의 상호작용을 다양하게 트래킹하고 이 트래킹 된 정보를 구글 애널리틱스로 전송하여, 데이터를 조회할 수 있습니다. 사용자들의 대표적인 행위들 중, 스크롤 , 클릭 , 영상 조회와 같은 행위들이 있을 텐데, 이번 강의에서는 [스크롤 트래킹]을 하는 방법에 대해서 자세히 살펴보고, 스크롤 트래킹을 완벽하게 이해하기 위한 [동적 변수]와 [정적 변수]에 대해서 살펴봅니다.

우선 스크롤 트래킹을 하기 위하여, 저는 제 티스토리 블로그를 가지고 실습을 진행하겠습니다. 해당 티스토리 블로그에는 구글 태그 매니저가 그대로 설치가 되어있는 상태입니다. 사용자 클릭 행위를 트래킹 하는 방법을 알고 있는 분들은 쉽게 아실 수 있듯이, 역시나 사용자 이벤트를 트래킹 하기 위해서는 하기와 같은 절차를 거칩니다. 

1. 변수 생성

2. 태그와 트리거 생성

3. 구글 애널리틱스 목표 연동 

스크롤 트래킹 역시 마찬가지로, 클릭 트래킹과 유사한 절차로 진행됩니다.   

스크롤을 끝까지 내리면, Submit 버튼이 보입니다. 저는 제 티스토리 블로그에 써놓은 글들을, 웹사이트의 방문자들이 얼마나 많이 조회하는지 보고 싶어서, 사용자들의 스크롤을 하는 정도를 트래킹 하고자 합니다.  

어김없이, 변수로 이동을 했습니다. 클릭 이벤트 추적을 할 땐, 클릭과 관련된, 기본 제공 변수를 만들어줬던 것처럼, 스크롤 트래킹을 할 때 역시, 스크롤 이벤트과 관련된 변수들을 미리 생성해둡니다. 스크롤 트래킹 변수 역시, 기본 제공 변수 영역에서 구글 태그 매니저가 미리 지원하고 있습니다. [구성] 버튼을 눌러 이동해 봅시다. 

스크롤을 좀 하다 보면, [스크롤] 영역에 Scroll Depth Threshold , Scroll Depth Units , Scroll Direction 변수가 나타납니다. 각 변수들의 의미를 설명드리겠으나, 직관적으로 이해하기 어려운 경우 그냥 넘어갔다가 실습을 하면서 이해해주시면 됩니다.  

1) Scroll Depth Threshold : 사용자가 스크롤을 했을 때, 전체 세로 길이에 비해, 스크롤을 얼마나 했느냐에 대한 정도를 숫자로 반환해주는 변수입니다. 예를 들어, 25%, 50% 와 같이 스크롤을 했을 때, [20, 50] 이 숫자를 반환하는 변수입니다. 

2) Scroll Depth Units : 스크롤의 단위입니다. 스크롤을 측정하는 방법은 2가지가 있습니다. 첫 번째는, 전체 길이에 대비하여 스크롤을 실제로 했을 때, 전체의 몇 퍼센트인지 측정하는 방법과, 그저, 스크롤을 했을 때, 몇 픽셀을 스크롤했는지 측정하는 방법입니다. 당연히 전자의 경우가 더 많이 쓰이지만, 이 Scroll Depth Units 변수는 우리가 무엇을 설정하느냐에 따라서 [% or Pixels]을 반환합니다. 

3) Scroll Direction : 스크롤의 방향을 결정합니다. 가로, 또는 세로 방향의 변수를 반환합니다. 하지만 대부분 스크롤 트래킹은 세로 방향으로 많이 세팅하게 될 것입니다. 

우선 스크롤과 관련된 변수들을 알아봤으나, 지금 당장 이해하지 못하더라도 좋습니다. 태그 영역으로 가서, 스크롤을 했던 유저들에게 구글 애널리틱스로 데이터를 보내는 명령어를 만들어 보겠습니다.    

태그를 하나 새로 만들어서, 우선 태그의 이름을 [스크롤 태그]로 붙였습니다. 당연히 우리는 태그 먼저 만들어주고 난 다음, 트리거를 정의해보도록 하겠습니다.  

태그는 당연히 구글 애널리틱스로 데이터를 쏴야 하기 때문에, [Google 애널리틱스 : 유니버설 애널리틱스] 유형의 태그 유형을 선택해주시면 됩니다.  

구글 애널리틱스 유형의 태그 타입을 선택하게 되면, 추적 유형이 나타납니다. 당연히 사용자의 스크롤이라는 우연한 행위를 트래킹 하는 것이기 때문에 우리는 추적 유형을 [이벤트]로 바꿉니다.  

이벤트로 바꿔준 다음, 구글 애널리틱스의 목표와 데이터를 연동할 카테고리 값과 작업 값을 적어줍니다. 저는 알아보기 쉽게  카테고리 값은 [웹페이지] , 작업 값은 [스크롤]로 지정하였습니다. 여기서 중요한 부분은, 클릭 트래킹을 할 때에는 별도로 사용하지 않았던, [라벨]과 [값] 영역이 있습니다. 라벨과 값은 우선, 트리거 영역의 세팅을 모두 마쳐두고 마지막에 설명하도록 하겠습니다. 일단은 넘어가 주세요.   

우리 구글 애널리틱스 계정으로 데이터를 전송할 것이기 때문에, 미리 만들어둔 GAID라는 이름의 사용자 정의 변수를 넣어줍니다. 태그에서의 설정은 여기서 끝났습니다. 아래쪽에 트리거 설정으로 이동해보겠습니다.   

트리거를 선택하라는 영역이 나타납니다. 지금 제가 만들어둔 트리거는 클릭 트리거 2개, 태그 매니저에서 기본적으로 제공해주는 All page view 트리거 1개가 나타나 있습니다. 우리는 스크롤 트래킹이라는 새로운 트리거를 만들어주기 위해, 오른쪽 상단 (+) 버튼을 눌러 새로운 트리거를 만들어 주겠습니다. 

역시 이름은 알아보기 쉽게 [스크롤 트리거]로 명명을 해놓았습니다. 트리거 구성의 빈 영역을 클릭해 봅시다. 

트리거 유형 선택 영역에서 [사용자 참여]라는 카테고리가 있습니다. 여기에 [스크롤 깊이]라는 추적 유형이 보이시죠? 굉장히 직관적입니다. 사용자가 스크롤하는 행위는 트래킹 해주기 위하여 [스크롤 깊이] 트리거 유형을 선택해줍니다.  

스크롤 깊이 트리거 유형을 선택하니, 여러 가지를 물어보고 있습니다. 우선 첫 번째부터 순차적으로 설명드릴게요.  

첫 번째 옵션은 “사용자의 세로 스크롤을 트래킹 할 것이냐, 가로 스크롤을 트래킹 할 것이냐" 하고 물어보는 영역입니다. 저는 당연히 제 블로그의 내용을 얼마나 보았는지를 추적하기 위하여, [세로 스크롤 깊이]를 선택해 주었습니다.  

그다음으로 물어보는 영역은 [비율]로 값을 보낼 것인지, [픽셀]로 값을 보낼 것인지 물어보는 영역입니다. 제 블로그 같은 경우는, 각 웹 페이지들마다 내용의 구성이 상이하기 때문에, 세로 길이가 고정적이지 않고 모두가 다 다릅니다. 그래서 고정값을 반환하는 [픽셀] 은 제 웹사이트에 적합하지 않습니다. 만약 추적하고자 하시는 모든 웹페이지의 세로 길이가 동일하다면, [픽셀]로 잡아주셔도 무방합니다.  

픽셀에는 예시로 나타나는 문구와 같이, 직접 세로 길이의 값을 적어줄 수 있습니다.  

저는 비율을 선택하였습니다. 비율을 선택하게 되면 전체의 몇% 스크롤을 할 때마다, 스크롤 트리거를 발동시킬 것인지에 대해서 물어봅니다. 그래서 저는 최대한 다양한 퍼센티지들을 보고 싶기 때문에, 비율 영역에 [25, 50, 75, 99]라고 적어주었습니다. 이렇게 되면, 실제 어떤 사용자가 블로그에 방문하여 25% 스크롤을 했을 때, 트리거가 한번 발생하고, 50%, 75%, 99% 까지 스크롤을 할 때마다 트리거가 한 번씩 발동하여, 총 4번 트리거가 발동되는 동시에 구글 애널리틱스에 총 4번의 데이터가 보내집니다.  

그런데 문제가 있습니다. 스크롤 데이터를 4번 보낸다고 해도, 우리가 지금 구글 애널리틱스에 보내주고 있는 매개변수 데이터는, [카테고리] 영역의 [웹페이지]라는 값, [작업] 영역의 [스크롤]이라는 값만 보내질 뿐입니다. 4번이 각자 다른 퍼센티지로 스크롤 트리거가 발생함에도 불구하고, 숫자 값을 보내지 않고 있으니 구글 애널리틱스는 같은 이벤트라고 인식을 할 것입니다.  

그래서 우리는 구글 애널리틱스에 위에서 정의한 카테고리 값과 , 작업 값과 함께 스크롤 값도 함께 보내주어야 합니다. 참 재미있게도 이 스크롤 값은 하나의 고정된 값이 아닙니다. 사용자가 스크롤을 어디서 하느냐에 따라 값이 달라질 것입니다. 이렇게 사용자의 행위에 따라 달라지는 값을 담고 있는 변수를 우리는 “동적 변수”라고 합니다. 그리고, 제가 위에서 설정한 [웹페이지] , [스크롤] 값은 제가 그냥 고정적으로 문자로 적어두었기 때문에 변하지 않는 값입니다. 이를 우리는 “정적 변수"라고 합니다. 이 동적 변수와 정적 변수의 개념을 충분히 숙지하신다면, 구글 태그 매니저에 대한 실력이 배로 늘 수 있습니다. 자 그렇다면, 동적 변수는 구글 애널리틱스로 데이터를 보낼 때, 어디에 데이터를 보내면 될까요? 트리거를 저장하고 태그 영역으로 다시 돌아옵니다.   

태그 쪽에 제가 아까 넘어간 부분이 있습니다. 저는 지금 카테고리 값과, 작업 값만 가지고 있고 아까 전 [라벨] 영역의 값과 [값] 영역의 값을 비워두었습니다. 태그 영역을 다시 눌러 수정합시다. 

[라벨] 변수와 [값] 변수 모두 동적 변수가 들어가는 자리입니다. 하지만 왜 이렇게 [라벨] 영역과 [값] 영역을 분리해두었을까요? 모두 이유가 있습니다.  

[라벨] 영역은 동적 변수임과 동시에 “문자"가 들어가야 합니다. 하지만 [값] 영역은 동적 변수임과 동시에, “숫자”가 들어가야 합니다. 이것이 가장 큰 차이입니다. 저는 그럼 스크롤의 정도를 숫자 값으로 구글 애널리틱스에 보내기 위해 , 라벨에 동적 변수를 넣어야 할까요? 값 영역에 동적 변수를 넣어야 할까요? 네, 당연히 [값] 영역입니다. 동적 변수는 우리가 아까 전에 이미 만들어놓았습니다. Scroll Depth Threshold 기억나시나요? 이 변수는 특정 사용자가 실제 우리 블로그에서 스크롤의 정도를 몇 퍼센트를 하는지에 대한 숫자 값을 반환하는 변수라고 했습니다.  

이 변수를 선택하기 위해서는, [값] 영역 뒤쪽에 벽돌 모양을 클릭해주시면 됩니다.

해당 벽돌 모양의 아이콘을 누르면, 우리가 아까 전 추가해주었던 Scroll Depth Threshold 변수가 보이는 것을 알 수 있습니다. 해당 변수를 선택하여 클릭해주세요.    

해당 변수를 선택하니 변수의 이름이 대괄호 2개로 둘러싸여져 있는 것을 볼 수 있습니다. 구글 태그 매니저에서 동적 변수는 이렇게 대괄호 2개 사이에 넣어둠으로써 표시합니다. 자, 이제 어려운 내용은 모두 끝났습니다. 저장 버튼을 눌러주세요. 

태그 영역에 우리가 만들어놓은 스크롤 태그가 있는 것을 볼 수 있습니다. 저도 실제로 스크롤 트리거가 잘 발생하는지 보기 위해서, 오른쪽 상단 [제출] 버튼을 눌러, 스크롤 태그를 발행해 보겠습니다.  

버전의 이름과 버전의 설명으로 다른 사람들이 알아보기 쉽게 변화 상황을 적어놓고, 최종 [게시] 버튼을 누르겠습니다. 

자 이제 발행이 되었습니다. 어김없이 버전 영역으로 들어와서 우리의 히스토리를 보여주고 있습니다.  

이제 제 블로그로 돌아와서, 새로고침을 해보겠습니다. 새로고침을 하니 , 아직 Fired 되지 않은 우리가 방금 만들어준 스크롤 태그가 정상적으로 들어가 있는 것을 확인했습니다. 제가 천천히 스크롤을 해볼게요.  

스크롤을 25% 했더니, [스크롤 태그]가 Fired 되었습니다. 정상적으로 구글 애널리틱스에 데이터가 전송되었을 겁니다. 그리고 왼쪽 영역을 주목해보시면, Scroll Depth라는 이벤트가 발생되었음을 알려줍니다. 여기서 제가 스크롤을 좀 더 해보겠습니다.  

스크롤 뎁스가 한번 더 Fired 되었습니다. 제가 50%를 스크롤했기 때문에 Fired 된 것이라 추측할 수 있습니다. 75%까지 가봅시다.  

역시나 스크롤이 Fired 되었음을 알 수 있습니다. 이제 마지막으로 99% 까지 가보겠습니다.   

Scroll Depth가 99퍼센트까지 스크롤을 하는데 총 4번 Fired 되었습니다. 이는 제가 트리거 설정에서 비율을 선택할 때, 각각 25%, 50%, 75%, 99% 를 트래킹 하겠다고 정의를 해주었기 때문에 4번이 Fired 되는 것입니다. 그럼 각각의 스크롤 이벤트에서 이 비율을 표시하는 값은 어디서 볼 수 있을까요? 우선 제일 아래쪽에 Scroll Depth 이벤트가 가장 먼저 발생했으니, 가장 아래쪽 Scroll Depth 이벤트를 눌러줍시다.  

이 영역에 스크롤 태그가 있는 것을 볼 수 있습니다. 이 스크롤 태그의 상세정보를 보기 위해 [스크롤 태그]라고 있는 이름표 자체를 클릭해봅니다.  

값 영역에 25가 들어간 것을 볼 수 있지요? 25가 정상적으로 보인다면 당연히 구글 애널리틱스 값 영역에도 25의 데이터가 전송되었을 것입니다. 나머지 이벤트들도 한 번씩 보겠습니다.  

각각 제가 지정해준 대로, 값이 잘 들어가 있는 것을 확인했습니다. 값이 잘 전송되는 것을 확인했으니 이제 끝일까요? 당연히 아닙니다. 이 값을 그대로 보존하고 추후 사용자들의 데이터를 관측하기 위해서는 구글 애널리틱스에서 목표 설정을 해야겠죠? 구글 애널리틱스로 어김없이 이동합니다.  

목표 쪽으로 이동해주세요. 저는 스크롤 25, 50, 75, 99% 를 했던 사람들을 트래킹하고 있지만, 우선 구글 애널리틱스에서는 50% 이상 스크롤이 발생했을 때 목표 전환이 일어날 수 있도록 목표를 만들어보겠습니다.  

[새 목표]를 눌러 목표를 만들어줍니다. 

어김없이, 맞춤 설정으로 눌러줍니다.   

당연히 스크롤 트래킹을 하는 것이니까 목표의 유형은 이벤트겠지요? [이벤트]를 선택해 줍니다.  

제가 아까 만들어두었던 태그를 보니, 카테고리 값에는 [웹페이지]라는 문자를, 작업 값에는 [스크롤]이라는 문자를 적어주어서 구글 애널리틱스에 전송하고 있었고, [값] 영역은 동적 변수니까 지금 제가 세팅해놓은 트리거의 상황에서는 25,50,75,99라는 숫자 값들이 상황에 따라 동적으로 구글 애널리틱스에 전송되고 있을 것입니다.  

카테고리 값과 액션 값을 일치시켜주고, [값] 영역을 자세히 보시면 부등호가 있는 것을 보실 수 있습니다. 문자가 아닌, 숫자 값을 보내주는 영역이기 때문에 당연히 비교 연산자를 사용할 수 있겠지요? 50% 이상 스크롤을 한 사람을 트래킹 하기 위해서는 [값] 영역에 무엇이라고 보내줄까요?  

당연히 49를 적어주시면 됩니다. 그렇게 되면 50% 이상 스크롤을 실제 사용자가 할 때마다, 전환 수가 집계됩니다.  

이로써 스크롤 트래킹까지 모두 다 마쳤습니다. 이 동적 변수와 정적 변수는 사실 처음 보는 분들이 한 번에 이해하기엔 매우 어려운 영역입니다. 그렇기 때문에 스크롤 트래킹의 경우 직접 실습을 하면서 복기를 해볼 것을 적극 제안드립니다.  

이렇게 버튼 클릭 트래킹과 스크롤 트래킹을 배워보면서 우리는 좀 더 구글 태그 매니저와 구글 애널리틱스의 다양한 기능들을 깊게 이해하게 되었습니다. 다음 장표에서는, 버튼 클릭이나 스크롤 말고도 다른 사용자들의 상호작용을 트래킹 할 수 있는 트리거들을 소개해 드리겠습니다.