UAからGA4への移行(Config実装編) ~GA4の知識はClassにして自己文書化しよう~ #Ruby

駆け出しエンジニアがGA4を導入

始めまして、エンジニア歴1年が経過した駆け出しエンジニアです
今回、GoogleAnalyticsでUAからGA4の移行業務を担当しました。
ソースコードに直埋めする方法を簡単ですがGA4導入という形で記事にしたいと思います。
開発はRailsで行っているので一部の例はRubyで記載しています。
タグマネージャーやGA4画面等の説明は含みませんが、これからGA4を導入する方の参考になればいいなと思います。

GA4は新しいGoogleAnalytics

これまでGoogleAnalyticsではUA(ユニバーサルアナリティクス)というプロパティでデータの収集を行っていました。
新しいGA4というプロパティが発表されていますが、

「GA4って何が違うの」
「イベントベースに変わって同じように測定できるの」

などなど、様々な理由からGA4の導入を慎重に検討していました。

来年6月でUA終了

2023 年 7 月 1 日以降、標準のユニバーサルアナリティクスプロパティでデータが処理されなくなります。

残念ながら、いつまでも検討していることは許されませんでした
UAの終了が決まっていることから、来年7月移行、GoogleAnalyticsで前年比を計測する為には今年の7月からGA4での測定を開始する必要がありました。
※UAのデータをエクスポートして、GA4と比較するという方法もあるようです。
が、従来のUAでの計測と比較するために、終了1年前となる今年の6月中にGA4を導入するように進めました。

GA4の導入方法

いくつかGA4への移行方法はあると思いますが、
これまでのUAでの計測を見直すことにして、UAからの引き継ぎを行わず改めてGA4を導入することにしました。
ただし、UAの計測と比較可能なようにGA4を設定していきます。

まずはGA4でアカウント、プロパティを作成しGA4用のIDを取得します。
以降 G-**** をご自身の環境に合わせて置き換えて下さい。

導入方法はタグマネージャーを使用せず、ソースコードに直埋めです。

header

<script async src="https://www.googletagmanager.com/gtag/js?id=G-****"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-****', { 'page_category': 'category_a', 'page_label': 'label_b' });
</script>

上記が基本的な設定になりますが、正直これで十分な計測が行われます

簡単に解説していきます。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-****"></script> で gtag() が使用できるようになります。
gtag('config', 'G-****', { 'page_category': 'category_a', 'page_label': 'label_b' }); で基本的なイベントが集計されるようになります。
{ 'page_category': 'category_a', 'page_label': 'label_b' } はカスタムパラメータとなり、任意のパラメータ名と値を設定できます。
もちろん指定せずに gtag('config', 'G-****'); でもOKです。
configに設定したパラメータは、他のイベントにも送信されるので、どのイベントにも必要なパラメータを設定すると良いと思います。

Config設定でページビューイベントを含む、色々なイベントが集計される

どのようなイベントが計測されるかはここでは具体的には触れませんが、下記リンクを参照されると良いと思います。

Configの設定でページビューイベントが集計されるというのは、GAの知識のある人にとっては当然の認識のように思いますが、
一方でGAの知識がないと

「ページビューの集計ってやってないの？」

となる可能性もあるかと思います。
GAの知識がない方も理解できるように、configでは send_page_view: false としてデフォルトのページビューのイベントを無効化して、改めてイベントを再定義することも可能です。

- gtag('config', 'G-****', { 'page_category': 'category_a', 'page_label': 'label_b' });
+ gtag('config', 'G-****', { 'send_page_view': false, 'page_category': 'category_a', 'page_label': 'label_b' });
+ gtag('event', 'page_view', {'send_to': 'G-****'});

「ページビューはここで定義しているんだ」

と、みんながわかるようになります

GA4の知識をClassにして自己文書化する

Railsで開発を行っているのでRubyでのサンプルコードになっています。

gtag/config.rb

module Gtag
  ConfigParams = Struct.new(:page_category, :page_label, keyword_init: true)

  class Config
    attr_reader :custom_params, :property

    # @param custom_params [Gtag::ConfigParams] 
    def initialize(custom_params: ConfigParams.new, property: "G-****")
      @custom_params = custom_params.to_h
      @property = property
    end
  end
end

# Gtag::Config.new(
#   custom_params: Gtag::ConfigParams.new(page_category: :top, page_label: :type_a))
# )
# => #<Gtag::Config @custom_params={:page_category=>:top, :page_label=>:type_a}, @property="G-****">

GtagのConfigには、カスタムパラメータとプロパティが必要という知識を表現しました。

カスタムパラメータは未設定でも動作するので、デフォルト引数を設定し Gtag::Config.new の呼び出しもOKです。

Gtag::Config.new
=> #<Gtag::Config @custom_params={:page_category=>nil, :page_label=>nil}, @property="G-****">

上記のようになりますが、GA4は値が設定されていないパラメータを受け取らないので、GA4で確認するとパラメータなし(not set)となります。

またカスタムパラメータにStructを使用することで事前に設定されていないパラメータ名を受け付けなくなります。
これにより、好き勝手にパラメータを設定できません。typoにも気づけます

Railsの場合は、各ControllerでConfigクラスを初期化してインスタンス変数に入れることで
ページごとに必要なカスタムパラメータを設定できると思います。

class TopController
  def index
    @ga4_config = Gtag::Config.new(
      custom_params: Gtag::ConfigPrams.new(page_category: :top, page_label: :type_a)
    )
  end
end

module GtagHelper
  def config_gtag(ga_config)
    config_params = { **ga_config.custom_params, send_page_view: false }

    <<~JS
      gtag("config", "#{ga_config.property}", #{config_params.to_json});
      gtag("event", "page_view", "#{{ send_to: ga_config.property }.to_json}");
    JS
  end
end

# header
<script>
  ...
  <%= config_gtag(@ga4_config) %>
</script>

基本設定はできたけど、カスタムイベントがあった...

Configの設定により、色々なイベントが集計されるようになりましたが、
カスタムイベントと呼ばれる、独自に追加しているイベントがありました。

次のステップはUAで定義されているイベントを理解し、GA4にカスタムイベントを追加することでした。
駆け出しエンジニアのGA4移行はまだまだ続きそうなので、今回は基本設定の実装までとしたいと思います

引き続きGA4でのカスタムイベントの設定についても記事にしたいと思います。
最後まで読んで頂きありがとうございました。