【GA4】サブドメインも同時計測!GA4をGTM(Googleタグマネージャー)で設定する方法

この記事では、これまでのユニバーサルアナリティクスと併用しながら、Googleアナリティクス4(以下、GA4)での計測を始める方法を書いています。Googleタグマネージャー(以下、GTM)を使用して、簡単にGA4のタグを埋め込み、サブドメインサイトも同時計測するための設定です。

この記事は、以下の方々に特に役立つ情報です。

  • GA4が発表された2020年10月よりも前からGoogleアナリティクスを導入していてGA4へ移行したい方
  • サブドメインサイトも運営しており、メインサイトとの間のユーザー行動も分析したい方
  • これまでGTMを導入しておらず、GA4タグをGTMを利用して設置したい方
  • HTMLサイトとWordPressサイトの両方にGTMでGA4タグを設置する方法を知りたい方

 

Googleアナリティクス4(GA4)への移行

Googleから2023年7月1日をもってユニバーサルアナリティクス(以下、UA)のサポート終了が発表されました。この日よりも前にUAで処理されたデータに少なくとも6ヵ月間はアクセスできるものの、次世代の測定ソリューションであるGA4を使用するための準備をするよう公式に勧められています。

 

サブドメインサイトも同時計測する方法

結論から言えば、メインサイトでGA4タグを設置すればサブドメインサイトも同時計測できます。

UAの時には、参照元の除外設定やGTMでのクロスドメイン設定をしないと計測できませんでした。GA4では特別な設定は必要ありません。メインサイト(ドメインサイト)にGA4タグを設定すれば、同じタグでサブドメインサイトも同時計測してくれます。

例えば、一人のユーザーがメインサイトとサブドメインサイトを渡り歩いた場合、同じGA4プロパティ内でトラッキング情報を得られるということです。

 

当サイトの構成

サイト URL サイト内容 サイト情報
メインサイト coeure.co.jp コーポレートサイト(ドメイン) HTMLサイト
サブドメインサイト design.coeure.co.jp ホームページデザインサイト HTMLサイト
メインサイトブログ coeure.co.jp/blog コーポレートブログサイト(サブディレクトリ) WordPressサイト
サブドメインサイトブログ design.coeure.co.jp/blog ホームページデザインサイトブログ(サブディレクトリ) WordPressサイト

 

当社の場合、メインサイトにGA4タグをGTMで設置すれば、サブドメインサイトは同じタグで計測されます。WordPressで制作したブログサイトは、それぞれサブディレクトリに置いていますが、WordPressのテーマでGTMタグを設定するだけでGA4での計測ができるようになります。この点は後述します。

少し難しく感じるかもしれませんが、手順は3つだけです。次の章で説明します。

これまでUAタグは、HTMLサイトではタグの直貼り、WordPress(ブログ)サイトではプラグインを使用して設置していました。今回初めてGTMでGA4タグを設置しましたので、UAタグはそのまま残り、UAとGA4を併用して計測できる状態になっています。WordPressサイトは最近テーマ変更をしたため、UAタグはテーマ(THE THOR)から設定しました。以下の記事で解説しています。
関連記事

今回はTHE THORでアクセス解析ツールGoogleアナリティクスとサーチコンソールを設定する方法です。アナリティクスについては、UA(ユニバーサルアナリティクス)とGA4の場合の設定方法を書いています。   Googl[…]

 

 

GA4をGTMで設定する手順

  1. GTMタグをサイトに埋め込む
  2. GA4プロパティを作成する
  3. GTMでGA4設定タグを追加する

 

GTMの登録や設定方法については、以下の記事で説明しています。

関連記事

サイト内のタグを一括管理できるツールとして、Google Tag Manager(タグマネージャー)があります。便利そうだけど、ややこしそう…。そう思われる方のために、Googleタグマネジャーの登録方法やWordPressに設定する方法に[…]

GTMのアカウント登録をしていない場合は、上の記事を参考に登録しておくことをお勧めします。同記事の後半に出てくるGoogle Chromeの拡張機能「Tag Assistant」も導入しておくと、タグの動作確認をする時に便利です。

 

1.GTMタグをサイトに埋め込む

GTMアカウント登録をしたら、ワークスペースからGTMのID部分(赤囲み)をクリックします。

 

 

HTMLファイルの<head>内と<body>直後に追加するタグ(コード)がそれぞれ表示されます。このコードをコピーして各ページに貼り付けるとGTMタグが設置できます。

 

HTMLサイトの場合

FTPソフトでサーバーに接続し、public.htmlフォルダー内の該当するhtmlファイルをローカルにダウンロードします。テキストエディターでheadとbodyに追加するタグ(コード)を全ページにコピペして保存し、再びFTPソフトでサーバー側に転送します。

 

ページ数が多い場合は、単純作業の繰り返しですが頑張りましょう。プログラミングに関連した基礎的な知識も必要になりますが、以下の関連記事や内部リンクが参考になります。

関連記事

「初心者もできる!プログラミング基礎講座」シリーズでは、ウェブサイト制作におけるプログラミングの基礎について書いています。順を追って読んでいくと、簡単なホームページの制作や編集ができるようになります。第1回は、ウェブサイト制作におけるプログ[…]

 

WordPressサイトの場合

使用しているテーマによって方法が変わります。プラグインで設定する方法もありますが、この記事ではテーマでの設定方法を説明します。

 

THE THOR(有料テーマ)の場合

GTMのID入力に対応したテーマではないため、コードをheadとbodyに貼り付ける方法です。といっても、1カ所に貼り付けるだけで全ページに一括設置できます。WordPressのダッシュボードから、以下の通り進んでください。

外観>カスタマイズ>基本設定[THE]>高度な設定

先程のGTMで表示されるコードを該当部分にコピペして、最後に「公開」するだけです。

 

 

Cocoon(無料テーマ)の場合

「GTM-  」で始まるIDを設定すればOKです。

Cocoon設定>アクセス解析・認証タブ>Googleタグマネージャー

タグマネージャーID欄にIDを入力し「変更をまとめて保存」をクリックします。

 

 

2.GA4プロパティを作成する

アナリティクスの管理(歯車マーク)を選択し、プロパティの部分にある「GA4設定アシスタント」をクリックします。

 

「はじめに」をクリックします。

 

この段階で2つの選択肢があります。

既存のタグを利用できない場合

画像のように、オプション設定にチェックが入れられない状態になっています。当社の場合もこちらでした。そのまま「プロパティ作成」をクリックしてください。

既存のタグを利用できる場合

オプション設定の部分がチェックできるようになっています。既存タグを利用して設定できるので、チェックしておくとその後がかんたんです。既存のUAタグでGA4も計測できるということです。

 

既存のタグを利用できるかできないかについて、Googleの公式サポートに次のような情報があります。

サイトで gtag.js タグを使用している場合は、[既存のタグを使用してデータ収集を有効にします] のオプションが表示されます。

gtag.js タグ対応のウェブサイト作成ツールまたは CMS(例: WordPress、Shopify、Wix)をお使いの場合は、[既存のタグを使用してデータ収集を有効にします] のオプションが表示される場合があります。

ウェブサイト作成ツールもしくは CMS が gtag.js タグ未対応の場合、Google タグ マネージャーを使用している場合、またはウェブサイトが analytics.js でタグ設定されている場合は、ウィザードでは既存のタグ設定を再利用できないため、ご自身でタグを追加する必要があります。

 

 

今回は、既存のタグが利用できない場合で説明を続けます。「プロパティを作成」をクリックした後です。

すぐにGA4のプロパティが作成されます。「接続済みのプロパティ」の部分に、GA4プロパティ(当社の場合「コアース‐GA4」)とプロパティIDが表示されています。「GA4プロパティに移動」をクリックしてください。

 

管理のプロパティ部分に、GA4プロパティとそのIDが表示されています。しっかりプロパティが作成されたことが分かります。

3つ目の手順で必要な、”測定ID”を取得するため「データストリーム」をクリックしてください。

 

赤丸で囲んだの部分をクリックします。

画像の通り「測定ID」が表示されます。このIDをコピーしておいてください。

 

 

3.GTMでGA4設定タグを追加する

GTMからの設定になります。アナリティクスの画面からGTMに遷移できます。

上の画像の赤囲み部分をクリックします。

 

ポップアップ表示される画面で、GTMのロゴ(赤囲み部分)をクリックしてください。該当するアカウントとコンテナを選択すると、GTMのワークスペース画面になります。ここからGA4設定タグを追加します。

 

タグの設定

左メニューにある「タグ」を選択します。

「新規」をクリックします。

 

タグの設定の部分(タグマーク)をクリックします。

 

「Googleアナリティクス:GA4設定」をクリックします。

 

先程コピーした「測定ID」を測定ID欄にペーストしましょう。

 

トリガーの設定

次にトリガーの設定です。トリガー(中央のマーク)をクリックします。

 

「All Pages」(ページビュー)を選択します。トリガー設定はこれだけです。

 

ここまでできたら、画面右上にある「保存」をクリックします。

 

動作確認

プレビュー

GTMにはプレビュー機能があり、公開する前に動作の確認ができるようになっています。画面右上に「公開」があり、そのすぐ左にある「プレビュー」をクリックしましょう。

「Your websaite URL」の部分に確認したいページのURLを入力して「Connect」をクリックします。

 

サマリーが表示されます。「Tag Fired」の部分に「Fired 1 time(s)」と表示されていればOKです。無事にタグが”点火”して動作しているということです。

前述の「Tag Assistant」を導入していると、対象サイトと接続できたことが表示されます。ここからもタグの動作確認ができます。

 

 

公開

画面右上の「公開」をクリックします。バージョン名と説明を入力する画面になります。GTMは変更したバージョンを残し、万が一不具合が生じた場合でも変更前に戻せるようになっています。分かりやすいバージョン名と説明を入力しておきましょう。設置や変更のたびに「公開」が必要です。

 

リアルタイムで確認

最後にアナリティクスの「リアルタイム」で確認しましょう。普段はあまり見られていないページなどにアクセスして、リアルタイムで計測されているか確認します。

 

まとめ

いかがでしたか。今回はGTMでGA4を設定する方法を解説しました。サブドメインサイトもメインサイトと同時計測できるので、サイト間のユーザー行動を把握できます。

次回以降は、GA4の初期設定やUAで設定していたよくあるコンバージョンをGA4でも設定する方法について書いていきます。次回もお楽しみに!

 

>コアース株式会社

コアース株式会社

〒530-0041 大阪市北区天神橋1丁目18-25 第3マツイビル401号室

Coeure Design(コアース・デザイン)は大阪を拠点に業務システム開発を行なうコアース株式会社が運営するホームページ制作サービスです。Webサイトのデザインから,他のシステムとの連携,アフターサービスまで総合的にサポートいたします。

CTR IMG