> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/eigenen-javascript-code-nach-dem-laden-einer-seite-ausfuhren.md).

# Eigenen JavaScript-Code nach dem Laden einer Seite ausführen

Manche technische Anpassungen brauchen eine vollständig aufgebaute Seite, bevor sie zuverlässig funktionieren. Dazu zählen zum Beispiel ein eigener Hinweis an einer bestehenden Stelle oder das Starten einer bereits geprüften Komponente. Startet der Code zu früh, findet er die gewünschten Seitenelemente noch nicht – die Anpassung bleibt aus oder funktioniert nur gelegentlich.

Das Ereignis „hydrationDone“ gibt im Vorschauablauf das Signal: Die Seite ist fertig aufgebaut. Dein Code kann dann erst starten. Diese Anleitung zeigt den sicheren Ablauf, erklärt das kleine Beispiel und hilft dir beim Testen.

> **Wichtig:** Eigener Seitencode ist eine technische Erweiterung. Verwende ihn nur, wenn eine Einstellung im Editor das gewünschte Ergebnis nicht bereits ohne Code löst. Teste Änderungen zuerst auf einer Kopie der Seite.

## Wann diese Methode sinnvoll ist

Nutze das Ereignis nur, wenn dein Code auf sichtbare Seitenelemente zugreifen muss und deshalb erst nach dem Seitenaufbau laufen darf.

Geeignete Fälle:

* Eine bereits geprüfte Komponente soll erst starten, wenn ihr Zielbereich vorhanden ist.
* Ein eigener Hinweis soll an einem bestehenden Bereich ergänzt werden.
* Eine technische Anpassung braucht den vollständigen Seitenaufbau, bevor sie ihre Arbeit beginnen kann.

Nicht geeignet ist diese Methode für einfache Text-, Farb- oder Abstandsänderungen. Solche Anpassungen bleiben im normalen Seiteneditor leichter wartbar. Auch darf eigener Code keine Informationen erfassen oder an andere Dienste senden, wenn die notwendige Prüfung und Einwilligung dafür nicht geklärt ist.

## Das Ereignis einfach erklärt

Eine Seite wird im Vorschauablauf nicht in einem einzigen Moment fertig. Inhalte, Schaltflächen und weitere Bereiche werden zuerst aufgebaut. „hydrationDone“ ist das Signal nach diesem Aufbau.

Der Code zwischen den geschweiften Klammern startet erst, wenn dieses Signal empfangen wurde. Dadurch muss er nicht raten, wie lange die Seite zum Laden braucht.

```html
<script>
document.addEventListener("hydrationDone", () => {
  // Hier steht nur Code, der den vollständigen Seitenaufbau benötigt.
});
</script>
```

Die drei wichtigen Teile:

| Teil                      | Bedeutung                                                     |
| ------------------------- | ------------------------------------------------------------- |
| document.addEventListener | Wartet auf ein bestimmtes Ereignis der Seite.                 |
| "hydrationDone"           | Der feste Name des Ereignisses nach dem vollständigen Aufbau. |
| Bereich zwischen { }      | Hier kommt dein geprüfter JavaScript-Code hinein.             |

Lass den Ereignisnamen unverändert. Wenn er anders geschrieben wird, kann die Seite das Signal nicht zuordnen.

## Vor dem Einfügen vorbereiten

Bevor du Code einfügst, kläre diese Punkte:

1. **Ziel:** Beschreibe in einem Satz, was die Anpassung sichtbar bewirken soll.
2. **Betroffene Seite:** Notiere, auf welcher Website- oder Funnel-Seite sie laufen soll.
3. **Sicherung:** Erstelle eine Kopie der Seite oder dokumentiere den bisherigen Code, damit du die Änderung zurücknehmen kannst.
4. **Prüfcode:** Verwende nur Code, dessen Zweck und Herkunft du nachvollziehen kannst.
5. **Testfall:** Lege fest, woran du erkennst, dass die Anpassung funktioniert – zum Beispiel ein sichtbarer Hinweis an der richtigen Stelle.
6. **Datenschutz und Sicherheit:** Prüfe externe Bibliotheken, eingebundene Dienste und alle Daten, die der Code verarbeitet, bevor du ihn einsetzt.

Diese Vorbereitung verhindert, dass eine kleine Änderung unbemerkt andere Teile der Seite beeinträchtigt.

## Code im Seiteneditor einfügen

1. Öffne die gewünschte Website- oder Funnel-Seite im Bearbeitungsmodus.
2. Erstelle zuerst eine Kopie, wenn die Seite bereits genutzt wird.
3. Füge im Editor ein **Code-Element** an der Stelle ein, an der der technische Seitencode hinterlegt werden soll.
4. Füge die Grundstruktur mit dem Listener ein.
5. Setze deinen geprüften JavaScript-Code ausschließlich innerhalb des Bereichs nach „hydrationDone“.
6. Speichere die Seite.
7. Öffne die Vorschau und löse deinen vorher festgelegten Testfall aus.

Die Grundstruktur bleibt immer gleich:

```html
<script>
document.addEventListener("hydrationDone", () => {
  // Deinen geprüften Code hier einfügen.
});
</script>
```

Wenn du bereits vorhandenen Code übernimmst, ändere nicht mehrere Dinge gleichzeitig. Füge zuerst nur die Grundstruktur ein und prüfe, ob die Seite weiterhin korrekt lädt. Ergänze danach die eigentliche Anpassung.

## Was nach dem Laden passiert

Der Listener wartet im Hintergrund auf „hydrationDone“. Erst wenn die Vorschau den vollständigen Seitenaufbau meldet, führt der Browser den darin liegenden Code aus.

Das verhindert insbesondere den Fehler, dass der Code einen Bereich ansprechen möchte, der zu diesem Zeitpunkt noch nicht vorhanden ist. Es ersetzt jedoch keine fachliche Prüfung: Der Code muss weiterhin zur tatsächlich aufgebauten Seite passen.

## Mit einem sicheren Test prüfen

Teste jede Änderung in kleinen Schritten:

1. Öffne die Seitenvorschau nach dem Speichern.
2. Prüfe zuerst, ob die Seite vollständig angezeigt wird und keine sichtbaren Bereiche fehlen.
3. Kontrolliere den konkreten Effekt des Codes an der vorgesehenen Stelle.
4. Wiederhole den Test in der Mobilansicht.
5. Aktualisiere die Vorschau und prüfe den Effekt erneut.
6. Wenn die Seite bereits veröffentlicht ist, verwende vor einer weiteren Änderung eine separate Testkopie.
7. Dokumentiere kurz, welcher Code auf welcher Seite eingesetzt wird und was er bewirken soll.

Ein Test ist erst erfolgreich, wenn die normale Seitendarstellung und die zusätzliche Anpassung beide zuverlässig funktionieren.

## Wenn die Ausführung verzögert ist

Eine Einstellung zur JavaScript-Optimierung kann den Zeitpunkt dieses Ereignisses verschieben, wenn keine Interaktion auf der Seite erfolgt. Ist dein Code direkt beim ersten Seitenaufruf zwingend erforderlich, prüfe diese Optimierung besonders sorgfältig.

Ändere die Einstellung nicht blind für alle Seiten. Stelle zuerst fest:

* Ist die Anpassung wirklich beim ersten Aufruf notwendig?
* Funktioniert die Seite ohne die Optimierung langsamer oder anders?
* Wurde der Ablauf in Vorschau und Mobilansicht erneut geprüft?

Wenn die Antwort unklar ist, lasse die bestehende Einstellung unverändert und hole technische Unterstützung ein.

## Typische Fehler und Lösungen

### Der sichtbare Effekt erscheint nicht

Prüfe, ob das **Code-Element** auf genau der Seite liegt, die du in der Vorschau öffnest. Kontrolliere danach Schreibweise und Anführungszeichen im Ereignisnamen. Ein einzelnes fehlendes Zeichen kann verhindern, dass der Listener registriert wird.

### Die Seite lädt, aber eine Anpassung funktioniert nur manchmal

Stelle sicher, dass der betroffene JavaScript-Code innerhalb des „hydrationDone“-Bereichs steht. Entferne keine geschweiften Klammern und verschiebe den Code nicht vor den Listener.

### Nach der Änderung sieht die Seite fehlerhaft aus

Nimm die zuletzt eingefügte Änderung zurück und teste erneut. Füge danach nur einen kleinen, nachvollziehbaren Teil des Codes ein. Arbeite nicht weiter an der veröffentlichten Seite, solange die Testkopie nicht stabil läuft.

### Der Code benötigt eine Interaktion, bevor er reagiert

Prüfe die Einstellung zur JavaScript-Optimierung und den tatsächlichen Ablauf in der Vorschau. Wenn der Code beim ersten Seitenaufruf entscheidend ist, darf die Verzögerung nicht unbemerkt bleiben.

### Der Code stammt aus einer unbekannten Quelle

Übernimm ihn nicht ungeprüft. Unverständlicher Seitencode kann Ladezeit, Sicherheit, Datenschutz und spätere Wartung beeinträchtigen. Dokumentiere Zweck, Herkunft und verantwortliche Person, bevor er verwendet wird.

## Praxisbeispiel: Hinweis nach dem Seitenaufbau ergänzen

Ein Team möchte auf einer bestehenden Angebotsseite einen technischen Hinweis unter einem bereits vorhandenen Bereich einblenden. Die eigentliche Seitengestaltung bleibt im Editor; nur die zusätzliche, geprüfte Anpassung braucht den vollständigen Seitenaufbau.

1. Das Team erstellt eine Kopie der Seite.
2. Es fügt ein Code-Element ein und verwendet die Grundstruktur mit „hydrationDone“.
3. Der geprüfte Code wird innerhalb des Listener-Bereichs ergänzt.
4. In der Vorschau prüft das Team, ob der Hinweis an der richtigen Stelle erscheint.
5. Es testet die Mobilansicht und aktualisiert die Vorschau mehrmals.
6. Erst wenn Seite und Hinweis stabil funktionieren, wird die Änderung bewusst übernommen.

So bleibt klar, warum der Code existiert, wann er läuft und wie er im Problemfall zurückgenommen werden kann.

## Checkliste vor der Veröffentlichung

* [ ] Die Seite wurde zuerst auf einer Kopie getestet.
* [ ] Das Code-Element liegt auf der richtigen Seite.
* [ ] Der Listener nutzt exakt „hydrationDone“.
* [ ] Eigener Code steht innerhalb des Listener-Bereichs.
* [ ] Vorschau und Mobilansicht zeigen das erwartete Ergebnis.
* [ ] Externe Dienste und Datennutzung sind geprüft.
* [ ] Zweck und verantwortliche Person sind intern dokumentiert.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/eigenen-javascript-code-nach-dem-laden-einer-seite-ausfuhren.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.