How to Add Google Analytics 4 to Blogger | OpsBlu Docs

How to Add Google Analytics 4 to Blogger

Install and configure GA4 on Blogger — built-in integration and manual gtag.js installation, Enhanced Measurement setup, and verification steps.

For general GA4 concepts, see Google Analytics Platform Overview

Prerequisites

  • A Google Analytics 4 property created at analytics.google.com
  • Your GA4 Measurement ID (format: G-XXXXXXXXXX, found in Admin → Data Streams → your stream)
  • Admin access to your Blogger site

Installation

Blogger-Specific Setup

Go to Blogger Dashboard → Settings → Insert HTML in head/footer (or Theme → Edit HTML). Paste the gtag.js snippet before </head>. Blogger also has a built-in Google Analytics widget (Layout → Add Gadget → Google Analytics), but it only accepts UA IDs — for GA4, use the manual method.

gtag.js Code

If installing manually, add this to your site's <head> section:

<!-- Google tag (gtag.js) -->
<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>

Replace G-XXXXXXXXXX with your actual Measurement ID.

Alternative: Install via GTM

If you've already installed GTM on Blogger, add GA4 as a GTM tag instead of using gtag.js directly:

  1. In GTM → Tags → New → Google Analytics: GA4 Configuration
  2. Enter your Measurement ID
  3. Set trigger to All Pages
  4. Preview → Test → Publish

GTM vs gtag.js: GTM adds a management layer — you can update GA4 configuration, add events, and manage consent without touching site code. For simple setups (just GA4), direct gtag.js is fine. If you also need Meta Pixel, GTM, or other tags, use GTM.

Enhanced Measurement

GA4's Enhanced Measurement automatically tracks common events without code changes:

Event What It Tracks Enabled by Default
Page views Every page load and client-side navigation Yes
Scrolls When user scrolls past 90% of page height Yes
Outbound clicks Clicks to external domains Yes
Site search Search queries (reads URL parameters like ?q= or ?search=) Yes
Video engagement YouTube embedded video play, progress, complete Yes
File downloads Clicks on links to files (PDF, XLSX, DOCX, etc.) Yes
Form interactions Form start and submit (if enabled) No

Enable/disable in GA4 Admin → Data Streams → your stream → Enhanced Measurement (gear icon).

Verification

After installation, verify GA4 is collecting data:

  1. Realtime Report — In GA4, go to Reports → Realtime. Visit your site in another tab — you should see yourself as an active user within 30 seconds.
  2. Google Tag Assistant — Go to tagassistant.google.com, enter your site URL, and click Connect. The assistant shows which Google tags fire and whether they're configured correctly.
  3. Browser Console — Open DevTools (F12) and run:
    console.log('dataLayer:', window.dataLayer);
console.log('gtag:', typeof gtag === 'function' ? 'Loaded' : 'NOT loaded');
  4. Network Tab — Filter for google-analytics.com/g/collect to see GA4 event hits leaving the browser.

Common Verification Issues

  • No data in Realtime — Check for ad blockers (test in incognito with extensions disabled), verify Measurement ID is correct, ensure the page you're viewing actually has the tracking code.
  • Tag fires but no data — Check that your GA4 property and data stream match. A common mistake is using a UA ID (UA-XXXXXXX) instead of GA4 (G-XXXXXXXXXX).
  • Duplicate events — If you see double page views, you may have both gtag.js and GTM firing GA4 tags. Use one method, not both.

Next Steps

Back to top