Plattform-Anleitungen

Der MetriXs-Tracker ist ein einzelnes <script>-Tag, das in den <head> Ihrer Website gehoert. Auf jeder Plattform ist das Snippet dasselbe, aber wo Sie es platzieren, unterscheidet sich.

Hier ist Ihr Snippet. Ersetzen Sie yourdomain.com durch die Domain, die Sie in MetriXs registriert haben.

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

Tipp: Kopieren Sie immer das genaue Snippet aus Ihrem MetriXs-Dashboard statt des allgemeinen Snippets oben — es enthält den Verifizierungsschlüssel Ihrer Website (&k=...), mit dem MetriXs Ihre Website verifiziert.

Next.js

Im App Router (empfohlen) fuegen Sie das Skript zu Ihrem Root-Layout hinzu, sodass es auf jeder Seite geladen wird. Oeffnen Sie app/layout.tsx (oder app/layout.jsx) und fuegen Sie das Snippet in den <head> mit next/script ein:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-domain="yourdomain.com"
          src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Mit strategy="afterInteractive" laedt der Tracker direkt, nachdem die Seite interaktiv wird, was Ihren anfaenglichen Laden schnell haelt und Pageviews bei clientseitigen Routenwechseln automatisch erfasst.

Wenn Sie den aelteren Pages Router verwenden, fuegen Sie dasselbe <Script>-Tag zu pages/_app.tsx hinzu.

React

Fuer React-Apps, die mit Vite oder Create React App erstellt wurden, fuegen Sie das Snippet zu Ihrer index.html-Datei im public/-Verzeichnis hinzu. Dies ist der einfachste Ansatz und funktioniert fuer alle Single-Page-React-Setups.

Oeffnen Sie public/index.html (oder index.html im Projekt-Root fuer Vite) und fuegen Sie das Snippet in den <head>-Tag ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Der Tracker klinkt sich in die History-API ein, sodass clientseitige Routenwechsel in React Router automatisch verfolgt werden.

Vue

Fuer Vue-Apps fuegen Sie das Snippet zu Ihrer index.html-Datei hinzu (im Projekt-Root oder im public/-Verzeichnis je nach Setup).

Oeffnen Sie index.html und fuegen Sie das Snippet in den <head>-Tag ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Der Tracker verwendet die History API, sodass Vue Router-Navigation automatisch ohne zusaetzliche Konfiguration verfolgt wird.

Angular

Fuer Angular fuegen Sie das Snippet zu Ihrer index.html-Datei im src/-Verzeichnis hinzu.

Oeffnen Sie src/index.html und fuegen Sie das Snippet in den <head>-Tag ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Der Tracker klinkt sich in die History API ein, sodass Angular Router-Navigation automatisch verfolgt wird.

SvelteKit

Fuer SvelteKit fuegen Sie das Snippet zu src/app.html hinzu, der HTML-Vorlage, die jede Seite umschliesst.

Oeffnen Sie src/app.html und fuegen Sie das Snippet in den <head>-Tag ein:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Astro

Fuer Astro fuegen Sie das Snippet zu Ihrer Basis-Layout-Komponente hinzu. Die meisten Astro-Projekte haben eine src/layouts/BaseLayout.astro oder aehnliche Datei.

Oeffnen Sie Ihre Layout-Datei und fuegen Sie das Snippet in den <head> ein:

---
const { title } = Astro.props
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Wenn Sie mehrere Layouts haben, fuegen Sie es zu jedem hinzu, oder erstellen Sie eine gemeinsame <head>-Komponente, die Sie ueberall importieren.

Gatsby

Fuer Gatsby verwenden Sie die eingebaute Script-Komponente in Ihrem Root-Layout. Gatsby empfiehlt dies ueber das Bearbeiten von gatsby-ssr.js fuer Performance.

Oeffnen Sie src/pages/index.tsx (oder eine beliebige Seiten-Datei) und fuegen Sie die Gatsby Script-Komponente hinzu. Fuer Website-weites Tracking fuegen Sie es zu Ihrer Layout-Komponente hinzu:

import { Script } from 'gatsby'

// Inside your layout component's return:
<Script
  defer
  data-domain="yourdomain.com"
  src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
  strategy="idle"
/>

Alternativ koennen Sie das rohe Snippet zu gatsby-ssr.js hinzufuegen:

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="metrixs"
      defer
      data-domain="yourdomain.com"
      src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
    />,
  ])
}

WordPress

Der einfachste Weg ist das offizielle MetriXs Analytics-Plugin (siehe die WordPress-Plugin-Anleitung fuer die vollstaendige Schritt-fuer-Schritt-Anleitung): Es fuegt den Tracker auf jeder Seite ein, verifiziert Ihre Seite automatisch und kann WooCommerce-Umsaetze serverseitig erfassen.

Installieren und aktivieren Sie das MetriXs Analytics-Plugin in WordPress
Erstellen Sie ein kostenloses Konto auf app.metrixs.eu und fuegen Sie Ihre Seite hinzu
Erstellen Sie einen Site-API-Key im Dashboard (Settings → Sites → API keys) und kopieren Sie ihn
Gehen Sie in WordPress zu Settings → MetriXs Analytics, fuegen Sie den Key ein und speichern Sie
Klicken Sie auf Connect & verify site. Fertig

Lieber ohne Plugin? Es gibt zwei Moeglichkeiten, den Tracker manuell hinzuzufuegen. Beide erfordern ein Child-Theme, damit der Tracker Theme-Updates uebersteht.

Option A: Ueber functions.php (empfohlen)

Oeffnen Sie die functions.php Ihres Child-Themes und fuegen Sie hinzu:

add_action('wp_head', function () {
    ?>
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
    <?php
});

Dies klinkt sich in wp_head ein, das innerhalb des <head>-Tags jeder Seite ausgefuehrt wird.

Option B: Ueber ein Plugin

Installieren Sie das “WPCode”- oder “Insert Headers and Footers”-Plugin und fuegen Sie das Snippet in den “Header”-Abschnitt ein. Dies ist einfacher, wenn Sie keine Theme-Dateien bearbeiten moechten.

PrestaShop

Der einfachste Weg ist das offizielle MX Cookieless Analytics-Modul (die vollständige Schritt-für-Schritt-Anleitung finden Sie im PrestaShop-Modul-Guide): es setzt den Tracker auf jede Seite, verifiziert Ihren Shop automatisch und sendet order_completed-Events serverseitig — dadurch werden Redirect-Zahlmethoden wie iDEAL oder Carte Bancaire zuverlässig erfasst.

Laden Sie das Modul-ZIP von den GitHub-Releases
Gehen Sie im Backoffice zu Module → Module-Manager → Modul hochladen
Erstellen Sie ein kostenloses Konto auf app.metrixs.eu, legen Sie Ihren Shop an und erstellen Sie einen Site-API-Key (Einstellungen → Websites → API-Keys)
Fügen Sie den Key in den Moduleinstellungen ein und speichern Sie — die Verifizierung läuft automatisch
Schalten Sie Enable tracking ein. Fertig

Bevorzugt ohne Modul? Fügen Sie den Tracker in Ihr Theme ein: öffnen Sie themes/your-theme/templates/_partials/head.tpl (oder nutzen Sie ein Child-Theme) und ergänzen Sie das Standard-Snippet aus dem Abschnitt Plain HTML oben.

Grav

Der einfachste Weg ist das offizielle MX Cookieless Analytics-Plugin (die vollständige Anleitung finden Sie im Grav-Plugin-Guide): es setzt den Tracker auf jede Seite, verifiziert Ihre Website automatisch und bleibt strikt Opt-in.

Führen Sie bin/gpm install mx-cookieless-analytics im Grav-Stammverzeichnis aus (oder installieren Sie es aus der Admin-Plugin-Liste)
Erstellen Sie ein kostenloses Konto auf app.metrixs.eu, legen Sie Ihre Website an und erstellen Sie einen Site-API-Key (Einstellungen → Websites → API-Keys)
Fügen Sie den Key in den Plugin-Einstellungen ein und speichern Sie — die Verifizierung läuft automatisch
Schalten Sie Enable tracking ein. Fertig

Bevorzugt ohne Plugin? Grav-Templates geben den Assets-Manager standardmäßig aus, daher können Sie auch {% do assets.addJs('https://app.metrixs.eu/tracker.js', { loading: 'defer' }) %} in Ihrem Theme aufrufen oder das Standard-Snippet aus dem Abschnitt Plain HTML oben ergänzen.

Craft CMS

Der einfachste Weg ist das offizielle MX Cookieless Analytics-Plugin (die vollständige Anleitung finden Sie im Craft-CMS-Plugin-Guide): es setzt den Tracker auf jede Seite, verifiziert Ihre Website automatisch und bleibt strikt Opt-in.

Führen Sie composer require metrixs/mx-cookieless-analytics im Craft-Projektstammverzeichnis aus (oder installieren Sie es aus dem Plugin Store)
Erstellen Sie ein kostenloses Konto auf app.metrixs.eu, legen Sie Ihre Website an und erstellen Sie einen Site-API-Key (Einstellungen → Websites → API-Keys)
Fügen Sie den Key in den Plugin-Einstellungen ein und speichern Sie — die Verifizierung läuft automatisch
Schalten Sie Enable tracking ein. Fertig

Bevorzugt ohne Plugin? Craft-Templates rendern den Assets-Manager standardmäßig, daher können Sie den Tracker auch in Ihrem Theme registrieren mit {% do view.registerJsFile('https://app.metrixs.eu/tracker.js', { defer: true, 'data-domain': 'yourdomain.com' }) %}, oder das Standard-Snippet aus dem Abschnitt Plain HTML oben ergänzen.

Shopware

Am einfachsten ist das offizielle MX Cookieless Analytics-Plugin (siehe die Shopware-Plugin-Anleitung fuer die komplette Schritt-fuer-Schritt-Anleitung): es bindet den Tracker auf jeder Seite ein, verifiziert deinen Shop automatisch und bleibt strikt opt-in. Unterstuetzt selbst gehostetes Shopware 6.5 und 6.6 (Shopware Cloud noch nicht).

Lade das Plugin-ZIP von den GitHub-Releases herunter
Gehe in der Administration zu Erweiterungen → Meine Erweiterungen → Erweiterung hochladen
Erstelle ein kostenloses Konto auf app.metrixs.eu, fuege deinen Shop hinzu und erstelle einen Site-API-Key (Einstellungen → Sites → API-Keys)
Fuege den Key in den Plugin-Einstellungen ein und speichere — die Verifizierung erfolgt automatisch
Schalte Enable tracking ein. Fertig

Ohne Plugin? Fuege das Snippet in dein Theme ein: oeffne custom/plugins/dein-theme/src/Resources/views/storefront/layout/meta.html.twig (erweitere den Block layout_head_javascript_hmr_mode, zuerst {{ parent() }} aufrufen) und ergaenze das Standard-Snippet aus dem Plain-HTML-Abschnitt oben.

Shopify

MetriXs hat eine dedizierte Shopify-App, Ein-Klick-Installation, keine Code-Bearbeitung noetig. Die App verifiziert Ihre Domain automatisch, injiziert den Tracker ueber einen App-Embed-Block und aktiviert ein Web-Pixel fuer Checkout-Tracking.

Bearbeiten Sie theme.liquid nicht manuell. Installieren Sie stattdessen die App:

Gehen Sie zur MetriXs-App auf Shopify
Klicken Sie auf Installieren
Aktivieren Sie den “MetriXs Analytics”-App-Embed-Block in Ihrem Theme-Editor (ein Klick, die App gibt Ihnen einen direkten Link)
Waehlen Sie einen Plan (Free, Basic, Team oder Pro)
Fertig, Storefront-Pageviews + Checkout-Events + Umsatz erscheinen automatisch in Ihrem Dashboard

Siehe den Shopify-Integrationsleitfaden fuer die vollstaendige Aufschluesselung von Storefront-Tracking, Checkout-Pixel, Umsatz und dem Conversion-Trichter.

Wenn Sie nur die Storefront verfolgen moechten (kein Checkout/Umsatz) ohne die App zu installieren, koennen Sie das Snippet trotzdem in theme.liquid einfuegen wie fuer andere Plattformen oben beschrieben, aber Sie verpassen das Checkout-Pixel und die Commerce-Metriken.

Webflow

Fuer Webflow verwenden Sie die Custom-Code-Funktion (erfordert einen bezahlten Site-Plan).

Gehen Sie zu Project Settings > Custom Code
Fuegen Sie das Snippet in den Head code-Abschnitt ein:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

Klicken Sie auf Save Changes
veroeffentlichen Sie Ihre Site

Der Tracker laedt auf jeder veroeffentlichten Seite.

Squarespace

Fuer Squarespace verwenden Sie Code Injection (erfordert einen Business- oder Commerce-Plan).

Gehen Sie zu Settings > Advanced > Code Injection
Fuegen Sie das Snippet in den Header-Abschnitt ein:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

Klicken Sie auf Save

Der Tracker laedt auf jeder Seite Ihrer Website.

Wix

Fuer Wix verwenden Sie die Custom-Code-Funktion (erfordert einen bezahlten Plan).

Gehen Sie zu Ihrem Wix Dashboard > Settings > Custom Code
Klicken Sie auf + Add Custom Code
Nennen Sie es “MetriXs”
Fuegen Sie das Snippet ein:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

Setzen Sie Place code in auf Head
Setzen Sie Apply code to auf All pages
Klicken Sie auf Apply

Plain HTML

Fuer eine Plain-HTML-Website fuegen Sie das Snippet in den <head>-Tag jeder Seite ein, die Sie verfolgen moechten:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Wenn Ihre Website eine gemeinsame Header-Datei oder Vorlage verwendet (wie PHP-Includes), fuegen Sie es dort einmal hinzu statt auf jeder Seite.