In diesem Artikel werden unerwartete, leere, unterbrochene und abgeschnittene Heatmap-Screenshot-Ergebnisse identifiziert und einige Lösungen dafür angeboten. Wenn Sie Hilfe bei der Fehlerbehebung für die oben auf dem Screenshot platzierten Heatmap-Daten suchen, lesen Sie unseren Artikel Fehlerbehebung für Heatmap-Daten.
Klicken Sie unten auf das Screenshot-Problem, das Ihr Problem am besten beschreibt:
Auf meinem Screenshot wurde kein Styling oder CSS angewendet, und die Bilder und Symbole sind größer als erwartet.
Im Video erwähnte Artikel: Hotjar IPs und Wie man einen Heatmap-Screenshot neu erstellt
Fehlendes CSS oder Bilder und SVG-Symbole, die größer als erwartet sind, bedeuten in der Regel, dass der Server Ihrer Website den Zugriff von Hotjar auf die CSS-Dateien blockiert.
Folgende Gründe können dafür verantwortlich sein, dass Hotjar den Zugriff auf CSS-Dateien blockiert:
- Der Zugriff ist auf bestimmte IP-Adressen beschränkt
- Die Blockierung erfolgt auf der Grundlage von Domain/Referrer
- Der Zugriff ist aufgrund der geografischen Lage eingeschränkt (d. h. der Zugriff auf Assets aus Irland ist nicht möglich)
- Blockierung aufgrund fehlender Cookies/SessionStorage
- Blockierung aufgrund eines Passwortschutzes, Verhinderung des direkten Zugriffs auf Assets über ihre URL oder Blockierung von Anfragen an bestimmte Endpunkte
Lösung:
In den meisten Fällen lassen sich Probleme mit Domänen-/Referrer- und IP-Blockierungen durch die unten aufgeführten Maßnahmen beheben. Nachdem Sie diese Änderungen vorgenommen haben, sollten Sie Ihren Screenshot aktualisieren, um das Problem zu beheben.
-
Erlauben Sie die Domain/Referrer https://insights.hotjar.com
Wir empfehlen, die Domains *.hotjar.com insbesondere für die Anwendung von CSS auf Heatmaps zuzulassen.
-
Erlauben Sie die IP-Adressen von Hotjar
Alle unsere Server werden auf Amazon AWS eu-west-1 in Irland gehostet und greifen auf Stylesheets über HTTPS zu. Nachfolgend finden Sie eine Liste der IP-Adressen, die Hotjar verwendet, um ausgehenden DatenTraffic zu senden, den Sie bei Bedarf zulassen können.
18.203.61.76 18.203.176.135 52.17.197.221Die oben aufgeführten IPs decken nicht die eigentliche Domain ab
Die eigentliche Domäne ist https://insights.hotjar.com. Dies liegt daran, dass sie von unserem CDN-Anbieter bereitgestellt wird. Wir empfehlen, die Domains *.hotjar.com insbesondere für die Anwendung von CSS auf Heatmaps zuzulassen.
Wenn Sie ein Content Delivery Network (CDN), eine Web Application Firewall (WAF) oder einen anderen Dienst verwenden, der zwischen Ihrem Server und dem Rest des Internets steht, müssen Sie die Änderungen möglicherweise sowohl in diesen Diensten als auch auf dem Server vornehmen.
-
Hotjar's Benutzer-Agenten zulassen
Einige CDNs oder WAFs erlauben es nicht, den Zugriff auf Basis der IP-Adresse zu erlauben, wohl aber den Zugriff auf Basis des User-Agents.
'Telefon': ( 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 wie Mac OS X) AppleWebKit/605.1.15 (KHTML, wie Gecko) ' ' Hotjar Version/15.2 Mobile/15E148 Safari/604.1' ), 'tablet': ( Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, wie Gecko) ' 'Hotjar Version/15.2 Safari/605.1.15' ), 'Desktop': ( 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, wie Gecko) ' 'Hotjar Chrome/97.0.4692.71 Safari/537.36' )
Mein Screenshot ist am unteren Rand abgeschnitten, hat die falsche Größe oder ist verzerrt
Wenn Ihr Screenshot unten abgeschnitten ist, die Größe nicht stimmt oder er verzerrt erscheint, kann dies daran liegen, dass die Standardfunktion zum Scrollen der Seite im Code Ihrer Website angepasst wurde.
Im Folgenden finden Sie einige mögliche Ursachen und Lösungen für dieses Problem:
-
Die Seite hat eine Höhe von mehr als 15.000 Pixeln
Wenn wir zunächst einen Screenshot einer Seite machen, rendert Hotjar diese mit einer maximalen Höhe von 15.000 Pixeln. Seiten, die länger als diese Höhe sind, werden auf diesen Wert beschnitten.
Wenn Sie jedoch die Funktion Machen Sie selbst einen neuen Screenshot von dieser Seitean> können Sie jedoch in den meisten Fällen die gesamte Seite erfassen.
In unserem Artikel Heatmap-Einschränkungen finden Sie eine Liste der Dinge, die mit Heatmaps nicht erfasst werden können.
-
Der Seitenbildlauf erfolgt nicht auf dem Dokumentenelement
Wenn Ihre Seite nicht am Dokumentenelement gescrollt wird oder ein Scroll-Lock verwendet, um die Seite zu scrollen, kann Hotjar keinen vollständigen Screenshot der Seite erfassen, und er kann abgeschnitten erscheinen. Das liegt daran, dass unser Screenshot-Erfassungsprozess ermitteln muss, wie lang das Dokument ist. Wenn Sie einen abgeschnittenen Screenshot sehen, könnte das daran liegen, dass der Bildlauf für Ihre Seite in einem
-Container stattfindet, den unser Heatmaps-Tool nicht unterstützt.In unserem Artikel Heatmap-Einschränkungen finden Sie eine Auflistung dessen, was Heatmaps nicht erfassen können.
Die Breite der Seite wird mit JavaScript festgelegt
Hotjar erfasst einen Screenshot bei den folgenden Gerätebreiten:
- Desktop: 1280px
- Tablet: 800px
- Telefon: 380px
Screenshots können beeinträchtigt werden, wenn JavaScript verwendet wird, um eine feste Breite festzulegen, wenn sich die Browsergröße ändert. Wenn ein Benutzer eine Seite auf Ihrer Website mit einer festen Browserbreite aufruft, wird der Screenshot für diese Seite möglicherweise nicht korrekt angezeigt, da er nicht der erforderlichen Breite entspricht, die das Hotjar-Screenshot-Tool verwendet.
Mögliche Lösung:
In einigen Fällen können Sie dies beheben, indem Sie den Screenshot aktualisieren. Eine schrittweise Anleitung dazu finden Sie in unserem Artikel Heatmap-Screenshot aktualisieren.
Die Höhe der Seite wurde mit JavaScript festgelegt
Ihre Seite kann einige Elemente enthalten, die 100 % der Browserhöhe ausmachen und mit JavaScript eingestellt wurden. Hotjar erstellt Screenshots von Seiten in einem einzigen großen Fenster, und diese Art von Elementen kann sich weiter vergrößern, was zu einem unerwarteten Screenshot führt.
Mögliche Lösung:
Zur Behebung des Problems ist möglicherweise die Hilfe Ihres Entwicklungsteams erforderlich. Manchmal lässt sich das Problem lösen, indem Sie einen Höchstwert für die Höhenberechnung festlegen. Dies kann ein Wert Ihrer Wahl sein, bis zu 1200.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight; // - oder - // wenn (viewportHeight > 1200) { viewportHeight = 1200; }VH-Einheiten werden für die Textgröße auf der Seite verwendet
Wenn Bilder und Text in einem Screenshot verzerrt sind, kann dies darauf zurückzuführen sein, dass eine vh-Einheit für die Textgröße im CSS-Styling des Elements verwendet wird. Heatmap-Screenshots unterstützen diese Methode der vh-Verwendung derzeit nicht.
Mögliche Lösung:
In einigen Fällen können Sie das Problem beheben, indem Sie den Screenshot aktualisieren. In unserem Artikel Heatmap-Screenshots aktualisieren finden Sie eine Schritt-für-Schritt-Anleitung für diesen Vorgang.
In meinem Screenshot fehlen Elemente oder er ist ganz weiß/schwarz
Dies tritt in der Regel auf, wenn dynamische Inhalte auf der Seite bei Eventn wie Scrollen, Schweben oder Klicken geladen werden. Es kann auch auftreten, wenn Bilder auf Ihrer Seite so eingestellt sind, dass sie mit einer Verzögerung geladen werden, um die Ladegeschwindigkeit Ihrer Website zu erhöhen.
Mögliche Lösung:
Dieses Problem kann in einigen Fällen behoben werden, indem Sie einen neuen Screenshot mit unserem Screenshot-Aktualisierungstool erstellen. Mit diesem Tool können Sie Ihre Website in einem neuen Fenster laden, alle dynamischen Inhalte laden lassen und dann einen neuen Screenshot aufnehmen. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Artikel Heatmap-Screenshot aktualisieren.
Mein Screenshot auf dem Desktop zeigt Elemente für ein mobiles Gerät an
Es kann vorkommen, dass die Screenshots Ihrer Desktop-Website Elemente der mobilen Website enthalten, z. B. das Navigationsmenü. Dies kann auch umgekehrt der Fall sein, mit Desktop-Elementen im mobilen Screenshot.
Dies kann aufgrund von CSS-Regeln auf Ihrer Seite auftreten, wenn die Desktop-Site nicht so eingestellt ist, dass sie ab 1280px angezeigt wird. Es kann auch passieren, wenn Elemente unter Verwendung von min-device-width und max-device-width ein-/ausgeblendet werden.Mögliche Lösung:
Nicht alle Webbrowser erkennen min-device-width und max-device-width, was durch Ersetzen mit min-width und max-width behoben werden kann. Weitere Einzelheiten zu den Unterschieden zwischen diesen beiden Begriffen finden Sie in einem Beitrag auf Menucool mit dem Titel max-device-width vs max-width? Welche sollte ich verwenden?