Proxy (Prevenire Blocchi Pubblicitari)

Metricalp è uno strumento di analisi focalizzato sulla privacy. Ci prendiamo cura di te e della privacy dei tuoi clienti. Pertanto, diamo alle persone il diritto di escludersi dal tracciamento di Metricalp (Consulta Permetti localhost & Escludimi per maggiori informazioni). Sebbene non raccogliamo dati personalizzati e non utilizziamo nemmeno i cookie, siamo completamente legittimi e rispettosi della privacy. Tuttavia, alcuni blocchi pubblicitari possono bloccare Metricalp automaticamente perché bloccano qualsiasi sistema di eventi in automatico. Per questo motivo, ti offriamo un sistema di proxy per evitare questo problema. Puoi utilizzare questo sistema di proxy per prevenire i blocchi pubblicitari.

Devi fare proxy di 2 cose:

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

In pratica, creerai URL fittizi nel tuo dominio e li reindirizzerai a questi indirizzi. Questa strategia è il proxy. Per esempio:

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

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

Tutti gli esempi qui sotto si baseranno su questi percorsi di URL fittizi. Naturalmente, il dominio proxy è completamente a tua scelta. Dovresti scegliere percorsi di sottodirectory difficili da bloccare automaticamente, come `https://yourdomain.com/asset/an/script-mtrc.js` e `https://yourdomain.com/api/an/mtrc-event`.

Mostreremo come puoi fare proxy dei domini per piattaforme specifiche qui sotto. Dopo aver fatto proxy di un dominio, dovrai cambiare lo script importato e l'endpoint con le nuove URL.

Se hai integrato come JavaScript Puro, sostituisci lo script incorporato (abbiamo aggiunto l'attributo data-custom-event-endpoint e sostituito l'attributo 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>

Se hai integrato con React o NextJS librerie:

React (Abbiamo aggiunto i props customScriptUrl e 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 (Abbiamo aggiunto i props customScriptUrl e 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="it">
              <body className={inter.className}>
                <MetricalpReactProvider customScriptUrl="https://yourdomain.com/metricalp.js" customEventEndpoint="https://yourdomain.com/event" allowLocalhost tid="YOUR_TID">
                    {children}
                </MetricalpReactProvider>
              </body>
            </html>
          );
        }

Controlla la loro documentazione se hai problemi con l'integrazione.

Proxying su piattaforme

Vercel

1. Crea un file di configurazione vercel.json nella root del tuo progetto

2. Aggiungi la configurazione rewrites:

javascript

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

3. Questo è tutto. Se hai anche aggiornato l'integrazione dello script come spiegato sopra, ora tutto dovrebbe essere a posto.

Nginx

1. Aggiorna il tuo file di configurazione NGINX come segue:

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. Questo è tutto. Se hai anche aggiornato l'integrazione dello script come spiegato sopra, ora tutto dovrebbe essere a posto.

NextJS

1. Aggiorna il file di configurazione next.config.js nella root del tuo progetto come segue:

javascript

        module.exports = {
          async rewrites() {
              return [
                  {
                      source: '/metricalp.js',
                      destination: 'https://cdn.metricalp.com/event/metricalp.js'
                  },
                  {
                      source: '/event', // O '/event/' se hai la configurazione trailingSlash: true
                      destination: 'https://event.metricalp.com'
                  }
              ];
          },
        }

2. Questo è tutto. Se hai anche aggiornato l'integrazione dello script come spiegato sopra, ora tutto dovrebbe essere a posto.

Apache

1. Abilita i moduli richiesti

  • proxy
  • proxy_http
  • ssl
  • proxy_wstunnel
  • proxy_balancer

2. Aggiorna il tuo file di configurazione

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. Questo è tutto. Se hai anche aggiornato l'integrazione dello script come spiegato sopra, ora tutto dovrebbe essere a posto.

Cloudflare

1. Devi aggiungere una nuova Regola di Reindirizzamento sotto Il tuo dominio - Regole - Regole di Reindirizzamento

2. Aggiungi 2 regole:

La prima è

Seleziona il percorso URI in entrata, il valore è: /metricalp.js

Quindi reindirizza a: https://cdn.metricalp.com/event/metricalp.js

La seconda è

Seleziona il percorso URI in entrata, il valore è: /event

Quindi reindirizza a: https://event.metricalp.com

3. Questo è tutto. Se hai anche aggiornato l'integrazione dello script come spiegato sopra, ora tutto dovrebbe essere a posto.