GA4カスタムイベントWEB制作2023年7月で終了するユニバーサルアナリティクスがサポート終了します。それに伴い、新しくリリースされたGA4でのカスタムイベントの設定方法を解説。任意の項目をGTMを使い、GA4のレポート画面に表示させるまでを記事にしています。アナリティクスのサポートが終了します。2023年7月1日以降は少なくとも6ヵ月はアクセスできるようですが、新たなデータ取得はできなくなります。ヘルプページをご覧ください。終了したあとのアナリティクスはGA4という新しいアナリティクスになります。GA4とユニバーサルには互換性がなく、データの引継ぎも当然できないので、GA4をまだ使わなくてもデータ収集用にタグの埋め込みは進めておくのが上策です。ユニバーサルアナリティクスで取得していたイベントをGA4で再現するGA4とユニバーサルアナリティクスでは全然考え方が違っていて、なにがなんやらわからないレベルで変わっています。GA4とユニバーサルアナリティクスの違いについては、ググってもらうとして、ユニバーサルアナリティクスで使っていたイベント設定をGA4でも同様に使えるのかの検証と設定方法の紹介です!試行錯誤の末、無事取得ができましたので、それを記事にしていきます。今回のゴールは、GA4でアフィリエイトリンクをクリックしたら、「ASP」、「リンクしたページのURL」、「商品名」を取得するです。ユニバーサルアナリティクスでの設定は以下のページで説明しています。▼トリガーの設定方法や変数の作り方などはGA4でも共通なので、そこが理解が不十分なかたはぜひご覧ください。GTMを使ってイベント計測を簡単に行う方法グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事ですGA4のイベント設定の概要ユニバーサルアナリティクスのイベントは管理者が設定しないと使えない項目でしたが、GA4ではデフォルトで色々なイベントが仕込まれています。ページビューすらイベントになっていますからね。これは今までのイベントという考え方を変えなければならない。思ってしまうんですけど、今までのイベントもイベントとして扱われます。このへんがややこしい。GA4のカスタムイベント設定の追加はGTMから設定可能GA4のイベント設定の追加はGTM(グーグルタグマネージャー)から追加ができます。できますというか、GTMからやらないとややこしいので、GTMは必須といえます。(使わなくてもできますがめんどくさい)データの反映に時間がかかるGTMからの設定もGA4からの設定の変更も、反映まで時間がかかります。リアルタイムやDebugViewからはすぐに確認できますが、通常使うレポートに反映されるのは基本的に翌日になります。レポートの日時設定を今日に変更すれば、反映後に確認は可能です。反映に時間がかかるので、設定した内容が正しいのか、思い通りに表示されるのかの確認に時間がかかるのが難点です。取得したい情報を整理します。以下の図のような商品紹介リンクがあり、それの詳細を取得したいわけです。何をどこでどのボタンがクリックされたかが知りたい1のタイトルと、2のクリックしたボタンはHTMLのdataを使って取得します。3のリンク元URLはGTMの変数にあるPagePathで取得可能です。設定完了後のGA4のレポート設定完了し、レポートが生成された今回のゴールです。このレポートを作るのがゴールこんな感じで取得したい項目をレポートに表示させることができました。以下、このカスタムイベントとそのパラメータの設定方法を解説します。GTMを利用して情報を取得する正解を知っていれば別にややこしくないんですが、GA4でどういう挙動をするのかがさっぱりわからず、暗中模索で進めていたので私は苦労しました。設定自体は簡単なので安心してください。GTMでタグを作ります。タグの中で使用するイベントパラメータに、GTMで作った変数を使うので、正確な手順は変数の設定からになるのですが、いったんタグの設定画面を紹介します。GTMのGA4イベント用タグ設定内容タグの種類はGA4イベントを選択します。設定タグに使用するGA4のアナリティクスの設定をしてください。GTMで設定する「イベント名」がそのままGA4に反映されるので、わかりやすい名前をつけて、覚えておいてください。イベントパラメータですが、ここが一番のキモです。ここの設定方法がよくわからず、2~3日悩みました。(データ反映が遅いからあってるのかどうかの検証に時間がかかり。)トリガーはこのタグの発動条件なので、通常のユニバーサルアナリティクスと同様の設定で問題ありません。簡単に補足すると、ボタンがクリックされたときにこのタグが発火します。詳細は過去の記事に記載があります。GTMの「ユーザー定義変数」の設定ここで設定する変数は2つです。1の商品名を取得する変数と、2のクリックしたボタンの名称を取得する変数を設定します。変数の名前をつけて、変数のタイプは「データレイヤーの変数」を選択します。データレイヤーの変数名はdata属性の内容を取得します。ユーザー定義変数の設定1<a>タグに仕込んであったdata属性の「data-name」を取得する変数名を指定します。「gtm.element.dataset.name」と記入。gtm.element.datasetでdata属性が取得できるので、最後のnameは属性の名前を指定すると。これで「data-name」を取得する変数が作成できました。同様にクリックしたボタンの名称の変数を作成こちらも「data-asp」の値を取得するための変数を作成します。ユーザー定義変数の設定2やることは同じで、gtm.element.dataset.asp」とdata属性の指定だけ変わります。これで、「data-asp」と「data-name」の値を取得する変数が定義されました。変数の定義が終わったので、再びGTMのタグ設定に戻ります。イベントパラメーターの項目を設定していきます。イベントパラメーターの設定パラメーター名はそのままGA4に反映されます。(2回目)日本語を使っても問題ありません。値に変数を適用する値に先ほど作った変数を適用します。値はレゴブロックをクリックすると、変数の一覧画面が表示されます。イベントパラメーターに変数をあてる変数の選択画面から、先ほど作った変数を選択します。トリガーの設定もしたら、これでGTMの仕込みは完了です。GTMプレビューでちゃんと取得できるか確認タグの設定がきちんと期待通りの動きをするかをGTMの「プレビュー」機能を使って確認します。Fired」の下にあるボタンをクリックします。as」が表示され、「Names」と「Values」が選べるようになります。「Names」の状態で、イベントパラメータの「name:」と「value:」がちゃんと設定されているかを確認します。問題なければ次に「value」に変更して値を確認します。「Values」にすると、実際に取得している内容を確認することができるので、取得した値で問題ないかを確認します。問題なさそうなので、追加したタグを「公開」すれば、GTMの設定は完了です!GA4のDebugViewで確認GTMのプレビューを使うと、GA4のDebugViewにも反映されるので、GA4でも確認します。GA4のデバックは左メニューの「設定」→「DebugView」にあります。デバックモードで使わないと発動しないのですが、GTMのプレビューを使うとここが反応して確認できます。表示されたデバックの画面から、先ほど確認した「AF_click」のイベントが計測されているので、そこをクリックします。【2023年追記】デバックビューの場所が変わっていたので更新しました。「AF_Clickイベント」をクリックすると、そのイベントで取得されたパラメータの一覧が表示されます。カスタムイベントのパラメータ確認GTMで設定したパラメータも確認できました!パラメータの値の確認パラメータはドロップダウンリストになっているので、クリックするとパラメータの「値」を確認できます。値もしっかり確認できました。これでGA4でのイベント追加は、ほぼ完了です。作ったパラメータをカスタムディメンションに登録するここまでの流れでデータの取得までは完了しています。取得したデータを簡単に表示できるように、取得したデータを「カスタムディメンション」に登録します。カスタム定義を選択します。カスタムディメンションの設定カスタムディメンションの新規登録カスタム定義から「カスタムディメンションを作成」をクリックし、新規に追加します。カスタムディメンションの新規作成カスタムディメンションの設定ディメンション名をつけて、範囲は「イベント」を選択。イベントパラメーターで、GTMで設定したイベントパラメーターを選択します。カスタムディメンションの設定これで新たにディメンションが登録され、イベントの詳細画面に設定したカスタムディメンションが表示されるようになります。カスタムディメンションにパラメータが出ない場合GTM設定直後だと、このカスタムディメンションが表示されない場合があります。ありますというか、直後だと出ないです。設定反映まで数時間必要らしいので、翌日になれば表示されます。このへんのタイムラグも使いづらさとわかりづらさの要因ですね。イベント詳細のサマリーに表示がされます。カスタムディメンションを作った直後は例のごとく、すぐには表示されません。翌日くらいになれば表示されると思います。「イベント」をクリックします。イベントのサマリー画面データが取得できていればイベント名の項目に作ったイベントが追加されます。出てきたイベントをクリックします。イベント詳細のサマリーで確認!レポート表示画面から、カスタムディメンションのデータ表示に時間がかかるみたいなので、クリック直後に表示されなくても、焦らないでください。イベント追加のまとめいろいろなGA4の参考サイトをググってみたのですが、私のやりたいことに直結していた記事が見つけられず、色々と試行錯誤してみました。無事、取得したい情報をとり、レポートに反映させることができました。やっかいだったのは、設定変更がすぐに反映されず、間違った設定をした場合、翌日になっても反映されないというこが多々ありました。その失敗の中で、いろいろ学びが多かったので無駄にはなっていませんが、正しいかどうかがわからない試行錯誤はなかなかにつらいものです。とっつきづらい分奥が深い(気がする)GA4の全景や概念がまだまだ理解できていませんが、めんどくさい分見返りは大きいイメージを受けました。GA4作った人頭が良すぎて、普通の人にはなかなか理解しづらい作りになってます。ユニバーサルアナリティクスはもともとが、Urchin(アーチン)というアクセス解析ツールの会社をグーグルが買収してできたツールです。私はWEB制作会社時代にUrchinを使ったことがあります。(すんごい昔だ)ユニバーサルアナリティクスは、わかりやすいアクセス解析ツールという下地があった分だけ使いやすかったんでしょうねぇ。次は「探索」レポートになれたいGA4のイベント設定とパラメータの仕組みはなんとなく理解できたので、次は「探索」について勉強していきたいと思います。通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説GTMを使ってイベント計測を簡単に行う方法グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。カテゴリWEB制作Googleアナリティクス4のやさしい教科書。(税込)(Amazon参考価格)Amazon楽天Yahoo記事内で紹介している商品リスト(価格はAmazon参考価格)2,420円(税込)Googleアナリティクス4のやさしい教科書。(1週間で基礎が学べるシリーズ)Amazon楽天YahooGA4カスタムイベントの関連ページGTMを使ってイベント計測を簡単に行う方法グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説ブログのアクセスアップに欠かせないSEO的リンク構造の考え方SEOのリンク構造を効果的に作るための情報をまとめました。可能な限り情報の出どころのリンクも用意しております。キーワード選定の方法を考察してみたSEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。構造化データで作るパンくずリストとSEOSEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値についてSEOで重要なtitleタグとhタグの使い方SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。カテゴリWEB制作Googleアナリティクス4のやさしい教科書。撮影スペースDIY空いたスペースを活用して商品撮影スペースを自作しました。GoFree2初めて使ったSOUNDEPEATSのオープンイヤー型イヤホン「GoFree2」は想像していたよりずっと快適でした。車用スマホホルダースマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。音楽再生パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。東京駅夜景ソニーのミラーレス一眼α7IIIで東京駅周辺のイルミネーションを撮影してきました。久しぶりの夜景撮影でカメラの設定を大失敗。8位SEL24F14GMソニーの広角レンズSEL24F14GMを初めて使ったレビュー。単焦点レンズと広角レンズの比較写真や作例を掲載しています。9位Bluetoothイヤホンスマホとイヤホンをつなぐ紐のないワイヤレスイヤホン「Bluetoothイヤホン」を2種類買ったので、その快適性と比較を書いてみました。10位iPhone16iPhone16をAmazonのアップルストアで一括購入。残価設定のプログラムと比較してオトクかシミュレーション。世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。WEB制作WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。カメラ2018年4月に購入したソニーのミラーレス一眼「α7III」に関連する記事一覧ページです。作例集やカメラグッズレビューなど。美味しいもの食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよAmazonプライム動画Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ旅LOG家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。thanks自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。鳥好きAmazon欲しいものリスト詳細WEB制作を中心にWEBマーケティングなどもやっています。PHPを使ったプログラミング、WEBシステム開発なども。おもしろいWEBサイトを作りたいと思っています。