분류 Reactjs

React Google 웹 로그 분석 모듈

컨텐츠 정보

  • 조회 528 (작성일 )

본문

프론트 엔드 코드베이스에 React를 사용하는 웹 사이트 또는 앱에 Google 웹 로그 분석 추적 코드를 포함하는 데 사용할 수 있는 JavaScript 모듈입니다. 

현재는 React 코드를 내부적으로 사용하지 않지만 React를 사용하는 여러 Mozilla Foundation 웹 사이트와 함께 사용하여 프로젝트 전체에서 GA 계측을 표준화 하는 방법으로 작성되었습니다.


최신 버전의 Google 웹 로그 분석 인 범용 웹 로그 분석과 호환되도록 설계되었습니다. 현재 모든 Google 웹 로그 분석 프로젝트가 범용 웹 로그 분석으로 업그레이드 되고 있으므로 이 모듈은 이전 ga.js 구현을 지원하지 않습니다.


https://github.com/react-ga/react-ga 


이 모듈은 프론트 엔드 코드 내에서 추적을 계측하는 방법에 대해 약간의 의견을 가지고 있습니다. Google API는 엔지니어가 코드를 읽고 이해하기 쉽도록 핵심 Google Analytics 라이브러리보다 약간 더 장황 합니다. 아래 예를 참조하십시오.


react-ga를 사용하는 경우 의견을 보내 주시면 감사하겠습니다. 이 리포지토리에 대한 문제, 아이디어 및 풀 요청을 자유롭게 제출하십시오.


npm install react-ga --save



import ReactGA from 'react-ga';
ReactGA.initialize('UA-000000-01');
ReactGA.pageview(window.location.pathname + window.location.search);


<!-- The core React library -->
<script src="https://unpkg.com/react@15.5.0/dist/react.min.js"></script>
<!-- The ReactDOM Library -->
<script src="https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js"></script>
<!-- ReactGA library -->
<script src="/path/to/bower_components/react-ga/dist/react-ga.min.js"></script>

<script>
  ReactGA.initialize('UA-000000-01', { debug: true });
</script>


데모 코드 


작동하는 데모의 경우 데모 파일을 보거나 이 저장소를 복제하고 npm install npm start를 실행 한 다음 http://localhost:8080을 열고 지시 사항을 따르십시오. 데모를 사용하려면 고유한 TrackingID가 있어야 합니다.


<!-- Google Analytics -->
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '<%=htmlWebpackPlugin.options.analyticsURL%>', 'ga');
    ga('create', 'UA-XXX-X', 'auto');
    ga('send', 'pageview');
  </script>
<!-- End Google Analytics -->