krotanote

Matomo Analytics CSP Troubleshooting

1x
Ready

Click anywhere in the title or content to start reading from that position, or use the controls below to play the entire post.

Gary J. Espitia S.
Created:
docs , troubleshooting
matomo , analytics , csp ...

Matomo Analytics CSP Troubleshooting

This guide helps resolve Content Security Policy (CSP) issues that block Matomo analytics tracking.

Problem: matomo.js blocked by CSP

If you see status (blocked:csp) in browser developer tools, your website’s CSP is blocking the Matomo script.

Solutions Implemented

1. CSP-Friendly Tracking Fallback

The theme automatically detects when standard Matomo tracking is blocked and falls back to:

  1. Fetch API tracking - Makes direct API calls to matomo.php
  2. Image pixel tracking - Ultimate fallback using a 1x1 pixel image

2. Updated CSP Headers

The _headers file configures Netlify to allow Matomo domains:

Content-Security-Policy: default-src 'self'; 
  script-src 'self' 'unsafe-inline' https://analytics.krotanote.xyz http://localhost:8080; 
  connect-src 'self' https://analytics.krotanote.xyz http://localhost:8080; 
  img-src 'self' data: https://analytics.krotanote.xyz http://localhost:8080;

3. Environment-Specific Configuration

  • Production: Uses https://analytics.krotanote.xyz/
  • Development: Uses http://localhost:8080/

Testing

  1. Check browser console for CSP warnings
  2. Verify tracking requests in Network tab
  3. Monitor Matomo dashboard for incoming visits
  4. Test fallback tracking by temporarily blocking the script domain

Alternative: Self-Hosted Matomo

For complete CSP compliance, consider hosting Matomo on the same domain as your website using a subdirectory like /analytics/.