So installierst du Wieder auf Lager für BigCommerce

Du wirst lernen

Erfahre, wie du Klaviyo's Wieder auf Lager-Funktion auf deinem BigCommerce Laden installierst. Diese Funktion hat zwei wichtige Komponenten - einen Flow und einen Button auf deiner Website. 

1. wieder auf Lager Flow: Wenn jemand einen Wiederauffüllungsalarm abonniert, wird auf seinem Klaviyo Profil ein Ereignis "Abo für wieder auf Lager" vermerkt. Dies ist das Ereignis, mit dem du dein Wieder auf Lager Flow auslösen wirst. Shopper kommen in den Flow, wenn sie einen Wiederauffüllungsalarm abonnieren und auf "wieder auf Lager Delay" warten, bis ihr gewünschter Artikel wieder auf Lager ist.
2. Website-Schaltfläche: Du musst ein Snippet in dein BigCommerce-Theme einfügen, das automatisch eine Schaltfläche "Benachrichtigen, wenn verfügbar" anzeigt, wenn Artikel nicht mehr vorrätig sind. Wenn Kunden auf diese Schaltfläche klicken, füllen sie ein Formular aus und melden sich für einen Nachschubalarm an.

Bevor du beginnst

In dieser Anleitung geht es um die Installation von Klaviyo's wieder auf Lager Snippet in deinem BigCommerce Skript-Manager, damit sich Kunden für Wiederauffüllungswarnungen anmelden können. Bevor du anfängst, solltest du einen Wieder-auf-Lager-Flow in deinem Konto einrichten, um diese Abonnenten zu erfassen und den Wieder-auf-Lager-Benachrichtigungsprozess zu automatisieren.

Bitte beachte, dass unsere Schaltfläche "Wieder auf Lager" in der Schnellansicht, die von einer Sammlungsseite aus aufgerufen wird, nicht unterstützt wird. Die Schaltfläche darf nur auf der Produktseite platziert werden.

Wie funktioniert das Snippet?

Sobald du das unten angegebene Snippet installierst, geschieht Folgendes:

• Wenn ein Kunde ein Produkt durchsucht und es nicht mehr vorrätig ist, erscheint die Schaltfläche "Benachrichtigen, wenn verfügbar" direkt an der Stelle, an der normalerweise die Schaltfläche "Ausverkauft" angezeigt würde.
• Wenn jemand auf die Schaltfläche "Benachrichtigen Sie mich..." klickt, wird ein Formular angezeigt, in dem sich der Käufer anmelden kann, um benachrichtigt zu werden, wenn der Artikel wieder verfügbar ist.
• Sobald das Formular abgeschickt wurde, wird ein "Abonnieren Sie wieder auf Lager"-Ereignis im Profil des Shoppers auf Klaviyo nachverfolgt.
• Der Wieder auf Lager Flow, den du bereits eingerichtet hast, benachrichtigt die Kunden, wenn der Artikel, den sie abonniert haben, wieder auf Lager ist.

Klaviyo verfolgt deinen Bestand in deinem Klaviyo Konto und aktualisiert Produkte alle 3 Stunden und Varianten jede Stunde. Aufgrund dieser Verzögerung kann es vorkommen, dass Produkte, die in deinem Laden nicht mehr vorrätig sind, noch nicht in Klaviyo angezeigt werden. Es kann auch vorkommen, dass ein Produkt, das in deinem Laden wieder auf Lager ist, nicht in Klaviyo angezeigt wird.

Klaviyo überwacht deinen Bestand auch auf der Ebene der Varianten. Das bedeutet, dass die Käufer/innen Benachrichtigungen über bestimmte Produktvarianten erhalten können. Wenn ein Kunde z.B. feststellt, dass sein Lieblings-T-Shirt in Pink in der Größe Medium nicht mehr verfügbar ist, kann er diese Variante abonnieren und Klaviyo sorgt dafür, dass er nur benachrichtigt wird, wenn du diese Größe und Farbe wieder vorrätig hast.

Installiere das Snippet

Um das Snippet Klaviyo wieder auf Lager zu installieren, fügst du es zu einem neuen Skript in deinem Skriptmanager hinzu.

1. Navigiere in deinem BigCommerce Admin zu Storefront > Script Manager.
2. Klicke auf Skript erstellen. Verwende die folgenden Einstellungen:
   • Name der Schrift: Klaviyo wieder auf Lager
   • Position auf der Seite: Fußzeile
   • Wähle die Seiten aus, auf denen das Skript hinzugefügt werden soll: Laden von Seiten
   • Schriftart: Skript
3. Als Nächstes aktualisierst du das unten stehende Skript mit deinem Klaviyo öffentlichen API-Schlüssel und fügst das Update-Skript in das Skriptfeld ein.
   • Du kannst deinen 6-stelligen öffentlichen API-Schlüssel von Klaviyo kopieren. Um ihn zu finden, klicke auf deinen Kontonamen in der unteren linken Ecke und navigiere dann zu Einstellungen > API-Schlüssel. In dem Skript sollte deine öffentliche API den Text ersetzen, der PUBLIC_API_KEY lautet.
     

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
   <script>
        var Klaviyo = Klaviyo || [];   
        Klaviyo.init({   
             account: 'PUBLIC_API_KEY',    
             platform: 'bigcommerce'  
        });  
        Klaviyo.enable("backinstock",{    
        Auslöser: {  
             product_page_text: "Notify Me When Available", 
             product_page_class: "button",  
             product_page_text_align: "center", 
             product_page_margin: "0px", 
             replace_anchor: false 
        },  
        modal: { 
             Überschrift: "{product_name}", 
             body_content: "Registriere dich, um eine Benachrichtigung zu erhalten, wenn dieser Artikel wieder auf Lager ist.",   
             E-Mail: "E-Mail", 
             button_label: "Benachrichtige mich, wenn verfügbar", 
             subscription_success_label: "Du bist dabei! Wir sagen dir Bescheid, wenn er wieder da ist.",  
             footer_content: '',
             additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",   
             drop_background_color: "#000",
             background_color: "#fff",
             text_color: "#222", 
             button_text_color: "#fff",
             button_background_color: "#4787ed",
             close_button_color: "#ccc", 
             error_background_color: "#fcd6d7", 
             error_text_color: "#C72E2F",
             success_background_color: "#d3efcd",
             success_text_color: "#1B9500" 
             } 
        });
   </script>

4. Klicke auf Speichern. Du hast jetzt die Schaltfläche Klaviyo wieder auf Lager zu deinem Laden hinzugefügt.
   

Gestalte dein Formular und deine Schaltfläche

Der Klaviyo "Notify Me When Available" Button und das Formular sind in hohem Maße konfigurierbar. Du kannst die Farben, die Schriftarten, den Text und andere Elemente nach deinen Gestaltungswünschen ändern.

Die Standardwerte, die im obigen Snippet enthalten sind, werden unten aufgelistet und erklärt. Wenn du eine Aktualisierung vornimmst, achte darauf, dass du den Wert aktualisierst und nicht das Etikett selbst.

Auslöser-Einstellungen

Der Auslöser ist die Schaltfläche, die erscheint, wenn ein Artikel nicht mehr auf Lager ist. Diese Schaltfläche lautet standardmäßig: "Benachrichtige mich, wenn verfügbar", kann aber so konfiguriert werden, dass sie sagt, was du möchtest. Der Standardcode für den Auslöser ist:

Auslöser: {
    product_page_text: "Notify Me When Available",
    product_page_class: 'button',
    product_page_text_align: 'center',
    product_page_margin: '0px',
    alternate_anchor: "AddToCart",
    replace_anchor: false
    }, 

• product_page_text
  Der Text, der in der Schaltfläche angezeigt wird, die eingeblendet wird, wenn ein Artikel nicht mehr auf Lager ist.
• product_page_class
  Diese "Klasse" legt fest, wie die Schaltfläche aussieht; der Standardwert "button" stellt sicher, dass diese Schaltfläche zu anderen Basisschaltflächen in deinem Thema passt.
• product_page_text_align
  Die Ausrichtung des Textes innerhalb der Schaltfläche wieder auf Lager (z.B. Mitte, rechts oder links).
• product_page_margin
  Der Rand, der um die Schaltfläche herum zwischen dem Text und der Schaltfläche hinzugefügt wird.
• alternate_anchor
  Wenn dein Theme ein anderes Element als einen "Add to Cart" Button verwendet, ersetze diesen Text durch die ID des Elements.
• replace_anchor
  Wenn diese Option auf false gesetzt ist, siehst du sowohl eine "Ausverkauft" als auch eine "Benachrichtigen, wenn verfügbar" Schaltfläche. Wenn dies auf true gesetzt ist, ersetzt die Schaltfläche "Benachrichtigen, wenn verfügbar" die Schaltfläche "Ausverkauft".

Modale Einstellungen

Das Modal ist das Nachrichtenfeld, das erscheint, wenn jemand auf die Schaltfläche klickt, um benachrichtigt zu werden, sobald ein Artikel wieder auf Lager ist. Dies sind die Standardeinstellungen, die du anpassen kannst:

• headline
  Die Überschrift, die oben im Popup erscheint. Standardmäßig wird die Überschrift als Produktname dynamisch mit der Variable {product_name} von BigCommerce gefüllt.
• body_content
  Der Text, der im Popup erscheint und dem Kunden sagt, was er tun soll. 
• E-Mail
  Der Platzhaltertext im E-Mail-Feld.
• button_label
  Der Text innerhalb der "submit" Schaltfläche für dieses Pop-up-Formular.
• subscription_success_label
  Die "Erfolgsmeldung", die in grüner Farbe erscheint, wenn jemand das Pop-up-Formular erfolgreich abgeschickt hat.
• footer_content
  (optional) Text, der in der Fußzeile unter dem Submit-Button erscheint close_label: "Schließen".
• background_color
  Die Hintergrundfarbe des Pop-up-Formulars; Standard ist weiß.
• text_color
  Die Textfarbe des Pop-up-Formulars; Standard ist schwarz.
• button_text_color
  Die Textfarbe der Schaltfläche auf dem Pop-up-Formular; Standard ist weiß.
• button_background_color
  Die Hintergrundfarbe des Submit-Buttons des Formulars; Standard ist blau.
• error_background_color
  Die Hintergrundfarbe einer Fehlerbox, die angezeigt wird, wenn ein Fehler beim Absenden des Formulars aufgetreten ist; Standard ist blassrot.
• error_text_color
  Die Textfarbe der Fehlermeldung, die angezeigt wird, wenn ein Fehler beim Absenden des Formulars aufgetreten ist; Standard ist rot.
• success_background_color
  Die Hintergrundfarbe der Erfolgsbox, die angezeigt wird, wenn jemand das Formular erfolgreich abgeschickt hat; Standard ist hellgrün.
• success_text_color
  Die Textfarbe der Erfolgsmeldung, die angezeigt wird, nachdem jemand das Formular erfolgreich abgeschickt hat; Standard ist grün.

Kunden zum Opt-in für Marketing auffordern

Wenn jemand einen "Wieder auf Lager"-Alarm abonniert, bedeutet das nicht unbedingt, dass er erwartet, in deine Haupt-Newsletterliste aufgenommen zu werden.

Wenn Kunden darum bitten, benachrichtigt zu werden, wenn ein Artikel wieder auf Lager ist, aber dann regelmäßig Marketing-Inhalte von dir erhalten, werden sie sich wahrscheinlich abmelden. In diesem Szenario verlierst du die Möglichkeit, diese Kunden zu treuen Kunden zu machen, weil sie sich frühzeitig abmelden, nachdem sie eine E-Mail erhalten haben, die sie nie gewünscht haben.

Um diejenigen zu erfassen, die sich dafür entscheiden, Marketing-E-Mails von dir zu erhalten, kannst du ein Kontrollkästchen wie dieses in dein Wieder auf Lager Formular einfügen:

Um dies zu implementieren, musst du eine primäre Ergänzung zu deinem Snippet vornehmen, indem du deine Listen-ID in der "Klaviyo.init" hinzufügst. Abschnitt nach deiner Konto-ID.

1. Der Abschnitt "Klaviyo.init" sieht dann so aus:

   Klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
   });
   

2. Ersetze DEINE_LIST_ID durch die sechsstellige ID der Klaviyo Liste, zu der du diese Abonnenten hinzufügen möchtest. Normalerweise sollte dies deine Haupt-Newsletterliste sein.
3. Das Snippet mit diesem Zusatz (siehe Zeile 5) sieht dann wie folgt aus:

   <script>
       var Klaviyo = Klaviyo || [];
       Klaviyo.init({
           account: 'KLAVIYO_PUBLIC_API_KEY',
           list: 'YOUR_LIST_ID',
           platform: 'bigcommerce'
       });
       Klaviyo.enable('backinstock',{ 
          Auslöser: {
            ...
          },
          modal: {
            ...
          }
       });
   </script>
   

4. Wenn du den Inhalt des Kontrollkästchens anpassen möchtest, kannst du den Text, der angezeigt werden soll, im Abschnitt "modal" hinzufügen.

   modal: {
       newsletter_subscribe_label: "Add me to your email list."
           ...
       }

   Standardmäßig steht in diesem Kästchen: "Füge mich zu deiner E-Mail-Liste hinzu." Achte darauf, dass dieser Text sehr deutlich ist, damit diejenigen, die sich angemeldet haben, wissen, dass sie ab sofort Marketing-E-Mails von dir erhalten.

5. Wenn du steuern möchtest, ob dieses Kästchen markiert oder nicht markiert ist, kannst du "subscribe_checked" als Parameter zum "modal" Abschnitt hinzufügen. Bei true wird das Kästchen standardmäßig markiert, bei false bleibt es unmarkiert und der/die Nutzer/in muss es manuell auswählen.

   modal: {
       subscribe_checked: true
           ...
       }

Ergebnis

Du hast jetzt die Funktion Klaviyo's wieder auf Lager auf deinem BigCommerce Laden installiert. 

Zusätzliche Ressourcen

• Erste Schritte mit BigCommerce
• Wie man ein Ereignis "In den Warenkorb" für BigCommerce erstellt