【Astro】本番環境にのみGA計測タグを設置する方法 | GH Media
URLがコピーされました

【Astro】本番環境にのみGA計測タグを設置する方法

TECH
AstroWebエンジニアWebサイト制作
URLがコピーされました

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

Astro公式ドキュメント – 環境変数

実装パターン

パターン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>

Astro公式ドキュメント – 条件付きレンダリング

パターン2: 環境変数を使用する方法

環境変数と条件付きレンダリングを組み合わせることで、より柔軟な実装が可能です。

  1. .envファイルを作成します：
# .env
PUBLIC_GA_ID=G-XXXXXXXXXX
  1. レイアウトファイルで環境変数を使用します：
---
// 本番環境かどうかを判断
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）を使用する方法

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には、Google Analyticsを簡単に統合するためのパッケージ「astro-google-analytics」があります。

  1. パッケージをインストールします：
npm install astro-google-analytics
  1. レイアウトファイルで条件付きにコンポーネントをインポートします：
---
// 本番環境かどうかを判断
const isProd = import.meta.env.PROD;

// 本番環境の場合のみGoogleAnalyticsをインポート
let GoogleAnalytics;
if (isProd) {
  const module = await import('astro-google-analytics');
  GoogleAnalytics = module.GoogleAnalytics;
}
---

<html>
  <head>
    {isProd && GoogleAnalytics && <GoogleAnalytics id="G-XXXXXXXXXX" />}
    <!-- その他のhead要素 -->
  </head>
  <body>
    <!-- サイトコンテンツ -->
  </body>
</html>

もっと簡単な方法は、直接条件付きでコンポーネントをレンダリングする方法です：

---
import { GoogleAnalytics } from 'astro-google-analytics';

// 本番環境かどうかを判断
const isProd = import.meta.env.PROD;
---

<html>
  <head>
    {isProd && <GoogleAnalytics id="G-XXXXXXXXXX" />}
    <!-- その他のhead要素 -->
  </head>
  <body>
    <!-- サイトコンテンツ -->
  </body>
</html>

astro-google-analytics パッケージ

複数のレイアウトファイルがある場合

多くのAstroプロジェクトでは複数のレイアウトファイルを使用します。すべてのレイアウトで同じ条件付きロジックを繰り返すのは冗長なので、コンポーネントとして切り出すと良いでしょう。

---
// 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要素 -->
  </head>
  <body>
    <!-- サイトコンテンツ -->
  </body>
</html>

環境変数の設定方法

Astroでは、.envファイルを使用して環境変数を設定できます：

# .env
PUBLIC_GA_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXXXX

PUBLIC_接頭辞のついた環境変数は、クライアントサイドのコードからもアクセス可能です。セキュリティ上重要なAPIキーなどにはPUBLIC_接頭辞をつけないよう注意してください。

Astro公式ドキュメント – 環境変数の使用

本番環境と開発環境で異なる値を使用する場合

開発環境と本番環境で異なる値を使用したい場合は、.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計測タグを本番環境のみに設置できます。環境変数を組み合わせることで、より柔軟な実装が可能になります。

どの方法を選ぶかは、プロジェクトの要件や個人の好みによりますが、条件付きレンダリングと環境変数を組み合わせる方法が最も柔軟性が高いでしょう。

簡単な実装から複雑な実装まで、Astroはさまざまなアプローチをサポートしています。ぜひ、自分のプロジェクトに最適な方法を選んでみてください。

URLがコピーされました

グリームハブ合同会社は、AIメンバーで価値創出に挑戦する会社です。人材不足が加速する中、AI活用で最前線を走ります。

記事を書いた人
照屋 塁
照屋 塁

AIによる経営を行うGleamHub代表。人材不足社会に向かう中でAIを最大限に活用した会社を目指している。まずは得意のWebマーケティングの領域から事業を展開している。