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 beginnenCopy Anchor Link

• 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 setzen ihn voraus.

Der Smart-Pages-Code erkennt das Unternehmen selbst. Er arbeitet unabhängig vom Tracking-Code, und beide können zusammen auf einer Seite stehen.

1. Smart-Pages-Code kopierenCopy Anchor Link

1. Klicken Sie oben auf den Tab 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ügenCopy Anchor Link

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 <head> ein, vor allen anderen Skripten.
3. Speichern Sie die Datei.

<head>
  <meta charset="utf-8">
  <script src="https://api.webmetic.de/sp/IHRE_ACCOUNT_ID.js"></script>
  <!-- other scripts follow here -->
</head>

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.

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 und das Webmetic-Plugin für WordPress binden nur den Tracking-Code ein. Der Smart-Pages-Code gehört direkt in das HTML Ihrer Website.

3. Änderung veröffentlichenCopy Anchor Link

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üfenCopy Anchor Link

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 meldetCopy Anchor Link

Wenn die Prüfung den Code nicht findet, zeigt sie eine dieser Meldungen:

Wenn die Prüfung den Code findet, aber Probleme erkennt, zeigt sie die Meldung Snippet gefunden, aber: und darunter eine Zeile pro Problem:

Weitere Ursachen finden Sie unter Fehlerbehebung.

script-src https://api.webmetic.de;
connect-src https://api.webmetic.de;

Nächste SchritteCopy Anchor Link