[인프런] 실무자를 위한 구글애널리틱스(GA4) 활용법 학습 정리 4

 1. 이벤트 설계 및 기획 - 구글태그매니저 활용 셋팅 실습

   1) 구글태그매니저 - 개요

      - GTM = Google Tag Manager

         - 추적코드를 쉽고 빠르게 업데이트할 수 있게 지원해주는 시스템

 

      - 왜 사용할까?

         - 안정성과 유용성을 갖춘 시스템이기 때문이다.

         - 태그 관리자에는 버전이라는 탭 메뉴가 있다. 이 화면에서는 여태까지 작업한 모든 히스토리가 기록되어 있으며, 이를 이용해 이전 상태로 돌아가거나, 이전에 했던 작업들을 추적 및 확인할 수 있다.

         - 물론 특정 이벤트의 발생과 데이터 수집은 스크립트 파일을 직접 작성하여 만들 수 있지만, 작업의 안정성과 유용성을 제공해준다는 특징 만으로도 태그 매니저를 사용하여 작업을 하도록 해야 한다.

   

      - 구글 태그 매니저의 주요 요소 정리

         - 컨테이너 : 보관함

         - 태그 : 데이터를 보낼 곳 (where)

         - 트리거 - 방아쇠 (when)

         - 변수 - 데이터를 담는 그릇 (what)

 

   2) 클릭이벤트 - 개요

      - 태그 매너저의 작업공간에서 태그를 만들 때 구글애널리틱스의 측정 ID를 입력해야 하는 항목이 있다.

         - 해당 측정 ID는 계정만다 고유한 ID이며 쉽게 찾는 방법으로 상단의 검색 창에 id를 입력하면 하단에 연관 검색 결과로 id 정보를 제공해 준다.

 

   3) 클릭이벤트 - 셋팅실습 1

      - 시나리오 :

         1. 로그인을 하지 않은 사용자가 원하는 제품을 구매하고자 결정하고 상세 페이지에서 결제 페이지를 누르게 되면, 일반적으로 쇼핑몰은 로그인 페이지로 전환된다.

         2. 사용자가 아이디가 있으면, 로그인을 한다.

         3. 사용자가 계정이 없는 상태에서 가입 없이 구매하고 싶다면 비회원 구매를 누른다.

         4. 사용자가 아직 계정이 없다면, 회원가입을 누른다.

         5. 결제 이후 행동에서 사용자에게 어떤 이벤트가 가장 많이 발생 하는지를 추적한다.

 

      - 설정 사항 :

         - 변수 : 그릇 (클릭 데이터를 담을 수 있는 그릇을 꺼낼 것이다)

            - 변수 메뉴의 화면에서 오른쪽 상단 구성 버튼을 누르면 태그 관리자에서 제공하는 기본 제공 변수 구성들이 있다. 여기에서 원하는 항목들을 선택해 체크 박스를 클릭하면  기본 제공 변수 화면에 추가가 된다.

 

         - 트리거 : 방아쇠

            - 트리거 메뉴의 화면에서 오른쪽 상단 새로 만들기 버튼을 누르면 새로운 트리거를 만들 수 있는 창이 나타난다. 

            - 트리거의 이름을 정하고 화면 중앙을 클릭하면 트러거 유형을 선택할 수 있는데, 링크가 아닌 특정 요소에 대한 트리거를 만들 것이기 때문에 여기에서 모든 요소를 선택한다.

            - 모든 클릭은 사이트의 모든 클릭 요소에 대해 추적하는 것이기 때문에 일부 클릭을 선택하고 click classes, 포함을 선택한다. 그리고 나머지 입력 폼에는 추적할 class 이름을 넣어주면 된다. 

            - 원하는 버튼 위치, 비회원 구매 버튼에서 마우스의 오른쪽 클릭을 하고 검사를 누르면, 선택한 버튼에 해당하는 코드가 선택된 상태의 개발자 도구 화면이 나타난다. 선택된 항목에서 class의 이름을 복사하면 된다.

 

         - 태그 : 데이터의 목적지 > GA4

            - 태그 메뉴의 화면에서 오른쪽 상단 새로 만들기를 누르면 새로운 태그를 만들 수 있는 화면이 나온다. 트리거에는 이전에 만든 비회원구매버튼_클릭을 선택한다. 태그 구성의 중앙을 누르면 태그 유형 선택 창이 나오고 여기에서 google 애널리틱스의 google 애널리틱스:GA4 이벤트를 클릭한다. 

            - 강좌에서는 구성 태그를 입력하는 폼이 하단에 있는데, 새로 업데이트 된 화면에서는 측정 ID 입력 폼으로 바뀌어져 있다.

            - 오른쪽 상단 미리보기를 누르고 연결된 화면에서 테스트를 수행할 경우 debug 화면에서 초기에 tags not fired 항목에 있던 GA4_비회원구매클릭 박스가 tags fired로 이동되는 결과를 확인할 수 있다.

 

            - GA4의 실시간 보고서에서 태그에서 정의한 "clicked_guestbuy_button" 이름을 이벤트 항목에서 확인할 수 있다.

 

   4) 클릭이벤트 - 셋팅실습 2

      - 이번에는 회원가입을 누르는 사용자를 추적한다.

      - 회원가입은 class나 id가 없이 링크 정보만 있다. 태그 관리자의 트리거에 있는 "클릭 - 모든요소"를 이용해 회원가입을 누르는 경우 어떤 데이터가 수집되는지 추적을 해본다.

 

         - 미리보기를 선택하면 디버그 화면과 연결된 사이트 화면이 새로운 탭으로 생성된다.

         - 사이트에서 사용자로서 동작을 수행하면 디버그 화면에서 좌측에 역순으로 주요한 처리 동작 과정에 대한 정보가 쌓인다.

         - 히스토리 항목들 중 Click 을 찾아 오른쪽 화면에 있는 Variables 탭을 누르면 관련한 변수 정보들을 확인할 수 있는데 이 곳의 click Text가 "회원가입"인 Click을 찾으면 된다.

            - 아래 이미지에 보면 Click Text와 Click Url의 Value에 값이 있는 것을 확인할 수 있다. 다른 정보들 보다 쉽게 사용할 수 있기에 해당 정보들을 사용하기로 한다.

 

      - 이전에 만든 트리거를 복사해서 사용하는 방법

         - 이전에 생성한 트리거를 누르고 오른쪽 상단 버튼 세개로 되어 있는 메뉴를 눌러 복사를 누른다.

 

         - Click Text > 포함 > 회원가입 으로 설정을 다시 변경한다.

 

      - 이전에 만든 태그를 복사해서 사용하는 방법

         - 트리거에서 복사한 방법과 마찬가지로 원하는 태그를 누르고 오른쪽 상단 점 세개로 되어 있는 버튼을 눌러 복사 메뉴를 누른다.

         - 이벤트 이름을 변경하고, 트리거를 삭제 후 회원가입버튼_클릭 트리거를 정의한다.

 

         - 미리보기를 누르고 회원가입을 클릭한 후 디버그 모드에서 tags 상태를 확인하면, 처음 Tags Not Fired에 있던 GA4_회원가입_버튼클릭 박스가 회원가입을 클릭한 이후 Tags Fired 그룹으로 이동된 것을 확인할 수 있다.

 

   5) 클릭이벤트 - 셋팅실습 3

      - 실재로 로그인 및 회원가입 페이지에는 회원가입 페이지로 이동할 수 있는 링크 및 버튼이 총 2개가 있다. 모든 동작에 대한 트리거와 태그를 수집해서 들어오는 값을 확인하면 두 경우 모두 "회원가입" 이라는 Text를 제공한다.

      - 이러한 경우에는 타겟을 더 정확히 선택할 수 있는 방법이 필요하다.

      - 이번에는 동일한 조건을 가지고 있는 로그인을 대상으로 정확한 타겟을 정의하는 방법을 수행한다.

         - 해당 방법을 사용하면, 클릭 이벤트와 관련하여 99% 정도의 상황이 해결된다.

      - 로그인 버튼에서 오른쪽 마우스를 누르고 메뉴에서 검사를 누른다. 개발자 도구에서 선택되어진 코드에서 오른쪽 마우스를 누르고 copy > copy selector를 선택한다.

 

      - 새로운 트리거를 만들어 구매_로그인버튼이라 이름을 정의한다. 클릭 - 모든요소를 선택하고 일부클릭을 선택한다. 

      - Click Element > CSS 선택 도구와 일치 > 복사한 selector 내용 붙여 넣기

      

      - 트리거를 만든다.

      - " GA4_구매_로그인_버튼클릭 " 태그 이름을 정의하고 " clicked_buy_login " 이벤트 이름을 정의한다. 트리거는 구매_로그인버튼을 선택한다.

 

      - 미리보기를 통해 테스트를 하면, Tags Not Fired에서 Tags Fired 항목으로 이동되는 GA4_구매_로그인_버튼클릭 박스를 확인할 수 있다.

 

      - GA4 실시간 리포트에서 이벤트 항목에서 관련한 데이터가 수집되는 것을 확인할 수 있다.

 

   6) 클릭이벤트 - 정리

      - 3가지 방식 정리

         1. 크롬 개발자 도구의 html에서 class의 이름을 찾아서 셋팅

         2. 태그매니저에 클릭-모든요소 트리거를 설정하고 미리보기 및 디버그 모드에서 해당 클릭을 눌렀을 때 들어오는 value를 확인하여 원하는 값으로 선택 ex) click text = "회원가입"

         3. 크롬 개발자 도구에서 검사를 통해 확인된 html 코드를 copy selector 메뉴로 복사하여

Click Element > CSS 선택 도구와 일치 > 복사한 selector 내용 붙여 넣기

 

      - 주의할 사항

         - 만약 url로 설정을 하는 경우, 여러 방법의 유입 경로가 있지만 동일한 url을 사용하는 경우, 어떤 클릭으로 사용자가 이벤트를 발생 하였는지 구체적인 방법을 알 수 없다. 예를들어 상단 메뉴의 로그인 링크로 방문을 하였는지, 로그인 페이지에서 로그인 버튼을 이용하였는지 알 수 없다.

 

   7) 클릭이벤트 - 매개변수셋팅 - 1

      - 시나리오 : 사용자들이 위시리스트를 누를 경우 해당 제품의 이름을 수집하여 관심이 높은 제품들을 추려 기획전을 할 계획이다. 혹은 관련 상품, 추천 상품으로 상세 페이지에 같이 노출시켜 주고 싶다.

      - 하나의 이벤트에 25개의 매개변수를 설정할 수 있다.

 

      - 트리거 만들기 :  Click Element > css 선택 도구와 일치 > 크롬 개발자 도구에서 위시리스트 버튼에 해당하는 select를 복사하여 붙여 넣는다.

 

      - 사용자 정의 변수 만들기 : 

         - 변수 > 사용자 정의 변수 > 새로 만들기 > DOM 요소 선택, CSS 선택 도구 선택, 크롬 개발자 도구에서 상품 이름 부분을 검사하여 복사한 selector 값 붙여 넣고 저장하기

 

   8) 클릭이벤트 - 매개변수셋팅 - 2

      - 태그 만들기 : 태그를 새로 만드는데 이번에는 이벤트 매개 변수를 추가한다. 매개변수의 이름은 직접 정의하고, 값은 오른쪽에 있는 레고 모양의 아이콘을 클릭해 이전에 생성한 변수를 선택하면 된다.

 

      - 미리보기를 통해 디버그 화면의 variables로 제품명이 들어오는지 확인한다.

 

      - GA4의 실시간 보고서에서 이벤트 항목에 product_name이 들어온게 확인이 된다. 해당 변수를 클릭하면 상품 이름을 확인할 수 있다.

 

      - GA4에 해당 값이 들어온걸 확인을 했지만, 실재로 데이터가 저장이 되지는 않는다. 관리 버튼을 눌러 설정을 해줘야 한다.

         - 관리 > 맞춤정의 > 맞춤 측정기준 만들기 

         - 이벤트 매개변수에 product_name이라는 변수는 수집된지 최소 하루 이상 지나야 확인할 수 있다. 그 전에는 선택을 하여 측정기준을 만들 수 없다.

 

      - 정리 : 매게변수는 여러가지 이벤트가 발생 하였을 때, 해당 페이지에서 원하는 정보들을 함께 수집하고 싶을때 사용할 수 있다.

         - DOM 요소를 차후 코드가 변경이 되면, 해당 정보를 가져올 수 없다는 단점을 가지고 있다.

 

   9) 스크롤이벤트 - 셋팅 

      - 시나리오 : 스크롤이 25%, 50%, 75%, 90%을 나누어 어느 시점에 이탈률이 높은지 분석하고자 한다.

      - 작업 요소 :

         - 변수 : 

            - 기본 제공 변수 구성에서 스크롤과 관련된 모든 항목들을 선택해준다.

               - 이렇게 설정하면, 미리보기의 variables 항목에 관련한 변수들이 추가 되어진다.

 

         - 트리거 :

            - 트리거 유형은 스크롤 깊이를 선택하고 세로 스크롤의 비율을 숫자와 쉼표로 정의해준다.

 

         - 태그 : 

            - 새로 태그를 생성한다. 깊이에 대한 값을 가져오기 위해 매개변수를 설정하고 이전에 추가한 변수 값을 정의한다.

               - 선택할 수 있는 변수 중 Scroll Depth Threshold는 스크롤 %에 대한 것이고, Scroll Depth Units는 필셀에 대한 것이다.

 

      - GA4의 관리 > 데이터 스크림 > 향상된 측정의  옵션 > 스크롤을 해제한다.

 

      - 미리보기의 사이트에서 스크롤을 하단까지 내리면 4개의 GA4_스크롤이벤트가 쌓인 것을 확인할 수 있다.

 

      - GA4의 실시간 > 이벤트 항목 > scroll > scroll_depth 를 보면 4개 항목이 각각 들어와 있는 것을 확인할 수 있다.

 

      - 시나리오 변경 : 제품 상세 페이지에서만 수집하고 싶다. 특정 url로 시작되는 페이지들의 데이터를 수집하고자 한다.

         - 스크롤트리거를 일부 페이지로 변경하고 page url > 다음으로 시작 > 특정 url로 시작되는 공통 부분 붙여넣기를 하고 저장하면 된다.

         - 현재 cafe24의 페이지에서 product 이하의 모든 url에 대해서 스크롤 이벤트 수집을 한다.

 

   10) 스크롤이벤트 - 분석

      - 데모 사이트의 데이터로 분석을 한다. (기본 수집되는 90%에 대한 스크롤 결과)

      - 보고서 > 참여도 > 이벤트 > 화면의 결과에서 scroll 선택 > 비교 결과를 원한다면 기간 설정

      - 화면 상단의 좌측은 기간에 따른 전체 데이터의 그래프를 확인할 수 있고 오른쪽은 관련한 매개변수를 선택해 결과를 확인할 수 있다.

 

      - 시나리오 : 특정 페이지에 들어온 사람 중 스크롤을 90% 이상 내린 사람의 비율을 분석한다.

      - 탐색 > 이벤트 수, 이벤트 이름 추가 > 스크롤 항목에서 선택항목만 포함 선택

 

      - 페이지 제목을 측정기준으로 추가해 각 페이지별 스크롤 결과를 분석한다.

 

      - scroll은 모두 같이 때문에 이벤트 이름을 행에서 제외하여 페이지 제목만 출력하게 만든다. 

      - 제외된 이벤트 이름을 기존 필터를 제거하고 필터 항목으로 추가한 뒤 조건을 "다음과 정확하게 일치", pgae_new를 선택하고 적용한다. 그러면 이벤트 수가 아닌 페이지 뷰에 대한 결과를 확인할 수 있다.

 

      - stationery를 누르고 방문한 사람들 중 90%까지 스크롤을 내린 사람의 비율을 알고 싶다.

         - page_view 정보

 

         - scroll 이벤트 정보

 

         - 엑셀을 이용해 계산한 백분률 - page_view 대비 14% 정도 발생한다.

 

   11) 요소공개트리거활용 - 셋팅 1

      - 특정 위치에 있는 클릭 요소의 경우, 스크롤 이동에 대한 이벤트로는 추적하기 어렵다.

      - 아래와 같은 배너들이 있는 경우, 페이지의 넓이, 사용하는 장비 등에 따라 위치가 달라질 수 있다.

      - 이러한 요소별 데이터를 확보할 수 있다면, 특정 요소 위치에 제일 효과적인 상품을 배치할 수 있다.

 

      - cafe24 샘플 쇼핑몰의 중간에 있는 배너 위치에 대해 이벤트를 걸도록 한다.

      - 아래 배너가 노출이 되면, 이벤트가 발생된다.

 

   12) 요소공개트리거활용 - 셋팅 2

      - 트리거를 만든다.

         - 요소 공개 상태 트리거를 선택하고 css 선택 도구를 선택하고 요소 선택 도구에는 해당 배너에서 검사 메뉴를 통해 크롬 개발자 도구에서 확인되는 html 요소를 copy selector한 결과를 붙여넣는다.

 

      - 태그를 만든다.