Google アナリティクスをfunctions.phpで読み込む方法(コピペOK)
2024年6月24日多くのクライアントがサイト納品後に、分析ツールのプラグインを導入しているのを見受けます。簡単にインストールでき、初心者でも扱いやすいですが、表示が重くなってしまったり、プラグイン同士の衝突による不具合の発生確率も増えます。
そのため極力テーマファイルを汚さずに、<functions.php>
で接続する方法3つ記載します◎
3つの読込み方法
サイトの特性やユーザーの行動を考慮して適切な方法を選んでみてください◎
※G-******-*の箇所は、実際のGoogle Analyticsの測定IDに置き換えてください。
方法①: headタグ内にトラッキングコードを追加
(通常、<head>
タグにトラッキングコードを追加する方法が推奨されますが、<head>
タグにJavaScriptを追加すると、Google PageSpeed Insightsでレンダリングブロックとして指摘されることがあるので注意)
function adds_head() {
echo "<!-- Google tag (gtag.js) -->
<script async src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>";
}
add_action('wp_head', 'adds_head', 0);
方法③: bodyタグ末尾にトラッキングコードを追加
レンダリングブロックの問題を回避するためには、トラッキングコードを<body>
タグの末尾に追加する方法が効果的です。
function adds_footer() {
echo "<!-- Google tag (gtag.js) -->
<script async src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>";
}
add_action('wp_footer', 'adds_footer', 0);
方法③: ログインユーザーを除外する方法
テストや管理のために、ログインユーザーにはトラッキングコードを表示しない設定も有効です。
function add_ga4_tracking_code() {
if (is_user_logged_in()) return; // ログインユーザーにはトラッキングコードを表示しない
echo '<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-******-*"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "G-******-*");
</script>';
}
add_action('wp_head', 'add_ga4_tracking_code', 0);
まとめ
EnChordは、クライアントのサイトパフォーマンスを最適化するために、初期設定としてGoogleサーチコンソールとGoogleアナリティクスの導入を決定いたしました◎。プラグインに依存せず、確実なデータ収集とサイトの高速化を実現します。
不明点やさらに知りたい点があれば、どうぞお気軽にお問い合わせください。
※緊急依頼の場合は【緊急】のチェックボックスにチェックを入れてください。24時間以内に担当者より折り返します。
ご質問・ご依頼はこちらから