Proxy (Prevenir Bloqueadores de Anuncios)

Metricalp es una herramienta de análisis enfocada en la privacidad. Nos preocupamos por ti y por la privacidad de tus clientes. Por eso, damos a las personas el derecho de excluirse del seguimiento de Metricalp (Consulta Permitir localhost & Excluirme para más información). Aunque no recolectamos datos personalizados y ni siquiera usamos cookies, somos completamente legítimos y respetuosos de la privacidad. Sin embargo, algunos bloqueadores de anuncios pueden bloquear Metricalp automáticamente porque bloquean cualquier sistema de eventos automáticamente. Por ello, te proporcionamos un sistema de proxy para evitar este problema. Puedes usar este sistema de proxy para prevenir los bloqueadores de anuncios.

Necesitas hacer proxy de 2 cosas:

  • Script de Metricalp (https://cdn.metricalp.com/event/metricalp.js)
  • Endpoint de la API de Metricalp (https://event.metricalp.com)

Básicamente, crearás URLs ficticias en tu dominio y redirigirás a estas direcciones. Esta estrategia es el proxy. Por ejemplo:

https://yourdomain.com/metricalp.js => https://cdn.metricalp.com/event/metricalp.js

https://yourdomain.com/event => https://event.metricalp.com

Todos los ejemplos a continuación se basarán en estas rutas de URL ficticias. Pero, por supuesto, el dominio proxy es completamente tu decisión. Debes elegir rutas de subdirectorios difíciles de bloquear automáticamente, como `https://yourdomain.com/asset/an/script-mtrc.js` y `https://yourdomain.com/api/an/mtrc-event`.

A continuación, te mostraremos cómo puedes hacer proxy de dominios para plataformas específicas. Después de hacer proxy de un dominio, necesitas cambiar el script importado y el endpoint con las nuevas URLs.

Si integraste como JavaScript Puro, reemplaza el script incrustado (hemos añadido el atributo data-custom-event-endpoint y reemplazado el atributo src):

html
<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>

Si integraste con React o NextJS bibliotecas:

React (Hemos añadido los props customScriptUrl y customEventEndpoint):

tsx

        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 (Hemos añadido los props customScriptUrl y customEventEndpoint):

tsx

        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="es">
              <body className={inter.className}>
                <MetricalpReactProvider customScriptUrl="https://yourdomain.com/metricalp.js" customEventEndpoint="https://yourdomain.com/event" allowLocalhost tid="YOUR_TID">
                    {children}
                </MetricalpReactProvider>
              </body>
            </html>
          );
        }

Por favor, revisa su documentación si tienes problemas con la integración.

Proxying en plataformas

Vercel

1. Crea un archivo de configuración vercel.json en la raíz de tu proyecto

2. Añade la configuración de rewrites:

javascript

        {
          "rewrites": [
            {
              "source": "/metricalp.js",
              "destination": "https://cdn.metricalp.com/event/metricalp.js"
            },
            {
              "source": "/event",
              "destination": "https://event.metricalp.com"
            }
          ]
        }

3. Eso es todo. Si también has actualizado la integración del script como se explicó anteriormente, ahora todo debería estar bien.

Nginx

1. Actualiza tu archivo de configuración de NGINX como sigue:

yaml

        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. Eso es todo. Si también has actualizado la integración del script como se explicó anteriormente, ahora todo debería estar bien.

NextJS

1. Actualiza el archivo de configuración next.config.js en la raíz de tu proyecto como sigue:

javascript

        module.exports = {
          async rewrites() {
              return [
                  {
                      source: '/metricalp.js',
                      destination: 'https://cdn.metricalp.com/event/metricalp.js'
                  },
                  {
                      source: '/event', // O '/event/' si tienes la configuración trailingSlash: true
                      destination: 'https://event.metricalp.com'
                  }
              ];
          },
        }

2. Eso es todo. Si también has actualizado la integración del script como se explicó anteriormente, ahora todo debería estar bien.

Apache

1. Habilita los módulos requeridos

  • proxy
  • proxy_http
  • ssl
  • proxy_wstunnel
  • proxy_balancer

2. Actualiza tu archivo de configuración

yaml

<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. Eso es todo. Si también has actualizado la integración del script como se explicó anteriormente, ahora todo debería estar bien.

Cloudflare

1. Necesitas añadir una nueva Regla de Redirección bajo Tu dominio - Reglas - Reglas de Redirección

2. Añade 2 reglas:

La primera es

Selecciona la ruta URI en entrantes, el valor es: /metricalp.js

Luego redirige a: https://cdn.metricalp.com/event/metricalp.js

La segunda es

Selecciona la ruta URI en entrantes, el valor es: /event

Luego redirige a: https://event.metricalp.com

3. Eso es todo. Si también has actualizado la integración del script como se explicó anteriormente, ahora todo debería estar bien.