てっとり早くGoogleAnalyticsの実装をやってみる

## はじめに
GoogleAnalyticsという、Webサイト上でのユーザーの画面操作などを集計してくれるサービスがあります。
業務でこの実装を行ったのですが、まったくわからないことだらけだったので、備忘も兼ねてその基本的な使い方をまとめていきます。

## アカウントをつくる
まずは試すためにはアカウントを作る必要があります。
Googleアカウントを持っていれば、誰でも作成可能です。

:::note warn
アカウントを作成しても、すぐに使えるようにはなりません。
Webサイトを紐づけてから最大48時間有効化にかかるそうなのでお気をつけください。
:::

まずは「Google Analytics」のサービスにアクセスしましょう。
ググってもいいですし、googleアカウントのメニューから選択してもよいです。
<img width='50%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0cdd765c-c448-fe10-f6e6-55815de5f1ca.png'>

「測定を開始」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/ccbba9ed-f9f3-34c2-a901-63141ae4e06b.png'>

「アカウント名」を入力します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/d9e600e8-1da0-4bde-1b4c-8de1bcde71c1.png'>

「プロパティ」を作成します。
このあたりはあまり重要でないので任意の値でサクサクすすめてよいです。
※本番運用するのであれば諸々検討する必要はありますが…
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/ffae9a0a-8319-a295-6add-d84d76b13f64.png'>

お試しなので何でもよいです。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/c07bbef0-3142-97c5-fb79-f1f7c7f2cae5.png'>

こちらも同様です。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/1c9575bd-5e32-1781-a8d1-345e100efc67.png'>

プルダウンから日本を選択して利用規約を確認の上、同意します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/6981104a-ba67-f849-b9b2-a9439c6b97b2.png'>

この部分からデータ収集したいサイトやアプリを設定します。
今回はWebページからの収集とするので、「ウェブ」とします。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/2118bc3d-e0cf-1561-e1aa-78af69fcb924.png'>

対象のWebサイトのURLを設定します。
ストリームは何でもよいです。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/46e8b138-7161-b9af-c2eb-1ede470b365e.png'>
※今回はこの時点でWebサイトをデプロイしていなかったので、設定していません。
あとから設定することもできます。

「ホームに移動」をします。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/edb3af7d-3d44-f740-bf7a-4677b4abb05c.png'>

メールの設定を求められるので、必要であれば設定してください。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/73c65a47-6805-7aaf-c18d-c3eff9a1e71b.png'>

以上でアカウント関連の設定は完了です。

## サイトに紐づける
データを収集するためには、タグと呼ばれるコードをhtmlファイルに埋め込む必要があります。

管理画面の
「データの収集 > データストリーム」から先ほど作成したデータストリームを選択します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0ad08413-31c0-f090-b5d3-f33a02e0dabd.png'>

設定が開くので、一番下の「タグの実装手順を表示する」を選択します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/0122e344-5ae1-c62d-3b57-eab96e86bd4f.png'>

「手動でインストールする」タブを選択すると、設定するべきタグが表示されます。
これはhtmlファイルのheadタグ内に記載するものなので設定をしておきます。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/b9f70d3d-5ad1-9931-a30d-b9c11ab8a911.png'>

正しく設定ができると、同じページの下部にある「テスト」を実行すると緑のチェックマークが表示されます。
これが出れば、正しく紐づいていることになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/7eccff52-35de-53ba-0f42-989c5da86c3e.png)


## gtagの実装をすすめる
### 前提
React、TypeScript、Viteを使用して開発を行っていきます。

### 環境設定
GoogleAnalyticsは様々なWeb上の操作を収集できます。
その設定を行うためには`gtag`というライブラリを導入します。

以下を実行して導入しましょう。
```bash
npm i @types/gtag.js --save-dev
```

基本的にはこれだけで十分ですが、`tsconfig.json`に`types`を明示的に指定している場合には、`gtag.js`を`types`に加えてあげる必要があります。

### クリックイベントを拾う

以下は`react-router`の`Link`コンポーネントにクリックを紐づける例です。
```react:App.tsx
import { Link } from "react-router-dom";

function App() {
  const handleClick = () => {
    window.gtag("event", "child_click");
  };
  return (
    <>
      <Link to={"/child"} onClick={handleClick}>
        child
      </Link>
    </>
  );
}

export default App;
```
`window.gtag`関数で設定したいイベントを定義します。
第一引数は`event`で固定です。
第二引数には任意の値を設定できます。
ここに設定した値で、イベントの集計が行われます。

また、第三引数にオブジェクト形式で様々な値を設定することができます。

https://developers.google.com/tag-platform/devguides/events?hl=ja#universal_analytics_events

このあたりの内容が参考になるかと思います。

これらを正しく設定すると、以下のように集計結果を確認することができます。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/80bdcba8-eeda-c67c-06ef-6fc543dbe6f1.png'>

細かく様々カスタマイズができるようですが、基本的にはこれさえ抑えておけば実装は可能です。

## まとめ
今回は短めでしたが、普段あまり触ることのないgtagについてまとめてみました。
普段触らない技術は動かすだけで一苦労なので、折に触れてまとめていきたいと思いました。