GA4入門編:GTMで独自イベントを作る

GA4アクセス解析
この記事は約6分で読めます。

Googleアナリティクス4プロパティ(GA4)を使っていますか?使い始めは特に戸惑うことが多いかと思いますが、徐々に慣れていきましょう😉今回の記事はGTMを使用してデフォルトでは存在しないGA4の独自イベントを作るお話です。

GA4で様々なことで面食らうと思いますが😅はじめはUIが全然違う!ほしいページはどこにあるんだ?!という事から始まり、くまなく見てると次に出てくる問題は、UA(ユニバーサルアナリティクス)で取得できてた値やイベントが取得できない!問題だと思います。

そんな感じで、ぞくぞくと課題が発生するところだと思います。

ここでは、UAと同じイベントをGA4で計測する方法では芸がないので、その課題解決の糸口にもつながるように、GTMで独自イベントの作り方をまとめます。

GA4カスタムイベントとGTM独自イベントの違い

GA4標準のカスタムイベントの特徴

GA4についているカスタムイベントは、既存のGA4のイベントやプロパティを組み合わせて独自のイベントを作成する機能です。

例えば、「プロフィールページ」が閲覧されたら「プロフィールイベント」が発火するようなカスタムなイベントを作ることができます。

カスタムイベントは、コンバージョンの設定を行う際などに重宝します。

GTMを活用した独自イベントの特徴

GTMで独自イベントを作成する場合は、javascriptの様々なイベント関数でイベントのトリガーを作ることができます。したがって、GA4のカスタムイベント以上に詳細にイベントの発火を定義できます。

例えば、特定のclass要素がクリックされたイベントを補足することによって、「カートに入れるボタンがクリック」された場合に発生する独自イベントを発生させるといったことを定義することができます。

また、ECサイトであれば、よくクリックされる商品のサムネイル画像をイベントでトレースするといったことができます。

twitterへのリンク・クリックeventをGTMで計測しGA4に渡してみます

では、さっそくGTMでページ内の特定のボタンがクリックされたら独自イベントが発生するように設定してみましょう。ここではページのあちこちにあるtwitterへの導線ボタンをクリックしたら、イベントが発火するようにしてみます。

この赤丸がクリックされたらGA4で独自イベントが発火するようにしてみましょう🙄(こんな小さいボタンクリックする人おるんかいな…)

GTMの変数の設定

Googleタグマネージャーにログインし、左メニューから「変数」を選択、右上の「設定」ボタンを押します。

今回は「クリックイベント」を計測できるようにしたいため、「クリック」の欄の下記項目にチェックを入れます。

・Click Element…Element属性を取得。
・Click Classes…class属性を取得。
・Click ID…id属性を取得。
・Click Target…target属性を取得。
・Click URL…URL要素を取得。
・Click Text…text要素を取得。

チェックを入れたら設定画面を閉じ、変数一覧に今チェックを入れた項目が追加されていることを確認します。

これで変数の設定は完了です。

次にクリックを計測したいリンクを調べる

たとえば、このページのtwitterへ誘導するボタンのクリック状況を計測するとしましょう。

chromeで対象ページにアクセスし、「ctrl」+[shift]+「i」を同時に押してください(あるいは右クリック→「検証」をクリックか、「F12キー」を押します。)
すると、ブラウザの右側に検証画面とソースコードが表示されます)

続いて、ボタンの要素を確認していきます。
検証画面のカーソルアイコンを選択してから、要素を調べたいボタンやバナーをクリックします。

同じボタンが同一ページに複数あっても計測対象としたいので、Class属性で計測する要素を指定したいと思います。このボタンの場合は、span要素のclass属性の属性値”icon-twitter-logo”に該当します。

つまり、class=”icon-twitter-logo”と属性がついている要素がクリックされると、イベントが発火するようにします。

GTMでトリガーを作る

先ほど確認した、計測したいボタンに設定されているclass要素名を指定してトリガー設定を行います。
Googleタグマネージャーの左メニューから「トリガー」を選択し、「新規」ボタンを選択します。

クリックのすべての要素を選びます

下記のように設定を進めていきます。
・トリガー名:管理しやすい任意の名前を設定。
・トリガーのタイプ:クリック – すべての要素。
・このトリガーの発生場所:一部のクリック。

また、今回は「特定のclass要素を持つ問い合わせボタンがクリックされたとき」を計測したいので、トリガー条件に下記の条件を設定します。
・Click Classes:span要素にclass属性、「icon-twitter-logo」を指定します。

設定がすんだら保存します。

今回は「指定したclass要素がクリックされた時」をトリガー設定にしていますが、
ボタンにid設定がしてあるときは「Click ID」でid名の指定、
URLのクリックを判定したいときは「Click URL」で設定URLを指定するなど、様々な方法でトリガーを設定できます。

GTMでタグの設定

GA4でトレースする場合は、タグタイプ「Googleアナリティクス:G4イベント」を使用します。「Googleアナリティクス:G4イベント」をクリックしてください。

参考サイト:Google アナリティクス 4 イベントタグ

続いて、次は以下のように設定します。

設定タグ:「GoogleアナリティクスGA4設定」を選択。

イベント名:click_twitter(←GA4で発火する任意のイベント名)

※GA4では、ある特定のイベントについてはイベント名の推奨があります。例えばログインをイベントで捕捉する場合は、イベント名はloginを推奨しています。

参考サイト:[GA4] 推奨イベント

※イベント名の名前の長さなどいろいろ「[GA4] 収集と設定の上限」にまとまっています。ぜひ参考にしてください。

トリガーに先ほど作成したclick_twitter-buttonを選んで保存。

最後は動作検証

公開する前にGTM、GA4の順で動作検証を行います。

GTMで検証(プレビュー)

GTMのプレビューボタンをクリックして検証してみましょう。

プレビューをクリックしたらTag Assistantが開きますので、GTMを貼っているページのURLを入力して「Connect」をクリックします。

GA4で検証(デバッグビュー)

デバッグビューの設定方法はこちらにまとめています

コメント

タイトルとURLをコピーしました