Webサイト立ち上げ&自身のサイトにGoogleアナリティクスを導入した際に、「UA-GA4併用設定」に関してモヤモヤしたことを明瞭にするために、調べたことや解決したことなどをシリーズ化した記事です。
第1節となるここでは、「何に悩んだのか」「背景や設定方法」などのUA-GA4併用設定に関する全体像について解説します。
シリーズ記事
- 【UA-GA4併用】設定方法<全般編>[1/4]|Googleアナリティクス(本記事)
- 【UA-GA4併用】設定方法<Cocoon設定編>[2/4]|Googleアナリティクス
- 【UA-GA4併用】設定方法<gtag.js調査編>[3/4]|Googleアナリティクス
- 【UA-GA4併用】設定方法<gtag.js探求編>[4/4]|Googleアナリティクス
目次
何に悩んだのか
先輩方のサイトを参考にさせていただいたのですが、Webサイト構築初心者だったため、結局どうするのが正しいのかよくわからなかったり、本当にうまくいっているのか不安になったりと悩みました。
具体的に悩んだのは以下のようなことです。
Googleアナリティクス2種類あるみたい
- 「ユニバーサルアナリティクス(以下、UA)」と「Googleアナリティクス4(以下、GA4)」というものがある。
- UAとGA4でWebサイトやWordPressへの設定方法が異なるらしい。
- UAとGA4の違いは?
- UAとGA4のどっちを使うべきか?
UAとGA4は併用できるらしい
- WebサイトやWordPressへの設定方法がいろいろ紹介されているが、全部正しいのか、どれかが間違っているのか、どうするのが自分にとってベストなのか、よくわからん。
- UAとGA4を併用できるならどう設定すべきなのか?
Googleサーチコンソールとの連携は?
- UAでできていた「Googleサーチコンソールとの連携」はGA4では現在できないらしい。でも連携はしたい。
- 連携できる?できない?
- UAとGA4を併用できるならどう設定すべきなのか?
自身で咀嚼できた状態で設定したい
- ネットに情報は沢山あるが、ありすぎて頭が混乱する。
これらモヤモヤを解決すべく、「結局、何がわかってないからモヤるのか」の根本を突き詰め、それに対する自身の解釈を整理してみました。
自分なりに至った結論を紹介することで、同じようなモヤモヤを持たれている方によい情報が提供できれば幸いです。
UAとは?GA4とは?違いは?
結論
ユニバーサルアナリティクス(UA)は、前世代のGoogleアナリティクス。
Googleアナリティクス4(GA4)は、現在最新の次世代のGoogleアナリティクス。
Googleアナリティクス4(GA4)は、現在最新の次世代のGoogleアナリティクス。
- Googleアナリティクスは2020/10/14に新しくなり、従来の「ユニバーサルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わりました。
- GA4になって増えた機能、変わった機能、なくなった(まだ未対応の?)機能があります。
- GA4だけでなく、現在でもUAを利用可能です。
UAとGA4は併用できるか?
結論
できる。
- いろんなサイトにできると書かれている。
- Google公式サイトに併用についての記載があったので間違いない。
UA-GA4併用の前提条件は?
結論
GA4プロパティとUAプロパティがそれぞれ1つ以上作成されていること。
- Googleアナリティクス利用登録時に「詳細オプションを表示」で、「GA4とユニバーサルアナリティクスの両方を作成する」にしていれば、GA4プロパティとUAプロパティが同時に作成できています。
- 利用登録時(GA4)に同時作成を選択していなかった場合など、UAプロパティが作成できていなければ、以下手順でたぶん作成できます。
- 「管理」→「+プロパティを作成」クリック→「詳細オプションを表示」クリック→「ユニバーサル アナリティクス プロパティの作成」
- GA4プロパティが作成できている状態で、「UAプロパティが作成できているかどうか」を確認する方法は以下の通りです。
- Googleアナリティクスのホーム(GA4)において、「すべてのアカウント」クリックし、「プロパティとアプリ」のところにGA4以外の「UA-XXX」というIDのものがあればUAプロパティが作成できています。
UAの「トラッキングID」とGA4の「測定ID」の違いは?
結論
(誤解を恐れずに言うならば)
UA用かGA4用かが違うだけで使用方法は同じ。
UA用かGA4用かが違うだけで使用方法は同じ。
- どちらもGoogleが管理する「プロパティID」というIDであり、UAとGA4で形式が「UA-XXX」「G-XXX」と異なること以外は、Webサイト側から利用する際の使い方は同じです。
- 正確には以下のGoogle公式サイトの情報をご参照ください。
- 以下のGoogle公式サイトに情報が記載されています。
- このサイトは、対象のWebサイトへのグローバルタグ(gtag.js)の実装(適用)方法について書かれたガイドです。
- UAの「トラッキングID」とGA4の「測定ID」は「プロパティID」という総称があり、UAの「プロパティID」を特に「トラッキングID」、GA4の「プロパティID」を特に「測定ID」と呼称すると捉えるのがしっくりくるような記述が書かれています。
Webサイトに対するUA-GA4併用の設定方法は?
結論
トラッキング対象のWebサイトのHTMLファイルの
<head>
タグ内に「UAのgtag.js」と「GA4のgtag.js」を1つのスニぺット(ひとまとまりのコード)として記述した「UA-GA4併用のgtag.js」(以下、「gtag.js改」)を埋め込む。
- グローバルタグ(gtag.js)とは、「トラッキング対象のWebサイト」と「Googleアナリティクス」を連携させるためのタグであり、JavaScriptで書かれたスクリプトです。
- Webサイトに対し、1つのプロパティ(UAのみ、GA4のみ、など)を連携させるためには、該当のプロパティに対するgtag.jsを利用します。
- 「gtag.js改のコード」および「gtag.js改の生成方法」は後述します。
- HTMLファイルを直接編集する場合は、ファイルをエディタで開いて、
<head>
タグ内にgtag.js改を追記します。 - 具体的な「WordPressに対するUA-GA4併用の設定方法」については後述します。
- ここに記載した結論に至ったgtag.js調査/探求の結果は、シリーズ記事をご参照ください。
gtag.js改のコード
結論
筆者が最終的に到達した「gtag.js改のコード」は以下の通り。
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-1');
gtag('config', 'G-YYYYYYYYYY');
</script>
「UA-XXXXXXXXX-1」はUAのプロパティID(トラッキングID)
「G-YYYYYYYYYY」はGA4のプロパティID(測定ID)
gtag.js改のコード生成方法
結論
Googleアナリティクスのサイトから取得できる各種情報を組み合わせてコードを生成(以下に詳細を記載)。
- ここで記載するのは、「UAのgtag.js」をベースにGA4の処理を追加する例(筆者の最終到達点)のgtag.js改のコード生成手順です。
- 自身は採択しませんでしたが、GA4ベース+UAの処理追加にする場合は、ここの処理とは逆に、GA4のgtag.jsにUAのプロパティID(トラッキングID)に対するコードを追記すればよい(はず)です。
コード生成方法の詳細
- UAのgtag.jsを取得
- Googleアナリティクスのホーム(UA)をブラウズ。
- 「管理」→「トラッキング情報」→「トラッキングコード」→「グローバルサイトタグ(gtag.js)」に表示されているコード(UAのgtag.jsのコード)をコピー。
- GA4の測定ID(プロパティID)を取得
- Googleアナリティクスのホーム(GA4)をブラウズ。
- 「管理」→「データストリーム」→ストリームを選択→「ウェブストリームの詳細」画面の「測定ID」に記載されている測定ID(G-YYYYYYYYYY)をコピー。
- gtag.js改のコードを生成
- コピーしたUAのgtag.jsのコードをテキストエディタにペースト。
- 「
gtag('config', 'UA-XXXXXXXXX-1');
」の下の行に、「gtag('config', 'G-YYYYYYYYYY');
」を挿入。- 「
gtag('config', 'G-YYYYYYYYYY');
」は、「gtag('config', 'UA-XXXXXXXXX-1');
」上のUAのトラッキングID(=UAのプロパティID)「UA-XXXXXXXXX-1」の箇所をGA4の測定ID(G-YYYYYYYYYY)に置換したもの。
- 「
- できあがったものがgtag.js改のコード(前述のもの)。
表示中のプロパティがどっちなのかの識別方法
- 「すべてのアカウント」のところに「すべてのウェブサイトのデータ」となっていたらUAプロパティ。
- 「すべてのアカウント」のところに「XXX – GA4」と記載あればGA4プロパティ。
表示するプロパティの切り替え方法
- 「すべてのアカウント」クリック→「プロパティとアプリ」で切り替え先のプロパティをクリック。
- UAに切り替える場合は、さらに「ビュー」の「すべてのウェブサイトのデータ」クリック。
WordPressに対するUA-GA4併用の設定方法は?
結論
WebサイトやWordPressの構成によって異なる(以下に詳細を記載)。
WordPressの場合は、基本的にはUA-GA4併用のgtag.js(gtag.js改)を設定するのみ。
WordPressの場合は、基本的にはUA-GA4併用のgtag.js(gtag.js改)を設定するのみ。
- 前述の通り、「UAのgtag.js」と「GA4のgtag.js」をまとめて1つのスニペットとして記述した「gtag.js改」を用いて、それをWordPressに設定します。
- すでにGoogle広告などの他のgtag.js設定をWordPressに設定している場合は、UAとGA4をまとめたように、既存のgtag.jsとgtag.js改をまとめて1つのスニペットにする必要があります(まとめたほうがよいです、かも)。
- 筆者が理解しているメジャーな設定方法は以下の4通りです。
設定方法の詳細
- HTMLファイルを編集
- 計測対象にするすべてのページのHTMLファイルの
<head>
タグ内にgtag.js改を追記。-
- WordPressを用いる場合、この設定方法を用いるメリットはないと思われる。
-
- 計測対象にするすべてのページのHTMLファイルの
- header.phpを編集
- 「外観」>「テーマエディタ」>「テーマヘッダー」にて、header.phpの
<head>
タグ内にgtag.js改を追記。-
- 編集ミスして全体が動かなくなったり、テーマのアップデートで上書きされたりするリスクあり。
-
- 「外観」>「テーマエディタ」>「テーマヘッダー」にて、header.phpの
- プラグイン「All in One SEO Pack」に適用
- 「一般設定」>「ウェブマスターツール」にて、「雑多の検証」の入力箇所にgtag.js改を貼り付け/追記。
-
- 該プラグインのバージョンが変わると仕様が変わることがある。
-
- 「一般設定」>「ウェブマスターツール」にて、「雑多の検証」の入力箇所にgtag.js改を貼り付け/追記。
- テーマに適用
- SEOに関する設定が可能なテーマには独自の設定UIが存在し、設定方法はテーマごとに異なる。
- テーマのバージョンが変わると仕様が変わることがある。
- 筆者が利用しているテーマはCocoonのため、Cocoonの設定を以下のシリーズ記事にて紹介しておきます。
- SEOに関する設定が可能なテーマには独自の設定UIが存在し、設定方法はテーマごとに異なる。
Googleサーチコンソールとの連携方法は?
結論
GA4とは連携できないため、UAのみと連携する。
- 自身の環境で確認したところ、UAには存在するGoogleサーチコンソールとの連携の機能がGA4のUI上に存在しない(見つけられなかった)。
- 「できませんよ!」と紹介してくださっているサイトあり(以下のサイト)。
- 公式の情報(Google社発信の情報)は未確認。
- Googleアナリティクス(UA)とGoogleサーチコンソールの具体的な連携方法(手順)は、ここでは割愛します。
- 連携方法について、筆者が参考にしたサイトを以下に掲載しておきます。
シリーズ記事
- 【UA-GA4併用】設定方法<全般編>[1/4]|Googleアナリティクス(本記事)
- 【UA-GA4併用】設定方法<Cocoon設定編>[2/4]|Googleアナリティクス
- 【UA-GA4併用】設定方法<gtag.js調査編>[3/4]|Googleアナリティクス
- 【UA-GA4併用】設定方法<gtag.js探求編>[4/4]|Googleアナリティクス