SPA 페이지의 ga 페이지뷰 연동 방법 조사

study, share · 2023-12-13

← 리스트로

SPA 페이지의 ga 페이지뷰 연동 방법 조사

spa 페이지는 메뉴 변경시 실제적인 페이지가 변경되지 않고 브라우저의 url과 history를 변경시키는 방식으로 동작하므로, 사실상 페이지를 서버로 부터 새로 불러오는 의미의 실제적인 페이지뷰가 일어나지는 않는다.

하지만 정보 수집의 관점에서 보면 spa를 이용한 명시적인 ui 변경도 새로운 페이지뷰로 취급하여 데이터를 수집하고 싶을 수가 있다.

보통 이러한 경우 어떤 방식으로 데이터를 수집할수 있는지 찾아보았다.

결론 부터 말하자면 사용하는 ga버전에 따른 두가지 방법이 있다.(ga4 버전을 사용중이라면 스크립트로는 아무 처리도 해줄 필요가 없다).

  1. 첫번째는 google analytics ga4 버전을 사용할 경우에는 그냥 ga콘솔에서 그냥 페이지 뷰 관련 옵션의 browser history events 관련 옵션을 켜주기만 하면 된다.
  2. 두번째는 googla analytics universal 버전을 사용할 경우 수동으로 window.ga 또는 dataLayer.push를 수동으로 호출하는 방식으로 ga에게 페이지 변경을 알려주어야 한다.

우리 서비스의 경우 spa가 들어갈 페이지느 미리 데이터 팀에 알려줘야한다(우리 데이터 팀의 경우 현재 spa 페이지뷰가 필요한 일부 페이지만 ga4를 먼저 적용해서 사용한다고 한다).

1번에 케이스에서는 아무것도 할 필요가 없지만, 2번 케이스의 경우는 조사한 내용을 더 설명해 보겠다.

gtm을 사용하지 않을 경우 window.ga('send', 'pageview', location.href);

gtm을 사용하지 않을 경우 history change 이벤트가 발생할때만다 window.ga 메서드를 호출해주면 된다.

하지만 최초 페이지 접근시 ga 함수를 통해 정보를 수집하겠다고 선언하는 과정이 필요한데 아래와 같이 해주면 된다.

window.ga('create', 'G-XXXXXXX', 'auto')

그 이후에는 history 변경 이벤트가 생길때마다 window.ga('send', 'pageview', location.href); 와 같은 이벤트를 매번 호출하면 된다.

react-ga와 같은 라이브러리를 사용한다고 하더라도 결국 사용법은 아래처럼 useEffect 훅에서 감지하여 ga 함수를 호출하도록 연결해주는 코드가 필요하다.

react-ga도 ga4가 나오면서 많이 사용되고 있지 않는 죽은 프로젝트다.

react-ga 사용 예

import ReactGA from "react-ga";
import { useLocation } from "react-router-dom";

const location = useLocation();

useEffect(() => {
    if (initialized) {
        ReactGA.pageview(location.pathname + location.search);
    }
}, [initialized, location]);

gtm을 사용할 경우 window.dataLayer.push

gtm 을 사용할 경우 오리지널 ga 함수를 사용하면 gtm에 설정해놓은 추가 정보를 활용하지 못할수도 있으므로 ga함수를 직접 호출하는대신

window.dataLayer.push 함수를 아래와 같이 호출해야 한다(ga 콘솔에서 어떻게 세팅해놓느냐에 따라 데이터의 구조는 바뀔 수 있다).

window.dataLayer.push({
    event: 'Data Layer Push Event',
    eventData: {
     'pageUrl': location.href,
     'pageTitle': document.title,
    }
});

참고 아티클