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"></script>

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"
          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"></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"></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"></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"></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"></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"
  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"
    />,
  ])
}

WordPress

Es gibt zwei Moeglichkeiten, den Tracker zu WordPress 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"></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.

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"></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"></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"></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"></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.