悩んでる人GTMでカスタムイベントを作る方法がわかりません。教えてください
hideharuこういった疑問に答えます。
今回は、GTMを使ってカスタムイベントを実装する方法を紹介します。
クリック数やページビュー数を計測する方法など、事例をまじえて紹介しました。
カスタムイベントを作ってサイト分析の幅を広げたい方はぜひご覧ください。
カスタムイベントの実装方法
GTMを使ってカスタムイベントを実装する方法は、以下の5ステップです。
- 手順1：取得したいデータの取得方法を決める
- 手順2：GTMで取得のための設定を行う（変数・トリガー・タグの設定）
- 手順3：計測が正しくできているか確認する(プレビュー・デバッグビュー)
- 手順4：GTMを公開する
- 手順5：カスタムディメンションに登録する (手順2でイベントパラメータを設定したときのみ)
それぞれの手順を、以下を例にして見ていきましょう。
内部リンクがクリックされた回数を計測する
手順１：取得したいデータの取得方法を決める
取得したいデータの取得方法を決定します。
まずは、GTMを使わずとも自動収集イベントや拡張計測イベントで欲しいデータは取得できていないか？を見直しましょう。
そのうえで、やはりGTMの利用が必要となった場合に、データの取得方法を考えます。
たとえば、HTMLのこのクラスを使ってトリガを設定しようとか。
必要に応じてページやサイト内への記述の追加を行います。
手順２：GTMで取得のための設定を行う（変数・トリガー・タグの設定）
次に、GTMで取得のための設定を行います。
GTMで設定する項目は以下の3つ。
- 変数
- トリガー：イベントの発生条件
- タグ：実行されるコードの内容を設定したもの
手順2-1 : 変数の設定
まずは、Googleタグマネージャーで使う変数があるかを確認します。
GTMの左メニューで[変数]をクリックし、右上の[設定]をクリックします。
以下の３つにチェックをつけます。
- Page URL
- Click URL
- Click Text
Page URLはこれ
Click URLとClick Textはこれ
これで変数の設定は完了です。
手順2-2 : トリガーの設定
次はトリガーの作成です。
左メニューから[トリガー]をクリックし、右上の[新規]をクリックします。
左上の[無題のトリガー]をクリックして、わかりやすい名前に変更します。
今回は「内部リンクのクリック」としました。そして、[トリガーの設定]をクリックします。
表示されたトリガータイプの中から、[クリック] > [リンクのみ]を選びます。
下図をご覧ください。
①計測を正しく行うために、[タグの配信を待つ]にチェックをつけます。
②上限の数値はこのままでOK。
③[PageURL]、[正規表現に一致]を選び、半角で[.]を入力します。[.*]は何かしらの文字があることを意味しており、この設定によって、あなたのサイトの全ページでこのトリガーが発動することになります。
④[一部のリンククリック]を選びます。
⑤[Click URL]、[含む]を選び、あなたのサイトのドメインを入力します。当サイトならhideharublog.com。内部リンクは必ずあなたのサイトドメインが含まれているので、この設定をすれば全ての内部リンクのクリック数を計測できるわけです。
⑥最後に、右上の[保存]をクリックします。
すると、今回追加したトリガーが表示されます。
以上で、トリガーの作成は完了です。
手順2-3 : タグの設定
続いて、このトリガーを発動するタグを設定します。
左メニューから[タグ]をクリックし、右上の[新規]をクリックします。
左上の[名前のないタグ]をわかりやすい名前に変更します。今回は「内部リンクのクリック」としました。次に[タグの設定]をクリックします。
[Googleアナリティクス]を選び、
[Googleアナリティクス：GA4イベント]を選びます。
各種の設定をしていきます。下図をご覧ください。
①：測定IDを入力します。
②：イベント名：GA4の画面上で表示したいイベント名を決める。任意の文字列。
>> イベントの命名規則（Googleヘルプ）
③：イベントパラメータ：イベントに紐付けたいパラメータを設定する。パラメータ名は任意。値は固定で入れるか、値の右横にある「＋」ボタンを押して変数から選択する。今回は、リンクした文字列(アンカーテキスト)を保存することにします。左のイベントパラメータには任意の文字列を入力します（注意：半角スペースが入っていると、GA4カスタムディメンションに登録できない）。右の値には、カメラのアイコンをクリックしてClick Text を選びます。
>> パラメータの命名規則（Googleヘルプ）
イベントパラメータには、わかりやすい名前をつけましょう。
パラメータは複数追加出来ますので、必要に応じて行を追加してください。
ここで設定したイベントパラメータは、手順5（カスタムディメンション登録）を行うことで、以下のいずれでも使用できるようになります。
- GA4レポート
- データ探索レポート
- Looker Studio
以下のパラメータ名は全イベントで自動取得されるため追加で設定は必要ありません。
・language（言語）
・page_location（ページのURL）
・page_referrer（１つ前のページのURL)
・page_title（ページタイトル）
・screen_resolution（画面解像度）
続いて、下にある[トリガー]をクリックし、
手順２で作成したトリガーを選びます。
最終的には以下のようになります。
これで設定が完了なので、右上の[保存]をクリックします。
すると管理画面に、以下のようなタグが作られます。
以上で、タグの作成は完了です。
手順３：計測が正しくできているかを確認する(プレビュー・デバッグビュー)
続いては、動作チェックをします。
手順3-1 : GTMのプレビューモードでタグが動作しているかを確認する
管理画面の右上にある[プレビュー]をクリックします。
すると、以下のような新しいウィンドウが起動します。
①：プレビューするURLを入力します。今回の例では、当サイトのトップページのURLを入力しました。
②：「Include debug signal in the URL」にチェックを入れます。
③：最後に「Connect」をクリックします。
すると、先ほど入力したURLのページが自動で立ち上がります。
今回の例では、当サイトのトップページに遷移します。画面の右下には、Tag Assistantが表示されます。
Tag Assistantのページに戻ると、以下のような画面になっているので、[Continue]をクリックします。
この時点では、今回設定したトリガー（内部リンクのクリック）はまだ発動していないので、[Tags Fired]のところに表示されていません。
ここで、今回設定したトリガー（内部リンクのクリック）を自分でやってみます。
例として、トップページ内の記事をクリックします。
Tag Assistantのページに戻ると、今回設定したタグ（内部リンクのクリック）が、[Tags Fired]に移ってます。
この[Tags Fired]のところに表示されれば、今回の設定が正しく動作した証拠です。
手順3-2：GA4のデバッグビューで確認を行う
GTM側でのタグ動作は確認出来ました。
次にGA4にデータが送られているかを確認しましょう。デバッグビューを使うと、今アクセスしたデータが計測されているかを確認できます。
GA4の左メニューから [管理] > 「プロパティ設定」＞「データの表示」＞「DebugView」をクリックします。
今回は、「内部リンククリック」が発生しているかを確認しましょう。
上記をみると、17時13分に「内部リンククリック」が存在するのが発見できます（画像中央部）。こちらをクリックすると取得しているパラメータも確認できます。
デバッグビューモードの詳細は以下をご覧ください。
ここまで確認できたら、GTMを「公開」して本番リリースしましょう。
手順４：GTMを公開する
作成したタグを公開しましょう。右上の「公開」をクリックします。
「バージョン名」と「バージョンの説明」にわかりやすい名前と説明を入力し、右上の「公開」ボタンをクリックします。
以下のような表示がされます。
左上の[ワークスペース]をクリックしてみましょう。
右上の「ワークスペースの変更 : 0」になっていれば、作成したタグは公開されているという証拠。バージョンも上がってますね。
以上で、作成したタグの公開は完了です。
手順５：カスタムディメンションを登録する
イベント取得に新しく設定した「イベントパラメータ」はカスタムディメンションとして登録しないと、レポートや探索で利用することができません。
今回の例は「Click_Text」という新しいイベントパラメータを作成したので、これを登録しておきましょう。
GA4の左メニューから、「管理」＞「プロパティ設定」＞「データの表示」＞「カスタム定義」をクリックします。
「カスタムディメンション」のページにアクセスし、「カスタムディメンションの作成」をクリックします。
以下のように登録を行います。
・ディメンション名：画面上で表示される名称。イベントパラメータ名と同じだとわかりやすいです。※大文字小文字は区別されます。すでに登録済みのディメンション名を入力するとエラーが表示されます。
・範囲：取得するイベントパラメータのスコープを選びます。「イベント」と「ユーザー」単位が選べます。該当イベントが同一ユーザーで変わるケースの場合は「イベント」、会員IDなどの属性情報の場合は「ユーザー」を選択しましょう。
・イベント パラメータ：作成したイベントパラメータを登録します。※大文字小文字は区別されます。すでに登録済みのイベントパラメータを入力するとエラーが表示されます。
これでレポートや探索内で「Click_Text」のパラメータが選べるようになります。
補足：GA4のイベント画面で計測確認を行う
作成したイベントを本番公開してクリックが行われるとGA4にデータがたまっていきます。
計測されたイベントは、「管理」＞「データの表示」＞「イベント」で確認できます。
画面に表示されるのに最速でも数時間、場合によっては数日かかります。データが計測されるように本番リリースしたら、自分で一度はイベントを発生させておきましょう。
画面上でイベントが出てきたら無事に計測完了です。
カスタムイベントの実装事例｜特定のURL(内部リンク)がクリックされた回数をGTMで計測する
続いては、以下の内容をGTMで計測する方法を紹介します。
特定のURL(内部リンク)がクリックされた回数を計測する
前述の例と同じ内容は省略し、ポイントとなるところだけ記載します。
変数の設定
以下の３つの変数にチェックをついていることを確認します。
- Page URL
- Click URL
- Click Text
トリガーの設定
以下の図をご覧ください。
①計測を正しく行うために、[タグの配信を待つ]にチェックをつけます。
②上限の数値はこのままでOK。
③[PageURL]、[正規表現に一致]を選び、半角で[.]を入力します。 [.*] は何かしらの文字があることを意味しており、この設定によって、あなたのサイトの全ページでこのトリガーが発動することになります。
④[一部のリンククリック]を選びます。
⑤[Click URL]、[等しい]を選び、クリック回数を計測したいリンクのURLを貼り付けます。今回の例では、当サイトのGA4の導入記事のURLを記入しました。
⑥最後に、右上の[保存]をクリックします。
タグの設定
以下の図をご覧ください。
カスタムディメンションの登録
GA4の画面で、カスタムディメンションを登録します。
カスタムイベントの実装事例｜特定のページに到達した回数をGTMで計測する方法
続いては、以下の例についてGTMの計測方法を紹介します。
特定のページが見られた回数を回数を計測する
サンキューページ（申込フォームで登録や商品購入したあとに表示するページ）が見られた回数だけを計測したい、なんてときに使います。
変数の設定
以下の３つの変数にチェックをついていることを確認します。
- Page URL
- Click URL
- Click Text
トリガーの設定
トリガータイプの中から、「ページビュー」 > 「ページビュー」を選びます。
下図をご覧ください。
①[一部のページビュー]を選びます。
②[Page URL]、[等しい]を選び、特定のページのURL（サンキューページなど）を入力します。注意すべきは、これまでの「Click URL」ではなく、「Page URL」を選ぶところ。この設定によって、特定のページに到達した回数だけを計測できるようになります。
③最後に、右上の[保存]をクリックします。
タグの設定
以下となります。
カスタムイベントの実装事例｜特定のリンククリック
「特定のクリックを計測する」を例に解説します。
手順1：取得したいデータの取得方法を決める
本サイトのサイドバーにある、お問い合わせとプロフィールのクリック回数を計測したいとします。
本サイトの各ページには、上記のメニューが入っており、どこで何回クリックされているかを確認します。
このメニューは、サイドバー以外にフッターにもリンクがあり、どちらを押したかを区別できません。
そこで、サイドバーにあるリンク計測だけ行うこととします。まず決めないといけないのは、このリンクだと特定する要素があるか？ということ。ページのソースを見てみます。
ソースを見ると、「pull-right」というクラス名があることがわかります。このクラス名はこの枠のリンクでしか使っていません。今回はこれを使って特定をします。
必要に応じてページやサイト内への記述の追加を行う
今回はユニークな要素があったので、サイト内への記述の追加は必要ありませんでした。
ユニークな要素が無い場合は、class名などの実装が必要です。GAで利用する事を特定するため、ga4-button-clickのようなclass名をつけてもよいでしょう。
取得するデータにより追加する記述は変わります。
手順2：GTMで取得のための設定を行う（変数・トリガー・タグの設定）
GA4でデータを取得するための設定をGTMで行います。
取得したい内容により設定の仕方はそれぞれ。また、「変数」の設定は必要ないこともあります。
では、GA4画面の右上のマークをクリックして、GTMの画面に遷移しましょう。
手順2-1 : 変数の設定
今回の例の場合、「変数」はGTMの組み込み変数として用意されています。
「変数」のページから「組み込み変数の設定」を選び、Click Classesにチェックをいれます。
手順2-2 : トリガーの設定
次に計測タグを動かすための条件（トリガー）設定を行います。
今回はClick Classesがpull-rightに一致するという条件です。トリガーの画面から「新規」を押し、以下の条件を設定します。
トリガーのタイプ：クリック – リンクのみ
トリガーの発生場所：一部のリンククリク
トリガー配信条件：Click Classes 等しい pull-right
手順2-3 : タグの設定
最後にタグの設定を行います。
GA4のイベントはイベント専用のタグがあるので、それを選びます。タグの画面から「新規」を押し、[Googleアナリティクス：GA4イベント]を選びます。
取得するデータの設定を行っていきます。
- ①設定タグ：
-
変数で測定IDを登録している場合は、登録した変数名を選ぶ（上図はこれがに該当）。変数として登録していない場合は「なし – 手動設定したID」を選び、測定IDを入力する。測定IDは、GA4のプロパティ > データストリーム > データストリームの詳細で確認できます。
- ②イベント名：
-
GA4の画面上で表示するイベント名（任意）を入力する。
- ③イベントパラメータ：
-
イベントにひもづけたいパラメータを設定する。パラメータ名は任意。値は固定で入れるか、値の右横にある「＋」ボタンを押して変数から選ぶ。今回はリンクが２つあり、それぞれの文字列が違う。どちらが何回押されたかを区別するために「Click Text」を設定した。パラメータは複数追加できるので、必要に応じて行を追加する。
注：以下のパラメータ名は、全イベントで自動取得されるため追加で設定は必要なし。
・language（言語）
・page_title（ページタイトル）
・page_location（ページのURL）
・page_referrer（１つ前のページのURL)
今回の例だと、どのページで「お問合せフォームのリンク」を押されたかは、「page_location」や「page_title」を見ればわかるので、新たに設定する必要はありません。
次にこのタグを発動させるトリガーの設定も行います。先ほど作成したトリガーを選択しましょう。最終的に以下の形になります。
手順３：計測が正しくできているかを確認する(プレビュー・デバッグビュー)
次に、作成したイベントが正しく動作するかをチェックします。
手順3-1 : GTMのプレビューモードでタグが動作しているかを確認する
GTMのプレビューモードを動作させます。
右上から[プレビュー]を選び、テストしたいURLを入力して、接続を行います。以下の画面が表示され、対象ページが開きます。
当サイトのサイドバーのリンクをクリックします。
今回はLink Clickの計測なので、プレビュー画面のLink Click部分を選択します。Tag Fired（動作したタグ）の中に、先ほどの「GA4_GTM_特定リンクのクリック（サイドバー）」のタグが表示されていますね。
該当の枠をクリックし、右上のラジオボタンで[Values]を選びます。イベント名、イベントパラメータともに正しく設定されていることを確認します。
これでGTM側での検証は完了。
手順3-2：GA4のデバッグビューで確認を行う
GA4の画面で、デバッグビューを使って確認します。
手順4：GTMを公開する
GTMを公開します。
手順5：カスタムディメンションの登録
イベント取得に新しく設定した「イベントパラメータ」はカスタムディメンションとして登録すれば、レポートや探索で利用することができます。
今回の例は「Click_Text_contact_sidebar」という新しいイベントパラメータを作成したので、これを登録しておきます。
GA4の左メニューから[設定] > [カスタムディメンション]にアクセスし、[カスタムディメンションを作成]をクリックします。
以下のように登録を行います。
- ディメンション名：
-
画面上で表示される名称。イベントパラメータ名と同じだとわかりやすいでしょう。
- 範囲：
-
取得するイベントパラメータのスコープを選ぶ。「イベント」と「ユーザー単位」を選ぶことが可能。該当イベントが同一ユーザーで変わるケースの場合は「イベント」、会員IDなどの属性情報の場合は「ユーザー」を選ぶ。
- イベント パラメータ：
-
作成したイベントパラメータを登録します。
これでレポートや探索内で「Click_Text_contact_sidebar」のパラメータを選べるようになります。
GA4のイベント画面で計測確認する
GTMで作成したタグを公開したら、自分で一度はイベントを発生させておきます。
計測されたイベントは、GA4の[設定] > [イベント]で確認できます（注：画面に表示されるまでには、数時間〜１日ほどかかる）。
画面上でイベントが出てきたら無事に計測完了です。
今回の例だと、イベントを作成した翌日に、以下のように表示されました。
a
カスタムイベントの実装事例｜任意のスクロール率計測
拡張機能のイベントで「スクロール」をオンにすると、スクロールイベントは収集できますが、その場合は、
1)90%のみ計測
2)対象ページを絞れない（全ページが対象になる）
というデメリットがあるので、本イベントが活躍します。
本例では、手順1は省略（不要）。
手順2：GTM設定
- 変数の設定
-
組み込み変数を追加します。
Scroll Depth Thresholdにチェックを入れます。
- トリガーの設定
-
・トリガーのタイプ：スクロール距離
・縦方向スクロール距離にチェックを追加
・割合：取得したいタイミングを設定（本例では、0,10,25,50,75,90%）
・このトリガーの発生場所：全ページ取得する場合は「すべてのページ」を選択。一部のページだけで良い場合は、以下のようにURL条件等を指定します。前述のとおり、拡張機能のイベントでスクロールをオンにすると、ページを絞れないので、サイトによってはイベント数（ヒット数）が増えすぎるデメリットがあります。そのときは、ここで、一部のページだけに絞るといいですね。
- タグの設定
-
・設定タグ：測定IDを直接指定するか、測定IDを変数として設定している場合は該当変数名を選ぶ
・イベント名：任意のイベント名を設定する。
・イベントパラメータの名称：任意の名称をつける。既に利用しているイベントパラメータ名は使わないようにする。ここではscroll_percentageという名称にした。
・イベントパラメータの値： {{Scroll Depth Threshold}} を選ぶ。最後に「％」をつけるとレポート表示時に％がついた状態で見ることができる（例：20%）
・トリガー：先ほど作成したトリガーを選択する
手順3：動作の確認
プレビューモードで計測の確認をします。
Tag Fired（動作したタグ）の中に、先ほどの「GA4_GTM_スクロール割合」のタグが表示されていますね。
該当の枠をクリックすると、イベント名、イベントパラメータともに正しく設定されていますね。
手順4：GTMを公開する
ここまで確認できたら、GTMを公開します。
手順5：カスタムディメンションの登録
GA4の[設定] > [カスタムディメンション] > [カスタムディメンションを作成]をクリック。ディメンション名とイベントパラメータ名（今回の場合はscroll_percentage）を登録します。
アウトプットレポート例
探索メニューを使ってレポートを作成してみます。
GA4の探索メニュー（詳しい使い方はこちら）をクリックし、[空白]もしくはテンプレートを選択します。
変数カラム内のディメンションで[+]をクリック。カスタムディメンションとして、先ほど登録した「scroll_percentage」をインポートします。
値に、イベント数と利用ユーザーを設定すると、以下のレポートになります。
カスタムイベントの実装事例｜任意のリンク以外の要素のクリック計測
リンク以外の要素のクリックを計測する時に利用します。
代表的な内容としては「ハンバーガーメニューのクリック」「アコーディオンの開閉」など。
手順1：取得したいデータの取得方法を決める
今回は、当サイトの最下部エリアの設置したCookie同意バナー内のボタンが押された回数を計測します。
Cookie同意バナー内のボタンとはこれ↓
Cookie同意バナーのソースを見てみると、Cookie同意バナー内のボタンは、「cn-set-cookie cn-button」というクラスを使っているので、これを使って特定することにします。
手順2：GTMで変数・トリガー・タグを設定
- 変数の設定
-
GTMの組み込み変数の設定で、
・Click Classes
・Click Text
・Page URL
にチェックを入れます。
- トリガーの設定
-
トリガーのタイプ：クリック- すべての要素
トリガーの発生場所：一部のクリック発生条件：
Click Classes … cn-set-cookie cn-button
Page URL … 当サイトのドメインを指定し、全ページで取得するようにしてます。一部ページでのみ取得したい場合は条件を設定します。 - タグの設定
-
設定タグ：測定IDを直接指定する
イベント名：任意のイベント名を設定します。今回は「個人許諾OK」としました。
イベントパラメータの名称：任意に名称をつけます。「個人許諾OK_click_text」というパラメータ名を設定しました。
イベントパラメータの値：クリックした時のテキストを取得することで、[Ok][No]のどちらのボタンを押したのかを把握できます。{{Click Text}}で設定することが可能です。
- トリガー：
-
先程作成したトリガー「個人許諾OK」を選択します。
手順3：動作の確認
GTMのプレビューモードで計測の確認をします。
手順4：公開する
OKなら、公開します。
手順5：カスタムディメンションの登録
GA4の[設定] > [カスタムディメンション] > [カスタムディメンションを作成]をクリック。ディメンション名とイベントパラメータ名（今回の場合は個人許諾OK_click_text）を登録します。
アウトプットレポート例
探索レポートでイベント名と、個人許諾OK_click_textのパタメータを取得します。
カスタムイベントの実装事例｜要素の表示の計測
ブラウザ上に特定の画像や箇所が表示された場合に、イベントとして計測する方式です。広告画像の表示回数や、記事の読了計測などに便利です。
手順1：取得したいデータの取得方法を決める
今回は、当サイトのフッター（最下部エリア）が表示された回数を計測したいとします。
フッターのソースを見てみると、ここでしか使っていないクラスはありませんでしたが、かわりに専用のIDとして、「footer」がありました。今回はこれを使って特定をします。
手順2：GTMで変数・トリガー・タグを設定
- 変数の設定
-
GTMの組み込み変数の設定で「Percent Visible」と「On-Screen Duration」にチェックを入れます。
- トリガーの設定
-
トリガーのタイプ：要素の表示
選択方法：HTML内のIDを条件にする場合は「ID」、class名などを条件にする場合は「CSS セレクタ」を選択。
このトリガーを起動するタイミング：今回は「１ページにつき１度」を選択。該当要素がページで最初に読み込まれたときのみ計測を行う。読了などの計測であればこれがよい。
視認の最小割合：該当要素のエリア（画像であれば画像の高さ）の何%が表示されたら計測するかを指定します。少しでも表示されればOKであれば1を。画像が完全に表示された時に計測したい場合は100を設定する。
このトリガーの発生場所：footerが含まれるすべてのページで計測する場合は、「すべての表示イベント」にしておき、特定のURL等で絞り込みたい場合は「一部の表示イベント」に変更して条件を指定する。
- タグの設定
-
- トリガー
-
先ほど作成したトリガーを選択する
手順3：動作の確認
GTMのプレビューモードで計測の確認をします。
手順4：公開する
OKなら、公開します。
手順5：カスタムディメンションの登録
本例では特になし
アウトプット例
GA4のリアルタイムレポートで計測を確認した。
まとめ：Googleタグマネージャーを使ってサイト分析力をレベルアップしよう
Googleタグマネージャー（GTM）を使って、クリック数やページビュー数を計測する方法をいくつか紹介しました。
GTMの使い方の記事でも紹介したように、GTMを使うと、高度なアクセス解析を、簡単に行うことができます。
今回した事例を参考にすれば、GTMをかなり使いこなせるはずです。
サイトのコンバージョン数を上げるために、ぜひGTMを活用してみてください。