Proxy (Adblocker Verhindern)

Metricalp ist ein datenschutzorientiertes Analysetool. Wir kümmern uns um Ihre und die Privatsphäre Ihrer Kunden. Daher geben wir den Nutzern das Recht, sich von der Metricalp-Verfolgung auszuschließen (Siehe Erlaube localhost & Schließe mich aus Seite für weitere Informationen). Obwohl wir niemals personenbezogene Daten sammeln und keine Cookies verwenden, sind wir völlig legitim und datenschutzfreundlich. Trotzdem können einige Adblocker Metricalp automatisch blockieren, weil sie jedes Ereignissystem automatisch blockieren. Daher bieten wir Ihnen ein Proxy-System, um dieses Problem zu vermeiden. Sie können dieses Proxy-System verwenden, um Adblocker zu verhindern.

Sie müssen 2 Dinge proxyen:

  • Metricalp-Skript (https://cdn.metricalp.com/event/metricalp.js)
  • Metricalp API-Endpunkt (https://event.metricalp.com)

Sie erstellen im Grunde Dummy-URLs in Ihrer Domain und leiten zu diesen Adressen um. Diese Strategie ist der Proxy. Zum Beispiel:

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

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

Alle unten stehenden Beispiele basieren auf diesen Dummy-URL-Pfaden. Der proxierte Domainname ist jedoch völlig Ihnen überlassen. Sie sollten ein schwer zu blockierendes Unterverzeichnis wie `https://yourdomain.com/asset/an/script-mtrc.js` und `https://yourdomain.com/api/an/mtrc-event` wählen.

Wir zeigen Ihnen, wie Sie Domains für bestimmte Plattformen proxyen können. Nachdem Sie die Domain proxyed haben, müssen Sie Ihr importiertes Skript und den Endpunkt durch die neuen URLs ersetzen.

Wenn Sie als Pure JavaScript integriert haben, ersetzen Sie das eingebettete Skript (wir haben das Attribut data-custom-event-endpoint hinzugefügt und das src-Attribut ersetzt):

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>

Wenn Sie mit React oder NextJS Bibliotheken integriert haben:

React (Wir haben customScriptUrl und customEventEndpoint Props hinzugefügt):

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 (Wir haben customScriptUrl und customEventEndpoint Props hinzugefügt):

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

Bitte überprüfen Sie deren Dokumentationen, falls Sie Probleme mit der Integration haben.

Proxying auf Plattformen

Vercel

1. Erstellen Sie eine vercel.json Konfigurationsdatei im Root Ihres Projekts

2. Fügen Sie die Rewrites-Konfiguration hinzu:

javascript

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

3. Das war's. Wenn Sie auch die Skriptintegration wie oben erklärt aktualisiert haben, sollte jetzt alles in Ordnung sein.

Nginx

1. Aktualisieren Sie Ihre NGINX-Konfigurationsdatei wie folgt:

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. Das war's. Wenn Sie auch die Skriptintegration wie oben erklärt aktualisiert haben, sollte jetzt alles in Ordnung sein.

NextJS

1. Aktualisieren Sie die next.config.js Konfigurationsdatei im Root Ihres Projekts wie folgt:

javascript

        module.exports = {
          async rewrites() {
              return [
                  {
                      source: '/metricalp.js',
                      destination: 'https://cdn.metricalp.com/event/metricalp.js'
                  },
                  {
                      source: '/event', // Oder '/event/' wenn Sie die trailingSlash: true Konfiguration haben
                      destination: 'https://event.metricalp.com'
                  }
              ];
          },
        }

2. Das war's. Wenn Sie auch die Skriptintegration wie oben erklärt aktualisiert haben, sollte jetzt alles in Ordnung sein.

Apache

1. Aktivieren Sie die erforderlichen Module

  • proxy
  • proxy_http
  • ssl
  • proxy_wstunnel
  • proxy_balancer

2. Aktualisieren Sie Ihre Konfigurationsdatei

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. Das war's. Wenn Sie auch die Skriptintegration wie oben erklärt aktualisiert haben, sollte jetzt alles in Ordnung sein.

Cloudflare

1. Sie müssen eine neue Weiterleitungsregel unter Ihrem Domain - Regeln - Weiterleitungsregeln hinzufügen

2. Fügen Sie 2 Regeln hinzu:

Die erste ist

Wählen Sie URI-Pfad im Eingehenden aus, der Wert ist: /metricalp.js

Dann weiterleiten zu: https://cdn.metricalp.com/event/metricalp.js

Die zweite ist

Wählen Sie URI-Pfad im Eingehenden aus, der Wert ist: /event

Dann weiterleiten zu: https://event.metricalp.com

3. Das war's. Wenn Sie auch die Skriptintegration wie oben erklärt aktualisiert haben, sollte jetzt alles in Ordnung sein.