メインコンテンツにスキップ
すべてのコレクションよくある質問Apps
Googleタグマネージャーを使ってクリックイベントをGoogleアナリティクスで計測する方法
Googleタグマネージャーを使ってクリックイベントをGoogleアナリティクスで計測する方法

Studio公開サイトでクリックイベントを計測する方法をご紹介します。GoogleタグマネージャーとStudio上での設定手順を説明します。

Saika avatar
対応者:Saika
2か月以上前に更新

対象プラン:Starterプラン以上


Studioサイトでクリックイベントを計測する方法

Google タグマネージャーをStudioと連携させると、Google タグマネージャー上で様々なタグを一括で設定・管理することが可能です。本記事では、Google タグマネージャーを活用し、Googleアナリティクス上でクリックイベントを計測するための設定手順をご紹介します。

Google Tag Managerの専門用語について

用語

説明

タグ

GoogleアナリティクスやGoogle Ads等の外部サービスからのコード。通常はサイトに直接埋め込みますが、GTMを使用することで一元管理が可能になります。

トリガー

クリックやページビューなどのユーザーアクションを定義します。トリガーにより、指定したイベントが発生した時に対応するタグが発火します。

事前準備

設定するにあたり、事前に以下の準備を行なってください。

設定手順

Googleタグマネージャーの設定

1. GA4 設定タグの作成

タグマネージャー公式ヘルプを参考に解説しています。

  1. 新規タグの追加 Google タグ マネージャーで、[タグ] > [新規] をクリックします。

    Googleタグマネージャー設定画面

  2. タグの設定
    任意の名前をタグに設定します。[タグの設定] ボックスで [Google タグ] を選択し、[タグ ID] に「G-」形式の ID を入力します。

    タグIDは GA4の管理画面から取得します。 [管理] の [データの収集と修正] で、[データ ストリーム] をクリックします。詳細を開くと右上に測定IDが表示されるのでこれをコピーして使います。

  3. トリガーの作成

    [トリガー] をクリックし、[初期化 - すべてのページ] トリガーを選択します。最後に「保存」をクリックし、タグの設定を保存します。

    ※トリガーについて詳しくは、ページトリガーの公式記事をご覧ください。

  4. タグの動作確認
    [プレビュー] をクリックし、Tag Assistant を開きます。サイトの URL を入力します。

    プレビューサマリー

    タグが正常に配信されると、「配信されたタグ」に表示されます。

    タグのプレビュー画面

2. GA4 イベントタグの作成

タグマネージャー公式ヘルプを参考に解説しています。

  1. 新規タグの追加 Google タグ マネージャーで、[タグ] > [新規] をクリックします。

    Googleタグマネージャー設定画面
  2. タグの設定
    タグに任意の名前を設定します。 次に、以下を設定します。

    • [タグの種類] は [Google アナリティクス: GA4 イベント] を選択。

    • [測定 ID] には、「2. タグの設定」の手順でGA4の管理画面から取得した同じIDをペーストします。

    • [イベント名] には、任意のイベント名を入力します。 

  3. トリガーの作成
    イベントを送信する条件を指定できます。

    [トリガー] をクリックし、右上の [+] をクリックします。トリガー名を設定します。

    トリガーの選択画面

    以下を設定します。

    • 最後に、画面右上の [保存] をクリック

    • トリガータイプを[クリック > すべての要素]

    • このトリガーの発生場所を [一部のクリック] で、[Click Element] [CSSセレクタに一致する] [#cv-0001, #cv-0001 *] を入力します。(cv-0001 は任意の文字列で設定してください)

      トリガーの詳細設定画面
  4. タグの動作確認
    [プレビュー] をクリックし、Tag Assistant を開きます。公開サイトの URL を入力します。

    タグのプレビューボタン

  5. タグが正常に配信されると、「Tags Fired」に表示されます。

    タグのプレビュー画面

3. 変更した作業を公開する

  1. 画面右上の [公開] ボタンをクリック。

  2. バージョン名などを入力し、公開してください。

4. Studioでの設定

IDの設定

Studio エディターでクリックイベントを測定する対象の要素に「ID」を設定します。

要素を選択し、エディター右側の設定パネルで任意の文字列を入力します。

※GTM のトリガーで作成した文字列と同じ IDにしてください。

設定後、サイトの更新を行います。

動作確認

Googleアナリティクスのアルタイム レポートで、動作確認をします。公開サイトで、IDを設定した要素をクリックし、レポートを確認します。

うまく動作しない場合は、まずは以下をご確認ください。

  • GTM 側でバージョンの公開は完了していますか。

  • 独自にブラウザに入れているプラグインが干渉する場合がございます。プラグインをオフにして再度お試しください。

  • StudioでIDの設定後に、サイトの更新は行いましたか。

グーグルタグ

こちらの回答で解決しましたか?