[로그분석] SPA 홈페이지의 경우 어떻게 이벤트 설정 하나요?(w. GTM)

SPA(Single Page Application)은 익숙한 마케터도 있고, 익숙하지 않은 마케터도 있다.

다만 설명을 들으면 이게 SPA였어? 라고 모두가 알 법한 거다.

 

기본적인 홈페이지는 페이지뷰가 바뀔 때마다, url 주소가 바뀌지 않는가?

그런데 어떤 홈페이지는 url이 고정되어 보여지게 된다. 그런 경우가 대부분 SPA이다.

물론 노출 url을 개발자가 어찌저찌 조정해서 고정해놓는 경우도 있긴 한데, 그건 일반 홈페이지와 다를 바 없다.

 

일반적으로 페이지가 넘어갈 때마다 html소스가 달라지게 우리가 알고 있는 홈페이지다.

하지만 SPA는 페이지 내용을 템플릿화하여 한꺼번에 불러와 1개의 페이지에서 템플릿만 갈아끼며 보여주는 것이다. 그렇기에 html 소스가 달라지지 않는다. 즉, 동일한 페이지url을 갖기 때문에 분석할 때도 처음엔 당황스럽다. 그것은 GTM이 처음 페이지 로드되었을 때 외에는 작동하지 않기 때문이다.(즉, 템플릿으로 다른 화면이 보여져도 메인 페이지 1개만 뜬것으로 인식됨)

 

SPA를 사용하는 이유는 여러가지가 있지만, 우선 속도가 빨라진다. 그렇기에 사용자경험도 좋아진다. 개발자의 이유는 그렇다쳐도 사용자경험이 좋아진다는 것만으로도 마케터는 이를 감안해서 일해야한다.

 

자, 그럼 어떻게 SPA를 분석할까?

우선 GTM 트리거의 구동원리부터 알아보자.

각각 설명하면 다음과 같다.

 

1. 동의 초기화 (Consent Initialization)

방문자에게 쿠키 사용 동의를 받는 쿠키 배너를 실행시키는데 사용된다.

우선 쿠키 사용 동의를 받아야 하기에 이게 가장 먼저 실행되는 것이다.

 

2. 초기화 (Initialization)

가장 먼저 실행되어야 하는 태그를 만들 때 사용된다.

 

3. 컨테이너 로드 (Container Loaded)

페이지를 로드하기 시작하면 실행되는 트리거다. 페이지의 리소스(html, css, javacript 등) 모두 로드되지 않았어도, 웹사이트의 서버와 연결되어 로딩을 시작한 순간 바로 실행된다. 그렇기에 일반적으로 해당 컨테이너 로드를 실행될 때 전체 페이지뷰 트리거가 실행된다.

 

4. DOM 준비 (DOM Rready)

html이 완전히 불러와져, 구성을 완료되었을 때 실행되는 트리거다. 페이지뷰 관련 트리거 중 DOM Ready 에 사용된다.

 

5. 창 준비 (Window Loaded)

이미지, 스크립트 등 모든 리소스를 완벽하게 로드 완료 되었을 때 실행된다.

 

---

 

다만 문제는 위 실행되는 것들은 창이 새롭게 로드되어야 발생한다.

 

우선 내가 생각했던 방법은 아래 3가지이다.

1. 클릭 이벤트 : 페이지 이동하는 버튼에 클릭 이벤트 설치 (단, 페이지 뒤로가기, 앞으로가기는 인식 불가)

2. 요소 공개상태 : 화면마다 독특한 요소를 체크하고, 그것을 불러왔을 때 특정 페이지로 인식 (페이지 앞/뒤로 가기 인식 가능하나, 관리의 어려움)

3. 기록 변경 : 현재로써는 이게 가장 나은 해결책으로 보임. history API를 활용하는 방법이기에 정확함.

 

그렇다면, 이 기록변경은 어떻게 사용할까?

우선 트리거로 "기록 변경"을 클릭하면 된다.

 

그러면 아래와 같이 뜨는데, History Source가 안보이면 [기본 제공 변수 선택]에 들어가 검색하면 나온다.

Page Path, Page URL, History Source로 추적하면 된다.

History Source는 history API를 활용해 URL이 변경되는 상황 중 어떤 상황에서 기록이 변경되었는지 기록한다. 보통 pushState(새로운 페이지 템플릿으로 이동하는 경우), popstate(앞/뒤로 가기로 통해 기존 방문했던 페이지 템플릿으로 이동하는 경우), replaceState(기존URL을 아예 새로운 URL로 대체하는 경우) 3개 변수값이 들어온다. 만약 안된다면 개발자에게 대소문자 정확히 확인해서 물어보는 것이 좋다.