Wenn Sie eine Produkt-Tour gestalten, können Sie bestimmte Website-Elemente wie Buttons oder Überschriften auswählen, auf die Ihre Nachrichten zeigen sollen. Intercom verwendet CSS-Selektoren, um Ihnen die Auswahl dieser Elemente zu ermöglichen.
Wenn Sie ein Element auswählen, generiert die Tour automatisch einen CSS-Selektor, der angibt, wie auf das Element gezeigt wird. Sie können das CSS für das ausgewählte Element unten links sehen:
Es kann Gründe geben, warum Sie den CSS-Selektor manuell hinzufügen möchten, die wir später in diesem Artikel behandeln. Wenn Sie den automatisch gewählten CSS-Selektor manuell bearbeiten möchten, klicken Sie nach der Auswahl des Website-Elements auf „Erweitert“.
Hier können Sie den CSS-Selektor manuell eingeben, den Sie auswählen möchten:
Warum sollte ich das CSS einer Tour bearbeiten?
Es gibt einige Gründe, warum Sie das CSS beim Auswählen eines Website-Elements bearbeiten möchten:
Ihr Produkt hat sich geändert
Wenn sich Ihr Produkt oder Ihre Website seit der Veröffentlichung Ihrer Tour geändert hat, funktioniert das ursprüngliche CSS möglicherweise nicht mehr. Dies kann daran liegen, dass das referenzierte Element nicht mehr existiert oder sich an einem deutlich anderen Ort befindet. In diesem Fall können Sie entweder ein neues Element mit dem Tour-Builder auswählen oder einen neuen Selektor manuell eingeben.
Ihr Produkt verwendet dynamisch generierte Klassen
CSS wird verwendet, um Stile auf Elemente Ihrer Website anzuwenden. Einige Web-Frameworks generieren die CSS-Klassen dynamisch, um diese Stile anzuwenden. Das bedeutet, dass sich die CSS-Selektoren bei jedem Zugriff eines users auf Ihr Produkt oder Ihre Website ändern können. In diesem Fall können Sie den automatischen CSS-Selektor nicht verwenden, um Ihre Tour zu erstellen. Sie können einige der Selektoren bearbeiten, um ein Wildcard zu verwenden, das den dynamisch generierten Teil des CSS-Selektors ignoriert. Das bedeutet, dass Sie das CSS so bearbeiten, dass der Selektor nur die statischen/generischen Teile identifiziert, die für alle users gleich sind. Im folgenden Beispiel bearbeiten wir den Selektor so, dass er nach button__ statt button__2kbli sucht, da dieser Teil des CSS für alle users gleich erscheint.
Wie kann ich sicherstellen, dass meine Tour korrekt gesendet wird?
Der beste Weg, um sicherzustellen, dass Ihre Tours korrekt gesendet werden, ist, das HTML auf Ihrer Website mit einem speziellen Attribut zu annotieren, auf das Intercom achten kann.
Hinweis: Dafür müssen Sie HTML bearbeiten.
Wenn Sie wissen, welche Elemente auf Ihrer Website Sie in einer Tour verwenden möchten, können Sie diesen Elementen ein spezielles Data-Attribut in der Form data-intercom-target="..." hinzufügen.
<div data-intercom-target="Login button">
...
</div>
Wenn Sie beispielsweise in einer Tour auf Ihren Login-Button zeigen möchten, könnten Sie data-intercom-target="Login button" zu diesem Element hinzufügen. Durch diese HTML-Anmerkung ist es viel wahrscheinlicher, dass kleine Änderungen an Ihrem Produkt keine Auswirkungen auf Ihre Tours haben.
Wenn Sie das HTML wie oben gezeigt annotieren, kann der Tour-Builder die Elemente mit der data-intercom-target-Anmerkung hervorheben, sodass Sie sie mit dem Tour-Builder auswählen können:
Erweiterte entwicklergesteuerte Lösungen
Für komplexe Probleme wie Dropdowns und Seitennavigation:
Dropdowns: Statt einzelne Dropdown-Elemente anzusprechen, heben Sie das Dropdown-Menü selbst hervor und geben Sie Anweisungen für users. Folgen Sie mit einer neuen Tour nach der Auswahl.
Seitennavigation: Aktualisieren Sie das CSS Ihrer Seite, um das
data-intercom-target-Attribut einzuschließen. Zum Beispiel:<div data-intercom-target="Side navigation button">Button-Text</div> Dies sorgt für Stabilität bei Navigationszielen und stellt sicher, dass die Produkt-Tour mit den vorgesehenen Elementen übereinstimmt.
HTML-Elemente annotieren: Fügen Sie
data-intercom-target-Attribute zu wichtigen Elementen hinzu, um Stabilität und Kompatibilität mit Intercom-Tours zu gewährleisten.Sichtbarkeit der Elemente sicherstellen: Vergewissern Sie sich, dass die von der Tour angesprochenen Elemente sichtbar und nicht standardmäßig ausgeblendet sind.
Häufige Probleme bei der Zielauswahl von Produkt-Tour-Elementen
Beim Einrichten von Produkt-Tours können Probleme bei der Zielauswahl von Elementen auftreten. Hier sind einige häufige Probleme und deren Ursachen:
Selektoren brechen durch Website-Änderungen: Strukturänderungen der Website können bestehende CSS-Selektoren ungültig machen, sodass sie nicht mehr funktionieren. Intercom verwendet eine Bibliothek namens Finder, um diese Selektoren zu generieren, die veraltet sein können, wenn sich das Layout oder die Elemente Ihrer Website ändern.
Dynamische oder generische Selektoren: Die Verwendung generischer Selektoren wie
.d-xl-inlineoder dynamisch generierter Selektoren kann zu Zielauswahlfehlern führen, da sie möglicherweise nicht konsistent auf die richtigen Elemente in verschiedenen Sitzungen oder Seitenaufrufen zeigen.Fehlende oder versteckte Elemente: Wenn ein angesprochenes Element nicht sichtbar ist oder beim Start eines Tour-Schritts nicht gerendert wurde, kann dies dazu führen, dass der Schritt fehlschlägt oder die Meldung „Element ist hier nicht sichtbar“ angezeigt wird. Stellen Sie immer sicher, dass alle angesprochenen Elemente während ihrer jeweiligen Tour-Schritte vorhanden und sichtbar sind.
Dynamische oder versteckte Elemente: Stellen Sie sicher, dass angesprochene Elemente statisch und dauerhaft im DOM vorhanden sind. Bei dynamischen Elementen sollten Sie den Tour-Ablauf überarbeiten oder den Schritt verzögern, bis das Element geladen ist.
Falsche oder generische CSS-Selektoren: Ersetzen Sie generische Selektoren wie
nth-childdurch eindeutige und spezifische Selektoren, wie dasdata-intercom-target-Attribut, für präzise Zielauswahl.Fehlende oder entfernte Elemente: Aktualisieren Sie CSS-Selektoren, um auf universelle und konsistente Elemente in allen Versionen Ihrer Website zu zeigen. Vermeiden Sie Selektoren wie
[href='#/sheets/...']und verwenden Sie stabilere Alternativen.
Fehlerbehebungsschritte
Wenn Sie Probleme mit der Zielauswahl von Produkt-Tour-Elementen haben, befolgen Sie diese Fehlerbehebungsschritte:
Sichtbarkeit des Elements prüfen
Wenn Sie die Meldung „Element ist hier nicht sichtbar“ sehen:
Speichern Sie den Schritt erneut im Produkt-Tour-Builder. Dies kann die Zielauswahl manchmal aktualisieren.
Überprüfen Sie, ob das Element vorhanden ist in allen Versionen Ihrer Website, einschließlich verschiedener Bildschirmgrößen und user-Zustände.
Fügen Sie das
data-intercom-target-Attribut hinzu zum Element. Dies macht das Element für Intercom deutlich leichter zuverlässig ansprechbar.Überprüfen Sie den Selektor: Prüfen Sie, ob der CSS-Selektor einem Element entspricht, das immer vorhanden ist, wenn die Tour ausgelöst werden soll.
Bearbeiten Sie den Selektor: Ändern Sie den Selektor so, dass er auf ein sichtbares und stabiles Element zeigt, wie „Rechnungszeile hinzufügen.“
Beheben Sie dynamische Elemente: Stellen Sie sicher, dass Elemente, die nach einer user-Interaktion erscheinen, im DOM vorhanden sind, oder überarbeiten Sie den Tour-Ablauf.
Zielauswahlfehler beheben
Überprüfen und aktualisieren Sie CSS-Selektoren für Konsistenz. Generische oder dynamische Selektoren sind oft die Ursache für Instabilität.
Ersetzen Sie defekte Selektoren durch Verweise auf statische und universelle Elemente. Aktualisieren Sie beispielsweise Selektoren wie
[href='#/sheets/...'], um zuverlässig auf persistente Elemente zu zeigen, die weniger wahrscheinlich geändert werden.Verwenden Sie erweiterte Zielauswahl: Fügen Sie ein
data-intercom-target-Attribut zu Elementen hinzu und geben Sie den Selektor manuell im Tour-Builder ein.Arbeiten Sie mit Entwicklern zusammen: Arbeiten Sie mit Ihrem Entwicklungsteam zusammen, um das CSS und HTML Ihrer Seite für eine bessere Zielauswahl zu aktualisieren.
Testen und Vorschau
Nachdem Sie Korrekturen vorgenommen haben, sehen Sie sich die Tour immer in der Vorschau an, um zu bestätigen, dass alle Schritte wie beabsichtigt funktionieren und die Elemente korrekt angesprochen werden.
Haben Sie Fragen?
Wenn Sie weitere Fragen zum Bearbeiten von CSS in Produkt-Tours haben, chatten Sie einfach mit uns im Messenger, und wir helfen Ihnen gerne. Hier sind weitere Ressourcen, um sicherzustellen, dass Ihre Tours funktionieren: