GTM(Google Tag Manager)에서 트리거로 가장 쉽게 쓸 수 있는 조건은 바로 페이지뷰(page_view) 일텐데요, 이상하게 페이지뷰가 트리거되지 않는 사이트들이 있습니다.
바로 싱글 페이지 애플리케이션(Single Page Application, SPA) 이라고 하는 웹사이트들입니다.
이번 글에서는 1)SPA 웹사이트란 무엇인지, 2)SPA에서는 왜 페이지뷰 트리거가 동작하지 않는지, 3)GTM에서 SPA 사이트를 페이지 주소로 트리거하는 방법 에 대해 알아보겠습니다.
contents
1. SPA 웹사이트란?
💡 싱글 페이지 애플리케이션에 대해 알아봅니다.
싱글 페이지 애플리케이션(Single Page Application, SPA)은 웹 애플리케이션이나 웹사이트의 한 종류로, 단일 HTML 페이지로 구성되며 사용자와의 상호작용에 따라 동적으로 콘텐츠를 업데이트합니다. 전통적인 멀티 페이지 애플리케이션(MPA)과는 달리, SPA는 초기 로드 시 필요한 모든 리소스를 서버에서 가져오고, 이후의 사용자 요청은 부분적으로 데이터를 갱신하여 페이지 전환 시 전체 페이지를 다시 로드하지 않도록 합니다.
주요 특징은 다음과 같습니다:
- 빠른 사용자 경험: 초기 로드 이후에는 서버와의 통신량이 줄어들어 빠른 반응 속도를 제공합니다.
- 단일 페이지 로드: 모든 콘텐츠를 처음에 한 번에 로드하여, 이후에 페이지를 다시 로드할 필요가 없습니다.
- 동적 콘텐츠 업데이트: JavaScript를 이용해 필요한 부분만 업데이트하여 사용자 경험을 향상시킵니다.
- 클라이언트 측 라우팅: 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 이벤트로 활용하는 방법에 대해 알아 보았습니다.
어려운 점이 있으시다면 댓글로 문의 남겨 주시면 답변 드리겠습니다.
감사합니다.