When integrating Matomo for web analytics, one common hurdle you might encounter is dealing with Cross-Origin Resource Sharing (CORS) issues. CORS is a security feature implemented by browsers to prevent malicious websites from making requests to a different domain than the one that served the web page. However, this can sometimes block legitimate requests, such as those from your Matomo tracking and dashboard URLs.
What is CORS?
Cross-Origin Resource Sharing (CORS) is a mechanism that allows web pages to make requests to a domain other than the one that served the web page. This is crucial for web applications that need to interact with resources hosted on different domains. By default, web browsers enforce the same-origin policy, which restricts web pages from making requests to a different domain for security reasons.
However, there are legitimate scenarios where cross-origin requests are necessary. For example, you might host your Matomo analytics on a different domain than your main website. To enable these legitimate cross-origin requests, you need to configure your web server to allow them through CORS.
Why Does Matomo Need CORS?
Matomo requires CORS to function correctly because it injects JavaScript tracking code into your web pages. This JavaScript code sends data back to your Matomo server, which may be hosted on a different domain. Without proper CORS configuration, these requests will be blocked by the browser, preventing Matomo from collecting analytics data.
In the case of Digitalist Matomo SaaS, for enhanced security, we use two separate domains: one for tracking and one for the dashboard. This separation ensures better security and management of your analytics data.
- Tracking Domain: This domain handles the data collection. For example, https://tracker.analytics.digitalist.com.
- Dashboard Domain: This domain is used for accessing the Matomo dashboard and managing your analytics. For example, https://dashboard.analytics.digitalist.com.
To ensure seamless tracking and proper functionality of the Matomo Tag Manager debugging, you need to add both the tracking and dashboard URLs to your web server's CORS rules.
Configuring CORS for Different Web Servers
1. Apache CORS example
To enable CORS in Apache, you need to modify your .htaccess file or your virtual host configuration file. Here’s how you can do it:
.htaccess Configuration:
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://tracker.analytics.digitalist.com https://dashboard.analytics.digitalist.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</IfModule>
Virtual Host Configuration:
<VirtualHost *:80>
ServerName your-website.com
<Directory /path/to/your/website>
Header set Access-Control-Allow-Origin "https://tracker.analytics.digitalist.com https://dashboard.analytics.digitalist.com"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</Directory>
</VirtualHost>
2. Nginx CORS example
For Nginx, you need to add the CORS headers in your server block configuration. Here’s an example:
server {
listen 80;
server_name your-website.com;
location / {
add_header 'Access-Control-Allow-Origin' 'https://tracker.analytics.digitalist.com https://dashboard.analytics.digitalist.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';
}
}
3. IIS CORS example
To configure CORS in IIS, you need to modify the web.config file. Here’s how you can do it:
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="https://tracker.analytics.digitalist.com https://dashboard.analytics.digitalist.com" />
<add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Testing Your Configuration
After updating your server configuration, it's essential to test if the CORS settings are correctly applied. You can use browser developer tools or online tools like CORS Test to verify that your server is allowing requests from your Matomo domains.
Conclusion
Configuring CORS correctly is crucial for the seamless operation of Matomo analytics. By adding the appropriate headers to your web server configuration, you can ensure that your Matomo tracking and dashboard work without any cross-origin issues. Whether you're using Apache, Nginx, or IIS, the steps outlined above should help you resolve any CORS-related problems efficiently.
If you have any questions or run into issues, feel free to leave a comment below or join our next webinar where we discuss advanced Matomo configurations with industry experts.