So installieren Sie ein Heatmap-Tracking in Ihrem Shopify-Shop (ohne App, mit nur einer Zeile Code)

Artikel-Zusammenfassung

Um eine Heatmap zu Shopify hinzuzufügen, müssen Sie nur eine einzige Codezeile in theme.liquid einfügen – keine App-Installation nötig

Duplizieren Sie Ihr Theme vor der Bearbeitung immer als Sicherung. Änderungen werden sofort beim Speichern wirksam – anders als bei STUDIO gibt es keinen separaten Veröffentlichungsschritt

Checkout-Seiten führen keinen Theme-Code aus und werden daher nicht erfasst. Erfolg bedeutet, dass der Zähler im HeatMapX-Dashboard tatsächlich steigt – nicht nur, dass „keine Fehler" auftreten

Fragen Sie sich, ob Sie Ihrem Shopify-Shop eine Heatmap hinzufügen können, ohne eine App zu installieren? Das können Sie. Shopify erlaubt es, eine einzige Zeile Tag-Code direkt in Ihr Theme einzufügen – ganz ohne App. Diese Anleitung führt Sie durch den Sicherungsschritt, den Sie immer zuerst durchführen sollten, das Hinzufügen des Tags, die Erfolgskontrolle und ein paar Dinge, auf die Sie achten sollten.

Schritt 1: Site Key besorgen

Registrieren Sie sich zunächst bei HeatMapX (ein kostenloser Plan ist verfügbar), tragen Sie Ihren Shop ein und holen Sie sich Ihren Site Key. Es ist keine Kreditkarte erforderlich.

Sobald Sie Ihren Site Key haben, verwenden Sie das folgende Tag und ersetzen Sie YOUR_SITE_KEY durch den Ihnen zugewiesenen Schlüssel.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Schritte: Das Tag zu theme.liquid hinzufügen

1. (Erforderlich) Theme als Sicherung duplizieren

Bevor Sie den Code direkt bearbeiten, sollten Sie immer zuerst Ihr aktuelles Theme duplizieren. Gehen Sie in Ihrem Shopify-Adminbereich zu Online-Shop → Themes, suchen Sie Ihr veröffentlichtes Theme, klicken Sie auf das „…"-Menü (Aktionen) und wählen Sie Duplizieren. So erhalten Sie eine sichere Kopie, auf die Sie zurückgreifen können, falls etwas schiefgeht. Wenn Sie diesen Schritt überspringen, haben Sie keine Möglichkeit, eine fehlerhafte Bearbeitung rückgängig zu machen.

2. Code-Editor öffnen

Gehen Sie in Ihrem Shopify-Adminbereich zu Online-Shop → Themes
Klicken Sie bei Ihrem veröffentlichten Theme auf das „…"-Menü (Aktionen) und wählen Sie Code bearbeiten
Links öffnet sich ein Datei-Browser für Ihr Theme

3. Tag in layout/theme.liquid einfügen

Öffnen Sie in der Dateiliste den Ordner „Layout" und klicken Sie auf theme.liquid
Suchen Sie in der Datei nach </head> und fügen Sie das obige Tag direkt davor ein
Speichern Sie die Datei

4. Speichern genügt – keine erneute Veröffentlichung nötig

Bei Shopify wird eine Änderung am Theme-Code in dem Moment wirksam, in dem Sie sie speichern. Anders als bei STUDIO gibt es keinen separaten Schritt zum „Veröffentlichen" oder „erneuten Veröffentlichen". Sobald Sie gespeichert haben, ist das Tag bereits in Ihrem Live-Shop geladen.

So prüfen Sie, ob es wirklich funktioniert

Nachdem Sie das Tag hinzugefügt haben, rufen Sie einige Seiten Ihres eigenen Shops auf. Aber hier kommt der wichtige Teil.

Dass eine Seite ohne Fehler lädt, ist nicht dasselbe wie ein tatsächlich funktionierendes Tracking. Selbst wenn in der Browser-Konsole nichts Auffälliges zu sehen ist, kann ein falsch eingegebener Site Key oder ein an der falschen Stelle eingefügtes Tag dazu führen, dass gar keine Daten bei HeatMapX ankommen.

Die einzig verlässliche Prüfung besteht darin, das HeatMapX-Dashboard zu öffnen, Ihren Shop in der Website-Liste zu finden und zu bestätigen, dass der Zähler tatsächlich gestiegen ist. Wenn der Zähler nach dem Besuch einiger Seiten – Produktseiten, Kategorieseiten und so weiter – steigt, funktioniert Ihre Installation.

Worauf Sie achten sollten

Checkout-Seiten werden nicht erfasst

Das Tag, das Sie zu theme.liquid hinzugefügt haben, läuft auf Ihrer Storefront – der Startseite, den Produktseiten, Kategorieseiten und dem Warenkorb – aber es läuft nicht auf den Checkout-Seiten (den Zahlungsseiten unter /checkouts/). Der Checkout wird direkt von Shopify gehostet, getrennt von Ihrem Theme, und Theme-Code aus theme.liquid wird dort nie geladen. Wenn Sie in Ihrem Dashboard keine Daten für Checkout-Seiten sehen, ist das normal und kein Fehler.

Beim Theme-Wechsel muss das Tag erneut hinzugefügt werden

Das Tag existiert nur in der theme.liquid-Datei des Themes, das Sie bearbeitet haben. Wenn Sie später zu einem anderen Theme wechseln (ein neues Theme veröffentlichen), übernimmt dessen theme.liquid das Tag nicht automatisch. Wiederholen Sie bei jedem Theme-Wechsel dieselben Schritte, um das Tag zum neuen Theme hinzuzufügen.

FAQ

F: Verlangsamt das meinen Shop? A: Das Tag lädt asynchron und ist sehr schlank, sodass die Auswirkung auf die Ladegeschwindigkeit minimal ist.

F: Ich habe das Tag hinzugefügt, aber der Zähler im Dashboard steigt nicht A: Die häufigste Ursache ist ein falscher Site Key – etwa das Einfügen des Schlüssels einer anderen Website oder ein beim Kopieren verlorengegangenes Zeichen. Prüfen Sie außerdem, ob die getesteten Seiten tatsächlich Storefront-Seiten sind (Startseite, Produkt, Kategorie) und nicht Checkout-Seiten, da der Checkout grundsätzlich nicht erfasst wird.

Fazit

Eine Heatmap zu Shopify hinzuzufügen läuft letztlich darauf hinaus, eine Zeile Code in theme.liquid einzufügen – keine App erforderlich. HeatMapX lässt sich kostenlos ausprobieren – testen Sie es und sehen Sie, wie Ihre Kund:innen Ihren Shop tatsächlich erleben.