GA4×GTMでのWebサイト内計測の始め方とメリット・デメリット
目次
はじめに
こんにちは！普段は、ニフティ不動産のフロントエンド開発をメインで行なっているSoraY677です。
今回の記事では、GA4とGTMを組み合わせて素早くWebサイト内の計測を始める方法をお伝えしようと思います。実際に弊社サービスでも活用しており、計測や広告の設定を簡単に反映できるので、とても便利だと日々感じています。これから計測を始めたいという方は是非ご参考までに！ただし、GA4とGTMを組み合わせて採用するのには、メリット・デメリットも存在しています。記事内で言及していますので、そちらもご一読いただけると幸いです。
では始めましょう。
今回利用するサイト計測用ツールの紹介
GA4
まずはGA4（Google Analytics4）についてご紹介します。GA4はGoogle社が提供する計測用のツールで、わかりやすいUIで直感的にデータを見ることができます。基本的な分析であれば画面上の簡単な操作だけで完結します。
GTM
続いて、GTM（Google Tag Manager）についてご紹介します。GTMもGoogle社が提供するツールで、ページ内に「タグ」と呼ばれるHTMLの要素やJavaScriptを簡単に仕込むことができます。今回はGA4に計測を送るための設定を登録します。
計測開始〜テストまで
各アカウントの登録
実際に計測を始めるにあたり、まずはGA4に自身のアカウントを登録しましょう。
登録が完了したら、以下のように計測用の情報が表示されます。この中から、測定IDをメモします。
次にGTMを準備をしましょう。こちらもアカウントを作成します。
https://tagmanager.google.com/
なおGTMでは、アカウント単位とコンテナ単位で、設定を切り分けることができます。複数のページで同じ計測を行うのであれば、同じコンテナの方が好ましいですし、そもそも計測対象のWebサイトを分類できるのであればアカウントを分ける方が良いです。適切に扱いやすい登録をしましょう。
ちなみに、ニフティ不動産では分析がしやすいように、ユーザ属性が異なるという点からサービス単位で分けることにしており、例えば賃貸と購入系（新築マンションなど）で異なるコンテナが割り当てられています。
登録が完了すると、以下のようなHTMLのタグが提示されます。
計測を行いたいWebサイトに対して、上部のコードを<head>要素内に、下部のコードを<body>要素内に、それぞれ貼り付けます。
GA4の基本的な計測設定と動作確認
それでは、実際にGA4の計測ができるように設定してみます。
GTM上で最初に、ワークスペース（設定を行うための作業場所）を聞かれるので「Default Workspace」を選択します。その後、「タグ > 新規 > Googleタグ」を選択し、先ほどGA4登録時に提示された測定IDを使って、以下のようにGTMにGA4を関連付けます。完了したら「保存」をクリックします。
今度は、GA4に基本的な測定を送るための設定をします。「タグ > 新規 > Google アナリティクス > Google アナリティクス: GA4 イベント」を選択し、以下のように設定します。測定IDの欄には先ほどと同じく、GA4登録時にメモした測定IDを入れます。設定できたら保存します。
なんとこれだけで、基本的なGA4イベント計測の登録は完了です！とても簡単ですね。
では、実際にどんな計測ができているのか見てみましょう。
GTMのページ上から「プレビュー」ボタンをクリックします。しばらくすると、専用のページが別タブで開きます。
「Your website’s URL」という入力欄があるので、そこに計測したいWebサイトのURLを入力し、「Connect」ボタンをクリックします。すると、別タブで計測したい自分のWebサイトが開くと同時に、プレビュー用のページでは以下のような表示になっているはずです。
ここでは、GTMで設定したタグが正しく動作したのかを確認することができます。今回であれば、「GA4タグ」・「GoogleアナリティクスGA4イベント」が動作しているのがわかりますね。また、左側に実際に行われた計測が並んでおり、クリックするとそのイベントの詳細を見ることができます。
続いて、計測したデータがGA4に送られてきているのか、確認する方法をご紹介します。
GA4を開き、左下の歯車マークをクリックします。その後、「DebugView」を選択すると、以下のような画面が開くと思います。
ここでは、GA4に送られてきているイベントを確認することができます。各イベントの計測は時刻付きで表示されるので、いつ・どのデータが計測されたのかも、視覚的に分かりやすくなっています。実際にイベントの内容を知りたい時は、対象のイベントをクリックすることで確認することができます。
これで一連の計測追加〜確認までのフローを学ぶことができました！確認まで完了したらGTM上で公開すれば、実際のWebサイトでも計測が始まります。
ただ、基本的な計測だけでなく、自分で決めたイベントの計測もしてみたいですよね？今度はそちらの実現方法について紹介していきます。
独自計測の設定
例えば、とあるボタンがクリックされたかの計測をしたいとしましょう。そのボタンの要素を仮に以下のものとします。
<button id="target-button">
ボタンをクリック！
</button>まずは、このボタンのクリックを検知できるように、GTM上で設定を追加します。
「変数 > 組み込み変数 > 設定」を押し、設定モーダルの中から「Click ID」にチェックをつけます。
これでクリックされたボタンのIDを検知できるようになりました。
続いて、計測をイベントとしてGA4に送る上で、そのイベントの起点とするトリガーを定義します。今回であれば、IDが#target-buttonであるHTML要素を対象として、クリックされた時に発動するというトリガーにしましょう。
そしてトリガーを元に、イベントをGA4に送るためのタグを設定します。
設定の中で、送信するイベント名はclick-eventと名付けました。
設定ができたら、先ほどと同じ手順でGTMのプレビュー機能で確認してみましょう。最初の状態では登録したイベントが「Tags Not Fired」なのに対し、ボタンをクリックすると「Tags Fired」に移動すると思います。
GA4でも同じようにDebugViewの画面をみると、クリックしたタイミングでclick-eventが出てくるのが分かるはずです。
これで独自定義の計測追加に関しても、基本事項を学ぶことができました！
導入のメリット・デメリット
ここまででGA4とGTMを組み合わせた計測の導入方法についてご紹介しました。
Webサイト上から直接GA4にイベントを送る方法に比べ、この組み合わせはメリットが多いため、弊社の一部サービスの計測にも採用しています。しかし、同時に運用の中で気づいたデメリットも多々あります。以下にそれぞれ列挙するので、それらを踏まえて採用するかを検討いただければと思います。
メリット
毎回メインのコードを書き換えずに済む
メリットの中でも特に大きな恩恵と感じているのが、メインとなるWebサイト側のコード修正を不要とするところです。GTMであれば独立して計測を追加することができるため、大規模なコードに触れずとも簡単に要件の追加を行うことができます。
他のツールに対しても簡単に計測を開始できる
今回ご紹介したGA4以外にも、さまざまなツールが、GTMで簡単な設定を行うだけで利用開始できる方法を提供しています。これにより、コード上でたくさんのJavaScriptを書かねばならないところを、UIベースで簡単に設定することができます。
バージョニング機能で切り戻しが簡単
また、GA4では修正内容がバージョンで管理されており、切り戻すのも簡単です。変更を公開した後にバグに気づいた時でも、簡単に前の状態に戻すことができるので、万が一の時でもすぐに修正することが可能です。
デメリット
GTMで設定したタグ起因の不具合が起きることがある
GTMでは、HTML要素を好きに足すことができたり、JavaScriptの実行を行なったりできます。そのため、GTMの設定起因で不具合が発生し、システムの障害となってしまった上、メインのコードを調査してみても原因がわからず、時間が非常にかかってしまうという時がありました。
そのため、GTMを扱う際は以下に気をつけると良いと思います。
- メインのコードからGTM上で設定したデータにアクセスしないように心がける。
- GTMでコードを書く際は、ブラウザの古いバージョンに対応できるように気をつける。トランスパイル等による文法エラーの対策ができないため、JavaScriptが動かなくなるケースがよくある。
複数イベントを同期的に計測する際の管理が大変
Aという計測が済んだら、Bという計測をして、それが済んだらCという計測を…という要件がある時、GTMの設定・管理は大変です。順番にイベントが動くように設定することも一苦労なのですが、加えて、運用の面で数珠繋ぎに目的のイベントを探す必要があるので、多くの時間を要することがあります。
実際に開発していく上でもこの問題に突き当たることは多々あり、時間を奪われていました。対策として、変更があまり生じないコードに関しては、GTMからWebサイト側のコードに移植することで管理の手間を減らしました。このように、GTMにこだわりすぎず、バランス良く実装を考えていくのが良いでしょう。
不要なタグによりSEO評価が下がる可能性がある
使用されていないJavaScriptがある場合、SEO評価で減点の対象となります。GTM上でタグを適切に管理しないとこの問題が発生することが多々あり、点数が大幅に下がることがあります。メインコードと分離されていて削除することを忘れやすいため、定期的に見直して不要となった設定は削除するよう心がけましょう。また、SEOの点数はGoogleが提供するPageSpeed Insightというサービスで確認できるので、定期的に確認を行なうことを推奨します。
最後に
GA4とGTMの導入方法とメリット・デメリットについてお話ししました。私自身の感覚ですが、これを採用するのであれば「サービスが中規模〜大規模である場合や、計測を担当する部門が分けられている場合」は恩恵を受けやすいと感じました。特にメリットに挙げた「毎回メインのコードを書き換えずに済む」・「他のツールが計測を一部サポートしている」という点で簡潔に変更を反映でき、メインで管理しているコードと切り離せるのは、運用の上でも楽だと日々感じます。しかし、デメリットでも書いた「適切に管理しなければSEO評価が下がる」という問題もあるので、定期的に過去の設定等を見直して最適に運用する心構えが重要となってきます。
考慮することが多いかと思いますが、ぜひしっかりと考え抜いた上で、適切な計測方法を選んでいただければと思います！
掲載内容は、記事執筆時点の情報をもとにしています。
