While Google Analytics (GA) and Google Tag Manager (GTM) are indispensable for website analytics, you typically want to avoid sending unnecessary access data from development environments. In this article, we explain how to install GA tracking tags exclusively in production environments using the Astro framework.
Distinguishing environments in Astro
In Astro, you can differentiate between production and development environments using the built-in variable import.meta.env.PROD.
- Development environment (
npm run dev):import.meta.env.PROD === false - Production environment (
npm run build):import.meta.env.PROD === true
📚 Official Astro documentation – Environment variables
Implementation patterns
Pattern 1: Using conditional rendering
The simplest approach is to use conditional rendering.
---
// 本番環境かどうかを判断
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>📚 Official Astro documentation – Conditional rendering
Pattern 2: Using environment variables
Combining environment variables with conditional rendering enables a more flexible implementation.
- Create a
.envfile:
# .env
PUBLIC_GA_ID=G-XXXXXXXXXX- Use environment variables in your layout file:
---
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>Pattern 3: Using 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>Pattern 4: Using the astro-google-analytics package
Astro provides the astro-google-analytics package for easily integrating GA.
- Install the package:
npm install astro-google-analytics- In your layout file:
---
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>To write this even more simply:
---
import { GoogleAnalytics } from 'astro-google-analytics';
const isProd = import.meta.env.PROD;
---
<html>
<head>
{isProd && <GoogleAnalytics id="G-XXXXXXXXXX" />}
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>Sharing across multiple layouts
Creating a shared Analytics component allows you to reuse it across multiple layouts.
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 it into each layout:
---
import AnalyticsComponent from '../components/AnalyticsComponent.astro';
---
<html>
<head>
<AnalyticsComponent />
</head>
<body>
<!-- サイトコンテンツ -->
</body>
</html>How to configure environment variables
In Astro, define environment variables in your .env file:
# .env
PUBLIC_GA_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXXXX⚠️ Environment variables prefixed with
PUBLIC_can also be read on the client side, so make sure not to include any secrets.
📚 Official Astro documentation – Using environment variables
Changing values between production and development
Using files like .env.development or .env.production allows you to set configurations per environment:
# .env.development
PUBLIC_GA_ID=G-DEVELOPMENT# .env.production
PUBLIC_GA_ID=G-PRODUCTIONThese take precedence over .env.
Conclusion
In Astro, leveraging import.meta.env.PROD lets you manage production and development environments distinctly. Combining conditional rendering with environment variables gives you flexible control over embedding GA/GTM tags.
Astro accommodates everything from simple implementations to complex architectures. Choose the approach that best fits your project.
Related articles
- [Astro] Add a sitemap for SEO! Setup instructions and key points explained — How to configure sitemaps alongside GA4
