💡 この機能は、有料プラン契約プロジェクトでご利用いただけます |
STUDIOサイトでクリックイベントを計測する方法
Google タグマネージャーをSTUDIOと連携させると、Google タグマネージャー上で様々なタグを一括で設定・管理することが可能です。本記事では、Google タグマネージャーを活用し、Googleアナリティクス上でクリックイベントを計測するための設定手順をご紹介します。
Google Tag Managerの専門用語について
用語 | 説明 |
タグ | GoogleアナリティクスやGoogle Ads等の外部サービスからのコード。通常はサイトに直接埋め込みますが、GTMを使用することで一元管理が可能になります。 |
トリガー | クリックやページビューなどのユーザーアクションを定義します。トリガーにより、指定したイベントが発生した時に対応するタグが発火します。 |
事前準備
設定するにあたり、事前に以下の準備を行なってください。
設定手順
Googleタグマネージャーの設定
GA4 設定タグの作成
※ タグマネージャー公式ヘルプを参考に解説しています。
新規タグの追加 Google タグ マネージャーで、[タグ] > [新規] をクリックします。
タグの設定
任意の名前をタグに設定します。[タグの設定] ボックスで [Google タグ] を選択し、[測定 ID] に「G-」形式の ID を入力します。トリガーの作成
[トリガー] をクリックし、[初期化 - すべてのページ] トリガーを選択します。最後に「保存」をクリックし、タグの設定を保存します。
※トリガーについて詳しくは、ページトリガーの公式記事をご覧ください。
タグの動作確認
[プレビュー] をクリックし、Tag Assistant を開きます。サイトの URL を入力します。
タグが正常に配信されると、「Tags Fired」に表示されます。
GA4 イベントタグの作成
※ タグマネージャー公式ヘルプを参考に解説しています。
新規タグの追加 Google タグ マネージャーで、[タグ] > [新規] をクリックします。
タグの設定
タグに任意の名前を設定します。 次に、以下を設定します。[タグの種類] は [Google アナリティクス: GA4 イベント] を選択。
[設定タグ] 欄で、先ほど作成したGA4 設定タグを選択。
[イベント名] には、任意のイベント名を入力します。
トリガーの作成
イベントを送信する条件を指定できます。[トリガー] をクリックし、右上の [+] をクリックします。トリガー名を設定します。
以下を設定します。
最後に、画面右上の [保存] をクリック
トリガータイプを[クリック > すべての要素]
このトリガーの発生場所を [一部のクリック] で、[Click Element] [CSSセレクタに一致する] [#cv-0001, #cv-0001 *] を入力します。（cv-0001 は任意の文字列で設定してください）
タグの動作確認
[プレビュー] をクリックし、Tag Assistant を開きます。公開サイトの URL を入力します。
タグが正常に配信されると、「Tags Fired」に表示されます。
変更した作業を公開する
画面右上の [公開] ボタンをクリック。
バージョン名などを入力し、公開してください。
STUDIOでの設定
IDの設定
STUDIO エディターでクリックイベントを測定する対象の要素に「ID」を設定します。
要素を選択し、エディター右側の設定パネルで任意の文字列を入力します。
※GTM のトリガーで作成した文字列と同じ IDにしてください。
設定後、サイトの更新を行います。
動作確認
Googleアナリティクスのアルタイム レポートで、動作確認をします。公開サイトで、IDを設定した要素をクリックし、レポートを確認します。
うまく動作しない場合は、まずは以下をご確認ください。
GTM 側でバージョンの公開は完了していますか。
独自にブラウザに入れているプラグインが干渉する場合がございます。プラグインをオフにして再度お試しください。
STUDIOでIDの設定後に、サイトの更新は行いましたか。
グーグルタグ