Dieser Artikel identifiziert und bietet Lösungen für unerwartete, leere, fehlerhafte und abgeschnittene Heatmap-Screenshot-Ergebnisse. Wenn Sie Hilfe bei der Fehlerbehebung der Heatmap-Daten benötigen, die über dem Screenshot platziert sind, lesen Sie unseren Artikel zur Fehlerbehebung von Heatmap-Daten.
Klicken Sie auf das untenstehende Screenshot-Problem, das am ehesten beschreibt, was Sie sehen:
Mein Screenshot hat keine Formatierung oder CSS angewendet, mit Bildern und Symbolen, die größer als erwartet sind
In dem Video erwähnte Artikel: Hotjar IPs und Wie man einen Heatmap-Screenshot wiederholt
Fehlendes CSS oder Bilder und SVG-Symbole, die größer als erwartet sind, bedeuten in der Regel, dass der Server Ihrer Website Hotjar den Zugriff auf die CSS-Dateien verweigert.
Gründe, warum Ihre Website Hotjar den Zugriff auf CSS verweigern könnte, sind unter anderem:
- Der Zugriff ist auf bestimmte IP-Adressen beschränkt
- Blockierung basierend auf Domain/Referrer
- Der Zugriff ist aufgrund der Geolokation eingeschränkt (d.h. der Zugriff auf Assets aus Irland ist nicht möglich)
- Blockierung aufgrund fehlender Cookies/sessionStorage
- Blockierung aufgrund von Passwortschutz, der verhindert, dass Assets direkt über ihre URL zugegriffen werden können, oder Blockierung von Anfragen an bestimmte Endpunkte
Lösung:
In den meisten Fällen können die unten aufgeführten Anpassungen Probleme im Zusammenhang mit Domain/Referrer und IP-Blockierung beheben. Nachdem Sie diese Änderungen vorgenommen haben, sollte das Aktualisieren Ihres Screenshots das Problem lösen.
-
Erlauben Sie die Domain/Referrer https://insights.hotjar.com
Wir empfehlen, die Domains *.hotjar.com zu erlauben, insbesondere für die Anwendung von CSS auf Heatmaps.
-
Erlauben Sie die IP-Adressen von Hotjar
All unsere Server sind auf Amazon AWS eu-west-1 in Irland gehostet und greifen über HTTPS auf Stylesheets zu. Unten finden Sie eine Liste der IPs, die Hotjar verwendet, um ausgehenden Datenverkehr zu senden, den Sie bei Bedarf auf Ihrer Seite zulassen können.
18.203.61.76 18.203.176.135 52.17.197.221Die oben aufgeführten IPs decken nicht die tatsächliche Domain ab
Die tatsächliche Domain ist https://insights.hotjar.com. Dies liegt daran, dass sie von unserem CDN-Anbieter bereitgestellt wird. Wir empfehlen, die Domains *.hotjar.com zu erlauben, insbesondere für die Anwendung von CSS auf Heatmaps.
Wenn Sie ein Content Delivery Network (CDN), Web Application Firewall (WAF) oder einen anderen Dienst verwenden, der zwischen Ihrem Server und dem Rest des Webs sitzt, müssen Sie möglicherweise auch Änderungen in diesen Diensten sowie auf dem Server vornehmen.
-
Erlauben Sie die User-Agents von Hotjar
Einige CDNs oder WAFs erlauben es Ihnen möglicherweise nicht, den Zugriff basierend auf der IP-Adresse zu gestatten, gestatten jedoch den Zugriff basierend auf dem User-Agent.
'phone': ( 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like 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, like 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, like Gecko) ' 'Hotjar Chrome/97.0.4692.71 Safari/537.36' )
Mein Screenshot ist unten abgeschnitten, hat die falsche Größe oder ist verzerrt
Wenn Ihr Screenshot unten abgeschnitten ist, die Größe falsch ist oder verzerrt erscheint, kann dies auftreten, wenn die Standardfunktionalität des Scrollens der Seite in Ihrem Website-Code angepasst ist.
Im Folgenden finden Sie 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 sie maximal mit einer Höhe von 15.000 Pixeln. Seiten, die länger sind, werden bis zu diesem Punkt beschnitten.
Die Verwendung der Option zum erneuten Screenshot dieser Seite selbst erstellen ermöglicht es Ihnen jedoch in den meisten Fällen, die gesamte Seite zu erfassen.
Siehe unseren Artikel zu Heatmap-Beschränkungen für eine Liste dessen, was Heatmaps nicht erfassen können.
-
Das Scrollen der Seite erfolgt nicht auf dem Dokumentenelement
Wenn Ihre Seite nicht auf dem Dokumentenelement scrollt oder einen Scroll-Lock verwendet, um die Seite zu scrollen, kann Hotjar keinen vollständigen Screenshot der Seite erfassen, und es kann abgeschnitten erscheinen. Dies liegt daran, dass unser Screenshot-Erfassungsprozess die Länge des Dokuments bestimmen muss. Wenn Sie einen abgeschnittenen Screenshot sehen, könnte dies daran liegen, dass das Scrollen für Ihre Seite in einem <div>-Container erfolgt, den unser Heatmaps-Tool nicht unterstützt.
Siehe unseren Artikel zu Heatmap-Beschränkungen für eine Liste 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: 1500px
- 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 besucht, erscheint der Screenshot für diese Seite möglicherweise nicht korrekt, da er nicht die erforderliche Breite hat, die das Hotjar-Screenshot-Tool verwendet.
Mögliche Lösung:
In einigen Fällen können Sie dies beheben, indem Sie den Screenshot aktualisieren. Siehe unseren Artikel So aktualisieren Sie einen Heatmap-Screenshot für eine schrittweise Anleitung dazu.
-
Die Höhe der Seite wurde mit JavaScript festgelegt
Ihre Seite kann einige Elemente haben, die 100% der Browserhöhe ausmachen, die mit JavaScript festgelegt sind. Hotjar erstellt Seiten-Screenshots in einem einzigen großen Fenster, und diese Arten von Elementen können sich weiter vergrößern, was zu einem unerwarteten Screenshot führt.
Mögliche Lösung:
Eine Lösung erfordert möglicherweise Unterstützung von Ihrem Entwicklungsteam. Manchmal kann dies durch Festlegen eines maximalen Werts für Ihre Höhenberechnung behoben werden. Dies kann ein Wert Ihrer Wahl sein, bis zu 1200.
viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight; // - oder - // if (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 daran liegen, dass eine vh-Einheit für die Textgröße innerhalb des CSS-Stylings des Elements verwendet wird. Heatmap-Screenshots unterstützen derzeit diese Methode der vh-Verwendung nicht.
Mögliche Lösung:
In einigen Fällen können Sie dies beheben, indem Sie den Screenshot aktualisieren. Siehe unseren Artikel So aktualisieren Sie einen Heatmap-Screenshot für eine schrittweise Anleitung dazu.
Mein Screenshot weist fehlende Elemente auf oder erscheint ganz weiß/schwarz
Dies tritt normalerweise auf, wenn dynamische Inhalte auf der Seite bei Ereignissen wie Scrollen, Hovern oder Klicken geladen werden. Es kann auch auftreten, wenn Bilder auf Ihrer Seite verzögert geladen werden, z. B. um die Ladezeit Ihrer Website zu erhöhen.
Mögliche Lösung:
In einigen Fällen kann dieses Problem behoben werden, indem Sie einen neuen Screenshot mit unserem aktualisierten Screenshot-Tool erstellen. Mit diesem Tool haben Sie die Möglichkeit, Ihre Website in einem neuen Fenster zu laden, alle dynamischen Inhalte zu laden und dann einen neuen Screenshot zu erstellen. Sehen Sie sich unseren Artikel So aktualisieren Sie einen Heatmap-Screenshot für eine schrittweise Anleitung dazu an.
Mein Screenshot auf dem Desktop zeigt Elemente für ein mobiles Gerät an
Sie könnten auf ein Problem stoßen, bei dem die Screenshots Ihrer Desktop-Website Elemente der mobilen Website enthalten, wie z. B. das Navigationsmenü. Dies kann auch umgekehrt auftreten, mit Desktop-Elementen im mobilen Screenshot.
Dies kann auf CSS-Regeln auf Ihrer Seite zurückzuführen sein, bei denen die Desktop-Website nicht ab 1280px angezeigt wird. Es kann auch passieren, wenn Elemente mit min-device-width und max-device-width ausgeblendet/eingeblendet werden.
Mögliche Lösung:
Nicht alle Webbrowser erkennen min-device-width und max-device-width, was durch Ersetzen dieser durch min-width und max-width behoben werden kann. Weitere Details zu den Unterschieden zwischen diesen finden Sie in einem Beitrag auf Menucool mit dem Titel max-device-width vs max-width? Welches sollte ich verwenden?