Erste Schritte mit Salesforce Commerce Cloud

Du wirst lernen

Erfahre, wie du Salesforce Commerce Cloud mit Klaviyo integrieren kannst. Mit der Klaviyo-Cartridge und API-Integration können Websites, die Salesforce Commerce Cloud (ehemals Demandware) nutzen, schnell eine Verbindung herstellen und sowohl Echtzeit- als auch historische Daten an Klaviyo senden. Wenn du Klaviyo in die Salesforce Commerce Cloud (SFCC) integrierst, verfolgt Klaviyo alle Aktionen in Echtzeit, wie z.B. die Navigation auf der Website, die Suche, die Anzeige von Produkten und Kategorien, das Hinzufügen von Artikeln in den Warenkorb, das Auschecken und die Bestellung.

Die Integration von SFCC in Klaviyo erfolgt in drei Hauptschritten, die in diesem Leitfaden behandelt werden:

1. Installiere die Klaviyo-Kassette in SFCC.
2. Füge Aktivierungs-Snippets zum SFCC hinzu.
3. Aktivieren der SFCC OCAPI-Integration in Klaviyo.

Bevor du beginnst

Klaviyo lässt sich sowohl in SFCC Controller-basierte Site Genesis (SG) als auch in Storefront Reference Architecture (SFRA) Sites integrieren. Jedes Framework erfordert ein etwas anderes Cartridge-Setup und andere Snippets, die im Folgenden beschrieben werden.

Um unsere Kassette der Version 23.7.0 (oder eine höhere Version) zu verwenden, empfehlen wir dir, deinen SFCC-Kompatibilitätsmodus auf 21.7 oder höher zu aktualisieren.

Wenn du zuerst deine Entwicklungsumgebung einbinden möchtest, kannst du mit der in diesem Artikel beschriebenen Methode ein verlinktes Klaviyo-Konto erstellen und deine Entwicklungsumgebung mit diesem Konto verbinden. Wir empfehlen, das Wort "Dev" oder "Staging" in den Unternehmensnamen aufzunehmen, den du beim Einrichten des Kontos verwendest, um die Konten beim Einloggen besser unterscheiden zu können. 

Einrichten der Klaviyo-Patronen

Lade die Patronen herunter

Du findest unsere App in der Salesforce AppExchange. Auf AppExchange kannst du mehr über Klaviyo erfahren und auf Get It Now klicken, um zu Github zu gelangen, wo unsere Cartridges in einer Zip-Datei zum Download bereitstehen. Wenn du eine SFRA-Site hast, lade die KlaviyoSFRA-Zip-Datei herunter, und wenn du eine Site Genesis-Site hast, lade die KlaviyoSG-Zip-Datei herunter. 

Du musst zwei Kassetten einrichten, die beide in der heruntergeladenen Zip-Datei enthalten sind. Diese Patronen enthalten:

• int_klaviyo oder int_klaviyo_sfra: Eine Site-spezifische Cartridge; int_klaviyo ist für Site Genesis-basierte Websites und int_klaviyo_sfra ist für SFRA-basierte Websites.
• int_klaviyo_core: für beide Arten von Infrastrukturen, die einige grundlegende, sich überschneidende Funktionen enthalten.

die Patronen importieren

Der erste Schritt besteht darin, die Cartridges in Visual Studio Code oder Eclipse zu importieren, damit sie für die Verknüpfung mit deiner SFCC-Instanz verfügbar sind

In VS Code

1. Kopiere die int_klaviyo_core Patrone und füge sie ein.
2. Kopiere entweder die Ordner int_klaviyo (Site Genesis) oder int_klaviyo_sfra (SFRA) als Geschwister zu deinen anderen Cartridge-Ordnern in die Codebase.

In der Eklipse

1. Navigiere zu Administration > importieren > Allgemein > Bestehende Projekte in den Arbeitsbereich.
2. importiere das int_klaviyo_core-Verzeichnis mit dem Import-Assistenten.
3. Wähle die SFCC-Instanz aus, mit der die Kassette verbunden werden soll.
4. Wähle Eigenschaften.
5. Wähle Projektreferenzen.
6. Schau in der int_klaviyo_core Kassette nach.
7. Wiederhole die Schritte 2 bis 6 für die andere Cartridge, die für dein Framework spezifisch ist (entweder int_klaviyo oder int_klaviyo_sfra).

Füge die Patronen in den Patronenpfad ein

Sobald die Patronen importiert sind, müssen sie mit dem SFCC Business Manager zur Liste der von deinem Standort verwendeten Patronen hinzugefügt werden.

1. Navigiere zu Verwaltung > Standorte > Standorte verwalten.
2. Wähle deinen Standort.
3. Wähle die Registerkarte Einstellungen.
4. Füge die Namen der importierten Klaviyo-Cartridges am Anfang des Cartridge-Pfads mit der Bezeichnung Cartridges ein, wobei die Core-Cartridge an letzter Stelle steht (entweder int_klaviyo:int_klaviyo_core oder int_klaviyo_sfra:int_klaviyo_core).
5. Klicke auf Anwenden.

Wenn du auf "Übernehmen" geklickt hast, solltest du jetzt die beiden Patronen am Anfang des Feldes " Effektiver Patronenpfad" sehen.

Dienste hinzufügen

Nachdem du die Kassetten importiert und zum Pfad der Standortkassetten hinzugefügt hast, muss der Klaviyo-Dienst hinzugefügt werden, um die Konfiguration der Einstellungen für die Kassette zu ermöglichen. Im Hauptverzeichnis der Klaviyo-Kassetten-Zip-Datei befindet sich eine weitere Zip-Datei namens metadata.zip. Die folgenden Anweisungen beziehen sich auf diese Zip-Datei.

1. Navigiere zu Verwaltung > Websiteentwicklung > Website importieren & Export > Dienste.
2. Lade hoch und importiere dann die Datei metadata.zip.
   
3. Wenn du gefragt wirst, ob du die ausgewählten Archivierungen importieren möchtest, wähle OK.
4. Du solltest jetzt sehen, dass der Import unter dem Abschnitt Status unten auf der Seite läuft.
   
5. Du hast jetzt Zugang zu einer Einstellungsseite unter Händlertools > Site Preferences > Custom Preferences > Klaviyo.
   
   Von hier aus kannst du die folgenden Einstellungen verwalten:
   • Klaviyo Aktiviert
     Muss auf "Ja" gesetzt werden, um die Patrone zu aktivieren.
   • Klaviyo Privater Schlüssel
     Ein privater API-Schlüssel von Klaviyo. Vergewissere dich, dass der private API-Schlüssel von Klaviyo, den du für diese Integration verwendest, vollen Zugriff hat. 
   • Klaviyo Konto
     Dein öffentlicher Klaviyo API-Schlüssel oder deine Site ID.
   • Ereignisse als SFCC kennzeichnen
     Wenn du dich entscheidest, Ereignisse als SFCC zu kennzeichnen, hast du Zugang zu vorgefertigten Flows in Klaviyo, die SFCC-Daten verwenden. Ein aktueller Nachteil der Kennzeichnung von Ereignissen ist, dass du keinen Zugang zu den Empfehlungen "Gesehenes Produkt" oder " In den Warenkorb gelegt" in den Klaviyo-Produktfeeds hast, wenn du dich für die Kennzeichnung entscheidest. 
     
     • Wenn du zuvor eine Cartridge-Version installiert hast, die älter als 23.7.0 ist, und jetzt ein Upgrade auf Version 23.7.0 oder höher durchführen, setze diese Option auf Nein. Integrationen, die vor dem 13. Juli 2023 erstellt wurden (d. h. Cartridge-Versionen vor 23.7.0) erzeugen Metrik, das nicht als SFCC gekennzeichnet ist. Wenn du in der Vergangenheit eine Version vor 23.7.0 verwendet hast, berücksichtigt diese Einstellung die alten Namenskonventionen, um eine Diskontinuität der Metrik-Daten in deinem Konto zu verhindern. 
   • Ereignis "In den Warenkorb" als "In den Warenkorb" senden
     Wenn du zuvor eine Cartridge-Version installiert hast, die älter als 23.7.0 ist, und jetzt ein Upgrade auf Version 23.7.0 oder höher durchführst, setze diese Option auf Ja. Andernfalls setze auf Nein. Diese Einstellung verhindert die Diskontinuität der Metrik-Daten in deinem Konto. 
   • Klaviyo Email Feldselektoren und Bezahlvorgang E-Mail Feldselektor
     Im folgenden Abschnitt findest du detaillierte Informationen zur Konfiguration dieser beiden Felder.
   • Bildtyp
     Der Produktbildtyp, den du in den an Klaviyo gesendeten Ereignisdaten verwenden möchtest. Wenn du dir nicht sicher bist, welchen Bildtyp du einstellen sollst, navigiere zu Händlertools > Produkte und Kataloge > Produkte, klicke auf ein Produkt und entscheide anhand der verfügbaren Bilder, welchen Ansichtstyp du verwenden möchtest (z. B. groß, mittel, klein, hochauflösend).
   • Marketing E-Mail Liste ID
     Du kannst E-Mail-Abonnenten beim Bezahlvorgang sammeln und sie mit einer Klaviyo Liste synchronisieren. Diese Einstellung ist die ID der Liste in Klaviyo, zu der du das E-Mail-Abonnement hinzufügen möchtest. Erfahre , wie du eine Liste ID in Klaviyofindest. Um E-Mail-Abonnenten beim Bezahlvorgang zu sammeln, musst du auch ein Checkbox-Snippet hinzufügen, das in einem späteren Abschnitt beschrieben wird.
   • Marketing SMS Liste ID
     Du kannst SMS Abonnent beim Bezahlvorgang sammeln und mit einer Klaviyo Liste synchronisieren. Diese Einstellung ist die ID Klaviyo Liste, zu der du SMS Abonnent hinzufügen möchtest. Erfahre , wie du eine Liste ID in Klaviyofindest. Wenn du sowohl SMS als auch E-Mail-Abonnent sammelst, wähle eine andere Liste für SMS als für E-Mail. So wird sichergestellt, dass die Zustimmung immer dem richtigen Kanal zugeordnet wird. Um SMS Abonnent bei Bezahlvorgang zu sammeln, brauchst du neben einem Checkbox-Snippet noch einige andere Voraussetzungen, die in einem späteren Abschnitt beschrieben werden.
     
6. Mit der Datei metadata.zip wird auch ein neuer Dienst in SFCC erstellt. Wenn du zu Verwaltung > Vorgänge > Dienste navigierst, solltest du jetzt 2 neue Einträge unter der Registerkarte Dienste mit den Namen KlaviyoEventService und KlaviyoSubscribeProfilesService sehen, jeweils mit entsprechenden Profil- und Zugangsdateneinträgen.

Konfigurieren von Klaviyo Email Feldselektoren und Bezahlvorgang E-Mail Feldselektor 

Diese Einstellungen sind wichtig, damit Klaviyo die Besucher der Website erfolgreich identifizieren und verfolgen kann. Wenn ein Besucher nicht mit Klaviyo identifiziert wird, werden keine Ereignisse für diesen Besucher verfolgt. Wenn du die Integration abgeschlossen hast, erfährst du im Abschnitt Klaviyo Teste deine SFCC-Einrichtung unten, wie du deine E-Mail- und Bezahlvorgang-E-Mail-Feldauswahl testen kannst. 

Klaviyo Email Feldselektoren

Die Klaviyo Email Field Selectors Website-Einstellung wird verwendet, um alle E-Mail- und Telefonnummern-Eingabefelder auf der Website anzusprechen (mit Ausnahme der E-Mail-Eingabe im Bezahlvorgang, die weiter unten behandelt wird). Wir kennzeichnen diese Felder mit Standard-CSS-Selektoren und fügen sie einzeln zu den Website-Präferenzen hinzu (das ist ein "Set of Strings", in das mehrere String-Werte nacheinander eingegeben werden können). Jeder komplexe Selektor, der in einem Standard-Stylesheet verwendet werden kann, um ein bestimmtes Element anzusteuern, kann verwendet werden, z. B. #dwfrm_login div.username input.input-text ist akzeptabel, ebenso wie Selektoren, die auf der Grundlage gemeinsamer Attribute mehrere Elemente auf der Website ansteuern können, z. B. input[type=E-Mail]. Vermeide es, Eingaben über dynamisch generierte IDs anzusteuern - ein sehr häufiger Fall in SiteGen - da sich diese IDs beim Laden der Seite ändern und daher fehlschlagen (z. B. #dwfrm_login_username_d0fignzngiyq).

Beachte, dass Felder, die dem DOM nach dem Laden der Seite hinzugefügt werden, immer noch ausgewählt werden können. Beispiele dafür sind ein E-Mail-Adressfeld, das nach einem AJAX-Aufruf in ein Modal eingefügt wird, oder eines, das von JavaScripts von Drittanbietern in den DOM injiziert wird.

Beachte auch, dass die Telefonnummernfelder allein den Nutzer möglicherweise nicht vollständig für Klaviyo identifizieren, je nach deinen SMS Einstellungen in deinem Klaviyo Konto (wenn SMS aktiviert ist und du eine Absendernummer mit dem Land der eingegebenen Telefonnummer verknüpft hast, wird der Browser identifiziert). So kann das Hinzufügen von CSS-Selektoren für Telefonnummernfelder als "nice to have" oder "as-needed" betrachtet werden, während sie für E-Mail-Felder als unerlässlich angesehen werden sollten.

Bezahlvorgang E-Mail Feldselektor

Das E-Mail-Sammelfeld im Bezahlvorgang ist ein Sonderfall und hat als solcher eine eigene Standortpräferenz für die Zielgruppenansprache. Das Prinzip funktioniert genauso wie die Website-Einstellung Klaviyo Email Field Selectors - gib einfach einen einzigen CSS-Selektor ein, der auf das E-Mail-Adressfeld im Bezahlvorgang deiner Website abzielt, egal ob es am Anfang, am Ende oder in der Mitte des Bezahlvorgangs erscheint.

Die erfolgreiche Konfiguration dieser Site-Präferenz für das E-Mail-Sammelfeld in Bezahlvorgang ist entscheidend für die korrekte Verfolgung des Ereignisses "Bezahlvorgang gestartet". Daher wird dringend empfohlen, dass du testest, ob die Ereignisse "Bezahlvorgang gestartet" in Klaviyo erscheinen, nachdem eine E-Mail-Adresse in das E-Mail-Sammelfeld in Bezahlvorgang eingegeben wurde. 

Beachte auch, dass das Bezahlvorgang-E-Mail-Feld, auf das der Bezahlvorgang-E-Mail-Feldselektor abzielt, automatisch verdrahtet wird, um den Benutzer zu identifizieren und das Ereignis " Bezahlvorgang gestartet" auszulösen - d.h. es ist nicht notwendig, den CSS-Selektor für das Bezahlvorgang-E-Mail-Feld sowohl in die Klaviyo Email Feldselektoren als auch in den Bezahlvorgang-E-Mail-Feldselektor zu integrieren.

Setup-Snippets hinzufügen

Der letzte Teil der Cartridge-Einrichtung besteht darin, die Snippets zu den Vorlage-Dateien deiner Website hinzuzufügen, damit die Cartridge mit der Website kommunizieren kann. Diese Schritte unterscheiden sich stark für Site Genesis (SG) und Storefront Reference Architecture (SFRA) Infrastrukturen, also stelle sicher, dass du die richtigen Anweisungen für dein Setup befolgst.

Einrichtung der Storefront Reference Architecture (SFRA) Snippet

Füge den folgenden Code am Ende deiner pageFooter.isml-Datei hinzu:

<isinclude template="klaviyo/klaviyoFooter"/>

Du hast nun die Einrichtung des Snippets für deinen SFRA Laden abgeschlossen. 

Site Genesis (SG) Snippet-Einrichtung

1. So fügst du die KlaviyoFooter.isml zur globalen Fußzeile hinzu: Füge den folgenden Code am Ende deiner footer.isml-Datei (oder einer ähnlichen Vorlage, die am Ende jeder Seite geladen wird) hinzu.
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. So fügst du Snippets für die serverseitige Benutzeridentifizierung hinzu: Füge das folgende Snippet zu deinen Account-Show- und Cart-Show-Controllern hinzu, und zwar vor dem Aufruf zum Rendern der jeweiligen Vorlage (d.h. app.getView(...)).
   

      // Klaviyo
       var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils'), klid;
       if(klaviyoUtils.klaviyoEnabled && 
       !klaviyoUtils.getKlaviyoExchangeID()){
       klid = klaviyoUtils.getProfileInfo();
       }
       // END Klaviyo

3. Dann aktualisierst du den app.getView(...)-Aufruf, um klid als pdict-Variable einzubinden.
   •  In deinem Account-Show-Controller:
     

     app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview');
     // Klaviyo: 'klid: klid' hinzugefügt

   • In deinem Cart-Show Controller:
     

     app.getView('Cart', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('Bezahlvorgang/cart/cart');
             

4. So fügst du das Snippet Added To Cart zum Cart-AddProduct-Controller hinzu: Füge das folgende Snippet zu deinem Cart-AddProduct-Controller hinzu, und zwar vor dem Aufruf zum Rendern der Vorlage (d.h. app.getView(...)).
   

    /* Klaviyo Verfolgung des Ereignisses "In den Warenkorb" */
       var BasketMgr = require('dw/order/BasketMgr');
       var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils');
       var addedToCartData = require('*/cartridge/scripts/Klaviyo/eventData/addedToCart');
       if(klaviyoUtils.klaviyoEnabled){
       var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
       var dataObj, serviceCallResult, currentBasket;
       var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? true
       : false;
       if (exchangeID) {
       currentBasket = BasketMgr.getCurrentBasket();
       if (currentBasket && currentBasket.getProductLineItems().toArray().length)
       {
       dataObj = addedToCartData.getData(currentBasket);
       serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
       false);
       if (isKlDebugOn) {
       var klDebugData = klaviyoUtils.prepareDebugData(dataObj);
       var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult);
       var siteGenKlDebutData = `<input type="hidden" name="siteGenKlDebutData"
       id="siteGenKlDebutData" value="${klDebugData}"/>`;
       var siteGenServiceCallData = `<input type="hidden" name="siteGenServiceCallData"
       id="siteGenServiceCallData" value="${serviceCallData}"/>`;
       response.writer.print(siteGenKlDebutData);
       response.writer.print(siteGenServiceCallData);
       }
       }
       }
       }
       /* END Klaviyo Added to Cart Event Tracking */

5. Gestartete Bezahlvorgang-Snippets: Wenn du Klaviyo Snippets zu Bezahlvorgang-Controllern hinzufügst, um Started Bezahlvorgang-Ereignisse zu verfolgen, ist es wichtig, Folgendes zu bedenken:
   • Ziel des Hinzufügens dieser Snippets ist es, zu prüfen, ob eine E-Mail-Adresse an das Basket-Objekt im Bezahlvorgang-Flow angehängt wurde, und wenn sie angehängt ist, das Ereignis " Bezahlvorgang gestartet" auszulösen. Es ist wichtig, die Verknüpfung einer E-Mail-Adresse mit dem Basket so früh wie möglich im Bezahlvorgang zu erfassen.
   • Aufgrund der standortbasierten Bezahlvorgang-Anpassung ist es für Klaviyo nicht möglich, genau festzulegen, welcher Controller als erster ein Basket-Objekt mit einer angehängten E-Mail Adresse erhält.
   • Wir empfehlen, das Code-Fragment zu allen wichtigen Routen hinzuzufügen, die innerhalb des Bezahlvorgangs ausgelöst werden. Wenn du in der Lage bist, mit dem Debugger genau zu bestimmen, wann die E-Mail-Adresse in deinem Bezahlvorgang an den Warenkorb angehängt wird, kannst du die Schnipsel nur in diese Route einfügen, aber gründlich testen, um sicherzustellen, dass alle möglichen Bezahlvorgang-Pfade (Gast, eingeloggt, innerhalb von Bezahlvorgang eingeloggt usw.) den Code auslösen.
6. Es folgt das Snippet für den ersten Routen-Treffer im Bezahlvorgang (typischerweise COCustomer-Start). Füge sie an einer beliebigen Stelle vor dem Aufruf zum Rendern der Vorlage ein (d.h. app.getView(...)). Beachte den Hauptunterschied in diesem Snippet - die Übergabe des ersten Arguments KLCheckoutHelpers.startedCheckoutHelper Methode als true statt false - im Vergleich zu den anderen Bezahlvorgang-Snippets (unten hervorgehoben). Beachten Sie, dass im folgenden Ausschnitt der KLCheckoutHelpers.startedCheckoutHelper Methode true statt false ist (wie in den anderen Bezahlvorgang-Snippets). Das ist wichtig, damit der Code weiß, dass wir einen neuen Bezahlvorgang gestartet haben, den wir verfolgen können.

   /* Klaviyo Gestartetes Bezahlvorgang-Ereignis-Tracking */
      var KLCheckoutHelpers = require('*/cartridge/scripts/Klaviyo/checkoutHelpers');
      var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
      var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail);
      if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
          app.getView({
              klDebugData: KLTplVars.klDebugData,
              serviceCallData: KLTplVars.serviceCallData
          }).render('Klaviyo/klaviyoDebug');
      }
      /* ENDE Klaviyo Startet Bezahlvorgang Ereignisverfolgung */
   

7. Aktualisiere dann den app.getView(...)-Aufruf, um klid als pdict-Variable einzuschließen:

   app.getView({
     ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'),
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('Bezahlvorgang/checkoutlogin');

8. Die folgenden Schnipsel sollten der ersten Route hinzugefügt werden, die ausgelöst wird, nachdem eine E-Mail-Adresse an das Basket-Objekt angehängt wurde. Wenn du dir unsicher bist oder dich einfach nur absichern willst, empfehlen wir dir, dieses Snippet zu allen folgenden Routen hinzuzufügen:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start
   Wie bei den obigen Schnipseln fügst du diesen Schnipsel an einer beliebigen Stelle vor dem Aufruf zum Rendern der Vorlage oder vor Aufrufen nachfolgender Controller ein (Beispiel von COBilling-Save: app.getController('COSummary').Start()). 

   /* Klaviyo Gestartetes Bezahlvorgang-Ereignis-Tracking */
     var KLCheckoutHelpers = require('*/cartridge/scripts/Klaviyo/checkoutHelpers');
   var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
     var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail);
   if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
   app.getView({
   klDebugData: KLTplVars.klDebugData,
   serviceCallData: KLTplVars.serviceCallData
   }).render('Klaviyo/klaviyoDebug');
   }
   /* ENDE Klaviyo Gestartete Bezahlvorgang-Ereignisverfolgung */

9. Für Routen, die die Vorlage direkt aufrufen (z.B. COShipping-Start), aktualisiere den app.getView(...)-Aufruf, um klid als pdict-Variable einzuschließen. Hier ist ein Beispiel für die Route COShipping-Start:

   app.getView({
   ContinueURL: URLUtils.https('COShipping-SingleShipping'),
   Basket: cart.object,
   HomeDeliveries: homeDeliveries,
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('Bezahlvorgang/shipping/singleshipping');

10. So fügst du dem Controller COSummary-ShowConfirmation ein Snippet zur Bestellbestätigung hinzu: Füge das folgende Snippet zu deinem COSummary-ShowConfirmation-Controller hinzu, und zwar vor dem Aufruf zum Rendern der Vorlage.

    /* Klaviyo Bestellbestätigung Ereignisverfolgung */
      var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils');
      var orderConfirmationData = require('*/cartridge/scripts/Klaviyo/eventData/orderConfirmation');
    var Logger = require('dw/system/Logger');
    if (klaviyoUtils.klaviyoEnabled){
    session.privacy.klaviyoCheckoutTracked = false;
    var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
    var dataObj, serviceCallResult;
    if (order && order.customerEmail) {
    // prüfen, ob der Status neu oder erstellt ist
      if (order.status == dw.order.Order.ORDER_STATUS_NEW || order.status == dw.order.Order.ORDER_STATUS_OPEN)
      {
    dataObj = orderConfirmationData.getData(order, exchangeID);
      serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.orderConfirmation,
      order.customerEmail);
    }
      if('KLEmailSubscribe' in session.custom || 'KLSmsSubscribe' in session.custom)
      {
    var E-Mail = order.customerEmail;
    var phone = order.defaultShipment.shippingAddress.phone;
    var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
    if (phone) {
      // HINWEIS: Klaviyo akzeptiert nur Telefonnummern, die ein + und die Landesvorwahl
      am Anfang enthalten (z.B. für US: +16465551212)
      // Damit die Benutzer erfolgreich in die SMS-Liste aufgenommen werden können, musst du die
      die Landesvorwahl in das Feld für deine Bestelltelefonnummer eintragen!
    phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
    if(!e164PhoneRegex.test(phone)) {
    if (session.custom.KLSmsSubscribe) {
      var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: Bestellbestätigung');
      logger.error(`SMS Abonnement vom Benutzer angefordert, aber eine ungültige Telefonnummer
      wurde angegeben. Telefonnummer: ${phone}`);
    }
    phone = null;
    }
    }
    if (E-Mail || Telefon) {
    klaviyoUtils.subscribeUser(email, phone);
    }
    }
    }
    }
    /* END Klaviyo Bestellbestätigung Ereignisverfolgung */

Du hast nun die Einrichtung der Snippets für deine Site Genesis Laden abgeschlossen. 

Einverständniserklärung beim Bezahlvorgang Checkbox-Snippets hinzufügen (SG und SFRA)

• Aktiviere SMS in Klaviyo und richte Absendernummern ein.
• Das Telefonnummernfeld auf deinem Bezahlvorgang-Formular muss eine Landesvorwahl unterstützen.

Um die Zustimmung beim Bezahlvorgang für E-Mail und SMS einzuholen, musst du ein Code-Fragment einfügen, damit die Zustimmungs-Kontrollkästchen an den gewünschten Stellen erscheinen, und zusätzlich die Einstellungen für die Listen-ID konfigurieren, die im Abschnitt Dienste hinzufügen oben beschrieben sind.

Damit diese Snippets im Bezahlvorgang erscheinen, können sie zum Beispiel in der Vorlage shipmentCard.isml (app_storefront_base) in SFRA oder in der Vorlage Abrechnung.isml (app_storefront_core) in SiteGen platziert werden. 

Im Folgenden findest du die ISML-Snippets sowohl für Site Genesis als auch für SFRA. Du kannst sie an jeder Stelle des Bezahlvorgangs platzieren, die am besten zu deiner spezifischen Website passt. Damit die Zustimmung bei Bezahlvorgang auf Site Genesis korrekt funktioniert, musst du das Snippet für die Bestellbestätigung einbinden, auf das du oben im Abschnitt Setup-Snippets hinzufügen verwiesen hast.

Die folgenden Schnipsel gehen davon aus, dass deine Opt-in-Sprache für E-Mail und SMS in einem Eigenschaften-Ressourcenbündel namens 'Bezahlvorgang' enthalten ist. Du musst "Deine.E-Mail.subscribe.resource.string.hier" ersetzen und `Ihre.SMS.subscribe.resource.string.hier` mit den Tasten, die deiner E-Mail- bzw. SMS -Opt-in-Sprache entsprechen. Diese Sprache wird neben dem Kontrollkästchen angezeigt. 

Deine Opt-in-Sprache könnte zum Beispiel so aussehen:

• E-Mail
  E-Mail Update abonnieren
• SMS
  Abonnieren Sie SMS Update. Indem du dieses Kästchen anklickst und deine Telefonnummer eingibst, erklärst du dich damit einverstanden, von [Name des Unternehmens] unter der angegebenen Nummer Marketing-SMS (z. B. [Aktionscodes] und [Einkaufswagenerinnerungen]) zu erhalten, einschließlich Nachrichten, die per Autodialer gesendet werden. Die Zustimmung ist keine Bedingung für einen Kauf. Es können Nachrichten- und Datentarife gelten. Die Häufigkeit der Nachrichten variiert. Du kannst dich jederzeit abmelden, indem du mit STOP antwortest oder auf den Abmeldelink (sofern vorhanden) in einer unserer Nachrichten klickst. Sieh dir unsere Datenschutzerklärung [Link] und unsere Nutzungsbedingungen [Link] an.

 <isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
  == true) ? 'checked' : ''}" scope="page" />
  <isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
  ? 'checked' : ''}" scope="page" />
  <input type="checkbox" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
  'checkout', null)} <br />
  <input type="checkbox" id="KLSmsSubscribe" ${KLSmsSubscribed} /> ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Aktiviere die OCAPI-Integration in Klaviyo

Endpunkte

Für die Integration mit SFCC für den Produktkatalog und die historischen/laufenden Bestelldaten nutzt Klaviyo vier OCAPI-Endpunkte:

• /order_search
  Synchronisiert historische Bestelldaten mit Klaviyo synchronisiert laufende Bestellereignisse alle 60 Minuten. Die Ereignisse " Bestelltes Produkt" und " Platzierte Bestellung" synchronisieren zusätzliche Daten für die Segmentierung und den Flow-Filter und sind ideal für eine erweiterte Personalisierung, die mit dem Ereignis " Bestellbestätigung" nicht möglich ist. Für Echtzeit-Bestellbestätigungs-E-Mails verwendest du das Ereignis " Bestellbestätigung" aus der Cartridge.
• /sites
  Hier kannst du auswählen, von welcher Website Klaviyo die Daten bei der Einrichtung deiner Integration synchronisiert.
• /product_search
  Verbindet deinen Katalog mit Klaviyo, um Funktionen wie Produktempfehlungen in E-Mails zu ermöglichen.
• /products/*/Variation
  Ermöglicht die Synchronisierung von Varianten mit Klaviyo, um Funktionen wie " Wieder auf Lager" zu ermöglichen.

SFCC-seitige Einrichtung

Bevor wir mit der OCAPI von SFCC kommunizieren können, müssen einige Berechtigungen und Einstellungen in SFCC eingerichtet werden.

1. Navigiere zu https://account.demandware.com/dw/account/APIAdmin und füge einen API-Client für Klaviyo hinzu. Die API-Client-ID und das Passwort werden benötigt, um das Inhaber-Token für OCAPI zu generieren.
2. Sobald der API-Client hinzugefügt wurde, navigiere im SFCC Business Manager zu Administration > Site Development > Open Commerce API Settings.
3. Füge die folgenden Schnipsel hinzu und ersetze dabei die API-Version und die Client-ID. Wir unterstützen API Versionen 19.5 und höher sowie 18.8. Ersetze CLIENT_ID durch die API-Client-ID, die im vorherigen Schritt aus der API-Client-Einrichtung generiert wurde (sie sollte etwa so aussehen: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Wenn die Einstellungen für diese API bereits vorhanden sind, musst du nur die unten hervorgehobenen Abschnitte zum bestehenden JSON-Array des Kunden hinzufügen.
   1. 1. 1. Füge das folgende JSON unter dem Typ Shop und dem Kontext Global (organisationsweit) hinzu, indem du SHOP_API_VERSION durch deine OCAPI Shop API Version ersetzt, und klicke dann auf Speichern.
            

            {
             "_v":"SHOP_API_VERSION",
             "Kunden":[
             {
             "client_id":"CLIENT_ID",
             "ressourcen":[
             {
             "resource_id":"/order_search",
             "methods":["post"],
             "read_attributes":"(**)",
             "write_attributes":"(**)"
             }
             ]
             }
             ]
             }
            

            Nach dem Hinzufügen sollten die Einstellungen ähnlich aussehen wie hier:
            
         2. Füge das folgende JSON unter dem Typ Daten und dem Kontext Global (organisationsweit) hinzu, indem du DATA_API_VERSION durch deine OCAPI Data API Version ersetzt, und klicke dann auf Speichern.
            

            {
             "_v":"DATA_API_VERSION",
             "clients":[
             {
             "client_id":"CLIENT_ID",
             "ressourcen":[
             {
             "resource_id":"/product_search",
             "methods":["post"],
             "read_attributes":"(**)",
             "write_attributes":"(**)"
             },
             {
             "resource_id":"/sites",
             "methods":["get"],
             "read_attributes":"(**)",
             },
             {
             "resource_id":"/products/*/variations",
             "methods":["get"],
             "read_attributes":"(**)",
             }
             ]
             }
             ]
            }

            Nach dem Hinzufügen sollten die Einstellungen ähnlich aussehen wie hier:
            
4.  

Klaviyo-seitige Einrichtung

1. Auf Klaviyo klickst du auf deinen Kontonamen in der unteren linken Ecke und navigierst zu Integrationen > Integrationen hinzufügen.
2. Suche nach Salesforce Commerce Cloud und klicke auf die Karte und dann auf Installieren.
3. Klicke auf der Landing Page auf Connect to Salesforce Commerce Cloud. 
4. Auf der nächsten Seite füllst du die folgenden Informationen aus: 
   • URL laden
     Die Domain deiner Website (z. B. example.com oder dev03-na01-example.demandware.net).
   • Authentifizierungstoken
     Erstelle einen Authentifizierungstoken für diese Integration, der verwendet wird, um ein Überbringer-Token anzufordern. Der Authentifizierungstoken wird durch Base-64-Kodierung der Kunden-ID und des Passworts mit einem Doppelpunkt erzeugt (z. B. xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Daten-API-Version
     Die Version deiner Daten-API, für die du im Schritt SFCC-seitige Einrichtung den Zugriff hinzugefügt hast (z. B. v19_10).
   • Shop-API-Version
     Die Version deiner Shop-API, für die du im Schritt SFCC-seitige Einrichtung den Zugriff hinzugefügt hast (z.B. v19_10).
   • Katalog-ID
     Die ID des SFCC-Katalogs, der mit Klaviyo synchronisiert werden soll (z.B. storefront-catalog-de).
     
5. Wenn du diese Anmeldedaten eingegeben hast, klickst du auf den Link Liste der Standorte abrufen, um eine Liste der Standorte auf deiner SFCC-Instanz abzurufen.
6. Nachdem die Websites abgerufen wurden, wählst du die Website(s) aus, die mit diesem Konto integriert werden sollen, und klickst auf Einrichtung abschließen. Deine Integration sollte nun beginnen, deine Bestell-, Katalog- und Kundendaten zu synchronisieren.

Teste deine SFCC-Integration

Um deine Patroneneinstellung zu testen, gehe auf deine Website und befolge diese Anweisungen:

1. Cookie selbst, indem du den url-Parameter E-Mail als deine E-Mail-Adresse in deine Adressleiste einfügst. Zum Beispiel: https://www.example.com/?utm_email=your@email.com.
2. Durchsuche deinen Katalog.
3. Eine Kategorieseite anzeigen.
4. Eine Produktseite anzeigen.
5. Füge einen Artikel zu deinem Warenkorb hinzu.
6. Gib eine Testbestellung auf.
7. Navigiere in zu Analytics > Metrik Klaviyo und suche dann nach Metrik, die von Salesforce Commerce Cloud kommt.

Test Klaviyo Email Feldselektoren

Um zu testen, ob ein bestimmtes E-Mail-Feld richtig ausgerichtet wurde und den Nutzer korrekt für Klaviyo identifiziert:

1. Öffne ein Inkognito-Browserfenster.
2. Gib in der Entwicklerkonsole den folgenden Befehl ein und drücke die Eingabetaste:
   Klaviyo.isIdentified();
   Dies sollte zu der folgenden Ausgabe führen:
   Versprechen {<fulfilled>: false}
3. Gib eine E-Mail-Adresse in das Zielfeld ein und drücke die Tabulatortaste, um den Fokus auf ein anderes Element auf der Seite zu ändern.
4. Kehr zur Entwicklerkonsole zurück und gib Klaviyo.isIdentified() ein; wieder. Dies sollte zu der folgenden Ausgabe führen:
   Versprechen {<fulfilled>: true}
5. Du kannst überprüfen, ob tatsächlich Klaviyo Identify-Anrufe empfängt, indem du unter zu Analytics > Metrik gehst Klaviyo und den Aktivitäts-Feed der Active on Site-Ereignisse aufsuchst, wo die von dir eingegebene(n) E-Mail-Adresse(n) aufgeführt sein sollten.

Test Bezahlvorgang E-Mail Field Selector

So testest du, ob der Bezahlvorgang E-Mail-Sammelfeld erfolgreich das Ereignis " Gestarteter Bezahlvorgang" auslöst:

1. Lege ein oder mehrere Produkte in den Warenkorb und starte dann den Bezahlvorgang.
2. Gib im Bezahlvorgang eine E-Mail-Adresse in das Zielfeld ein und drücke die Tabulatortaste, um den Fokus auf ein anderes Element auf der Seite zu ändern.
3. Du kannst überprüfen, ob tatsächlich Klaviyo Identifizierungsaufrufe empfängt, indem du unter zu Analytics > Metrik gehst Klaviyo und den Aktivitätsfeed der gestarteten Bezahlvorgänge aufrufst. Dort solltest du sehen, dass dein jüngster Vorgang getrackt wurde.

Ergebnis

Du hast nun Salesforce Commerce Cloud mit Klaviyo integriert und deine Integration getestet.

Zusätzliche Ressourcen 

• Salesforce Commerce Cloud Datenreferenz
• So aktualisierst du deine Salesforce Commerce Cloud Cartridge
• Wie oft die Integrationen die Referenz synchronisieren