Proxy (Prevent Adblockers)
Metricalp is a privacy focused analytics too. We caring you and your customers' privacy. So, we are giving right to people about excluding from Metricalp tracking (See Allow localhost & Exclude me page for more information). While, we never collecting personalized data and we are not even using cookies, we are fully legit and privacy friendly. But although this, some adblockers may block Metricalp automatically because they are blocking every event system automatically. So, we are giving you a proxy system to prevent this issue. You can use this proxy system to prevent adblockers.
You need to proxy 2 things:
- Metricalp script (https://cdn.metricalp.com/event/metricalp.js)
- Metricalp API Endpoint (https://event.metricalp.com)
You will basically create dummy urls in your domain and redirect to these addresses. This strategy is the proxy. For example:
https://yourdomain.com/metricalp.js => https://cdn.metricalp.com/event/metricalp.js
https://yourdomain.com/event => https://event.metricalp.com
All below examples will be based on this dummy url paths. But of course proxied domain is totally up to you. You should choose a sub directoried hard to auto-block paths like `https://yourdomain.com/asset/an/script-mtrc.js` and `https://yourdomain.com/api/an/mtrc-event`
We will show how can you proxy domains below for specific platforms. After you proxy domain, you need to change your imported script and endpoint with new URLs.
If you integrated as Pure JavaScript then replace embedded script (we added data-custom-event-endpoint attribute and replaced src attribute):
<script src="https://yourdomain.com/metricalp.js" data-custom-event-endpoint="https://yourdomain.com/event" data-allow-localhost="true" data-tid="YOUR_TID" defer></script>If you integrated with React or NextJS libraries:
React (We added customScriptUrl and customEventEndpoint props):
import React from 'react';
import ReactDOM from 'react-dom/client';
import { MetricalpReactProvider } from '@metricalp/react';
import './index.css';
import { App } from './App.tsx';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<MetricalpReactProvider customScriptUrl="https://yourdomain.com/metricalp.js" customEventEndpoint="https://yourdomain.com/event" allowLocalhost tid="YOUR_TID">
<App />
</MetricalpReactProvider>
</React.StrictMode>
);NextJS (We added customScriptUrl and customEventEndpoint props):
import type { Metadata } from 'next';
import { MetricalpReactProvider } from '@metricalp/react';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<MetricalpReactProvider customScriptUrl="https://yourdomain.com/metricalp.js" customEventEndpoint="https://yourdomain.com/event" allowLocalhost tid="YOUR_TID">
{children}
</MetricalpReactProvider>
</body>
</html>
);
}Please check their documentations if you have problem with integration.
Proxying in platforms
Vercel
1. Create a vercel.json configuration file in root of your project
2. Add rewrites config:
{
"rewrites": [
{
"source": "/metricalp.js",
"destination": "https://cdn.metricalp.com/event/metricalp.js"
},
{
"source": "/event",
"destination": "https://event.metricalp.com"
}
]
}3. That's all. If you also updated script integration as explained above, everything should be OK now.
Nginx
1. Update your NGINX config file as:
server {
set $script_url https://cdn.metricalp.com/event/metricalp.js;
set $event_endpoint https://event.metricalp.com;
location = /metricalp.js {
proxy_pass $script_url;
proxy_set_header Host metricalp.com;
proxy_buffering on;
proxy_cache jscache;
proxy_cache_valid 200 6h;
proxy_cache_use_stale updating error timeout invalid_header http_500;
add_header X-Cache $upstream_cache_status;
}
location = /event {
proxy_pass $event_endpoint;
proxy_set_header Host metricalp.com;
proxy_buffering on;
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
}
}2. That's all. If you also updated script integration as explained above, everything should be OK now.
NextJS
1. Update next.config.js configuration file in the root of your project as:
module.exports = {
async rewrites() {
return [
{
source: '/metricalp.js',
destination: 'https://cdn.metricalp.com/event/metricalp.js'
},
{
source: '/event', // Or '/event/' if you have trailingSlash: true config
destination: 'https://event.metricalp.com'
}
];
},
}2. That's all. If you also updated script integration as explained above, everything should be OK now.
Apache
1. Enable required modules
- proxy
- proxy_http
- ssl
- proxy_wstunnel
- proxy_balancer
2. Update your configuration file
<VirtualHost *:80>
ServerName yourdomain.com
ProxyRequests off
ProxyPreserveHost off
SSLProxyEngine on
<Location /metricalp.js>
ProxyPass https://cdn.metricalp.com/event/metricalp.js
ProxyPassReverse https://cdn.metricalp.com/event/metricalp.js
</Location>
<Location /event>
ProxyPass https://event.metricalp.com
ProxyPassReverse https://event.metricalp.com
</Location>
</VirtualHost>3. That's all. If you also updated script integration as explained above, everything should be OK now.
Cloudflare
1. You need to add new Redirect Rule under the Your domain - Rules - Redirect Rules
2. Add 2 rules:
The first is
Select URI path in incoming, the value is: /metricalp.js
Then redirect to: https://cdn.metricalp.com/event/metricalp.js
The second is
Select URI path in incoming, the value is: /event
Then redirect to: https://event.metricalp.com
3. That's all. If you also updated script integration as explained above, everything should be OK now.