Google Analyticsでユーザーイベントの取得 -ｺﾞﾙﾌﾒﾄﾞﾚｰ開発日記-

こんにちは。ゴルフメドレーの開発をしている宮水です。

ゴルフメドレーとは、全国のゴルフ練習場を特徴（打ち放題 / 駅近 / アプローチ練習場もある...など）から検索できるサービスです。ゴルフ場コンサルタントのあべちゃんと、エンジニアのゆうすけと3人で開発しています。

さて、このゴルフメドレー ですが、大型連休があったので機能をたくさん追加できました。

TOPページに特徴から探すを作ってみたり、

メドレーマガジンをつけてみたり、

ゴルフ練習場詳細ページに、その練習場に近いゴルフ場を載せてみたり。

開発メンバーで「サイトが華やかになったー！」と喜んではいたものの、「この機能って、ちゃんと使われてるんだっけ？」というところをトラッキングしていないことに気づきました。

そこで今回は、Google Analyticsを使ったユーザーイベントのログの取得についてご紹介します。

私たちはNext.jsを使用しているので、こちらの記事を参考にさせていただきました。Google Analyticsの導入については、私たちはPV数を見るのにすでに使用していたので割愛させていただきます。

components/gtag.js ファイルを追加します。（componentsよりlib配下とかの方がいいかもしれません。）

そこに、以下のようなコードを追加します。

引数のaction, category, labelには任意の文字列を入れることができます。開発者が好きに命名規則を設定したらいいと思います🙆‍♀️（雑）

export const GA_TRACKING_ID = 'hogehoge-hogehoge';

export const event = ({ action, category, label }) => {
 try {
   window.gtag('event', action, {
     event_category: category,
     event_label: label,
   });
 } catch (error) {
   console.log('window.gtag is not a function');
   // silences the error in dev mode
   // and/or if gtag fails to load
 }
};

使う側はたったこれだけ書けばOKです。雑ですみません。

import * as gtag from 'components/gtag';

const Button: React.FC<Props> = (props) => {
 const somethingFunc = () => {
   // 何か処理を書く
   
   // ここにログを仕込む
   gtag.event({
     action: 'nannka_click_sareta',
     category: 'top_page',
     label: 'hoge',
   });
 };

 return (
   <>
     <Button
       onClick={() => somethingFunc()}
     />
   </>
 );
};

export default Button;

本番環境にデプロイして、数分するとこのような感じでトラッキングできました！とっても簡単でした。

ちょっとまだまだ使いこなせていない感じはありますが、どこのページで何がクリックされたかわかっただけでも大きな進歩です。

以上です！ここまで読んでくださってありがとうございました。

もしよかったら覗いてみてください☺️ => ゴルフメドレー