はじめに
GoogleAnalyticsという、Webサイト上でのユーザーの画面操作などを集計してくれるサービスがあります。
業務でこの実装を行ったのですが、まったくわからないことだらけだったので、備忘も兼ねてその基本的な使い方をまとめていきます。
アカウントをつくる
まずは試すためにはアカウントを作る必要があります。
Googleアカウントを持っていれば、誰でも作成可能です。
アカウントを作成しても、すぐに使えるようにはなりません。
Webサイトを紐づけてから最大48時間有効化にかかるそうなのでお気をつけください。
まずは「Google Analytics」のサービスにアクセスしましょう。
ググってもいいですし、googleアカウントのメニューから選択してもよいです。
「測定を開始」を押下します。
「アカウント名」を入力します。
「プロパティ」を作成します。
このあたりはあまり重要でないので任意の値でサクサクすすめてよいです。
※本番運用するのであれば諸々検討する必要はありますが…
お試しなので何でもよいです。
こちらも同様です。
プルダウンから日本を選択して利用規約を確認の上、同意します。
この部分からデータ収集したいサイトやアプリを設定します。
今回はWebページからの収集とするので、「ウェブ」とします。
対象のWebサイトのURLを設定します。
ストリームは何でもよいです。
※今回はこの時点でWebサイトをデプロイしていなかったので、設定していません。
あとから設定することもできます。
「ホームに移動」をします。
メールの設定を求められるので、必要であれば設定してください。
以上でアカウント関連の設定は完了です。
サイトに紐づける
データを収集するためには、タグと呼ばれるコードをhtmlファイルに埋め込む必要があります。
管理画面の
「データの収集 > データストリーム」から先ほど作成したデータストリームを選択します。
設定が開くので、一番下の「タグの実装手順を表示する」を選択します。
「手動でインストールする」タブを選択すると、設定するべきタグが表示されます。
これはhtmlファイルのheadタグ内に記載するものなので設定をしておきます。
正しく設定ができると、同じページの下部にある「テスト」を実行すると緑のチェックマークが表示されます。
これが出れば、正しく紐づいていることになります。
gtagの実装をすすめる
前提
React、TypeScript、Viteを使用して開発を行っていきます。
環境設定
GoogleAnalyticsは様々なWeb上の操作を収集できます。
その設定を行うためにはgtagというライブラリを導入します。
以下を実行して導入しましょう。
npm i @types/gtag.js --save-dev
基本的にはこれだけで十分ですが、tsconfig.jsonにtypesを明示的に指定している場合には、gtag.jsをtypesに加えてあげる必要があります。
クリックイベントを拾う
以下はreact-routerのLinkコンポーネントにクリックを紐づける例です。
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で固定です。
第二引数には任意の値を設定できます。
ここに設定した値で、イベントの集計が行われます。
また、第三引数にオブジェクト形式で様々な値を設定することができます。
このあたりの内容が参考になるかと思います。
これらを正しく設定すると、以下のように集計結果を確認することができます。
細かく様々カスタマイズができるようですが、基本的にはこれさえ抑えておけば実装は可能です。
まとめ
今回は短めでしたが、普段あまり触ることのないgtagについてまとめてみました。
普段触らない技術は動かすだけで一苦労なので、折に触れてまとめていきたいと思いました。