Shipping a site on a static HTML template is fast, lean, and low-maintenance — but without analytics you are flying blind. Google Analytics 4 (GA4) is the current standard for measuring traffic, user behaviour, and conversions, and adding it to a static HTML template takes less than ten minutes once you know the correct approach. This guide walks through every step: creating a GA4 property, placing the tracking snippet correctly, verifying data flow, and handling consent requirements — all with real code you can paste straight into your project.
Key Takeaways
- GA4 uses the Global Site Tag (gtag.js) loaded from Google’s CDN — no server-side configuration required on a static site.
- The tracking snippet must appear in the
<head>of every HTML page, or in a shared partial/layout file if your build tool supports one. - GA4’s DebugView and browser extensions let you confirm hits are firing before you go live.
- If you operate in the EU/UK, GA4 must be paired with a cookie consent mechanism before any measurement data is collected.
- Enhanced Measurement in GA4 tracks scrolls, outbound clicks, and file downloads automatically — no extra code needed.
Step 1 — Create a GA4 Property
Go to analytics.google.com and sign in. Click Admin (gear icon, bottom-left), then Create Property. Give the property a name (e.g., “My Static Site”), choose your reporting time zone and currency, then click Next. Select your industry category and business objectives, then click Create.
When prompted to choose a platform, select Web. Enter your domain and stream name, then click Create stream. Google will show you a Measurement ID in the format G-XXXXXXXXXX. Copy this — you need it in the next step.
Step 2 — Add the gtag.js Snippet to Your HTML
Google requires two script blocks inside <head>. The first loads the gtag library asynchronously; the second initialises it with your Measurement ID. Place them as high in <head> as possible — immediately after the opening tag is ideal — so the script loads before the rest of the page.
<!-- 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');
</script>
<!-- End Google Analytics 4 -->Replace both instances of G-XXXXXXXXXX with your real Measurement ID. On a multi-page static site, this block must appear in every .html file. If you use a static site generator, a template engine like Nunjucks or Handlebars, or a build pipeline, put the snippet in your shared base layout so it is injected automatically. The Canvas HTML Template ships with a global <head> partial that makes this trivial — edit one file and all pages inherit the change. For a detailed look at that workflow, see From Canvas Template to Live Site: A Complete Canvas Builder Workflow.
Step 3 — Verify That Tracking Is Working
Before pushing to production, confirm GA4 is receiving data using one of these three methods:
- GA4 DebugView — In your GA4 property, open Admin → DebugView. Install the Google Analytics Debugger Chrome extension, enable it, then load your page. Hits appear in DebugView within seconds.
- Realtime report — Open Reports → Realtime in GA4 and visit your page in a different browser tab. Your session should appear within 30 seconds.
- Network tab — Open DevTools (F12), go to the Network tab, and filter by
collect. You should see POST requests togoogle-analytics.com/g/collectas you navigate.
If no data appears, double-check that ad-blocking extensions are disabled in your test browser, that the Measurement ID matches exactly, and that the snippet is inside <head> rather than <body>.
Step 4 — Enable and Understand Enhanced Measurement
GA4’s Enhanced Measurement feature automatically tracks a set of interactions beyond basic page views — no additional code required. To confirm it is active, go to Admin → Data Streams → your stream → Enhanced Measurement. Toggle on the events you need:
- Scrolls — fires when a user scrolls 90 % of a page
- Outbound clicks — fires when a user clicks a link to an third-party domain
- Site search — fires when a URL contains a query parameter
- Video engagement — fires on embedded YouTube videos
- File downloads — fires on clicks to PDF, DOCX, XLSX, and similar file types
For most static marketing sites, enabling all of these costs nothing extra and provides immediate behavioural insight without writing a single custom event.
Step 5 — Track Custom Events With gtag()
Enhanced Measurement covers common interactions, but custom events let you measure actions specific to your business — button clicks, form submissions, video plays, or anything else. Use the gtag('event', ...) call directly in your HTML or JavaScript.
The example below fires a cta_click event when a user clicks a hero button:
<button
class="btn btn-primary"
onclick="gtag('event', 'cta_click', {
'event_category': 'Hero Section',
'event_label': 'Get Started Button',
'value': 1
})">
Get Started
</button>Alternatively, attach the listener in a separate .js file to keep your markup clean:
<script>
document.querySelectorAll('[data-ga-event]').forEach(function(el) {
el.addEventListener('click', function() {
gtag('event', el.dataset.gaEvent, {
'event_category': el.dataset.gaCategory || 'General',
'event_label': el.dataset.gaLabel || ''
});
});
});
</script>Then decorate any element with data attributes:
<a href="/pricing"
data-ga-event="nav_click"
data-ga-category="Navigation"
data-ga-label="Pricing Link">
Pricing
</a>This pattern scales across a large template without cluttering individual pages with inline JavaScript.
Step 6 — Handle Cookie Consent Before Collecting Data
In the EU, UK, and several other jurisdictions, GA4 counts as a tracking technology under ePrivacy and GDPR regulations. You must obtain informed consent before firing analytics events for users in those regions. The practical implementation involves two steps:
- Load the gtag snippet but deny all consent by default using GA4’s Consent Mode v2.
- Upgrade consent grants after the user accepts your cookie banner.
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
// Default: deny all before consent
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
'waitforupdate': 500
});
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>When the user clicks “Accept” on your consent banner, call:
<script>
gtag('consent', 'update', {
'analytics_storage': 'granted'
});
</script>For a complete guide to wiring up a banner on a static site — including storing consent in localStorage — see How to Add a Cookie Consent Banner to a Static HTML Site.
Step 7 — Pre-Launch Checklist
Before deploying your analytics-enabled static site, run through this checklist:
- Measurement ID is correct and consistent across all pages.
- Snippet is in
<head>, not<body>or below other blocking scripts. - Realtime report shows active users after a test visit.
- Custom events appear in DebugView with the correct parameters.
- Consent Mode default is set to
deniedif you serve EU/UK visitors. - Internal IP addresses are filtered under Admin → Data Filters → Internal Traffic.
- Your
robots.txtdoes not accidentally block Google’s collect endpoint.
If you have not yet chosen a hosting platform for your static site, How to Host a Bootstrap HTML Template for Free in 2026 covers the best zero-cost options including Netlify, Vercel, and GitHub Pages, all of which work seamlessly with GA4.
Frequently Asked Questions
Not necessarily. GTM adds flexibility for teams managing multiple tags without code deployments, but for a straightforward GA4 implementation on a static site the direct gtag.js snippet is simpler, has one fewer network dependency, and is fully supported by Google. Use GTM if you anticipate adding many third-party scripts or need non-developers to manage tag rules.
Not automatically. On a traditional static site with separate .html files, each page load fires a new pageview event. On a JavaScript-driven SPA, you must manually fire gtag('event', 'pageview', { page_path: window.location.pathname }) inside your router’s change handler to register virtual page views.
Create an Internal Traffic filter in GA4 under Admin → Data Filters. Define your IP address as an internal traffic source, then activate the filter. Note that GA4 data filters act on processed data — raw events are still collected, but filtered sessions are excluded from standard reports.
Yes. GA4 is entirely client-side JavaScript — it has no server-side requirements. As long as your HTML files contain the gtag.js snippet and your hosting platform serves them over HTTPS, analytics will work identically on GitHub Pages, Netlify, Vercel, or any other static host.
The Realtime report reflects hits within seconds. Standard reports such as Acquisition and Engagement typically show data with a 24 to 48 hour delay as GA4 processes and aggregates events. DebugView is the best tool for immediate validation during setup.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup — build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog