Webサイト分析には欠かせないGoogle Analytics（GA）やGoogle Tag Manager（GTM）ですが、開発環境では不要なアクセスデータを送信しないようにしたいものです。この記事では、Astroフレームワークを使用して本番環境のみにGA計測タグを設置する方法を解説します。
Astroにおける環境の区別
Astroでは、import.meta.env.PROD という組み込み変数を使用して、本番環境と開発環境を区別できます。
- 開発環境（
npm run dev）:import.meta.env.PROD === false - 本番環境（
npm run build）:import.meta.env.PROD === true
実装パターン
パターン1: 条件付きレンダリングを使用する方法
最もシンプルな方法は、条件付きレンダリングを使用することです。
---
// 本番環境かどうかを判断
const isProd = import.meta.env.PROD;
---
<html>
<head>
{isProd && (
<!-- Google Analytics タグ -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
)}
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>パターン2: 環境変数を使用する方法
環境変数と条件付きレンダリングを組み合わせることで、より柔軟な実装が可能です。
.envファイルを作成します：
# .env
PUBLIC_GA_ID=G-XXXXXXXXXX- レイアウトファイルで環境変数を使用します：
---
const isProd = import.meta.env.PROD;
const gaId = import.meta.env.PUBLIC_GA_ID;
---
<html>
<head>
{isProd && gaId && (
<>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
<script define:vars={{ gaId }}>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', gaId);
</script>
</>
)}
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>パターン3: Google Tag Manager（GTM）を使用する方法
---
const isProd = import.meta.env.PROD;
const gtmId = import.meta.env.PUBLIC_GTM_ID;
---
<html>
<head>
{isProd && gtmId && (
<>
<!-- Google Tag Manager -->
<script define:vars={{ gtmId }}>
(function(w,d,s,l,i){w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', gtmId);
</script>
<!-- End Google Tag Manager -->
</>
)}
</head>
<body>
{isProd && gtmId && (
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`} height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
)}
<!-- サイトコンテンツ -->
</body>
</html>パターン4: astro-google-analytics パッケージを使用する方法
Astroには、GAを簡単に統合するためのパッケージ astro-google-analytics があります。
- パッケージをインストール：
npm install astro-google-analytics- レイアウトファイルにて：
---
const isProd = import.meta.env.PROD;
let GoogleAnalytics;
if (isProd) {
const module = await import('astro-google-analytics');
GoogleAnalytics = module.GoogleAnalytics;
}
---
<html>
<head>
{isProd && GoogleAnalytics && <GoogleAnalytics id="G-XXXXXXXXXX" />}
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>もっと簡単に書くなら：
---
import { GoogleAnalytics } from 'astro-google-analytics';
const isProd = import.meta.env.PROD;
---
<html>
<head>
{isProd && <GoogleAnalytics id="G-XXXXXXXXXX" />}
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>複数レイアウトで共通化する場合
共通のAnalyticsコンポーネントを作成することで、複数レイアウトでも使いまわせます。
AnalyticsComponent.astro
---
const isProd = import.meta.env.PROD;
const gaId = import.meta.env.PUBLIC_GA_ID;
---
{isProd && gaId && (
<>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}></script>
<script define:vars={{ gaId }}>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', gaId);
</script>
</>
)}各レイアウトで読み込む：
---
import AnalyticsComponent from '../components/AnalyticsComponent.astro';
---
<html>
<head>
<AnalyticsComponent />
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>環境変数の設定方法
Astroでは .env ファイルで環境変数を定義します：
# .env
PUBLIC_GA_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXXXX⚠️
PUBLIC_がついた環境変数はクライアントサイドでも読み取れるため、秘密情報は含めないよう注意しましょう。
本番と開発で値を変える場合
.env.development や .env.production ファイルを使えば、環境ごとの設定が可能です：
# .env.development
PUBLIC_GA_ID=G-DEVELOPMENT# .env.production
PUBLIC_GA_ID=G-PRODUCTIONこれらは .env よりも優先されます。
まとめ
Astroでは、import.meta.env.PROD を活用することで本番環境と開発環境を明確に分けて管理できます。条件付きレンダリングと環境変数を組み合わせることで、GA/GTMのタグ埋め込みを柔軟に制御可能です。
簡単な実装から複雑な設計まで、Astroは幅広く対応しています。自分のプロジェクトに合った方法を選びましょう。
