제목
SPA 구조
작성자
수요일10시10분
작성일
2021-10-14 09:23
조회
1539
답변완료
안녕하세요
그로스 해킹 관련하여 자세한 정보를 공유 주셔서 감사합니다.
1. SPA 구조
문의 드릴 사항이 Cafe 24 통해서 홈페이지를 구성할 경우, 검수 툴 옴니 버그와 WASP로 보았을 때,
다른 페이지를 조회하여도, 첫번째 페이지만 로드되는 것으로 보아 SPA 구조로 추측 됩니다.
만약 이럴 경우, GA 구축은 어떻게 진행하는지 문의 드립니다.
GTM으로 현재 작업 진행 중입니다.
2. History Change
아래 참고 URL을 확인할 경우, history change를 사용한다고 하는데,
사이트 구조에 따라서 History Change 트리거가 작동될 수도 있고, 안될수도 있을 것이라 우려됩니다.
혹시 SPA 구조일 때는 어떻게 GA 구축 진행하셨는지 문의 드립니다.
(가상 페이지 조회로 모두 페이지뷰 모두 따셨는지, 아니면 추가적인 방법이 있는지 )
감사합니다.
참고 url : https://www.optimizesmart.com/track-single-page-apps-in-google-analytics-via-gtm/
안녕하세요, 수요일님
SPA 구조에서는 History Change를 쓰는 방법과 dataLayer push를 통해 페이지 변환을 트래킹하는 방법이 있습니다.
후자의 경우에는 GTM 외에 별도의 개발 작업이 필요한데, 저는 이 방식이 값 수집에 더 안정적이라고 생각되어 선호하는 편입니다.
이 방법에 대해 간략히 설명드리자면 다음과 같습니다.
일반적으로 사용되는 SPA 프레임워크인 react와 angular의 경우에는 페이지 변환시마다 실행되는 코드(Hook)가 존재(Cafe24에도 제공하는지 모르겠네요 ㅎㅎ)합니다. 개발을 통해서 이 코드 안에 "트리거로 사용할 이벤트 값"과 "변경되는 페이지 정보"를 dataLayer에 추가하는 코드를 추가합니다.
- 간단한 코드 예시
window.dataLayer.push({
'event': 'spa-pageview',
'location': '{{변경되는 페이지 경로 정보}}',
'title': '{{변경되는 페이지 제목 정보}}'
});
- GTM 셋팅 내용
트리거 : 맞춤 이벤트
변수 : 데이터 영역 변수
태그 : 변수 값을 title과 location에 설정
친절하고 상세한 답변 감사합니다:)