Install Google Analytics 4 on Site123

How to install GA4 on Site123 using code injection or Google Tag Manager for comprehensive website analytics.

Learn how to install Google Analytics 4 on your Site123 website using direct code injection or Google Tag Manager.

Installation Methods

Method	Difficulty	Customization	Recommended For
Direct Code Injection	Easy	Medium	Quick setup, basic tracking
Google Tag Manager	Medium	High	Most sites (recommended)

Method 1: Direct Code Injection (Easiest)

Install GA4 directly into Site123's code injection system.

Step 1: Get Your GA4 Measurement ID

Sign in to Google Analytics
Create GA4 Property (if you don't have one)
- Go to Admin → Create Property
- Enter property name
- Select timezone and currency
- Click Next → Create
Get Measurement ID
- Go to Admin → Data Streams
- Click your Web stream
- Copy Measurement ID (format: G-XXXXXXXXXX)

Step 2: Add GA4 to Site123

Log in to Site123 Dashboard
Navigate to Code Injection
- Click Manage (top menu)
- Go to Settings → Advanced Settings
- Select Code Injection or Custom Code

Add GA4 Code to Head Section

In the Head Code section, paste:

<!-- Google Analytics 4 -->
<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', {
    'send_page_view': true,
    'cookie_flags': 'SameSite=None;Secure'
  });
</script>

Replace G-XXXXXXXXXX with your actual Measurement ID.

Save Changes

Click Save or Update to apply the code to your website.

Step 3: Configure Enhanced Measurement

GA4's Enhanced Measurement automatically tracks additional events:

In GA4, go to Admin → Data Streams
Click your Web stream
Toggle Enhanced Measurement ON

This automatically tracks:

Page views
Scrolls (90%)
Outbound clicks
Site search
Video engagement
File downloads

Step 4: Verify Installation

Visit Your Live Site
- Open your Site123 website
- Navigate between a few pages
Check GA4 Realtime Report
- In GA4, go to Reports → Realtime
- You should see your visit within 30 seconds
Use GA4 DebugView
- Install Google Analytics Debugger Chrome extension
- Visit your site with extension enabled
- In GA4, go to Admin → DebugView
- See real-time events with full parameters

Method 2: Google Tag Manager (Recommended)

GTM provides better flexibility and easier management.

Step 1: Install GTM on Site123

See Install Google Tag Manager for complete GTM installation.

Quick setup:

Create GTM account and container
Copy GTM head and body snippets
Add to Site123's code injection (head and body sections)

Step 2: Create GA4 Configuration Tag

Once GTM is installed:

In GTM, go to Tags → New
Tag Configuration → Google Analytics: GA4 Configuration
Enter Measurement ID: G-XXXXXXXXXX
Configuration Settings (optional):
- Add custom parameters
- Set user properties
- Configure consent mode
Triggering: Select All Pages
Name: GA4 - Configuration Tag
Save

Step 3: Publish Container

Click Submit in GTM
Add version name: "Initial GA4 Setup"
Click Publish

Step 4: Test Installation

Use GTM Preview Mode
- Click Preview in GTM
- Enter your Site123 URL
- Navigate your site
- Verify GA4 tag fires on all pages
Check GA4 Realtime
- Go to GA4 Realtime report
- Confirm events appear

Advanced Configuration

User ID Tracking

If you have user accounts or memberships on your Site123 site:

gtag('config', 'G-XXXXXXXXXX', {
  'user_id': 'USER_ID_HERE'
});

Note: Only use anonymized or hashed user IDs, never personally identifiable information.

Custom Dimensions

Track Site123-specific data:

gtag('config', 'G-XXXXXXXXXX', {
  'custom_map': {
    'dimension1': 'page_type',
    'dimension2': 'site_language'
  }
});

// Set custom dimension values
gtag('event', 'page_view', {
  'page_type': 'blog_post',
  'site_language': 'en'
});

Site Search Tracking

If your Site123 site has search functionality:

// Track search queries
document.addEventListener('DOMContentLoaded', function() {
  // Find your search form (adjust selector as needed)
  const searchForm = document.querySelector('.s123-search-form');

  if (searchForm) {
    searchForm.addEventListener('submit', function(e) {
      const searchInput = this.querySelector('input[type="search"]');
      const searchTerm = searchInput.value;

      gtag('event', 'search', {
        'search_term': searchTerm
      });
    });
  }
});

Cross-Domain Tracking

If you have multiple domains (e.g., Site123 site + external checkout):

gtag('config', 'G-XXXXXXXXXX', {
  'linker': {
    'domains': ['yoursite.com', 'checkout.example.com']
  }
});

Multi-Language Sites

For Site123 sites with multiple languages:

// Detect and track current language
const currentLang = document.documentElement.lang || 'en';

gtag('config', 'G-XXXXXXXXXX', {
  'user_properties': {
    'language': currentLang
  }
});

Ecommerce Tracking (Site123 Store)

If you have Site123's ecommerce features enabled, see GA4 Event Tracking for complete ecommerce setup.

Basic purchase tracking on thank you page:

gtag('event', 'purchase', {
  'transaction_id': 'ORDER_ID',
  'value': 99.99,
  'currency': 'USD',
  'items': [{
    'item_id': 'SKU123',
    'item_name': 'Product Name',
    'price': 99.99,
    'quantity': 1
  }]
});

Note: Place this code on your order confirmation/thank you page using page-specific code injection.

Implement Google Consent Mode for EU visitors:

<!-- Load gtag.js with consent mode defaults -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Default consent to denied
  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'wait_for_update': 500
  });

  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

<!-- Update consent when user accepts -->
<script>
  function updateConsent() {
    gtag('consent', 'update', {
      'analytics_storage': 'granted'
    });
  }

  // Call this function when user accepts cookies
  document.addEventListener('cookieConsentGranted', updateConsent);
</script>

Verification Checklist

After installation, verify:

✓ GA4 script loads on all pages
✓ Page views appear in Realtime report
✓ Events tracked correctly in DebugView
✓ No JavaScript errors in browser console
✓ Enhanced Measurement events firing (scrolls, clicks, etc.)
✓ Mobile pages tracking correctly
✓ Multi-language pages tracking (if applicable)

Testing Tools

1. GA4 Realtime Report

Location: GA4 → Reports → Realtime
Shows: Active users and events within last 30 minutes
Use: Quick verification that tracking works

2. GA4 DebugView

Location: GA4 → Admin → DebugView
Shows: Detailed event data with all parameters
Use: Verify event structure and parameters

3. Google Analytics Debugger

Type: Chrome extension
Download: Chrome Web Store
Use: See GA4 requests in browser console

4. Browser Developer Tools

Open: F12 or right-click → Inspect
Check: Console for errors, Network for GA4 requests
Verify: window.dataLayer exists and contains events

Troubleshooting

GA4 Not Tracking

Symptoms: No data in Realtime report after 5+ minutes

Fixes:

Verify Measurement ID is correct (starts with G-)
Check code injection saved properly in Site123
Clear browser cache and test in incognito mode
Disable ad blockers for testing
Check browser console for JavaScript errors
Verify Site123 site is published (not in preview mode)

Duplicate Page Views

Cause: GA4 installed in multiple locations

Fix:

Check Site123 code injection areas (head, body, footer)
If using GTM, remove direct GA4 code injection
Keep only ONE GA4 implementation

Events Not Appearing in Reports

Cause: Events appear in Realtime but not in standard reports

Note: Standard reports in GA4 can take 24-48 hours to process data. Use Realtime and DebugView for immediate verification.

Mobile Tracking Issues

Symptoms: Desktop tracking works, mobile doesn't