Help us understand the problem. What is going on with this article?

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);
  }
// (略)
}

以上です!

solt9029
Web開発とAndroid開発をしています。よろしくお願いします。
http://solt9029.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした