個人のWebサービスでGAでトラッキング出来るようにしてみたので、やったこととか手順とか色々、MEMOしておきます📝

GA(Google Analytics)とは?

marketingplatform.google.com

ユーザー像を把握。ユーザー像を詳しく分析して理解を深めましょう。Google アナリティクスなら、ビジネスのデータ分析に必要なさまざまなツールを無料でご利用いただけます。

上記の通りGoogle製の無料で使えるユーザートラッキングのためサービスです。

リアルタイムに現在のユーザー数や発生しているイベントを見たり、レポートを作成したりして、サイトを分析することができます。

GAを導入する

Google Analyticsを導入するのは簡単で私は以下を参考に作成して、

appweb-ga.com

表示されたタグを任意のサイトのheadに配置すればOKです。

私はRuby on Rails製のサービスに導入したので以下のような形で反映しました。

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <% ga_id = Rails.configuration.settings.google_analytics[:id] %>
  <script async src="<%= "https://www.googletagmanager.com/gtag/js?id=#{ga_id}" %>"></script>
  <script>
    // entryからscriptタグで読み込む方法だとGlobalでGtagが参照できない ので、直接htmlに記載してる。
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "<%= ga_id %>");
  </script>
</head>

一応、GAのIDに関してはconfig_forと環境変数を使ってコード内に記述しないようにしています。

production:
  google_analytics:
    id: <%= ENV['GOOLE_ANALYTICS_ID'] %>
development:
  google_analytics:
    id: <%= ENV['GOOLE_ANALYTICS_ID'] %>
test:
  google_analytics:
    id: <%= ENV['GOOLE_ANALYTICS_ID'] %>

GAで任意のイベントをトラッキングする

GAで任意のイベントをトラッキングするには「GAを導入するでGlobalに定義したgtagを呼び出せばOKです🙆‍♂️

以下のような形でGlobalに定義されたgtagを任意の引数で呼び出せるmoduleを用意してあげて、 ※失敗したときに備えて個人で利用しているRollbarに失敗を通知するようにしています。

import Rollbar from "@js/services/Rollbar";

export const trackEvent = ({action, category, label}) => {
  try {
    window.gtag("event", action, {
      event_category: category,
      event_label: label,
    });
  } catch (error) {
    Rollbar.warning("window.gtag is not a function", error);
  }
};

以下のような形で呼び出して上げるとGA側にイベントが反映されます。

import { trackEvent } from "@js/services/Gtag";
trackEvent({
  action: "click_foo",
  category: location.pathname,
  label: "targat name",
});

※上記はどこで(category)、何が(label)、行われた(action)みたいな形でトラッキングするような形にしてみました。

f:id:madogiwa0124:20210612213733p:plain ※上の画像はイメージなのでサンプルのイベントは記載されてないですが。。。

おわりに

あんまり今までGAとかちゃんと使ってこなかったのですが、任意のイベントを手軽にトラッキングして、分析出来るの便利ですね✨

参考

note.com

blog.hubspot.jp

Madogiwa Blog

主に技術系の学習メモに使っていきます。

個人のWebサービスにGA(Google Analytics)を導入して色々トラッキング出来るようにしたMEMO📝

GA(Google Analytics)とは?

GAを導入する

GAで任意のイベントをトラッキングする

おわりに

参考