Proxy (Éviter les Bloqueurs de Publicité)

Metricalp est un outil d'analyse axé sur la confidentialité. Nous nous soucions de vous et de la vie privée de vos clients. Par conséquent, nous donnons aux personnes le droit de s'exclure du suivi Metricalp (Consultez Autoriser localhost & Exclure moi pour plus d'informations). Bien que nous ne collections jamais de données personnalisées et que nous n'utilisions même pas de cookies, nous sommes entièrement légitimes et respectueux de la vie privée. Cependant, certains bloqueurs de publicité peuvent bloquer Metricalp automatiquement car ils bloquent automatiquement tout système d'événements. C'est pourquoi nous vous proposons un système de proxy pour éviter ce problème. Vous pouvez utiliser ce système de proxy pour éviter les bloqueurs de publicité.

Vous devez faire un proxy pour 2 choses :

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

Vous créerez essentiellement des URLs fictives dans votre domaine et les redirigerez vers ces adresses. Cette stratégie est le proxy. Par exemple :

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

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

Tous les exemples ci-dessous seront basés sur ces chemins d'URL fictifs. Bien sûr, le domaine proxy est entièrement à votre discrétion. Vous devriez choisir des chemins de sous-répertoires difficiles à bloquer automatiquement, tels que `https://yourdomain.com/asset/an/script-mtrc.js` et `https://yourdomain.com/api/an/mtrc-event`.

Nous allons vous montrer comment vous pouvez faire des proxys pour des domaines spécifiques ci-dessous. Après avoir créé un proxy pour un domaine, vous devrez remplacer le script importé et l'endpoint par les nouvelles URLs.

Si vous avez intégré comme JavaScript Pur, remplacez le script intégré (nous avons ajouté l'attribut data-custom-event-endpoint et remplacé l'attribut 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 vous avez intégré avec React ou NextJS bibliothèques :

React (Nous avons ajouté les props customScriptUrl et 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 (Nous avons ajouté les props customScriptUrl et 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="fr">
              <body className={inter.className}>
                <MetricalpReactProvider customScriptUrl="https://yourdomain.com/metricalp.js" customEventEndpoint="https://yourdomain.com/event" allowLocalhost tid="YOUR_TID">
                    {children}
                </MetricalpReactProvider>
              </body>
            </html>
          );
        }

Veuillez consulter leur documentation si vous avez des problèmes d'intégration.

Proxying sur les plateformes

Vercel

1. Créez un fichier de configuration vercel.json à la racine de votre projet

2. Ajoutez la configuration de réécriture :

javascript

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

3. C'est tout. Si vous avez également mis à jour l'intégration du script comme expliqué ci-dessus, tout devrait maintenant être correct.

Nginx

1. Mettez à jour votre fichier de configuration NGINX comme suit :

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. C'est tout. Si vous avez également mis à jour l'intégration du script comme expliqué ci-dessus, tout devrait maintenant être correct.

NextJS

1. Mettez à jour le fichier de configuration next.config.js à la racine de votre projet comme suit :

javascript

        module.exports = {
          async rewrites() {
              return [
                  {
                      source: '/metricalp.js',
                      destination: 'https://cdn.metricalp.com/event/metricalp.js'
                  },
                  {
                      source: '/event', // Ou '/event/' si vous avez une configuration trailingSlash: true
                      destination: 'https://event.metricalp.com'
                  }
              ];
          },
        }

2. C'est tout. Si vous avez également mis à jour l'intégration du script comme expliqué ci-dessus, tout devrait maintenant être correct.

Apache

1. Activez les modules requis

  • proxy
  • proxy_http
  • ssl
  • proxy_wstunnel
  • proxy_balancer

2. Mettez à jour votre fichier de configuration

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. C'est tout. Si vous avez également mis à jour l'intégration du script comme expliqué ci-dessus, tout devrait maintenant être correct.

Cloudflare

1. Vous devez ajouter une nouvelle Règle de Redirection sous Votre domaine - Règles - Règles de Redirection

2. Ajoutez 2 règles :

La première est

Sélectionnez le chemin URI dans les entrantes, la valeur est : /metricalp.js

Puis redirigez vers : https://cdn.metricalp.com/event/metricalp.js

La deuxième est

Sélectionnez le chemin URI dans les entrantes, la valeur est : /event

Puis redirigez vers : https://event.metricalp.com

3. C'est tout. Si vous avez également mis à jour l'intégration du script comme expliqué ci-dessus, tout devrait maintenant être correct.