この記事は、以下のような人にオススメです。
- カスタムイベントの作成方法を知りたい人
- 直書きやGTMよりも簡単にイベントを発火できる方法を探している人
- 一時的にカスタムイベントで集計したいだけで開発したくない人など
こんにちは！Webディレクターのオスカーです。
前回は「特定のボタンのクリック回数を測定したい」という記事で、GTMでイベント作成する方法を照会しました。
今回は既存イベントで、GA4の中で新しいカスタムイベントを作成する方法をご紹介いたします。
最後まで見ていただけますと幸いです。
もくじ
カスタムイベントの作成方法について
カスタムイベントを作成する方法についておさらいします。
GA4でイベントを作成するのに、３つの方法があります。
- 直書き
サイトのJavaScriptに直接書き込みます。自由度：高
⇒どこでも設置できます。「バナーが見えるときだけ発火する」のような高度な設定も可能です。
サイト独自の情報、EC拡張なども基本この方法を使います。プログラム力：必須
- GTMで設置
GTMを導入している場合だけですが、GTMで設定を行います。自由度：中
⇒Class、URLなどの条件であれば、設置できます。プログラム力：高度な能力は必要ない
⇒ある程度のHTMLに関する知識があれば十分です。
- GA4で作成
既存のイベントと他のパラメータと組み合わせて新しいカスタムイベントとしてカウントするように設置できます。自由度：低
⇒設定できる条件はGA4の中で用意されたもののみ、それ以上のことはできません。プログラム力：不要
⇒GA4のUIで完結します。
エクセルのIF機能を使えるなら設定できます。
このように、方法は３つありますが、それぞれできることが違いますし、必要な能力も変わってきます。
オスカーが思うに、
プログラマーなら「直書き」できるように、
Webディレクター、解析士、コンサルタントなら「GTMで設置」できるように、
サイトオーナー（社内担当者）なら、最低限に「GA4内で作成」できるようにしましょう
※オスカーの一存にすぎません。
GA4でカスタムイベント作成する前に
GA4内でのイベント作成は、GA4に「判断するための情報が十分にある」ことを前提としています。
「既存イベント」や「GA4がデフォルトで収集している情報」を組み合わせて、新しいイベントを作ります。
例えば、
- 「page_view（既存イベント）」と「page_location（収集した情報）」
- 「add_to_cart（EC拡張対応した場合のイベント）」と「item_name（収集した情報）」
- 「purchase（コンバージョンイベント）」と「item_name（収集した情報）」
このように使うことがあります。
「（一時的に）細かく分析したいけど、それだけのために開発したくない」という時に使う方法として位置付けがいいかもしれません。
また、前回GTMの設定で紹介した、ボタンのクラス（class）で判断して発火することは、（何等かの方法でクラスをGA4に渡していない限り、）この方法では対応できません。
GA4でカスタムイベント作成｜ステップ①：目的を分解する
さて、GA4でイベント作成する方法を説明します。
まずは目的を定めましょう。
オスカーは、「ブログ記事が表示された時にイベントを発火してその数を取得したい」とします。
条件は、「ブログ記事が表示された時」なので、
「ブログ記事」をpage_locationで判断、「表示された時」は既存イベントのpage_viewで判断できます。
今回設定する条件は、
- イベントが”page_view”の場合
- ”page_location”が”/blog/”を含む場合
※”page_location”が”/blog”で設定する場合、ブログ一覧ページも含まれますので、今回は”/blog/”としています。
の２条件が同時にヒットする場合に決定します。
GA4でカスタムイベント作成｜ステップ②：GA4で設定する
- GA4へアクセスします。
- 左メニューから「設定」⇒「イベント」へ移動します。
- 右上の「イベントを作成」をクリックします。
- さらにカスタムイベントのメニューで「作成」をクリックします。
- 設定画面が表示されます。
① イベントを決めます。今回はpage_viewのブログページバージョンですので、"blog_view"と命名します。
② event_nameの値では、「イベントが”page_view”の場合」ですので、”page_view”を記入します。
③ さらに、「”page_location”が”/blog/”を含む場合」を設定するので、「条件を追加」をクリックします。
- 条件が追加されますので、
① パラメータ名は”page_location”を入力します。
② 演算子は「次を含む」を選択します。
③ 値は”/blog/”を入力します。
- 最後に”保存”をクリックします。
保存された瞬間からデータ収集されます。
GTMのようなプレビュー機能はありませんので、ぶっちゃけ本番です。
設定は以上になります。
GTM PreviewとGA4のDebugViewで確認
設定は完了しましたので、GTM Previewで確認します。
- GTMの右上の「プレビュー」をクリックします。
- 目標のページへ移動しますと、Tag Assistantに「blog_view」が表示され、発火しています。
- 最後に、DebugViewで確認します。
DebugViewの使用方法をご存じないからはこちらをご参照ください。
DebugViewの使い方タイムラインで「blog_view」が表示されています。
これで確認も完了しました。
１つだけ注意すべきところとして、DebugViewの画像を見ていただけますと、
”blog_view”が発火する前に、”page_view”も発火しています。
両方は独自でカウントされていますので、集計する時に、複数計算しないように注意しましょう。
おわりに
GA4でカスタムイベントを作成する手順が他の方法と比べ、簡単ですし、手順も少ないです。
だから本題に入る前の内容を多めに書いています。
その代わり制限も多く、できることは限られてきます。
自分がしたいことはどんなことなのか、一時的な集計なのか、などのことも考えて、一番適切な実装方法で対応するとよいでしょう！
今日も読んでいただきありがとうございます。
少しでも役に立てれば幸いです。
それでは。
コメント