[ GA ] 태그 만들기_스크롤

본문으로

안녕하세요. 녀기입니다.

 

오늘도 돌아온 필기 시간~~

 

오늘은 배웠던 내용을 바탕으로

 

스스로 한번 이벤트 태그를 만들어 보려고 합니다.

 

강의 내용은 '버튼 클릭'이었는데,

 

아무래도 연습을 제 블로그로 하다 보니까

 

새삼 제 블로그에 들어오신 분들이

 

어느 정도 글을 읽나 궁금해 지더라구요.

 

왜냐면 보통 자기가 알고 싶은 내용 찾으면 그것만 보고 빠르게 나가기 때문에ㅋㅋㅋㅋㅋㅋ

 

(저도 잘 알고 있죠ㅋㅋ)

 

그래서 스크롤을 어느 정도 했는지를 통해

 

방문자들이 내용을 보고 가셨는지 확인하고자 합니다.

 

(특히 제 글은 정보 제공보다는 저의 사담을 늘어놓는 글이기 때문에)

 

 

사담을 건너 뛰고

 

'본문으로' 링크를 타고 내려가서 본문으로 가면

 

대략 느낌적으로 전체 글의 20% 정도는 초과할 것이라고 생각해

 

전체 글의 20% 이상 스크롤하는 유저부터 이벤트를 발생시키겠습니다.

 

참고한 블로그는 여기↓

https://datarian.io/blog/ga4-gtm-customizing-scroll-tags

GA4 스크롤 이벤트 커스텀하기

(요즘 저에게 큰 도움을 주는 데이터리안 감사합니다.)

 

시작해 보시죠!!

---

스크롤(scroll)

fig 1. 태그 새로 만들기

 

구글 태그 매니저를 통해 '태그' 탭에 가게 되면

 

태그를 새로 만들 수 있게 됩니다.

 

 

 

블로그의 글을 읽기 위해 스크롤을 했을 때

 

이벤트가 발생해야 하므로

 

이벤트 이름을 fig 2처럼 설정하겠습니다.

fig 2. 태그 이름

 

새 태그를 구성할 때 태그 유형과 트리거를 설정할 수 있는데요.

 

트리거가 발생하면 태그에서 설정한 이벤트가 발생하는 원리입니다.

fig 3. 태그 구성과 트리거

 

'태그 구성' 영역을 클릭하면 아래와 같이 유형을 선택할 수 있습니다.

 

fig 4. 태그 유형 선택

 

'Google 애널리틱스'를 선택한 뒤

fig 5. GA4 이벤트 선택

 

'GA4 이벤트'를 선택해 줍시다.

 

fig 6. 변수 선택란

 

fig 6를 보면 블록에 + 모양이 있는 버튼이 있는데(달력 같기도 한)

 

이를 클릭하고 

fig 7. 변수 선택

 

우측 상단에 '기본 제공 변수'를 클릭해 줍니다.

 

그러면 구글에서 기본적으로 제공해 주는 여러 변수들을 찾을 수 있는데

 

그 중 'Scroll Depth Threshold'를 클릭해 줍시다(fig 8).

fig 8. 스크롤 관련 변수

fig 9. 측정 ID 입력과 이벤트 이름 설정

 

그 후 측정 ID('데이터 스트림' >> '측정 ID')를 입력해 줍시다.

---

이렇게 태그 구성을 마무리한 뒤 트리거를 생성해 봅시다.

 

fig 3에서 '트리거' 영역을 클릭할게요.

fig 10. 트리거 선택

 

우측 상단에 '+' 버튼을 누르면

 

여러 트리거를 선택할 수 있는 창으로 전환됩니다(fig 11).

fig 11. 트리거 종류

 

그 중 '스크롤 깊이' 트리거를 선택해 줍시다.

fig 12. 스크롤 트리거 구성

 

트리거의 이름을 fig 12와 같이 설정한 후

 

스크롤 깊이를 '세로 스크롤 깊이'로 설정해 줍시다.

 

이 때 비율은 '20,25,30,50,70'으로 설정하겠습니다.

 

 

 

트리거에 설정한 5개의 숫자는 이벤트를 발생시키는 기준 5개이며

 

각 기준에 도달할 때마다 '20% Scroll', '50% Scroll'과 같이 이벤트를 GA4에 전달합니다.

 

 

 

fig 12를 보면 트리거를 '모든 페이지'에서 실행하는 것으로 체크돼 있는데,

 

저는 '일부 페이지'에서만 트리거를 발생시키겠습니다.

 

 

 

이유는 카테고리를 클릭했을 때

 

스크롤을 많이 내리지 않는 페이지라면 스크롤 이벤트가 자동으로 발생하는 일이 있었기 때문입니다.

 

 

 

유저가 서비스를 이용할 때 유의미한 경험을 하지도 않았는데도 이벤트가 발생하면

 

분석에 악영향을 줄 수도 있기 때문에

 

카테고리 등은 다른 이벤트를 고려하는 것이 적합해 보이기 때문입니다.

 

fig 13. 정규 표현식을 사용해, 게시물에만 이벤트 발생 설정

 

제 티스토리 블로그는 게시물을 읽었을 때

 

'nyeoki-log.tistory.com/숫자' 형태로 url이 바뀌기 때문에

 

nyeoki-log.tistory.com/[0-9]+ 로 정규 표현식을 쓰겠습니다.

 

그러면 게시물에만 해당 트리거가 적용될 것입니다.

 

(블로그마다, 양식마다 url이 달라질 수 있다고 생각하므로

 

적절한 정규표현식을 사용하시길 바랍니다.)

 

fig 14. 태그 저장 전

 

태그와 트리거를 모두 설정하면 우측 상단에 활성화 돼 있는 '저장' 버튼을 클릭해 주세요.

 

(위 사진은 이미 저장된 태그이기 때문에 비활성화 돼 있습니다.)

 

fig 15. 작업 공간 변경 사항

 

 

이후 '작업공간의 변경사항 수'가 0보다 큰 정수로 돼 있을텐데

 

제출을 해 줘야 적용이 됩니다.

---

버전을 바꾸고 난 뒤 'Debug view'로 가서 테스트를 해 봅시다.

fig 16. 게시물을 스크롤 했을 때 이벤트 발생

 

아무 게시물을 눌러 스크롤을 하면

 

fig 16처럼 이벤트가 잘 발생하는 것을 볼 수 있습니다.

 

 

 

물론 한 가지 문제가 있습니다.

 

하나의 세션(혹은 한 명의 유저가)에서 스크롤이 발생했을 때 

 

그 스크롤보다 더 높은 값의 스크롤 트리거가 발생하면,

 

이전 스크롤 트리거가 사라지지 않고 높은 스크롤의 트리거와 중복된다는 것입니다.

 

아래 fig 17을 볼까요?

fig 17. 스크롤 이벤트 중복 발생

 

id가 1인 유저는 해당 게시물을 70% 이상 스크롤을 했습니다.

 

하지만 그 과정에서 20, 25, 30, 50의 스크롤도 같이 발생했습니다.

 

10명의 유저 스크롤 이벤트를 합산하면 실제 값보다 높게 발생합니다.

 

그렇기 때문에 각 스크롤 트리거는

 

자신보다 높은 스크롤 트리거에서 값을 빼주는 것이 맞습니다.

 

 

 

예를 들어,

 

최대 50% 스크롤 이벤트의 개수는

 

실제 50% 이벤트 합(=3) = {50% 이벤트 합(=5) - 실제 70% 이벤트 합(=2)} 으로 계산해 주어야 합니다.

 

다른 스크롤도 똑같이 계산해 주면 됩니다.

 

 

스크롤 이벤트의 경우 단순 합산으로 이벤트 수를 보면 안 된다는 것을 알게 되었습니다.

 

 

다시 돌아가서,

 

게시물에서만 스크롤 이벤트가 발생하는지 확인하기 위해

 

카테고리를 클릭해 보겠습니다.

fig 18. 카테고리를 클릭했을 때 스크롤 이벤트 X

 

그 후 스크롤을 내려봐도 스크롤 이벤트가 발생하지 않는 것을 fig 18을 통해 확인할 수 있습니다.

---

따란~~~

 

이렇게 스크롤 이벤트를 만들어 봤는데요.

 

글에서는 마치 꼭 한번에 뚝딱 만들었다고 생각하실 수도 있지만,

 

여러 시행 착오를 거쳤습니다ㅠㅠ

 

(생각한대로 안 된다는 것은 슬픈 일이야)

 

 

 

그래도 태그를 만드는 강의만 듣고

 

스스로 만들어보니 뿌듯함이 느껴지네요

 

저는 공부를 계속해서 다른 글로 돌아올게요~~

 

여러분 주말 잘 보내세요~~

 

뿅!