React: GoogleアナリティクスでSPAをトラッキングする

通常のWEBページでGoogleアナリティクスを使用するにはヘッダーに指定のタグを埋め込むだけで良いですが、その手法では、Reactを用いたSPAのページ遷移を正しく集計できません。そこで、ちょっとした工夫が必要になります。

react-gaのインストール

yarn add react-ga

index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch } from 'react-router-dom';
import ReactGA from 'react-ga';
import createBrowserHistory from 'history/createBrowserHistory';

ReactGA.initialize('[トラッキングコード]');
const history = createBrowserHistory();
history.listen(({ pathname }) => {
  ReactGA.set({ page: pathname });
  ReactGA.pageview(pathname);
});

render(
       <Router history={history}>
         <Switch>
           <Route .../>
           <Route .../>
         </Switch>
       </Router>,
       document.getElementById('root')
)

React Native + Expoで簡単スマホアプリ作成

インストール

npm install -g create-react-native-app

アプリ作成

create-react-native-app myapp
cd myapp
yarn start

実機でテスト

Expo Clientをダウンロード。QRコードから読み込む機能は無くなったらしいのでメールでURLをスマホに送信します。


一瞬でアプリを作成できました。

React: AWS AmplifyコンソールでReact-routerを使用する

React-routerでページを遷移した後に更新ボタンを押すと、白紙のページになってしまいます。Amplify Console 200 (Rewrite) fails on SPA React (Router) Applicationを参考に、以下のように「書き換えて、リダイレクト」の設定を変更すると、無事動作しました。

React: 再生ボタンを押すと音楽が流れるようにしたい

インストール

yarn add @material-ui/core
yarn add @material-ui/icons
yarn add react-sound

使用例

import React, { Component } from 'react';
import IconButton from '@material-ui/core/IconButton';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import Sound from 'react-sound';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: Sound.status.STOPPED,
    }
  }
  render() {
    return (
      <div>
        <Sound url="[サウンドファイル]" playStatus={this.state.status} />
        <IconButton aria-label="Play/pause" onClick={()=>{this.setState({ status: Sound.status.PLAYING })}}>
	  <PlayArrowIcon />
        </IconButton>
      </div>
    );
  }
}

こんな感じでしょうか。

React: react-helmetを使用してtitleタグを書き換える

インストール

yarn add react-helmet

titleタグを書き換える

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

class App extends Component {
  render() {
    return (
      <div>
        <Helmet title="[タイトル]" />
      </div>
    );
  }
}

export default App;

もしくは、

import React, { Component } from 'react';
import { Helmet } from 'react-helmet';

class App extends Component {
  render() {
    return (
      <div>
        <Helmet>
          <title>
            [タイトル]
          </title>
      </Helmet>
      </div>
    );
  }
}

export default App;