GA4とGTMでイベントとパラメータの設定を覚える

GA4とGTMでイベントとパラメータの設定を覚える

GA4 GTMを使ったカスタムイベントの設定方法

#186 GA4カスタムイベント

WEB制作

2023年7月で終了するユニバーサルアナリティクスがサポート終了します。 それに伴い、新しくリリースされたGA4でのカスタムイベントの設定方法を解説。 任意の項目をGTMを使い、GA4のレポート画面に表示させるまでを記事にしています。

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

ユニバーサルアナリティクスが2023年7月1日でサポート終了

2023年7月1日にたくさんの人に愛されてきたグーグルのユニバーサル アナリティクスのサポートが終了します。

2023年7月1日以降は少なくとも6ヵ月はアクセスできるようですが、新たなデータ取得はできなくなります。

ユニバーサルアナリティクスの終了に関する詳細はグーグルのアナリティクス ヘルプページをご覧ください。

読み込み中

終了したあとのアナリティクスはGA4という新しいアナリティクスになります。

GA4とユニバーサルには互換性がなく、データの引継ぎも当然できないので、GA4をまだ使わなくてもデータ収集用にタグの埋め込みは進めておくのが上策です。

ユニバーサルアナリティクスで取得していたイベントをGA4で再現する

GA4とユニバーサルアナリティクスでは全然考え方が違っていて、なにがなんやらわからないレベルで変わっています。

GA4とユニバーサルアナリティクスの違いについては、ググってもらうとして、ユニバーサルアナリティクスで使っていたイベント設定をGA4でも同様に使えるのかの検証と設定方法の紹介です!

試行錯誤の末、無事取得ができましたので、それを記事にしていきます。

今回のゴールは、GA4でアフィリエイトリンクをクリックしたら、「ASP」、「リンクしたページのURL」、「商品名」を取得するです。

ユニバーサルアナリティクスでの設定は以下のページで説明しています。

▼トリガーの設定方法や変数の作り方などはGA4でも共通なので、そこが理解が不十分なかたはぜひご覧ください。

GA4のイベント設定の概要

ユニバーサルアナリティクスのイベントは管理者が設定しないと使えない項目でしたが、GA4ではデフォルトで色々なイベントが仕込まれています。

ページビューすらイベントになっていますからね。

これは今までのイベントという考え方を変えなければならない。
と思ってしまうんですけど、今までのイベントもイベントとして扱われます。
このへんがややこしい。

GA4のカスタムイベント設定の追加はGTMから設定可能

GA4のイベント設定の追加はGTM(グーグルタグマネージャー)から追加ができます。

できますというか、GTMからやらないとややこしいので、GTMは必須といえます。(使わなくてもできますがめんどくさい)

データの反映に時間がかかる

GTMからの設定もGA4からの設定の変更も、反映まで時間がかかります。

リアルタイムやDebugViewからはすぐに確認できますが、通常使うレポートに反映されるのは基本的に翌日になります。

もちろん、レポートの日時設定を今日に変更すれば、反映後に確認は可能です。

反映に時間がかかるので、設定した内容が正しいのか、思い通りに表示されるのかの確認に時間がかかるのが難点です。

私がGA4で取得したいカスタムイベント&パラメータの内容

改めて取得したい情報を整理します。

以下の図のような商品紹介リンクがあり、それの詳細を取得したいわけです。

GA4のイベントで取得したい内容
何をどこでどのボタンがクリックされたかが知りたい

①のタイトルと、②のクリックしたボタンはHTMLのdataを使って取得します。
③のリンク元URLはGTMの変数にあるPagePathで取得可能です。

設定完了後のGA4のレポート

設定完了し、レポートが生成された今回のゴールです。

このレポートを作るのがゴール
このレポートを作るのがゴール

こんな感じで取得したい項目をレポートに表示させることができました。

以下、このカスタムイベントとそのパラメータの設定方法を解説します。

GTMを利用して情報を取得する

正解を知っていれば別にややこしくないんですが、GA4でどういう挙動をするのかがさっぱりわからず、暗中模索で進めていたので私は苦労しました。

設定自体は簡単なので安心してください。

まずはGTMでタグを作ります。

タグの中で使用するイベントパラメータに、GTMで作った変数を使うので、正確な手順は変数の設定からになるのですが、いったんタグの設定画面を紹介します。

GTMのGA4イベント用タグ設定内容
GTMのGA4イベント用タグ設定内容

タグの種類はGA4イベントを選択します。
設定タグに使用するGA4のアナリティクスの設定をしてください。

GTMで設定する「イベント名」がそのままGA4に反映されるので、わかりやすい名前をつけて、覚えておいてください。

イベントパラメータですが、ここが一番のキモです。
ここの設定方法がよくわからず、2~3日悩みました。
(データ反映が遅いからあってるのかどうかの検証に時間がかかり。。)

トリガーはこのタグの発動条件なので、通常のユニバーサルアナリティクスと同様の設定で問題ありません。

簡単に補足すると、ボタンがクリックされたときにこのタグが発火します。
詳細は過去の記事に記載があります。

GTMの「ユーザー定義変数」の設定

ここで設定する変数は2つです。

①の商品名を取得する変数と、
②のクリックしたボタンの名称を取得する変数を設定します。

GTM メニューから「変数」をクリック

GTMのサイドメニューにある変数をクリックし、下段の「ユーザー定義変数」の「新規」ボタンを押します

GTM ユーザー定義変数の設定
GTM ユーザー定義変数の新規作成

変数名と取得したい内容を設定

変数の名前をつけて、変数のタイプは「データレイヤーの変数」を選択します。

データレイヤーの変数名はdata属性の内容を取得します。

GTM ユーザー定義変数の設定
GTM ユーザー定義変数の設定①

<a>タグに仕込んであったdata属性の「data-name」を取得する変数名を指定します。

「gtm.element.dataset.name」と記入。
gtm.element.datasetでdata属性が取得できるので、最後のnameは属性の名前を指定すると。

これで「data-name」を取得する変数が作成できました。

同様にクリックしたボタンの名称の変数を作成

こちらも「data-asp」の値を取得するための変数を作成します。

GTM ユーザー定義変数の設定②
GTM ユーザー定義変数の設定②

やることは同じで、gtm.element.dataset.asp」とdata属性の指定だけ変わります。

これで、「data-asp」と「data-name」の値を取得する変数が定義されました。

GTMタグ設定再び 作った変数を値に適用

変数の定義が終わったので、再びGTMのタグ設定に戻ります。

イベントパラメーターの項目を設定していきます。

GTM イベントパラメーターの設定
GTM イベントパラメーターの設定

パラメーター名はそのままGA4に反映されます。(2回目)
日本語を使っても問題ありません。

値に変数を適用する

値に先ほど作った変数を適用します。
値はレゴブロックをクリックすると、変数の一覧画面が表示されます。

イベントパラメーターに変数をあてる
イベントパラメーターに変数をあてる

変数の選択画面から、先ほど作った変数を選択します。

トリガーの設定もしたら、これでGTMの仕込みは完了です。

GTMプレビューでちゃんと取得できるか確認

タグの設定がきちんと期待通りの動きをするかをGTMの「プレビュー」機能を使って確認します。

GTM プレビューで確認
GTM プレビューで確認

プレビュー画面から追加したタグを探して、クリック!

イベント詳細を確認する

GTMプレビューでイベント詳細を確認
GTMプレビューでイベント詳細を確認

クリックした画面から「Messages Where This Tag Fired」の下にあるボタンをクリックします。

Display VariablesのNameで確認

クリックすると「Display Variables as」が表示され、「Names」と「Values」が選べるようになります。

GA4のイベントで取得したい内容
GTMのGA4イベント用タグ設定内容

「Names」の状態で、イベントパラメータの「name:」と「value:」がちゃんと設定されているかを確認します。

問題なければ次に「value」に変更して値を確認します。

Display VariablesのValuesで確認

「Values」にすると、実際に取得している内容を確認することができるので、取得した値で問題ないかを確認します。

GA4のイベントで取得したい内容
GTMのGA4イベント用タグ設定内容

問題なさそうなので、追加したタグを「公開」すれば、GTMの設定は完了です!

GA4のDebugViewで確認

GTMのプレビューを使うと、GA4のDebugViewにも反映されるので、GA4でも確認します。

GA4のデバックは左メニューの「設定」→「DebugView」にあります。

デバックモードで使わないと発動しないのですが、GTMのプレビューを使うとここが反応して確認できます。

GA4 DebugViewでイベント確認

表示されたデバックの画面から、先ほど確認した「AF_click」のイベントが計測されているので、そこをクリックします。

【2023年追記】デバックビューの場所が変わっていたので更新しました。

GA4のDebugView
GA4のDebugViewでイベント確認

イベントパラメーターの確認

「AF_Clickイベント」をクリックすると、そのイベントで取得されたパラメータの一覧が表示されます。

カスタムイベントのパラメータ確認
カスタムイベントのパラメータ確認

GTMで設定したパラメータも確認できました!

パラメータの値の確認

パラメータはドロップダウンリストになっているので、クリックするとパラメータの「値」を確認できます。

イベントパラメーターの値の確認
イベントパラメーターの値の確認

値もしっかり確認できました。

これでGA4でのイベント追加は、ほぼ完了です。

作ったパラメータをカスタムディメンションに登録する

ここまでの流れでデータの取得までは完了しています。
取得したデータを簡単に表示できるように、取得したデータを「カスタムディメンション」に登録します。

カスタムディメンションに登録

左のメニューから設定 → カスタム定義を選択します。

GA4のイベントで取得したい内容
カスタムディメンションの設定

カスタムディメンションの新規登録

カスタム定義から「カスタムディメンションを作成」をクリックし、新規に追加します。

カスタムディメンションの新規作成
カスタムディメンションの新規作成

カスタムディメンションの設定

ディメンション名をつけて、範囲は「イベント」を選択。
イベントパラメーターで、GTMで設定したイベントパラメーターを選択します。

GA4のイベントで取得したい内容
カスタムディメンションの設定

これで新たにディメンションが登録され、イベントの詳細画面に設定したカスタムディメンションが表示されるようになります。

カスタムディメンションにパラメータが出ない場合

GTM設定直後だと、このカスタムディメンションが表示されない場合があります。
ありますというか、直後だと出ないです。

設定反映まで数時間必要らしいので、翌日になれば表示されます。

このへんのタイムラグも使いづらさとわかりづらさの要因ですね。

カスタムディメンションをレポートで確認

カスタムディメンションが設定できれば、レポート → イベント → イベント詳細のサマリーに表示がされます。

カスタムディメンションを作った直後は例のごとく、すぐには表示されません。
翌日くらいになれば表示されると思います。

イベントのサマリーから確認する

左メニューの「レポート」 → 「イベント」をクリックします。

GA4 イベントのサマリー画面
GA4 イベントのサマリー画面

データが取得できていればイベント名の項目に作ったイベントが追加されます。

出てきたイベントをクリックします。

カスタムディメンションがサマリーに追加される

イベント詳細のレポートが表示され、そのページの下部に今回追加したカスタムディメンションが表示されます!

GA4 イベント詳細のサマリーで確認!
GA4 イベント詳細のサマリーで確認!

レポート表示画面から、カスタムディメンションのデータ表示に時間がかかるみたいなので、クリック直後に表示されなくても、焦らないでください。

GA4 イベント追加のまとめ

いろいろなGA4の参考サイトをググってみたのですが、私のやりたいことに直結していた記事が見つけられず、色々と試行錯誤してみました。

無事、取得したい情報をとり、レポートに反映させることができました。

一番やっかいだったのは、設定変更がすぐに反映されず、間違った設定をした場合、翌日になっても反映されないというこが多々ありました。

その失敗の中で、いろいろ学びが多かったので無駄にはなっていませんが、正しいかどうかがわからない試行錯誤はなかなかにつらいものです。

とっつきづらい分奥が深い(気がする)

GA4の全景や概念がまだまだ理解できていませんが、めんどくさい分見返りは大きいイメージを受けました。

多分、GA4作った人頭が良すぎて、普通の人にはなかなか理解しづらい作りになってます。

ユニバーサルアナリティクスはもともとが、Urchin(アーチン)というアクセス解析ツールの会社をグーグルが買収してできたツールです。

私はWEB制作会社時代にUrchinを使ったことがあります。(すんごい昔だ)

ユニバーサルアナリティクスは、わかりやすいアクセス解析ツールという下地があった分だけ使いやすかったんでしょうねぇ。

次は「探索」レポートになれたい

GA4のイベント設定とパラメータの仕組みはなんとなく理解できたので、次は「探索」について勉強していきたいと思います。

理解できたらまた記事にしたいと思っております!

GTMの設定方法はこちら

記事内で紹介している商品リスト
(価格はAmazon参考価格)

Googleアナリティクス4のやさしい教科書。 手を動かしながら学ぶアクセス解析の基本と実践ポイント

2,420円(税込)

Googleアナリティクス4のやさしい教科書。 手を動かしながら学ぶアクセス解析の基本と実践ポイント

GCPの教科書

3,960円(税込)

GCPの教科書

現場で使える Googleタグマネージャー実践入門 (Compass Booksシリーズ)

3,399円(税込)

現場で使える Googleタグマネージャー実践入門 (Compass Booksシリーズ)

プロが教えるいちばん詳しいGoogle アナリティクス 4

2,772円(税込)

プロが教えるいちばん詳しいGoogle アナリティクス 4

図解即戦力 Google Cloudのしくみと技術がこれ1冊でしっかりわかる教科書

2,592円(税込)

図解即戦力 Google Cloudのしくみと技術がこれ1冊でしっかりわかる教科書

1週間でGoogleアナリティクス4の基礎が学べる本 (1週間で基礎が学べるシリーズ)

2,420円(税込)

1週間でGoogleアナリティクス4の基礎が学べる本 (1週間で基礎が学べるシリーズ)

GA4カスタムイベントの関連ページ

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

PHPで作るカレンダー
1位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

jquery-match-height.js
2位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

SEL50F18F
3位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

ノートPCスタンド
4位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

車用スマホホルダー
5位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

Kazakiri 1枚刃のカミソリ
6位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

千鳥ヶ淵夜桜
7位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

レンズ比較
8位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

MusicBeeのレイアウト変更方法
9位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

α7Ⅲで夜景
10位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

Googleアナリティクス4のやさしい教科書。 手を動かしながら学ぶアクセス解析の基本と実践ポイント

2,420
(税込)