WordPressプラグインに頼らずAnalyticsコードを貼り付ける

<head>タグ内に加える

テーマのheader.phpにHTMLを直接書いてしまう手もありますが、テーマファイルをあまり汚したくない場合はfunctions.phpに以下のように加えます。

function adds_head() {
  echo "<script async src='https://www.googletagmanager.com/gtag/js?id=UA-******-*'></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-******-*');
</script>
";
}
add_action('wp_head', 'adds_head', 0);

UA-******-*の箇所は自分のトラッキングIDに置き換えてください。

最後のadd_action()の記述で<head>タグのほぼ先頭に挿入します。

<head>タグ内にAnalyticsコードを書くことのデメリット

解析を確実に取るなら<head>タグに入れることをAnalyticsも公式に推奨していますが、<head>にJSファイルの読み込みを入れると Google PageSpeed Insights にレンダリングブロックとして指摘されます。

確実な解析よりレンダリングブロック対策を優先する場合、以下のように<body>の末尾に入れ替えるよう書きます。

<body>タグ末尾に加える

function adds_footer() {
  echo "<script async src='https://www.googletagmanager.com/gtag/js?id=UA-******-*'></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-******-*');
</script>
";
}
add_action('wp_footer', 'adds_footer', 0);

内容はほぼ変わらず、add_action()のアクションフックをwp_footerにした程度です。

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。