2023年7月で従来のユニバーサルアナリティクス(UA)から切り替わるGoogle Analytics4(GA4)。SNSなどでも情報が拡散されていて、まだ1年以上の猶予はあるものの、そろそろ切り替えなければと考えている方も多いと思います。

GA4(Google Analytics 4)を導入するには、UA(Universal Analytics)のそれと同じく全ページのヘッダーまたはフッター(ヘッダー推奨だがフッターでも問題なし)へ解析用のコード(Gtag)を挿入する必要があり、これに関する多くの記事では、

  • プラグインを使って挿入する方法
  • テーマのheader.phpやfooter.phpへ直接書き込む方法
  • 子テーマにheader.phpやfooter.phpをコピーして直接書き込む方法

などといった方法が紹介されていますが、特にプラグインやテーマファイルの加工をしなくてもコードを挿入する方法があります。

それほど難しい作業ではなく、以下のコードをコピーして、一部の情報を書き替えたものを子テーマのfunctions.phpへ追加するだけです。

親テーマはテーマ更新によって書き換わってしまう可能性がありますから、子テーマへの導入がベストです。また、functions.phpへ何かのコードを追加したことのない方や、エラーが出た時の対処方法が不明な方は前述したプラグインなどを使った方が無難です。

フッターへGA4のGtagを追加する方法

GtagはGoogleのスクリプト(外部スクリプト)を読み込む必要があり、小さな時間とはいえ、表示の遅延が起こる可能性があるため、個人的にはフッターへ追加して後から読み込むこの方法がおすすめです。

以下が子テーマのfunctions.phpへ挿入するコードです。

/* Google Analytics4 Gtagフッター挿入 */
/* 「測定ID」の部分はご自身のIDへ書き換えてください */
function ha_analytics_gtag_footer_insert(){
	$code_a = '<script async src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>';

	$code_b = "<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '測定ID');
</script>";

	echo $code_a . $code_b ;
}
add_action('wp_footer','ha_analytics_gtag_footer_insert');

コード中の「測定ID」の部分を、GA4の設定で、目的のサイトに関するウェブストリームの詳細にある「測定ID」へ書き換えてください(全部で2か所あります)

functions.phpへコードを追加したら、以下を確認ください。

  1. トップページなどを開いてソース表示をし、ソースの下の方にある</footer>手前付近にタグがあることを確認する
  2. しばらく時間を置いてGoogle Analytics 4のレポートを開き、きちんと計測が進んでいるかを確認する
  3. Google Analytics 4のレポートを開き、各データが偶数のみになっていないかを確認する(タグが重複出力されていないかの確認)

Google Analyticsでは、挿入したGtagの数だけ値が加算されます。重複してコードを挿入していると、測定値が倍以上になってしまいますので、3の項目についても必ずチェックしてください。

たったこれだけの作業でプラグインは1つ不要になりますし、コードが不要になった場合にもfunctions.phpへ追加した上記コードを削除するだけなので管理も簡単になります。

【応用】管理者やログインユーザーのアクセスが解析されないようにする

Google Analytics 4では、フィルタというメニューがなくなり、特定のグローバルIPアドレスからの除外は、

  1. 目的のデータストリームを開く
  2. タグ付けの詳細設定を開く
  3. 内部トラフックの定義を開く
  4. 特定のIPアドレス(自宅のグローバルIPアドレスなど)を追加する

ことで実現できます。

が、複数サイトがある場合や、グローバルIPアドレスが時々変化してしまうという環境も少なくありませんから、都度いちいち変更するのは面倒です。

従って、WordPress側でログインしたユーザーがページを表示した時は解析タグを出力しないようにしておいた方が確実かつ簡単に設定できます。

以下は、上記で紹介したタグに「ログインしていないユーザーだけ」という条件を加えたものです。

/* ログインしていないユーザーのみGoogle Analytics4 Gtagフッター挿入 */
/* 「測定ID」の部分はご自身のIDへ書き換えてください */
function ha_analytics_gtag_footer_insert_nonlogin(){
	$code_a = '<script async src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>';

	$code_b = "<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '測定ID');
</script>";

if(!is_user_logged_in()){
	echo $code_a . $code_b ;
}
}
add_action('wp_footer','ha_analytics_gtag_footer_insert_nonlogin');

ヘッダーへGA4のGtagを追加する方法

個人的には前述したフッターへの挿入がおすすめですが、Google Analyticsの推奨通りにヘッダーへ挿入する場合は以下のコードを使います。

/* Google Analytics4 Gtagヘッダー挿入 */
/* 「測定ID」の部分はご自身のIDへ書き換えてください */
function ha_analytics_gtag_footer_insert(){
	$code_a = '<script async src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>';

	$code_b = "<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '測定ID');
</script>";

	echo $code_a . $code_b ;
}

add_action('wp_head','ha_analytics_gtag_footer_insert');

【応用】管理者やログインユーザーのアクセスが解析されないようにする


/* ログインしていないユーザーのみGoogle Analytics4 Gtagヘッダー挿入 */
/* 「測定ID」の部分はご自身のIDへ書き換えてください */
function ha_analytics_gtag_footer_insert_nonlogin(){
	$code_a = '<script async src="https://www.googletagmanager.com/gtag/js?id=測定ID"></script>';

	$code_b = "<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '測定ID');
</script>";

if(!is_user_logged_in()){	
	echo $code_a . $code_b ;
}
}
add_action('wp_head','ha_analytics_gtag_footer_insert_nonlogin');

旧コード(UA用のタグ)は残して様子を見よう

最後に、新しいGoogle Analytics 4(GA4)と従来のUniversal Analytics(UA)は、挿入する解析コードが異なるので、併用可能です。

GA4とUAの計測値に大きな違いがないかの確認のため、しばらくは併用しておいた方がいいでしょう。