ReactJS 에서 유니버설 애널리틱스 속성과 함께 Google 애널리틱스 를 사용하는 방법에 대한이 가이드를 공유하고 있습니다 . 우리가 이야기 할 두 가지 제품과 관련된 약간의 소개 :

ReactJS는 사용자 인터페이스를 구축하고 유지하기위한 SPA (단일 페이지 애플리케이션) 자바 스크립트 라이브러리입니다. 즉, 다음과 같이 브라우저가 전체 새 페이지를로드하는 기본 방법 대신 서버 또는 로컬 상태의 새 데이터를 기반으로 현재 페이지를 동적으로 작성합니다. 다중 페이지 응용 프로그램.

Google Analytics (GA)는 웹 사이트를 방문 할 때 중요한 사용자 정보를 쉽게 추적 할 수있는 Google의 분석 도구입니다. 2020 년 4 분기부터 Google은 고급 추적 기능과 더 나은 대시 보드를 갖춘 새로운 Google Analytics 4 (GA4) 속성을 도입했습니다. 이 도움말에서는 Google 애널리틱스의 이전 버전 인 유니버설 애널리틱스 (UA) 속성을 구체적으로 살펴 보겠습니다.

예비

먼저 다음 간단한 단계에 따라 웹 사이트의 추적 ID를 얻어야합니다.

1. Google Analytics 웹 사이트로 이동하여 처음 사용하는 경우 데이터 공유 설정을 포함하여 계정을 설정하라는 메시지가 표시됩니다.
2. 새 속성 만들기 — 유니버설 애널리틱스 속성 옵션을 선택해야합니다. UA, GA4 또는 두 속성을 모두 만들 수있는 옵션이 있습니다.
3. 계정 및 속성 설정을위한 나머지 정보를 입력하십시오. 그러면 추적 ID (예 : UA-123456789–1)를 받게됩니다.

Google Analytics 및 ReactJS에서 UA 속성을 사용할 때 React-GA 라이브러리를 사용하는 것이 가장 편합니다 . 이 기사가 작성된 현재 NPM에서 매주 450K 이상의 다운로드가 있습니다. ReactJS 애플리케이션에서이 코드를 실행하여 쉽게 설치할 수 있습니다.

# npm
npm i -s react-ga
# yarn
yarn add react-ga

이행

웹 사이트에서 사용할 수있는 두 가지 간단한 GA 구현이 있습니다.

페이지 조회 추적 — 추적하려는 각 페이지의 componentDidMount에서이 코드 줄을 사용하여 웹 사이트를 방문 할 때 사용자의 여정을 추적하여 특정 목표 유입 경로에 대해 더 많이 이해할 수 있습니다.

ReactGA.pageview(window.location.pathname);

이벤트 추적 — 성공적인 결제, 소셜 공유, 특정 버튼 클릭 등과 같이 캠페인 목표와 일치하는 웹 사이트의 중요한 이벤트를 추적 할 수 있습니다.

ReactJS 애플리케이션에서 Google Analytics를 올바르게 구현했는지 어떻게 알 수 있습니까?

간단합니다! ReactJS 애플리케이션을 열거 나 로컬에서 실행하고 GA 대시 보드에서 실시간 보고서의 개요 탭을 열면됩니다. 귀하의 웹 사이트에 현재 활성 방문자가 한 명 있다는 것을 알 수 있습니다.

… 그리고 Voilà!

그게 다야! GA에서 사용자가 방문한 페이지보기와 ReactJS 애플리케이션에서 추적하려는 중요한 이벤트를 성공적으로 추적 할 수 있습니다.

Google Analytics에 대해 자세히 알아 보려면 다음 소스에서 배우는 것이 좋습니다.

Google 애널리틱스 아카데미 : 초보자를위한 Google 애널리틱스

Google 애널리틱스 아카데미 : 고급 Google 애널리틱스

Google 애널리틱스 아카데미 : 고급 사용자를위한 Google 애널리틱스

이 짧은 기사가 몇 가지 질문에 답하거나 웹 사이트에서 분석을 구현하는 방법을 배우는 데 관심을 가질 수 있기를 바랍니다. 내 기사를 읽어 주셔서 감사합니다!