Google Analytics 4(GA4)のグローバル サイトタグ(gtag.js)をWordPressへプラグインなしで挿入する方法

公開日:2022(令和4)年3月19日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



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、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

より使いやすくなるよう、本ページで紹介するコードは2023年1月18日に変更しております

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

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

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

/* Google Analytics4 Gtagフッター挿入 */
/* 「ここに測定IDを入力」の部分はご自身のIDへ書き換えてください */
function sample_analytics_gtag_footer_insert(){
//測定ID
$ana_id = 'ここに測定IDを入力';
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo esc_attr($ana_id); ?>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<?php echo esc_attr($ana_id); ?>');
</script>
<?php
}
add_action('wp_footer','sample_analytics_gtag_footer_insert');

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

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側でログインしたユーザーがページを表示した時は解析タグを出力しないようにしておいた方が確実かつ簡単に設定できます。

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

2重に追加しないよう、わざと前述のコードとユーザー定義関数名を同じにしています。いずれかのコードを使用するようにしてください(両方追加するとエラーになりますのでご注意ください)

/* Google Analytics4 Gtagフッター挿入 ログインユーザーを除く */
/* 「ここに測定IDを入力」の部分はご自身のIDへ書き換えてください */
function sample_analytics_gtag_footer_insert(){
//測定ID
$ana_id = 'ここに測定IDを入力';
?>
<?php if(!is_user_logged_in()): ?>
<script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo esc_attr($ana_id); ?>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<?php echo esc_attr($ana_id); ?>');
</script>
<?php endif; ?>
<?php
}
add_action('wp_footer','sample_analytics_gtag_footer_insert');

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

個人的には前述したフッターへの挿入がおすすめですが、Google Analyticsの推奨通りにヘッダーへ挿入する場合は、これまで紹介したコード最終行の以下の部分を変更します。

変更前

add_action('wp_footer','sample_analytics_gtag_footer_insert');

変更後

add_action('wp_head','sample_analytics_gtag_footer_insert');

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

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

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

, , ,



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
TT3(Twenty Twenty Three)テーマへ移行すべきか考 & 子テーマの配布