본문 바로가기

Data Literacy

 (114)
6. GA4 이벤트 생성 고급(2) - JS기반 이벤트 생성 1 : Class, ID 리턴 메서드 이번 아티클부터는 기존의 GTM에서 좀 더 확장된 기능을 사용하기 위해서 Javascript를 사용해 이벤트를 생성하고 적용하는 방법을 알아보도록 하겠습니다. 물론, 단순한 작업이야 기존의 GTM에서 제공하는 기능을 통해서 구현하면 되겠지만, Javascript를 사용하는 방법을 알아두면 좀 더 다양한 기능을 사용할 수 있게 됩니다. 우선, chrome의 콘솔에서 사용하는 메서드를 두 개만 알아보겠습니다. Javascript에 대한 이해도는 각각 다를 테니, 해당 메서드는 특정 ID나 Class가 갖는 요소(객체)를 리턴하는 명령어라고 기억해 두면 되겠습니다. document.getElementById("ID"); document.getElementsByClassName("Class")[index]; 위..
6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [3/3] 이슈를 정리해 보겠습니다. 앞선 스크롤 이벤트 생성 과정을 통해서 우리는 [scroll]이라는 이벤트를 생성했고, 해당 이벤트 내에 event parameter로 [scroll_percent]라는 파라미터를 생성했습니다. 이때 event parameter는 scroll depth threshold를 자동으로 할당하는 dynamic parameter를 사용했죠. 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [2/3] 우선, 앞서서 기본적으로 화면 비율에 따라서 scroll 이벤트를 발생시키는 가장 기본적인 설정을 진행했습니다. 하지만, 25~90%에 따라서 스크롤을 발생시키지만 별도의 event parameter가 없어서 해당 nozeroslope.tistory.com 여기까지..
6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [2/3] 우선, 앞서서 기본적으로 화면 비율에 따라서 scroll 이벤트를 발생시키는 가장 기본적인 설정을 진행했습니다. 하지만, 25~90%에 따라서 스크롤을 발생시키지만 별도의 event parameter가 없어서 해당 스크롤 이벤트가 발생한 시점이 언제인지를 알 수 없다는 문제점이 있었습니다. 6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [1/3] 앞서서 주로 클릭과 관련된 이벤트를 중심으로 이벤트 설계와 생성 과정을 살펴보았습니다. 이번에는 기본적인 내용을 바탕으로 '스크롤' 이벤트를 생성해 보겠습니다. 우선, 스크롤 이벤트를 nozeroslope.tistory.com 이번 아티클에서는 scroll 이벤트에 event parameter를 설정하여 스크롤 트리거 발생 시점까지 확..
6. GA4 이벤트 생성 고급(1) - 스크롤(scroll) 이벤트 생성 [1/3] 앞서서 주로 클릭과 관련된 이벤트를 중심으로 이벤트 설계와 생성 과정을 살펴보았습니다. 이번에는 기본적인 내용을 바탕으로 '스크롤' 이벤트를 생성해 보겠습니다. 우선, 스크롤 이벤트를 확인하기 위한 블로그 글을 하나 작성해야 합니다. 엔터 공백을 최대한 많이 넣어서, 길게 스크롤할 수 있는 블로그 글을 하나 준비합시다. 당연히 우리가 사용하는 GA4 계정이 연동된 블로그여야 하겠죠? 우선, GTM에 진입해서 Tags 메뉴로 진입해줍니다. 그리고 새로운 태그를 하나 생성하도록 하겠습니다. 그리고 기본 태그 설정은 다음과 같이 진행합니다. Tag Type은 GA4 Event로 설정하고, Measurement ID 입력 후 Event Name은 [scroll]로 설정하겠습니다. 이제 트리거를 입력해야 합니다...
5. GA4 이벤트 설계 방법(4) - 이벤트 설계 : Event Taxonomy Case Study [2/2] 여기서 조금 더 디테일한 사례를 생각해 보겠습니다. 어떤 프랜차이즈 가맹 홍보 사이트가 있다고 가정하겠습니다. 해당 페이지에는 창업 신청 문의, 창업 노하우 강의 듣기, 뉴스레터 받기, 뉴스/블로그 기사 보기 등의 액션을 제공하고 있습니다. 그리고 웹 페이지는 메인 페이지를 기준으로 1단부터 약 10단으로 구역을 구분하고 있습니다. 이 페이지를 론칭하고 나서, 고객이 이 페이지를 어떻게 이용할지 여러 가지로 궁금증이 생길 것입니다. 무작정 이벤트와 추적과 관련된 사항을 설계하지 말고, 앞서 살펴본 이벤트 택소노미 설계 단계를 차근차근 따라가 보겠습니다. 1. 궁금증을 나열해본다 우선, 각각의 서비스 영역에서 궁금한 것들을 그냥 줄글로 하나씩 리스팅해 봅시다. 궁금한 사항 메인 페이지 1단 > [창업 문의..
5. GA4 이벤트 설계 방법(4) - 이벤트 설계 : Event Taxonomy Case Study [1/2] 앞선 아티클까지 우리는 기본적인 이벤트 설계와 설정, parameter 설정에 대해서 다루었습니다. 이를 바탕으로 실제 사례를 가정해 이벤트를 설계하는 케이스 스터디를 진행해 보겠습니다. ○ 로그인 방식 점유율이 궁금해요 흔히 어떤 서비스에서는 구글/카카오/애플/네이버 로그인과 로컬 로그인 등의 로그인 수단을 다양하게 제공하는 경우가 많습니다. 운영을 하는 입장에서는 각 로그인 수단 별 점유율이나 사용량을 파악해야겠죠? login이라는 이벤트가 있다고 가정하면, 해당 이벤트의 파라미터로 아래와 같이 설정해 줄 수 있겠습니다. method라는 파라미터를 추가하고, 해당 파라미터에는 각각 local, kakao...같은 값이 저장되겠네요. 우선 현재 단계에서는 트리거(로그인 버튼)를 각각 다르게 한 이벤트를..
5. GA4 이벤트 설계 방법(3) - 이벤트 설계 : Event Taxonomy 기본적으로 이벤트를 taxonomy의 관점에서 분류하기 위해서는 몇 가지 개념이 정의되어야 합니다. 우선, GA4에서 기본적으로 하나의 이벤트(event)가 존재하면 이에 따르는 속성(property)이 존재하게 됩니다. * EVENT : 페이지뷰가 발생했다. ▷ 세션 ID : 999999999 ▷ 페이지의 위치 : https://xxx.ddddd.com/ddddd ▷ 페이지의 제목 : 테스트 페이지 ▷ 세션번호 : 9 위에서 하나의 페이지에 하나의 page_view 이벤트가 발생했다고 가정할 때, 세션 아이디나 페이지 위치 등의 세부 발생 특성을 속성이라고 표현합니다. 이 각각의 속성들은 파라미터(parameter) 형태의 변수로 각각의 값을 갖게 됩니다. 하나의 이벤트에는 해당 이벤트에 대한 속성 값..
5. GA4 이벤트 설계 방법(2) - 이벤트 표기법 이번 아티클에서는 GA4에서 이벤트 네이밍을 할 때의 표기 규칙에 대해서 알아보도록 하겠습니다. 우선, 기본적으로 GA4에서 자동 이벤트를 포함해서 기본적인 네이밍 원칙은 스네이크 케이스(Snake Case)를 사용한다는 점을 기억하면 됩니다. 아래 아티클에서 이러한 표기법에 대해서 정리해 두었으니, 함께 참고하시면 좋겠습니다. 스네이크 케이스 / 카멜 케이스 / 파스칼 케이스의 뜻을 알아봅시다 스네이크 케이스(snake case), 파스칼 케이스(pascal case), 카멜 케이스(camel case)에 대해서 알아보겠습니다. 이 용어들은 기본적으로 프로그래밍 언어 사용 시 레터링 규칙들을 의미합니다. 특히 이런 nozeroslope.tistory.com 위 아티클에서도 설명했지만, 기본적으로 GA4..

티스토리툴바