광고 효율 UP! 픽셀 & GA4 & 핫자로 숨겨진 고객 심리 엿보기 👀
광고를 최적화한다는 말, 많이 들어봤지만 진짜 '무엇을 어떻게' 최적화하는 걸까?
이번 글에서는 Meta Pixel, GA4, Hotjar 라는 대표적인 사용자 행동 분석 도구들을 직접 써본 경험을 바탕으로,
광고 효과 측정 → 사용자 행동 추적 → UI 개선까지의 흐름을 정리해봤다.
도구목적주로 쓰이는 시점확인 방법/도구
| Meta Pixel | 광고 전환 추적, 이벤트 기반 타겟팅 | 광고 캠페인 전·중·후 | Meta Pixel Helper (확장 프로그램) |
| GA4 | 유입 경로, 페이지뷰, 전환 행동 분석 | 전체 퍼널/경로 확인 시 | GA4 Debugger + 탐색 분석 |
| Hotjar | 실제 행동 시각화 (히트맵, 클릭, 스크롤) | UI/UX 개선 시 | 직접 설치 후 대시보드 확인 |
먼저 메타 픽셀 부터 소개해 보자면, 광고를 더 최적화시킬수있고 고객의 행동을 들여다 볼수있어서 유용한 도구이다.
간단하게 페이스북 픽셀 심는 법과 페이스북 픽셀이 어떻게 심어져서 작동하는지 크롬 확장프로그램을 추가해서 볼수있는 방법을 소개하겠다.
페이스북 픽셀 심는 법:
- 페이스북 비즈니스 관리자 접속: 먼저 페이스북 비즈니스 관리자에 접속해야 해. 광고 계정이 있다면 당연히 있겠지?
- 픽셀 만들기: 비즈니스 관리자 메뉴에서 '이벤트 관리자'를 찾아서 클릭해. 그 다음, '데이터 소스'에서 '픽셀'을 선택하고, '+' 버튼을 눌러 새로운 픽셀을 만들어 줘. 픽셀 이름을 정하고, 웹사이트 URL을 입력하면 돼.
- 픽셀 코드 설치: 픽셀을 만들면 픽셀 코드가 생성될 거야. 이 코드를 웹사이트의 <head> 섹션에 넣어줘야 해. 워드프레스 같은 CMS를 사용한다면, 픽셀 코드를 쉽게 삽입할 수 있는 플러그인을 활용하는 것도 좋은 방법이야. 예를 들어, "Insert Headers and Footers" 같은 플러그인을 사용하면 코드를 쉽게 넣을 수 있지.
- 이벤트 설정: 픽셀 코드를 설치한 후에는 웹사이트에서 발생하는 특정 행동(예: 제품 구매, 페이지 방문, 장바구니 추가 등)을 추적하기 위해 '이벤트'를 설정해야 해. 페이스북 이벤트 설정 도구를 사용하면 코드를 직접 수정하지 않고도 이벤트를 설정할 수 있어.
그리고 픽셀이 어떻게 작동하는지 보기위해 메타 픽셀 헬퍼라는 확장 프로그램을 추가해주었다.
이런식으로 작동된다!
테스트를 위해 쿠팡으로 들어가서 제품을 담아봤다.
그럼 오른쪽 위처럼 뜨는데 밸류에 가격이 나오고 화페단위도 보여는등 정보를 확인할수있다.
이렇게 픽셀이 잘심어졌는지 보통 QA에서 확인 작업을 한다.
그리고 GA4 Debugger는 GA4 설정이 제대로 작동하는지 실시간으로 확인하고 문제를 해결하는 데, 사용하는 크롬 확장 프로그램이다.
확장 프로그램을 설치해주고 개발자 모드 F12(윈도우기준) 눌러주면 아래 이미지처럼 나온다.
사진안에는 수업때 진행한 프로젝트 랜딩페이지로 어떻게 작동하는지 보았다.
자동으로 잡아주는 이벤트, 사용자 행동들이 있었고 커스텀 해서 수동으로 설정해준 이벤트가 보였다.
솔직히 이작업은 참여 하지 않아서 신기하고 재밌었던 부분이었다.
스크롤을 얼마나 내렸는지도 나와서 신기했는데 나중에 GA 탐색 보고서에서 찾을때는 스크롤 이벤트가 따로 안심어져있어서 확인 불가능했다.
폼을 클릭만하면 이벤트가 시작되는지, 실험을 해보았는데 이름을 작성하면 시작되는걸로 봐서 폼스타트가 기록된 사용자이고 제출한 내역이 없다면, 이 이벤트를 통해 이름까지는 쓴 사람이라는 걸 알수있다.
그리고 리드 어플라이도 수동으로 심어둔 커스텀 이벤트다. 폼을 제출하게 되면 발생한다.
그다음 GA4로 넘어가서 더 면밀하게 살펴볼수있다.
수업시간에는 실제 고객들의 데이터를 바탕으로 분석을 진행했는데 블로그에서는 그 데이터를 보일순없으니,
내가 블로그 초반에 심어둔 GA4를 이용해서 현재 티스토리 블로그 보고서를 한번 살펴 볼수있었다.
지금 보고있는 내 티스토리 계정 구글 애널리틱스다.
탐색분석 아무것도 만들지 않아서 비어있었다. 여기에 경로 탐색 분석을 하나 만들어주었다.
나는 커스텀으로 잡아둔게 없기때문에 자동으로 시스템에서 잡아준 값만 확인할수있었다.
티스토리 블로그에 GA4 설치 방법이 궁금하다면? 👇🏻
티스토리 블로그에 GA4 설치방법과 오류 해결 후기
구글에서 분석툴로 무료 제공하고 있는 GA를 티스토리에 연동할수있다고해서 한번 해봤다.하나 하나 캡쳐로 자세하게 사진 남겨놨으니 따라하기 좋을거라 생각한다. 나처럼 티스토리를 처음
myview0110.tistory.com
윗단까지는 데이터 수집이었고, 사용자의 행동 분석이 필요하다면 'hotjar'라는 툴로 더 디테일한 분석이 가능했다.
이런 패턴은 위에서 소개한 핫자를 심어 분석이 가능하게 해준다...! (대박신기...)
사용자가 머무는 시선이 어디로 많이 쏠리는지 확인하고 버튼(CTA)하나만 바꿨을때 앞자리가 변하는 매출을 이뤄낸 이커머스도 많다. UI를 데이터적으로 바꿀수있는 툴이라고 생각해서 너무 좋은것같다.
그리고 핫자는 블로그에도 심을 수있다고 한다 ㅋㅋㅋㅋ 나도 궁금한게 있으면 한번 심어볼 계획이 있다.
비즈니스 요금은 따로있고 개인 요금제는 위에 이미지를 참고 하면되는데 무료 버전이 꽤나 써볼만하고 '무료 평가판'으로 써보고 요금을 결정할수도있다.
Hotjar | NOSEO(노세요)
Hotjar는 필요한 수치와 그에 따른 실제 사용자 행동을 보여줍니다. Hotjar는 180개 이상 국가의 1,306,323개 웹사이트에서 신뢰를 받고 있습니다. * [히트맵] 자신있게 사이트의 모든 페이지를 개선하
noseo.info