GA4로 검색어 수집이 안될 때: 리액트로 개발했나요?
GA4를 통한 웹사이트 검색어 수집 가이드 (2)
GA4를 통한 웹사이트 검색어 수집 가이드 (2)
1편에서 웹사이트의 내부 검색 기능을 통해 유저가 입력한 검색어를 Google Analytics 4(GA4)에서 확인하는 방법에 대해 알아봤다.
1편 : GA4를 통한 웹사이트 검색어 수집 가이드 (1)
인터넷에 나와 있는 가이드와 공식 문서대로 모든 설정을 마쳤지만, 놀랍게도 GA4에서는 어떤 이벤트도 잡히지 않았다... 처음엔 설정 오류를 의심했지만, 모든 것이 정확히 설정되어 있음에도 불구하고 문제는 여전히 해결되지 않았다. 그리고 결국에는 해결했는데, 그 원인과 과정을 공유해보려 한다.
결론 요약 :
1. GA4에서는 웹사이트의 URL 끝에 붙는 쿼리 매개변수를 통해 사용자의 검색수를 페이지뷰로 측정함
2. 그러나, 내 웹사이트는 리액트를 사용해 개발된 SPA(Single Page Application) 방식의 페이지였어서, 전통적인 방식으로는 페이지뷰가 제대로 추적되지 않았던 것
3. 이 문제는 Google Tag Manager(GTM)를 사용해 이벤트 데이터를 직접 수집하고, 트리거 유형을 "일부 페이지뷰"가 아닌 "기록 변경"으로 설정해서 해결함
해결 방법 상세 :
시도한 해결책은 GA4가 아닌 GTM에서 직접 데이터를 수집하도록 설정하는 것이었다. GA4에서 자동 수집해주는 것이 뭔가 내 사이트와 맞지 않을 수 있으니, GTM을 사용해서 직접 수집하면 되지 않을까 생각했다.
필수 사전 작업 : 웹사이트에 GTM 코드를 삽입하고, GA4와 GTM 연결이 되어있어야 한다.
1. 변수 설정하기
변수 탭 > 새로 만들기를 클릭하고, 변수 유형은 "URL", 구성요소 유형은 "검색어"로 설정한다.
검색어 키는 본인의 웹사이트에 맞게 작성하면 된다.
내 웹사이트의 검색결과 페이지는 example.com/search?keyword={검색어} 형태이므로, 검색어 키는 "keyword"이다.
2. 트리거 설정하기
트리거 > 새로 만들기 > 트리거 유형에서 "페이지뷰"를 선택한다.
"일부 페이지뷰" 옵션을 선택하고,
페이지 URL에 "search"가 포함되어 있는 경우만 이 트리거가 실행되도록 설정했다. 이것도 본인의 웹사이트에 맞게 작성하면 된다.
이는 사용자가 검색 결과 페이지를 방문할 때마다 이벤트를 추적하도록 하는 설정이다.
3. 태그 설정하기
태그 > 새로 만들기 > 태그 구성 > 구글 애널리틱스 > GA4이벤트를 선택한다.
이벤트 이름은 적당히 만들어주는데, 1편에서 실패한.. GA4에서 자동으로 수집되는 이름인(view_search_results)과 겹치지 않게 작성했다.
이벤트 매개변수로 search_term을 추가하여, 1번에서 생성한 변수를 값으로 사용했다.
트리거는 2번에서 만든 트리거를 불러와줬다.
원래는 이렇게 하면 정상적으로 잡혀야 하지만, Tag assistant를 통해 확인해보아도... 태그가 발현되지 않는 것을 확인할 수 있었다. _event equals gtm.js 가 자꾸 X라고 나온다... 대체 왜! 하란대로 다 했잖여!
수많은 구글링 끝에, StackOverflow에서 빛과 소금 댓글을 발견했다.
SPA로 개발된 페이지의 경우, 전통적인 "페이지뷰" 트리거 대신 "기록 변경" 트리거를 사용해야 한다.
SPA 웹사이트에서는 페이지 간 이동이 기존의 웹사이트와 달리 페이지 전체를 새로 로드하지 않고, 브라우저의 History API를 통해 이루어지기 때문에, 이러한 변화를 감지하기 위해서는 "기록 변경" 트리거가 필요했던 것이다.
4. 2번에서 생성한 트리거를 '기록 변경' 트리거로 변경하기
2번에서 만든 트리거 상세 페이지에서, 트리거 유형을 "페이지뷰"가 아닌 "기록 변경"으로 수정한다.
"기록 변경" 트리거로 설정을 변경한 후, 드디어 사용자의 검색 이벤트가 GA4에서 정상적으로 추적되기 시작했다~!
실시간 보고서에서 확인 가능!그래서 SPA가 뭔데...
SPA는 "Single Page Application"의 약자로, 한국어로는 "단일 페이지 애플리케이션"이다. 이런 종류의 웹 애플리케이션은 웹사이트를 방문할 때 전통적인 방식으로 여러 페이지를 로드하는 대신, 한 개의 페이지만 로드한다. 사용자가 다른 섹션으로 이동하거나 데이터를 요청할 때, SPA는 전체 페이지를 다시 로드하지 않고 필요한 데이터만을 받아와서 현재 페이지를 동적으로 업데이트한다.
SPA 없이 웹사이트를 이용하는 것은 책을 읽을 때마다 새로운 책을 열어서 다음 장을 읽는 것과 비슷하다. 즉, 새로운 정보를 얻기 위해 매번 새로운 페이지를 완전히 로드해야 한다. SPA를 이용하는 것은 한 권의 책에서 필요한 장만 넘겨가며 읽는 것과 같다. 책 전체를 새로 열 필요 없이, 이미 열린 책에서 필요한 부분만 바로바로 찾아볼 수 있다. 웹에서는 이것이 사용자가 요청할 때마다 필요한 데이터만 서버에서 받아와서 현재 페이지를 업데이트하는 방식으로 이루어진다.
SPA의 장점은 속도와 효율성인데,
속도: 페이지 전체를 다시 로드할 필요가 없기 때문에, SPA는 전통적인 웹 애플리케이션보다 훨씬 빠르게 반응한다.
효율성: 서버 요청이 감소하여 전반적인 트래픽이 줄어든다.
이 글에서 언급한 "기록 변경(History Change)" 트리거는 SPA에서 페이지 간의 이동이나 상태 변화를 감지하는 데 사용된다. 전통적인 웹사이트와 달리, SPA에서는 페이지 이동이 브라우저의 기록(history)에 새로운 항목을 추가하면서 발생한다. GTM에서 이러한 변화를 추적하기 위해 "기록 변경" 트리거를 사용하는 것이다.
혹시 리액트로 개발된 웹사이트를 운영하는 사람이라면, 이 글이 GTM을 통한 이벤트 추적 설정에 있어서 도움이 되기를 바라며 글을 마무리한다!
