# Smart Pages einbinden (https://webmetic.de/docs/smart-pages/einbinden)
Der Smart-Pages-Code ist ein eigenes Skript, das die Texte Ihrer Smart Pages tauscht. Am Ende haben Sie:
- den Smart-Pages-Code im Kopfbereich jeder Seite mit einer Smart Page
- die Meldung **Snippet korrekt eingebunden** nach **Integration prüfen**
- live geschaltete Smart Pages, die erkannte Unternehmen auf Ihrer Website sehen
## Bevor Sie beginnen [#bevor-sie-beginnen]
- **Plan**: In jedem Plan können Sie Smart Pages entwerfen, in der Vorschau ansehen und auf der Website testen. Zum Live-Schalten brauchen Sie die Testphase, den Plan Growth oder Enterprise. White-Label-Kunden eines Partners sehen den Tab nicht.
- **Rechte**: Jeder Benutzer Ihres Kontos kann Smart Pages anlegen, bearbeiten, live schalten und löschen. Admin-Rechte brauchen Sie dafür nicht.
- **Kosten**: Smart Pages kosten keine Credits.
- **Smart Page**: Sie brauchen mindestens eine Smart Page, denn Webmetic zeigt den Code nur in ihrem Editor. Die Adresse der Smart Page muss zu einer Website in Ihrem Konto gehören.
- **Bildschirm**: Sie öffnen den Editor auf einem Bildschirm ab 1.024 Pixel Breite. Auf kleineren Bildschirmen sehen Sie nur die Liste Ihrer Smart Pages.
- **Zugang**: Sie brauchen Schreibzugriff auf den Kopfbereich Ihrer Website, also auf das Template oder die passende Einstellung im CMS. Sonst geben Sie den Code an die Person weiter, die Ihre Website betreut.
- **Tracking-Code**: Damit sich Texte ändern, brauchen Sie den Tracking-Code nicht. Nur die Vergleichszahlen der [Auswertung](https://webmetic.de/docs/smart-pages/auswertung) setzen ihn voraus.
Der Smart-Pages-Code erkennt das Unternehmen selbst. Er arbeitet unabhängig vom [Tracking-Code](https://webmetic.de/docs/installation), und beide können zusammen auf einer Seite stehen.
## 1. Smart-Pages-Code kopieren [#1-smart-pages-code-kopieren]
1. Klicken Sie oben auf den Tab [**Smart Pages**](https://app.webmetic.de/?menu=smart_pages). Webmetic zeigt die Liste Ihrer Smart Pages.
2. Klicken Sie auf eine Smart Page. Der Editor öffnet sich.
3. Klicken Sie oben im Editor auf **Integration**. Der Dialog **Smart Pages einbinden** öffnet sich.
4. Klicken Sie auf das Symbol mit dem Hinweis **Snippet kopieren**. Das Symbol zeigt kurz ein Häkchen.
In einem schmaleren Fenster zeigt der Tab nur sein Symbol und den Namen erst, wenn Sie darauf zeigen.
Der kopierte Code enthält schon Ihre Account-ID und gilt für alle Smart Pages und alle Websites Ihres Kontos.
## 2. Code in den Kopfbereich einfügen [#2-code-in-den-kopfbereich-einfügen]
Der Code muss im Kopfbereich jeder Seite stehen, die eine Smart Page hat. Fügen Sie ihn deshalb in das Template ein, das den Kopfbereich aller Seiten erzeugt.
1. Öffnen Sie das Template oder Layout für den Kopfbereich Ihrer Seiten.
2. Fügen Sie den Code möglichst weit oben im `` ein, vor allen anderen Skripten.
3. Speichern Sie die Datei.
```html
```
Kopieren Sie den Code aus dem Dashboard, nicht von dieser Seite. Nur dort steht Ihre Account-ID statt `IHRE_ACCOUNT_ID`.
Fügen Sie kein `async` und kein `defer` hinzu. Der Code muss laufen, bevor die Seite erscheint, damit Besucher aus erkannten Unternehmen sofort den passenden Text sehen.
Ob der Code vor der Zustimmung laden darf, klären Sie mit Ihrer Datenschutzberatung. Wenn Ihr Consent-Tool den Code bis zur Zustimmung blockiert, zeigt Webmetic die Texte erst danach. Bei Fragen zu den Daten, die der Code sendet, hilft der [Support](https://webmetic.de/docs/konto/support).
Wenn ein Plugin für Caching Ihre Skripte verzögert oder bündelt, nehmen Sie `api.webmetic.de/sp/` davon aus. Fügen Sie den Code nur einmal pro Seite ein, denn er hat keinen Schutz vor doppeltem Laden.
Das Webmetic-Template für den [Google Tag Manager](https://webmetic.de/docs/installation/google-tag-manager) und das [Webmetic-Plugin für WordPress](https://webmetic.de/docs/installation/wordpress) binden nur den Tracking-Code ein. Der Smart-Pages-Code gehört direkt in das HTML Ihrer Website.
## 3. Änderung veröffentlichen [#3-änderung-veröffentlichen]
1. Veröffentlichen Sie die Änderung auf Ihrer Live-Website.
2. Leeren Sie alle Caches, zum Beispiel im CMS oder in einem Cache-Plugin. Sonst liefert Ihre Website noch die alte Fassung ohne Code aus.
Danach stört ein Seiten-Cache die Smart Pages nicht, weil der Code die Texte bei jedem Besuch neu holt.
## Installation prüfen [#installation-prüfen]
Die Prüfung öffnet die Adresse Ihrer Smart Page in einem Browser und sucht dort den Code. Webmetic prüft dabei keine anderen Seiten Ihrer Website.
1. Klicken Sie im Editor Ihrer Smart Page auf **Integration**.
2. Klicken Sie auf **Integration prüfen**. Nach bis zu einer Minute zeigt Webmetic das Ergebnis.
Wenn der Code richtig auf der Seite steht, zeigt Webmetic die Meldung **Snippet korrekt eingebunden**.
Danach heißt die Schaltfläche **Erneut prüfen**. Im Editor zeigt ein grüner Punkt an der Schaltfläche **Integration**, dass Webmetic den Code gefunden hat. Webmetic prüft das auch, wenn Sie den Editor öffnen.
Ein fehlender Code blockiert weder Test noch Live-Schalten. Wenn er fehlt, öffnet Webmetic diesen Dialog beim Testen und Live-Schalten von selbst. Die Schaltfläche **Trotzdem testen** führt dann zum Test-Link und **Trotzdem live schalten** zum Dialog **Prüfen & live schalten**.
### Falls die Prüfung Probleme meldet [#falls-die-prüfung-probleme-meldet]
Wenn die Prüfung den Code nicht findet, zeigt sie eine dieser Meldungen:
| Meldung | Was Sie tun |
| --- | --- |
| **Snippet nicht gefunden. Bitte prüfen Sie den Einbau und leeren Sie bei Bedarf den Seiten-Cache.** | Prüfen Sie, ob der Code auf genau dieser Seite steht und die Änderung veröffentlicht ist. Leeren Sie danach alle Caches. |
| **Prüfung fehlgeschlagen. Ist die Seite erreichbar?** | Webmetic konnte die Seite nicht öffnen, zum Beispiel wegen eines Logins oder eines Bot-Schutzes. Wenn der Code sicher auf der Seite steht, können Sie trotzdem testen und live schalten. |
Wenn die Prüfung den Code findet, aber Probleme erkennt, zeigt sie die Meldung **Snippet gefunden, aber:** und darunter eine Zeile pro Problem:
| Zeile | Was Sie tun |
| --- | --- |
| **mit async/defer eingebunden: bitte entfernen Sie beides, sonst springt der Inhalt sichtbar um** | Entfernen Sie `async` und `defer`. Prüfen Sie auch Plugins, die Skripte verzögern. |
| **nicht im <head> platziert** | Verschieben Sie den Code in den Kopfbereich, vor alle anderen Skripte. |
| **lädt erst nach Cookie-Consent: Besucher ohne Zustimmung sehen das Original, nach der Zustimmung wechseln die Texte sichtbar** | Ihr Consent-Tool blockiert den Code bis zur Zustimmung. Ob das so bleiben soll, klären Sie mit Ihrer Datenschutzberatung. |
| **Script wird nicht ausgeführt (Blocker oder Fehler auf der Seite)** | Der Code steht auf der Seite, läuft aber nicht. Prüfen Sie die Content Security Policy und Plugins, die Skripte blockieren. |
| **falsche Account-ID** mit zwei IDs | Der Code stammt aus einem anderen Webmetic-Konto. Kopieren Sie ihn neu aus diesem Konto. |
Weitere Ursachen finden Sie unter [Fehlerbehebung](https://webmetic.de/docs/smart-pages/fehlerbehebung).
Wenn Ihre Website eine Content Security Policy nutzt, ergänzen Sie `https://api.webmetic.de` unter `script-src` und `connect-src`. Von dort lädt der Code, und von dort holt er die Texte.
```text
script-src https://api.webmetic.de;
connect-src https://api.webmetic.de;
```
Löschen Sie den Code aus dem Kopfbereich Ihrer Website. Nur so lädt das Skript nicht mehr. Wenn Sie im Dashboard Texte pausieren oder Smart Pages löschen, lädt der Code weiter, ändert aber nichts.
## Nächste Schritte [#nächste-schritte]
- [Testen und live schalten](https://webmetic.de/docs/smart-pages/testen-und-live-schalten): Ihre Smart Page mit einem Test-Link prüfen und live schalten.
- [Fehlerbehebung](https://webmetic.de/docs/smart-pages/fehlerbehebung): Was Sie tun, wenn Texte nicht wechseln.