SPA에서 GTM 페이지뷰 트리거가 실행되지 않는다면?

GTM(Google Tag Manager)에서 트리거로 가장 쉽게 쓸 수 있는 조건은 바로 페이지뷰(page_view) 일텐데요, 이상하게 페이지뷰가 트리거되지 않는 사이트들이 있습니다.

바로 싱글 페이지 애플리케이션(Single Page Application, SPA) 이라고 하는 웹사이트들입니다.

이번 글에서는 1)SPA 웹사이트란 무엇인지, 2)SPA에서는 왜 페이지뷰 트리거가 동작하지 않는지, 3)GTM에서 SPA 사이트를 페이지 주소로 트리거하는 방법 에 대해 알아보겠습니다.


1. SPA 웹사이트란?

💡 싱글 페이지 애플리케이션에 대해 알아봅니다.

싱글 페이지 애플리케이션(Single Page Application, SPA)은 웹 애플리케이션이나 웹사이트의 한 종류로, 단일 HTML 페이지로 구성되며 사용자와의 상호작용에 따라 동적으로 콘텐츠를 업데이트합니다. 전통적인 멀티 페이지 애플리케이션(MPA)과는 달리, SPA는 초기 로드 시 필요한 모든 리소스를 서버에서 가져오고, 이후의 사용자 요청은 부분적으로 데이터를 갱신하여 페이지 전환 시 전체 페이지를 다시 로드하지 않도록 합니다.

주요 특징은 다음과 같습니다:

  1. 빠른 사용자 경험: 초기 로드 이후에는 서버와의 통신량이 줄어들어 빠른 반응 속도를 제공합니다.
  2. 단일 페이지 로드: 모든 콘텐츠를 처음에 한 번에 로드하여, 이후에 페이지를 다시 로드할 필요가 없습니다.
  3. 동적 콘텐츠 업데이트: JavaScript를 이용해 필요한 부분만 업데이트하여 사용자 경험을 향상시킵니다.
  4. 클라이언트 측 라우팅: URL이 변경되어도 페이지 전체를 다시 로드하지 않고, 클라이언트 측에서 라우팅을 처리합니다.

SPA를 구현하는 데 자주 사용되는 프레임워크와 라이브러리로는 React, Angular, Vue.js 등이 있습니다. 이들은 효율적인 DOM 조작과 상태 관리를 통해 동적이고 빠른 웹 애플리케이션을 만들 수 있게 해줍니다.

2. SPA에서는 왜 페이지뷰 트리거를 쓸 수 없나요?

💡 GTM에서 페이지뷰 트리거가 동작하지 않을 때, SPA 웹사이트인지 확인해 보세요.

1번 항목에서 설명한 바대로 전통적인 멀티 페이지 애플리케이션과는 달리 싱글 페이지 애플리케이션은 페이지 전환 시 페이지를 다시 로드하지 않습니다. 즉, 페이지뷰 트리거 조건이 성립할 수가 없는 방식입니다.

그렇다면 내 서비스(사이트)가 MPA 방식인지 SPA 방식인지 어떻게 구분할 수 있을까요? 다양한 방법이 있겠지만, GTM 미리보기 방식이 가장 확실하더라고요. (물론 개발자에게 바로 물어보는게 더 빠를 수는 있겠죠?)

1) MPA 방식 웹사이트 (GTM 미리보기)

2) SPA 방식 웹사이트 (GTM 미리보기)

두 화면의 차이점이 보이시나요? SPA 방식 웹사이트에서는 페이지가 전환될 때 History Change라는 이벤트가 Event Timeline에 나타나고 있죠? 이렇게 미리보기 실행 시 History Change라는 이벤트가 나온다면 우리 서비스(사이트)는 SPA 방식이라고 생각하시면 됩니다. 참고로 History라고만 나오는 이벤트는 GA4를 통해 실행되는 이벤트입니다.

이 경우에는 페이지뷰를 아무리 트리거로 잡아도 태그가 실행되지 않는다는 사실!

3. GTM에서 SPA 웹사이트를 페이지 주소로 트리거하는 방법

💡 SPA 웹사이트에서 페이지 주소 기반으로 GTM 이벤트를 트리거하는 방법을 알아봅니다.

우리 서비스가 SPA 방식이라면 페이지 주소 기반으로 이벤트를 트리거할 수 없는 걸까요? 그렇지는 않습니다. 몇 가지 방식이 있는데요, 그 중 가장 간단한 방식은 기록 변경을 트리거로 사용하는 것입니다. (이름부터 기록 변경 = History Change 이죠?)

그러면 기록 변경 트리거를 세팅하고 테스트해볼까요?

1) GTM 트리거 만들기

두 가지 트리거를 만들어보겠습니다. 하나는 MPA 방식에서 사용하는 페이지뷰, 또 하나는 SPA 방식에서 사용하는 기록 변경입니다.

페이지뷰 트리거 (조건 : Page URL)

기록 변경 트리거 (조건 : Page URL)

두 트리거 모두 유형을 제외하고 다른 조건은 동일합니다. Page URL을 조건으로 세팅했어요.

그리고 각 트리거를 다시 test01, test02 이벤트와 연결해 보겠습니다. 그 후 실제 페이지 로드 시 어떤 이벤트가 실행되는지를 확인할거에요.

2) GTM 테스트 결과

테스트를 해보니 기록 변경 트리거는 태그가 실행되었는데, 페이지뷰 트리거는 실행되지 않았음을 알 수 있습니다.

4. 요약 및 결론

항목내용
1. SPA 웹사이트란?리액트 등의 프레임워크를 사용한 웹앱 혹은 웹사이트로 페이지 전환 시 페이지를 다시 로드하지 않음
2. SPA에서는 페이지뷰 트리거를 쓸 수 없는 이유?페이지를 다시 로드하지 않고 History Change만 일어나기 때문
3. SPA 확인 방법은?GTM 미리보기 시 이벤트 타임라인에 History Change가 보인다면 SPA 방식임
4. SPA 사이트일 경우 GTM에서 페이지 주소를 조건으로 쓰려면?트리거 유형을 기록 변경으로 하고 페이지 주소를 조건으로 사용

SPA 사이트에서 페이지 주소를 GTM 이벤트로 활용하는 방법에 대해 알아 보았습니다.

어려운 점이 있으시다면 댓글로 문의 남겨 주시면 답변 드리겠습니다.

감사합니다.

Leave a Comment