Googleタグマネージャー（GTM）とGA4の連携が出来て一安心しつつ、これって一体…と思ったことはありませんか？
Google タグと Google アナリティクス: GA4 イベントタグを一緒に使用すると、Google アナリティクス 4 で測定を有効にできます。
おそらくこの記事に到達された方は、「Google タグ」を設定しましたよね！つまり、GTMをサイトに設置して、GA4との連携が出来たところ。次は「Google アナリティクス: GA4 イベントタグ」を設定していきましょう！
まずは予習と銘打って、すごく丁寧な解説を入れているので、状況に応じて、すっ飛ばして頂ければと思います。
Google アナリティクス GA4 イベントタグを設定すると出来ること
この設定を行うことで、ユーザーがどのボタンをクリックしたのか、どのページでどんな行動を取ったのかといった具体的なデータを取得できるようになります。つまり、「アクセス数」などの基本データだけでなく、資料請求・お問い合わせ・ボタンクリックなどの“成果につながる行動”を正確に計測できるようになります。これにより、サイト改善や広告効果の分析がぐっと精密になり、データに基づいた戦略立案が可能になります。
次のセクションから、例として、独自に作成したdata属性で値を取得していくやり方を説明します。イメージとしては、aタグに data-gtm-click=”XXX” という属性を持たせて、クリックされたリンクの場所や回数を分析していけるようしたい、となります！
今回のサンプル概要
必要なスキル、状況としては、HTMLやWordPressのオリジナルテーマに理解があることが前提となります。サイト制作という観点では知識が必要ですが、GTMやGA4に関しては初心者にも分かるように丁寧な解説でいきたいと思います。
- GTMとGA4の連携は済んでいる
- aタグに、data-gtm-click=”XXXX” という属性を持たせる
- 上記属性がある場合、クリックされたリンクの場所や回数を分析できるようにする
予習：タグ、トリガー、変数について理解を深めよう
Googleタグマネージャ管理画面の左サイドメニューのうち、「タグ」「トリガー」「変数」を理解しておくとWEB検索して出てくるいろんな設定手順をすんなりと実践できるようになると思います！それぞれの画面で「新規」をクリックすると、名前、設定、関連項目が編集できるようになります。
「タグ」は、実行したいコードの塊そのもの
特定のツール（GA4、Google広告、Facebookピクセルなど）にデータを送信したり、機能（ヒートマップ、チャットウィジェットなど）を実装するためにウェブサイト上で実行されるJavaScriptコードです。
タグのタイプを指定し、タグが動作するために必要な具体的な情報を設定します。
「トリガー」は、タグを実行するための発火条件
タグを「いつ」「どこで」実行するかを定義します。トリガーの条件が満たされた瞬間に、関連付けられたタグが発火します。イメージは「/contact/ページが読み込まれたとき」や「お問い合わせボタンがクリックされたとき」などが挙げられます。
「変数」は、実行時に動的に取得したい値を格納する入れ物
タグやトリガーで利用するために、ウェブサイトやデータレイヤーから情報を取得したり、計算したりします。これにより、タグのコードを書き換えることなく、動的に値を変更できます。
変数の種類としては、「組み込み変数」と呼ばれるGTMが標準で提供する変数と、ユーザーが独自に作成する変数「ユーザー定義変数」があります。イメージとしては、「クリックされた要素のdata属性の値」や「現在のページのURL」という値を入れる入れ物です。
手順0. 各種前提
目的は、ヘッダーにあるグローバルメニューにおいて、どのリンクがクリックされやすいのかを計測したい、です。
HTMLは次のものを想定しています。ポイントは、自分で考えたdata属性「data-gtm-click」を記述しています。
<li><a href="/contact/" data-gtm-click="header_contact">お問い合わせ</a></li>
<li><a href="/about/" data-gtm-click="header_about">当サイトについて</a></li>手順1. 変数を定義する
まず、クリックされた要素のdata-gtm-click属性の値を取得するためのユーザー定義変数を作成します。
- GTMの管理画面で「変数」セクションへ移動します。
- 「ユーザー定義変数」の下にある「新規」ボタンをクリックします。
- 名前は任意で決めます、ここでは「Data GTM Click Value」とします。
※この名前はタグやトリガーの設定時に変数として{{Data GTM Click Value}}のように使用します。 - 変数のタイプを「自動イベント変数」を選択します。
- 変数タイプは「要素の属性」を選択し、属性名に「data-gtm-click」を指定します。
手順2. トリガーを設定する
続いて、data-gtm-click属性を持つ要素がクリックされたときにのみ発火するトリガーを作成します。
- GTMの管理画面で「トリガー」セクションへ移動します。
- 「新規」ボタンをクリックします。
- 名前は任意で決めます、ここでは「Click Data (data-gtm-click)」とします。
- トリガーのタイプ: 「クリック – すべての要素」を選択します。
（aタグなので「リンクのみ」が適切ですが、確実性を高めるため「すべての要素」とします。） - このトリガーの発生場所: 「一部のクリック」を選択します。
- 条件を設定:「Click Element」「CSS セレクターに一致」を指定し「
[data-gtm-click]」を入力します。この時、[ ]カッコも含めて入力してください！
HTMLの属性を指定するCSSセレクターは、必ず角括弧 [] で属性名を囲む必要があります。
角括弧をつけない場合は、data-gtm-clickというタグ名を指すCSSセレクターとして認識されてしまうので注意が必要です。<data-gtm-click>...</data-gtm-click> HTMLにそんな要素はないためうまくいきません。
手順3. タグを作成する
最後に、Google Analytics 4 (GA4) などの計測ツールにデータを送信するタグを作成します。
- GTMの管理画面で「タグ」セクションへ移動します。
- 「新規」ボタンをクリックします。
- 名前は任意で決めます、ここでは「GA4_Click_Value」とします。
- タグのタイプ: 使用している計測ツール Google アナリティクス: GA4 イベント を選択します。
- 測定IDはアナリティクスの管理画面で確認できる測定 IDです。
- イベント名は任意の名前を決めて指定します、ここでは「custom_data_gtm_click_value」とします。
※アナリティクスの管理画面で見たときに分かりやすい名前にしておきましょう。
※重複を避けるためにも接頭辞にcustom_を入れるのもおすすめです。 - 作成した変数をイベントパラメータとして設定し、GA4に属性の値を渡します。
イベントパラメーターを「data_gtm_click_value」とし、値を1で作成した変数「{{Data GTM Click Value}}」を入力します。 - 手順2で作成したトリガーを関連付けます。
これで、data-gtm-click 属性を持つ要素がクリックされると、その属性値（data-gtm-click=”ここの部分”）がGA4のdata_gtm_click_valueパラメータの値として送信され、カウント（計測）されるようになります。
まとめ：今回のタグ、トリガー、変数の関係性について
今回は、data属性をフックに、GA4イベントを作成しました。タグ、トリガー、変数の関係性は下記のようなイメージです。どうでしょう。しっくりきますか？丁寧すぎる(？)説明で、やたら長くなって、読みにくい投稿でもありますが、、誰かの納得！につながると良いなと思い、また自分の備忘録としても残しておきたいと思います。
data属性を変数に指定し、その変数名をタグに仕込む。
data属性をもつ要素がクリックされたというトリガーを作り、タグに仕込む。
この図は分かりやすいのか、分かりにくいのか。笑
これらの設定が終わったら、いよいよGA4側で計測値を分析していきます。そのレポートを作成するために、送信したパラメータをカスタムディメンションとして登録する作業が必要になりますが、また別の投稿でまとめていきたいと思います。
