6 Min. Lesedauer

Squarespace-Integration

Fügen Sie Zenovay über das Code Injection-Panel zu Ihrer Squarespace-Website hinzu. Die Integration erfordert keinen Code, funktioniert mit jeder Squarespace-Vorlage und berücksichtigt Squarespaces GDPR/CCPA-Einwilligungsbanner von Haus aus.

Code Injection erfordert einen Business-Plan oder höher (ab 23 $/Monat). Persönliche Pläne bieten keinen Zugang zu Code Injection.

Schnellstart

Schritt	Wo	Was Sie tun
1	Zenovay Dashboard	Kopieren Sie Ihr Tracking-Snippet
2	Squarespace-Admin → Settings → Advanced → Code Injection	Fügen Sie es in Header ein
3	Speichern	Klicken Sie oben im Panel auf Save
4	Zenovay Dashboard	Echtzeit-Besucher erscheinen innerhalb von ~30 Sekunden

Methode 1: Seitenweite Code Injection (Empfohlen)

Das Code Injection-Panel von Squarespace schreibt rohes HTML in den <head> jeder Seite. Es ist die unterstützte Methode, um Analysen oder Pixel von Drittanbietern hinzuzufügen.

Schritt für Schritt

Melden Sie sich in Ihrem Squarespace-Admin-Panel an.
Klicken Sie im Startmenü auf Settings.
Scrollen Sie nach unten und klicken Sie auf Advanced.
Klicken Sie auf Code Injection.
Fügen Sie das Zenovay-Snippet in das Feld Header ein:

<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Klicken Sie oben im Panel auf Save.

Überprüfen

Öffnen Sie Ihre Live-Website in einem Inkognito-Fenster und zeigen Sie den Quelltext an. Suchen Sie nach <script defer data-tracking-code=...> zwischen <head> und </head>. Ihr Besuch sollte in der Zenovay Echtzeit-Ansicht innerhalb von ~30 Sekunden erscheinen.

Methode 2: Seitenspezifische Code Injection (Premium- / Business-Pläne)

Wenn Sie nur bestimmte Seiten verfolgen möchten, verwenden Sie die seitenspezifische Injection:

Fahren Sie im Admin mit der Maus über die Seite im Pages-Panel.
Klicken Sie auf das Zahnrad-Symbol, um Page Settings zu öffnen.
Öffnen Sie den Tab Advanced.
Fügen Sie das Snippet in das Feld Page Header Code Injection ein.
Speichern.

Die seitenspezifische Injection wird nach der seitenweiten Injection ausgeführt. Fügen Sie den Tracker nicht in beiden Bereichen ein — es kommt zur doppelten Zählung.

Benutzerdefinierte Ereignisse verfolgen

Nachdem der Tracker geladen ist, können Sie window.zenovay() aus einem beliebigen Code Block auf einer Seite aufrufen.

CTA-Klicks verfolgen

Fügen Sie im Seiteneditor einen Code-Block neben Ihrer Schaltfläche ein.
Setzen Sie die Sprache auf HTML.
Fügen Sie Folgendes ein:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta="hero"]');
    if (!cta || !window.zenovay) return;
    cta.addEventListener('click', () => {
      window.zenovay('track', 'cta_clicked', { location: 'hero', page: location.pathname });
    });
  });
</script>

Fügen Sie ein data-zv-cta="hero"-Attribut zu Ihrer Schaltfläche hinzu, indem Sie die Block-Einstellungen bearbeiten (einige Vorlagen erfordern, dass Sie die Schaltfläche in einen Code-Block einschließen, um Rohattribute hinzuzufügen).

Formular-Absendungen verfolgen

Squarespace-native Formulare senden ein Y.Mojito.SquarespaceFormFront-Ereignis aus, in das Sie sich einhaken können. Der einfachste vorlagenübergreifende Ansatz ist jedoch, auf das submit-Ereignis zu hören:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form[data-form-id]').forEach(form => {
      form.addEventListener('submit', () => {
        if (window.zenovay) {
          window.zenovay('track', 'form_submitted', {
            form_id: form.getAttribute('data-form-id'),
            page: location.pathname,
          });
        }
      });
    });
  });
</script>

Eingeloggte Kunden identifizieren (Member Areas)

Wenn Sie Squarespace Member Areas verwenden, können Sie Kunden nach dem Einloggen identifizieren. Fügen Sie dies in Code Injection → Footer ein (damit es ausgeführt wird, nachdem Squarespace den Member-Kontext hydratisiert hat):

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const memberId = window.SquarespaceMemberAccountContext?.context?.memberId;
    const email = window.SquarespaceMemberAccountContext?.context?.emailAddress;
    if (memberId && window.zenovay) {
      window.zenovay('identify', { userId: memberId, email });
    }
  });
</script>

Die interne Squarespace-Kontext-Schnittstelle ist Best-Effort — schließen Sie sie in try/catch ein, wenn Sie darauf angewiesen sind.

Squarespace Commerce-Käufe verfolgen

Für Squarespace Commerce-Shops lösen Sie ein purchase-Ereignis auf der Bestellbestätigungsseite aus:

Gehen Sie zu Settings → Advanced → Code Injection.
Fügen Sie in das Feld Order Confirmation Page (nicht das reguläre Header-Feld) Folgendes ein:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const orderId = document.querySelector('[data-order-id]')?.dataset.orderId
                 || window.location.pathname.split('/').pop();
    const total = document.querySelector('.order-total .price')?.textContent;
    const revenue = parseFloat((total || '').replace(/[^0-9.]/g, ''));
    if (window.zenovay && revenue > 0) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue,
        currency: 'USD',
      });
    }
  });
</script>

Für eine präzise Umsatzzuordnung einschließlich Rückerstattungen und Abonnements bevorzugen Sie Stripe-Webhooks auf der Serverseite — der clientseitige Fallback oben verpässt Bestellungen, bei denen Käufer den Tab schließen, bevor die Bestätigungsseite gerendert wird.

Plan-Voraussetzungen

Plan	Code Injection	Seitenspez. Injection	Commerce-Ereignisse
Personal	❌	❌	❌
Business	✅	✅	⚠️ Add-on
Basic Commerce	✅	✅	✅
Advanced Commerce	✅	✅	✅ + Verlassener Warenkorb

Häufige Stolpersteine

Der Personal-Plan hat keine Code Injection. Dies ist das häufigste Support-Ticket. Sie benötigen Business (23 $/Monat) oder höher.

Squarespace 7.1 vs. 7.0-Vorlagen. Beide unterstützen Code Injection identisch — der Menüpfad ist derselbe. Der einzige Unterschied: Einige 7.0-Vorlagen haben eine separate Option „Page Header" in den Vorlageneinstellungen; ignorieren Sie diese und verwenden Sie das Standardpanel Settings → Advanced → Code Injection.

AMP- / Sperrbildschirm-Seiten. Squarespace liefert eine AMP-Variante von Blogbeiträgen (/?format=amp). Ihr Tracker lädt dort nicht, da AMP beliebige <script>-Tags entfernt. Wenn AMP für Sie wichtig ist, deaktivieren Sie die AMP-Auslieferung unter Settings → Marketing → SEO.

SPA-ähnliche Navigation bei einigen Vorlagen. Die meisten Squarespace-Vorlagen führen bei Link-Klicks vollständige Seitenneulads durch. Einige (insbesondere Brine und Native) haben AJAX-Seitenübergänge, bei denen kein neuer <head>-Load ausgelöst wird. Wenn Sie bei diesen Vorlagen zu wenige Seitenaufrufe sehen, rufen Sie window.zenovay('trackPageView') manuell über einen popstate-Listener auf.

Cookie-Einwilligungsbanner. Wenn Sie Squarespaces eingebauten Cookie-Banner (Settings → Cookies & Visitor Data) aktiviert haben, blockiert er Ihre benutzerdefinierte Code Injection nicht. Um Zenovay bis zur Einwilligung zu blockieren, verwenden Sie stattdessen den Modus data-cookieless="true", der unter den meisten Rechtsordnungen ohne Einwilligungsbanner auskommt.

Fehlerbehebung

Symptom	Wahrscheinliche Ursache	Lösung
Keine Daten, Personal-Plan	Code Injection unterhalb von Business deaktiviert	Plan upgraden
Keine Daten	Snippet eingefügt, aber nicht gespeichert	Klicken Sie oben im Code Injection-Panel auf Save
Keine Daten auf Blogbeiträgen	AMP-Variante wird für Ihr Testgerät ausgeliefert	AMP deaktivieren oder die kanonische URL testen
Einige Seiten fehlen	Seitenspezifische Code Injection nur auf wenigen Seiten	Snippet in den seitenweiten Header verschieben
Doppelte Seitenaufrufe	Snippet sowohl im seitenweiten Header als auch im seitenspezifischen Header	Einen Bereich wählen

Datenschutz & Compliance

Für Cookie-freies Tracking (keine Cookies, kein Local Storage) fügen Sie data-cookieless="true" hinzu:

<script defer
        data-tracking-code="YOUR_TRACKING_CODE"
        data-cookieless="true"
        src="https://api.zenovay.com/z.js"></script>

Weitere Details finden Sie unter Datenschutz-Compliance.

Weiterführende Ressourcen

Brauchen Sie Hilfe? Kontaktieren Sie [email protected] oder besuchen Sie unser Help Center.