Erste Schritte3. Auf deiner Plattform einbinden

Tracking-Script auf einer selbst programmierten Website einbinden

Binde das LeadJourney-Tracking-Script in eine handcodierte Seite ein – statisches HTML, serverseitige Templates, Single-Page-Apps, Next.js oder Nuxt.

Tracking-Script auf einer selbst programmierten Website einbinden

Diese Anleitung zeigt dir, wie du das LeadJourney-Tracking-Script in eine selbst programmierte Website einbaust – von einer einzelnen statischen index.html über eine serverseitig gerenderte App bis zur JavaScript-Single-Page-App. Die Regel ist immer dieselbe: Das Snippet gehört einmal in den <head> jeder Seite.

Voraussetzungen

Eine Tracking-Domain mit Status Ready to use und dein persönliches Snippet aus Einstellungen → Tracking. Falls du das noch nicht eingerichtet hast, starte mit Tracking-Domain einrichten und Tracking-Script einbinden.

Schritt für Schritt

Snippet kopieren

Öffne Einstellungen → Tracking und kopiere das Snippet aus der Spalte Tracking Script. Es enthält deine Tracking-Domain und deine Workspace-ID und sieht so aus:

<!-- LeadJourney Tracking -->
<script type="text/javascript" async
  src="https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/"></script>

Nutze dein eigenes Snippet

Kopiere das Snippet immer direkt aus deinen Einstellungen – Domain und Workspace-ID sind für deinen Account einzigartig. Das Beispiel oben dient nur zur Veranschaulichung.

In den <head> einbauen – passend zu deinem Stack

Platziere das Snippet im <head>, idealerweise weit oben, damit es früh lädt. Es ist async und blockiert deine Seite also nicht. Binde es einmal pro Seite ein – am besten über ein gemeinsames Layout, Template oder Header-Partial, damit es automatisch auf jeder Seite liegt.

Füge das Snippet direkt in den <head> jeder HTML-Datei ein:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Meine Seite</title>

    <!-- LeadJourney Tracking -->
    <script type="text/javascript" async
      src="https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/"></script>
  </head>
  <body>
    ...
  </body>
</html>

Bei mehreren Seiten gehört es in dein gemeinsames Header-Include (z. B. ein header.html-Partial, ein SSI-<!--#include --> oder das Layout deines Build-Tools), damit du es nur an einer Stelle pflegst.

Bei PHP, Laravel (Blade), Rails (ERB), Django, Express/EJS, Go-Templates und Ähnlichem fügst du das Snippet in das gemeinsame <head>-Layout ein, das jede Seite erweitert – nicht in jede Seite einzeln.

<!-- im <head> deines Basis-Layouts -->
<!-- LeadJourney Tracking -->
<script type="text/javascript" async
  src="https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/"></script>

Zum Beispiel: layout.blade.php (Laravel), application.html.erb (Rails), base.html (Django) oder dein gemeinsames header.php-Include.

Bei einer clientseitig gerenderten Single-Page-App (Vite, Create React App, Vue CLI, Angular, Svelte) fügst du das Snippet in den <head> der statischen index.html ein – die eine HTML-Datei, aus der die ganze App startet:

<!-- public/index.html  (oder  index.html im Projekt-Root) -->
<head>
  <!-- LeadJourney Tracking -->
  <script type="text/javascript" async
    src="https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/"></script>
</head>

Routenwechsel werden für dich erledigt

Du musst Seitenaufrufe bei der Navigation nicht selbst auslösen. Der eingebaute MutationObserver des Scripts erkennt clientseitige Routenwechsel, sodass jede In-App-Navigation automatisch als Seitenaufruf getrackt wird.

Nutze die Script-Komponente, damit Next die Einbindung übernimmt. Im App Router fügst du sie in dein Root-app/layout.tsx ein:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de">
      <body>
        {children}
        <Script
          src="https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Im Pages Router fügst du dasselbe <Script> in pages/_app.tsx ein. So oder so lädt es auf jeder Route.

Binde das Script global in nuxt.config.ts ein, damit es im <head> jeder Seite liegt:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://track.deinedomain.de/package/latest/DEINE-WORKSPACE-ID/',
          async: true,
        },
      ],
    },
  },
});

Alternativ erreichst du dasselbe mit useHead({ script: [...] }) in deinem Root-Layout.

Deployen und überprüfen

Deploye deine Änderung, öffne deine Seite in einem neuen Browser-Tab und gehe zurück zu Einstellungen → Tracking. Sobald die ersten Seitenaufrufe eintreffen, bestätigt LeadJourney, dass das Script live ist.

Tracking-Status aktiv

Lösen meine Formulare einen Lead aus?

Das Script erkennt Standard-<form>-Absendungen und feuert automatisch ein Lead-Event, mit einem Formless-Click-Fallback für eigene Buttons und AJAX-Formulare, die kein echtes Formular-Element absenden. Wenn deine App das Formular per fetch/XHR ohne <form> abschickt, lies Events tracken, damit Leads so erfasst werden, wie du es möchtest.

Fehlerbehebung

Tracking wird nicht erkannt?

Prüfe, ob deine Tracking-Domain Ready to use ist, ob das Snippet im <head> der ausgelieferten Seite liegt (Quelltext mit Strg/Cmd + U anzeigen und nach package/latest suchen) und ob du dein eigenes Snippet (korrekte Domain + Workspace-ID) kopiert hast. Bei SPAs muss es in der statischen index.html stehen, nicht in einer Komponente, die beim ersten Rendern womöglich nicht gemountet wird. Stelle außerdem sicher, dass kein Cookie-Consent-Script oder CSP die Anfrage an deine Tracking-Domain blockiert.

Content Security Policy?

Wenn deine Seite einen Content-Security-Policy-Header sendet, erlaube deine Tracking-Domain in script-src und connect-src (z. B. https://track.deinedomain.de), damit der Browser das Script laden und Events senden kann.

Verwandte Artikel

Auf dieser Seite