Astro ブログへ Google Analytics Tag をプラグインなしで設定する

Published:

Table of contents

Open Table of contents

はじめに

Astro ブログへ Google Analytics Tag を設定します。プラグイン (Astro integration) で利用可能な遅延ロードライブラリ Partytown でも追加可能なようですが、今回は直接 <script> を追加します。

事前準備

Google Analytics Tag をコピー

タグの実装手順を表示する -> 手動でインストールからタグを確認すると以下のようなコードをコピーし、 <head> 要素の直後に貼り付けしてください表示されます。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLETAG"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-EXAMPLETAG');
</script>

そのまま貼り付けするとビルド時にエラーが発生

コピー貼り付けしただけだと、ビルド時に以下のエラーが発生します。

src/components/Header.astro:217:9 - warning astro(4000): This script will be treated as if it has the is:inline directive because it contains an attribute. Therefore, features that require processing (e.g. using TypeScript or npm packages in the script) are unavailable.

See docs for more details: https://docs.astro.build/en/guides/client-side-scripts/#script-processing.

Add the is:inline directive explicitly to silence this hint.

上記エラーですが、is:inline ディレクティブの Astro Docs の説明を見ると、 Astro は、 html 出力時にデフォルトでページ上の <script> を最適化、バンドルするとあります。そのため、上記の貼り付けたJavaScriptコードが利用できずビルドエラーとなってしまったようです。

Google Analytics Tag の script タグへ is:inline を追加する

<script> へ is:inline ディレクティブを付与することで、ビルド時に最適化、バンドルされる対象外にでき、最終的に出力するHTMLファイルにそのまま残すように設定することができるようです。 以下のように is:inline ディレクティブを追加することで。ビルドが正常終了するようになり、 Google Analytics 側での動作も確認できました。

<!-- Google tag (gtag.js) -->
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLETAG"></script>
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-EXAMPLETAG');
</script>

まとめ

Google Analytics Tag をそのまま利用するだけでは、ビルド時にエラーとなりましたが、 is:inline ディレクティブを追加することで Google Analytics Tag の適用ができました。

参考URL