GTMを使ったGA4の設定手順!よくあるカスタムイベントも紹介

GA4の設定方法を一通り知っておくと、アプリ内計測とWeb内計測が可能になります。さらにGA4でデータ収集を行うと、効率的なサイト運用ができるようになります。

そこでこの記事では、GA4の設定方法やメリットを詳しく解説します。この記事を読めば、GA4を使いこなしてより効果的なサイト改善ができるようになるでしょう。

GTM(Googleタグマネージャー)を使ったGA4設定手順

GTM(Googleタグマネージャー)を使ったGA4設定手順

GTMを使ったGA4の設定方法は下記です。

  1. GTMでGA4とサイトを連携する
  2. GA4で計測したいイベントを作成する
  3. GTMのタグが発火しているか確認する

この設定は慣れれば10分程度でできるようになるでしょう。ここからは、より詳細な設定方法を紹介していきます。

【設定手順①】GTMでGA4とサイトを連携する

【設定手順①】GTMでGA4とサイトを連携する

はじめにGTMでGA4とサイトを連携していきます。具体的な手順は以下の通りです。

  1. 測定IDを確認する
  2. GTMのタグを作成する
  3. タグの設定を行う

ここからはそれぞれの手順について順番に紹介します。

1.測定IDを確認する

まず、GTMに入力する測定IDを確認してください。測定IDは以下の手順で確認できます。

  1. GA4の管理画面を開く
  2. 「プロパティ」から「データストリーム」を選択する
  3. 計測したい「ウェブストリーム」を選ぶ

もしウェブストリームが複数ない場合は、表示されたものを選択すれば問題ありません。のちに測定IDが必要になるので、コピー&ペーストするなどして控えておきましょう。

2.GTMのタグを作成する

次に、GTMのタグを作成します。GTMのタグは以下の手順で作成します。

  1. GTMのホーム画面を開く
  2. 左側のタグメニューから「新規」をクリックする
  3. 右側の「タグタイプを選択」から「Googleアナリティクス:G4設定」を選択する

3.タグの設定を行う

最後にタグの設定を行います。タグの設定は以下の手順で進めましょう。

  1. 「測定ID」に控えていた測定IDを入力する
  2. 任意のタグ名を付ける
  3. 配信トリガーを選択する

配信トリガーは、目的に合ったものを選択してください。

【設定手順②】GA4で計測したいイベント作成

【設定手順②】GA4で計測したいイベント作成

GTMとGA4の連携が完了したら、GA4で計測したいイベントを作成していきます。イベントの作成は、以下の手順で行います。

  1. GTMのホーム画面を開く
  2. 左側のメニューからイベントを選択する
  3. イベントを作成をする

イベントの作成は、目的ごとに手順が異なっています。GA4では、以下のように5種類のイベントが作成可能です。

  • 特定ページの到達数を計測する
  • 特定ボタンのクリックを計測する
  • 電話番号のクリックを計測する
  • ページの読了率を計測する
  • 一定金額を購入した場合を数える

ここからは、それぞれの手順について解説していきます。

イベント1.特定ページの到達数を計測する

コンバージョンの達成は、商品の購入や会員登録といった完了ページの表示によってカウントができます。具体的な設定は、以下のような手順で行います。

  1. 「カスタムイベントの作成」をクリックする
  2. 「カスタムイベント名」に任意の名前を入力する

続いて、「一致する条件」の入力を行います。

  1. 1行目の「パラメーター」に任意のイベント名を入力する
  2. 演算子は「等しい」を選び、値は「page_view」と入力する
  3. 2行目の「パラメーター」に「page_location」と入力する
  4. 演算子は「含む」を選び、値に完了ページのURLを入力する

さらに完了ページをコンバージョンとして認識させるために、コンバージョンイベントも作成します。

  1. GTMのホーム画面を開く
  2. 左側のメニューからコンバージョンを選択する
  3. 「新しいコンバージョンイベント」をクリックする
  4. 「新しいイベント名」に先ほどと同じ「任意のイベント名」を入力する
  5. 保存ボタンを押して完了

イベント2.特定ボタンのクリックを計測する

「詳細はこちら」「申し込みはこちら」のような、ボタンのクリック率を計測することも可能です。設定は以下のような手順で行います。

  1. 左側のメニューからから「トリガー」を選択する
  2. 右上の「新規」をクリックする
  3. 「トリガーのタイプを選択」から「リンクのみ」を選択する

するとトリガーの設定が可能になります。トリガーの設定方法は、サイトの構造によって3種類あります。

種類 概要
リンク先URL ボタンの遷移先URL https://n-works.link/ec-production
data属性 HTMLで作成したオリジナルの属性 data-ec-click
CSSセレクタ DOM要素を選択するための記述方法 #wrap > div.s.s–ec > main > div > div.s-fixw-m > div.s-wrp-btn.btn1 > a > span

ここからは、それぞれの設定方法について紹介します。

リンク先URLでの設定

リンク先URLで設定する場合は、以下のように入力していきます。

項目名 記載事項
Page Hostname 閲覧ページのドメイン https://n-works.link
Page Path ドメインに続くパス /blog/ec-production/ecsite-cart
Click URL リンク先URL https://n-works.link/ec-production

この場合、演算子は全て「等しい」を選択してください。

data属性での設定

ボタンを区別して計測する場合は、data属性が有効です。data属性で設定する場合は、以下のように入力していきます。

項目名 記載事項
Page Hostname 閲覧ページのドメイン https://n-works.link
Page Path ドメインに続くパス /blog/ec-production/ecsite-cart
Click Element data属性 [data-ec-click]

Click Element以外の演算子は「等しい」、Click Elementは「CSSセレクタに一致」を選択します。ここで注意点として、Click Elementのdata属性は []で記載するようにしましょう。

CSSセレクタでの設定

CSSセレクタでもボタンを区別して計測できます。設定手順は以下の通りです。

項目名 記載事項
Page Hostname 閲覧ページのドメイン https://n-works.link
Page Path ドメインに続くパス /blog/ec-production/ecsite-cart
Click Element CSSセレクタ div > div.s-fixw-m > div.s-wrp-btn.btn1 > a > span

Click Element以外の演算子は「等しい」、Click Elementは「CSSセレクタに一致」を選択します。

イベント3.電話番号のクリックを計測する

電話番号発信を有効にしている場合、電話番号のクリックを計測できます。設定方法は以下のように行います。

  1. トリガーのタイプから「クリック – リンクのみ」を選択する
  2. 「このトリガーの発生場所」では「一部のリンククリック」を選択する
  3. 以降は「Click URL」「含む」「tel」を選択する

続いて、電話番号クリックのコンバージョンタグを作成します。

  1. GTMのホーム画面を開く
  2. 左側のタグメニューから「新規」をクリックする
  3. タグの種類から「Googleアナリティクス:GA4イベントを選択する
  4. 「設定タグ」は「GA4」を選択する
  5. 「イベント名」には任意のイベント名を入力する
  6. 「トリガー」には電話番号を入力する

最後に、GA4でも設定を行います。

  1. GA4の左メニューから「設定」を選択する
  2. 「イベント」をクリック
  3. 先ほど設定したイベントをONにする

ここまでが設定方法となります。ただし、1つ注意点があります。それは、設定したイベントの反映に時間がかかることです。長い時では24時間かかるので、GA4の設定は後日行うようにしましょう。

イベント4.ページの読了率を計測する

特定のページが最後まで読まれたかどうかを計測することも可能です。この場合は、以下のように設定を行います。

  1. 「イベント名」に任意の名前を入力する
  2. 「一致する条件」の1行目は「event_name」「等しい」「scroll」を選択する
  3. 2行目は「percent_scrolled」「等しい」を選択し「90」と入力する
  4. 3行目は「page_location」「含む」を選択し該当ページのURLを入力する

なお、「percent_scrolled」では任意のパーセンテージを入力できるため、ここでは90%として設定しています。

イベント5.一定金額を購入した場合を数える

一定金額の購入をイベントとして設定することもできます。このイベントはECサイトの効果測定に役立ちますよ。設定手順は、以下の通りです。

  1. 「イベント名」に任意の名前を入力する
  2. 「一致する条件」の1行目は「event_name」「等しい」「purchase」を選択する
  3. 2行目は「value」「以上」を選択して任意の金額を入力する

例えば設定金額を10,000円以上にする場合は、「value」に「以上」を選択して「10000」と入力してください。

【設定手順③】GTMのタグが発火しているかを確認する

【設定手順③】GTMのタグが発火しているかを確認する

イベントを作成したら、GTMのタグが発火しているか確認しましょう。大まかな流れは以下の通りです。

  1. プレビューを選択する
  2. サイトに接続する
  3. タグの発火を確認する

ここからは、それぞれのステップについて解説しましょう。

1.プレビューを選択する

はじめに、プレビューを選択します。GTMのワークスペースから「サマリー」を選択して、右上の「プレビュー」をクリックします。

2.サイトに接続する

プレビューを開いたら、サイトに接続します。「Your Site’s URL」という欄が表示されるので、空欄にURLを入力してください。入力が完了したら、「Connect」をクリックして接続を確認します。「Connected!」と表示されたら接続が完了です。続いて「Continue」をクリックして次のステップに移ります。

3.タグの発火を確認する

最後に「Tag Fired」という欄からタグの発火を確認します。タグの発火が成功していると、「Tag Fired」という項目の下にGA4タグが表示されています。ちなみに、「time(s)」とは何回発火しているかを表しています。例えば、「5time(s)」と表示されていれば、発火回数は5回です。

【設定手順④】GA4のリアルタイム計測での反映を確認する

【設定手順④】GA4のリアルタイム計測での反映を確認する

タグの発火が確認できたら、最後にリアルタイム計測での反映を確認します。手順は以下の通りです。

  1. 左側のメニューから「レポート」を選択する
  2. 「リアルタイム」をクリックする

ここで数字が表示されていれば、計測成功です。もし「0」と表示されていたら、データが取れていません。その場合、以下のような問題が考えられます。

  • GTMのタグ設定にミスがある
  • GAを開くのに時間がかかっている

設定にミスがある場合は、設定を見直しましょう。ミスがない場合は、GAを開くのに時間がかかっているため、もう一度アクセスしてみてください。

うまく反映されていないときの確認ポイント

上手く反映されていないときの確認ポイント

ここまで、GA4の設定方法についてご説明しました。運用を続けていくと、手順通りに行ってもうまく反映されないこともあるでしょう。その際は、以下2点について確認してください。

  • 計測IDやサイトタグの埋め込み値が間違っていないか
  • IPアドレスの除外設定をしていないか

ここからは、それぞれの確認ポイントについて解説していきます。

計測IDやサイトタグの埋め込み値が間違っていないか

はじめに、計測IDやサイトタグの埋め込み値など、埋め込み箇所に誤りがないか確認してください。誤っている箇所があると、計測ができません。そこで、設定タグやイベントタグに誤りがないか確認しましょう。よくある間違いは以下の通りです。

  • 正しいタグを使用していない
  • 不要な空白やテキストが入ってしまっている
  • 関数名の大文字と小文字が誤っている
  • タグが配信されていない

上記ポイントを特に注意して確認しましょう。

IPアドレスの除外設定をしていないか

正しく計測するには、IPアドレスの除外設定が必要です。IPアドレスとは特定の端末を認識する住所のようなもので、特定のIPアドレスを排除すると関係者のデータを除外できます。すると、関係者のアクセスはデータに含めず、より正しいアクセスデータを収集できるのです。

そこでIPアドレスの除外が行われていると、データが反映されないことがあります。もしIPアドレスが除外されているか分からない場合は、以下の手順で確認してください。

  1. ツールからIPアドレスを確認する
  2. GA4の「管理」をクリックする
  3. 「プロパティ」列の「データ ストリーム」をクリックする
  4. 「ウェブデータ ストリーム」を選択する
  5. 「追加の設定」から「タグ付けの詳細設定」を選択する
  6. 「内部トラフィックの定義」にIPアドレスが入力されているか確認する

GA4の設定にGTMを使うメリット

GA4の設定にGTMを使うメリット

ここまでGA4の設定方法について紹介しました。最後に、GA4の設定にGTMを使うメリットについて解説します。

タグを一箇所で管理できる

1つ目のメリットは、タグを一箇所で管理できることです。本来タグを直接編集する場合、HTMLに埋め込む必要があります。これはタグの種類が増えるほど手間がかかってしまうだけでなく、どのページに何のタグを埋め込んだのかを把握することも困難です。そこでGTMを使えば、一箇所で管理できるため作業が簡単になります。HTMLの編集も不要なので、時間の短縮も可能です。

タグの設定ミスがあった際に復元が楽

そして2つ目のメリットは、タグ設定にミスがあった場合に復元が簡単であることです。GTMでは、タグをバージョンごとに設定できます。そこで新しく設定したタグがうまく作用しない場合は、前のバージョンに戻せるのです。初めから設定を行う必要はないため、手間がかかりません。

参考動画|サイト改善】GA4を活用したWebサイト分析【実践】

以下の動画で、データ探索と変数の設定方法、データの見方やコンバージョンと指標の相関関係を解説しています。

初期設定を除き、GTMは無理に使わなくても問題なし

初期設定を除き、GTMは無理に使わなくても問題なし

GA4の初期設定には、Googleタグマネージャーがおすすめです。Googleタグマネージャーにはタグを一箇所で管理できたり、タグの設定ミスがあった際に復元が簡単であったりするメリットがあります。

とはいえど、GA4にはある程度のイベントはすでに作成されているため、無理にタグマネージャーで設定する必要はありません。自社のWebサイト管理体制などを確認しながら、最も効率的な設定方法を選ぶことが重要です。これからGA4を導入する方は、ぜひこの記事を参考にしてください。


Download

Contact

監修者紹介

石田 哲也

取締役CMO

Twitter:@te2319
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社を起業。その後、株式会社オプトでWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社でゲームプロデューサーとしてスマホゲームアプリの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスに入社。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善~ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年 ISD株式会社/起業
2009年 株式会社オプト/SEMコンサルタント
2011年 株式会社メタップス/シニアディレクター
2013年 ライブエイド株式会社/執行役
2016年 ワンダープラネット株式会社/プロデューサー・BizDev
2018年 株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格(GAIQ)
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格

【無料動画】GA4を活用したWebサイト分析手法

マーケ歴20年のプロがデータ探索や
具体的な分析手順を事例を交えて徹底解説!

GA4を活用したWebサイト分析