Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
33
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@solt9029

GoogleアナリティクスをReactで使う方法

GoogleアナリティクスをReactで使う方法

サンプルソースコード

以下のリポジトリにてサンプルを確認することができます。(react + router + reduxの構成)
https://github.com/solt9029/react-ga-tutorial

普通のHTMLページだったら?

Googleアナリティクスを普通のHTMLページで使う場合、ヘッダーに以下のようなタグを追加します。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128421111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-128421111-1');
</script>

しかし、Reactを使ったSPAの場合、これだけだとうまくいきません。
(※ページ遷移はReact Routerで行っているものとします)

そのため、react-gaというモジュールを使って設定していきます。
かなり単純ですが、ちゃんと一通り書いていた記事が見つからなかったので、この記事にまとめました。

react-gaでGoogleアナリティクスをReactで使うよ!

まずreact-gaが必要です。
yarnを使っている場合には以下の通りです。

yarn add react-ga

npmを使っている場合には以下の通りです。

npm install --save react-ga

普通にReactの開発をしていれば、src/index.jsの中でhistoryを作っているかと思います。(そうでない場合は、読み替えていってください。)

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
// (以下略)

このindex.jsに以下のようなコードを加えます。

import ReactGA from 'react-ga';
import createBrowserHistory from 'history/createBrowserHistory';

ReactGA.initialize('UA-128421111-1');
const history = createBrowserHistory();
history.listen(({ pathname }) => {
  ReactGA.set({ page: pathname });
  ReactGA.pageview(pathname);
});
// (以下略)

history.listenで、React Routerによってページ遷移するごとに、Googleアナリティクスに情報が送信されるようになりました。

しかし、初めてindex.htmlが返されるときに、Googleアナリティクスに情報が送信されません。(ページ遷移ではなく、直接そのサイトにアクセスしたとき)

そこで、App.jsにcomponentDidMountでGoogleアナリティクスに情報を送信するプログラムを書きましょう。

import ReactGA from 'react-ga';
// (略)

export default class App extends Component {
  componentDidMount() {
    const { pathname } = this.props.location;
    ReactGA.set({ page: pathname });
    ReactGA.pageview(pathname);
  }
// (略)
}

以上です!

33
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
33
Help us understand the problem. What is going on with this article?