Google Analytics Setup

Use this guide when setting up Google Analytics for a new Kateb Tech client website.

1. Open Google Analytics Admin

Sign in to Google Analytics and select Admin from the bottom-left navigation.

2. Create a property

Select Create, then choose Property.

Enter the website or business details.

Recommended configuration:

• Property name: Client or website name
• Reporting time zone: Australia
• Currency: Australian Dollar (AUD)

Select Next to continue.

3. Create a web data stream

Choose Web as the platform.

Enter:

• Website URL
• Stream name

For example:

Website URL:
https://example.com.au

Stream name:
Example Business Website

Select Create stream.

4. Copy the Measurement ID

After creating the web stream, Google Analytics will provide a Measurement ID.

It normally follows this format:

G-XXXXXXXXXX

Copy the Measurement ID.

5. Add the environment variable

Add the Measurement ID to the project's environment variables:

GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

For local development, add it to the appropriate local environment file.

For production, also add the same variable to the project's Vercel environment variables.

6. Expose the Analytics configuration

Kateb Tech websites can read the Analytics ID from the server environment configuration.

export const serverEnv = {
  googleAnalyticsId: process.env.GOOGLE_ANALYTICS_ID,
};

Google Analytics is treated as optional so that the website can still run when Analytics has not yet been configured.

7. Load Google Analytics

Import the Google Analytics component provided by Next.js:

import { GoogleAnalytics } from "@next/third-parties/google";

Then conditionally load it from the root layout:

{serverEnv.googleAnalyticsId ? (
  <GoogleAnalytics gaId={serverEnv.googleAnalyticsId} />
) : null}

This ensures Google Analytics is only added when GOOGLE_ANALYTICS_ID has been configured.

8. Deploy the website

After configuring the Measurement ID:

1. Add GOOGLE_ANALYTICS_ID to Vercel.
2. Redeploy the website.
3. Open the production website in a browser.

9. Verify Analytics

Return to Google Analytics and open the Realtime report.

Visit the production website in another browser tab.

Confirm that the active visit appears in Google Analytics.

Final checks

• Google Analytics property created
• Correct reporting time zone selected
• Correct currency selected
• Web data stream created
• Production domain entered correctly
• Measurement ID copied
• GOOGLE_ANALYTICS_ID added locally
• GOOGLE_ANALYTICS_ID added to Vercel
• Website redeployed
• Realtime traffic verified

Build troubleshooting

If this page fails during the docs build, first check the MDX frontmatter delimiters. The metadata block must open and close with ---; a longer hyphen divider is parsed as invalid frontmatter and can stop the build before the page content is compiled.