).
Step 3: Add a cookie consent banner
In the EU and UK, GA4 requires user consent before it loads. You must implement a consent banner.
Option 1: Use a consent management platform (CMP). Tools like Cookiebot, Termly, or Osano handle the banner, consent storage, and GA4 integration. They cost $10–$50/month.
Option 2: Build your own banner. A simple HTML + CSS + JavaScript banner that asks for consent, stores the choice in localStorage, and conditionally loads GA4. This is complex to get right — consent management is a legal field, not a technical one.
Option 3: Do not use GA4 in the EU. If you are not required to use GA4, the simplest path is to use Plausible or Umami, which do not require a consent banner.
For most Dax Pro users, option 3 is the right answer.
Step 4: Rebuild and deploy
Same as Plausible: rebuild, commit, push.
Step 5: Verify
1. Visit your site
2. In GA4, click Reports → Realtime
3. Confirm your visit appears within 30 seconds
Note: GA4 has a data processing delay. Some reports (sessions, users, pageviews) take 24–48 hours to populate. Realtime shows only recent visits.
Where to Place the Script
Placement affects performance and reliability.
Plausible, Umami
Place at the end of
<body>
<!-- page content -->
<script src="/js/main.js" defer></script>
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
</body>
Why: the script uses defer, which loads it in parallel with the page without blocking rendering. Placing it at the end of
Google Analytics 4
Place in
<head>
<!-- meta tags -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ABC123DEF4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ABC123DEF4');
</script>
</head>
Why: GA4 documentation recommends head placement. The script uses async, which loads it without blocking rendering.
Avoid placing analytics in
Do not place analytics scripts at the top of defer or async, the browser downloads the script as part of the critical path.
Always use defer or async. A synchronous analytics script blocks rendering and drops Lighthouse scores.
Custom Events
Analytics tools can track specific user actions: a button click, a form submission, a scroll to a specific section. This tells you whether visitors engage, not just whether they arrive.
Plausible custom events
Syntax in HTML:
<button onclick="plausible('CTA Click')">Buy Now</button>
Or via JavaScript:
plausible('CTA Click', { props: { section: 'pricing' } });
Viewing events in Plausible: the dashboard shows custom events separately from pageviews.
Common events:
CTA Click — a call-to-action button was clicked
Form Submit — a contact form was submitted
Signup — a signup link was clicked
Download — a file download was initiated
External Link — a link to another domain was clicked
Umami custom events
Syntax in HTML:
<button data-umami-event="CTA Click">Buy Now</button>
Or via JavaScript:
umami.track('CTA Click', { section: 'pricing' });
Viewing events in Umami: events appear in the dashboard under "Events."
GA4 custom events
Syntax in JavaScript:
gtag('event', 'cta_click', {
'section': 'pricing',
'value': 199
});
Viewing events in GA4: custom events appear in the "Events" report and can be configured as conversions.
Where to add event tracking in Dax Pro
The contact form in templates/partials/contact/box.dax is a natural place for event tracking. Add a plausible('Form Submit') call when the form is submitted successfully. Similarly, the pricing buttons are CTAs — add events when they are clicked.
But do not over-instrument. Every event you add is another thing to maintain. Choose three to five events that measure your most important conversions, and track only those.
Privacy Compliance
Analytics involves personal data. Depending on where your visitors are, you may be required to comply with:
GDPR (EU) — requires lawful basis for processing personal data, disclosure, and often explicit consent
CCPA (California) — requires disclosure, opt-out, and no sale of personal data
LGPD (Brazil) — similar to GDPR
PIPEDA (Canada) — similar to GDPR
Which tools are GDPR-safe
| Tool |
GDPR compliant without consent? |
| Plausible |
Usually yes — cookieless, no personal data |
| Umami |
Usually yes — cookieless, no personal data |
| Google Analytics |
No — requires consent + data processing agreement |
| Facebook Pixel |
No — requires consent + DPA |
| Any tool that sets cookies |
No — requires consent |
"Usually yes" means the tool is designed to avoid personal data processing, and most EU data protection authorities accept this. But the legal interpretation varies by jurisdiction, and the landscape changes.
If you are in the EU/UK and want zero legal risk: use Plausible or Umami, add a short privacy notice explaining that analytics is used without cookies, and do not display a consent banner.
If you use Google Analytics in the EU: you must implement a consent banner, obtain explicit opt-in before GA4 loads, and sign a Data Processing Agreement with Google. This is not optional. Fines for non-compliance can be substantial.
Adding a privacy notice
Update content/privacy.md to explain your analytics setup. Include:
1. What tool you use — "This site uses Plausible Analytics"
2. What data it collects — "Plausible records pageviews, referrer, and browser type. It does not use cookies or collect personal data."
3. Where data is stored — "Data is stored in the EU" (for Plausible) or "Data is stored on our own servers" (for self-hosted)
4. How visitors can opt out — "Visitors can opt out by using browser extensions like Plausible's official opt-out" or "Visitors can contact us to request data deletion"
Example privacy note for Plausible:
## Analytics
This site uses Plausible Analytics, a privacy-focused analytics tool. Plausible does not use cookies, does not collect personal data, and does not track visitors across sites. It records pageviews, referrer, browser type, and country. All data is aggregated and stored in the EU.
Plausible does not require a cookie consent banner. Visitors who wish to opt out can use Plausible's opt-out extension.
This satisfies most GDPR requirements for analytics without requiring a consent banner.
Verifying Analytics Works
After installing, verify:
Plausible
1. Open your site in a browser
2. Visit 2–3 pages
3. Open the Plausible dashboard
4. Click Realtime in the sidebar
5. Your visit appears within 30 seconds
6. Check the Top Pages report after a day — the pages you visited appear
Umami
1. Open your site
2. Visit 2–3 pages
3. Open the Umami dashboard
4. Click Realtime in the top menu
5. Your visit appears within a minute
Google Analytics 4
1. Open your site
2. Visit 2–3 pages
3. Open GA4
4. Click Reports → Realtime
5. Your visit appears within 30 seconds
Lighthouse
After adding analytics, run Lighthouse:
1. Open Chrome DevTools (F12)
2. Click Lighthouse tab
3. Click Analyze page load
4. Check the Performance score
Plausible and Umami: Lighthouse stays at 95–100. The scripts are tiny and deferred.
Google Analytics 4: Lighthouse drops to 90–95. The GA4 script is 45 KB and adds two network requests.
If Lighthouse drops below 90, check whether the analytics script is async or defer. A synchronous script blocks rendering. Also check whether the script is placed in
Common Analytics Mistakes
Mistake 1: Installing analytics before launch.
Analytics records data from the moment it is live. If you install it before finalizing the site, you collect "data" from your own testing. Install after launch.
Mistake 2: Using a different domain in the script than in the dashboard.
The script has data-domain="yourdomain.com". If the dashboard is set up for www.yourdomain.com, the data does not flow. Match exactly.
Mistake 3: Not excluding your own visits.
Your own visits count as "visitors." Plausible and Umami have options to exclude your IP or add a self-exclusion cookie. Configure this after installing, so your data is not polluted by testing.
Mistake 4: Installing a tool that requires consent without a banner.
If you install Google Analytics in the EU without a consent banner, you are non-compliant. Use Plausible/Umami or implement a consent banner.
Mistake 5: Placing the script synchronously.
A script without async or defer blocks rendering. The page's first paint is delayed. Always use async or defer.
Mistake 6: Placing Plausible/Umami in
They should be at the end of
Mistake 7: Placing GA4 at the end of
GA4 should be in async). Placing it at the bottom means it may not fire on fast navigation.
Mistake 8: Not testing after adding the script.
A typo in the domain or script URL means no data. Always verify with Realtime after installing.
Mistake 9: Overloading the site with multiple analytics tools.
Running Plausible + Umami + GA4 at the same time triples the script weight and sends data to three services. Choose one.
Mistake 10: Not disclosing analytics in the privacy policy.
If you collect any data (even cookieless), most privacy regulations require disclosure. Update content/privacy.md.
Mistake 11: Using analytics to track individual users.
Analytics is for aggregate patterns, not individual surveillance. Do not try to identify specific visitors, even with tools that allow it. It is a privacy violation and, in many jurisdictions, illegal.
Mistake 12: Ignoring the data.
Installing analytics and never looking at the dashboard is worse than not installing it. Check the dashboard weekly. Use the data to inform content decisions. If you are not going to look at it, do not install it.
What You Have Now
After this chapter, you can:
✅ Decide whether analytics is worth the overhead for your site
✅ Choose between Plausible, Umami, and Google Analytics
✅ Install Plausible on Dax Pro without breaking Lighthouse
✅ Self-host Umami if you prefer full control
✅ Install Google Analytics responsibly with consent management
✅ Place analytics scripts for optimal performance
✅ Track custom events for important conversions
✅ Understand GDPR compliance and privacy disclosures
✅ Verify analytics is working
✅ Fix the twelve most common analytics mistakes
Analytics is a tool for understanding your audience. It is optional. If you install it, install it responsibly — with privacy in mind, with performance in mind, and with the intent to actually use the data.
The next chapter is Decap CMS — the full editor reference: login, media library, editorial workflow, publishing, history, and how to manage editors and their access.
→ Continue to Decap CMS