Erste Schritte mit Salesforce Commerce Cloud – Klaviyo - Help Center - DE

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 mit Klaviyo erfolgt in 3 Schritten:

Installiere die Klaviyo-Kassette in SFCC.
Hinzufügen von Enablement-Snippets zu SFCC.
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.

Verwendest du eine Klaviyo SFCC Cartridge unter Version 23.7.0? 23.7.0 und höher enthalten eine Reihe zusätzlicher Funktionen, eine vollständigere, sofort einsatzbereite Installation und Verbesserungen im Zusammenhang mit dem Entwicklererlebnis. Wenn du ein Upgrade durchführen möchtest, lies Anleitung zum Upgrade deiner Salesforce Commerce Cloud-Cartridge.

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 mit der Integration deiner Entwicklungsumgebung beginnen möchtest, kannst du mit dem in diesem Artikel beschriebenen Verfahren ein verknüpftes Klaviyo-Konto erstellen und deine Entwicklungsumgebung mit diesem Konto verbinden. Wir empfehlen, das Wort „Dev“ oder „Staging“ in den Namen des Unternehmens aufzunehmen, den du bei der Einrichtung des Kontos verwendest, um bei der Anmeldung besser zwischen Konten unterscheiden zu können.

Um Authentifizierungs- und Konfigurationsprobleme zu minimieren, solltest du außerdem Klaviyo IPs zur Zulassungsliste deines Firewall-Anbieters hinzufügen. Weitere Informationen findest du unter So führst du einen Whitelist für IP-Adressen des Klaviyo-Integrationsdatenverkehrs durch.

Einrichten der Klaviyo-Patronen

Lade die Patronen herunter

Du findest unseren App-Eintrag auf der Salesforce AppExchange. Auf der AppExchange kannst du mehr über Klaviyo erfahren und auf Jetzt herunterladen klicken, um zu Github zu gelangen, wo unsere Patronen in einer Zip-Datei zum Herunterladen verfügbar sind. Wenn du eine SFRA-Website hast, lade die Datei „KlaviyoSFRA.zip“ herunter. Wenn du eine Site-Genesis-Website hast, lade die Datei „KlaviyoSG.zip“ herunter.

Du musst 2 Patronen 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

Kopiere die int_klaviyo_core Patrone und füge sie ein.
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

Navigiere zu Administration > importieren > Allgemein > Bestehende Projekte in den Arbeitsbereich.
importiere das int_klaviyo_core-Verzeichnis mit dem Import-Assistenten.
Wähle die SFCC-Instanz aus, mit der die Kassette verbunden werden soll.
Wähle Eigenschaften.
Wähle Projektreferenzen.
Schau in der int_klaviyo_core Kassette nach.
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.

Navigiere zu Verwaltung > Standorte > Standorte verwalten.
Wähle deinen Standort.
Wähle die Registerkarte Einstellungen.
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).
Klicke auf Anwenden.

Sobald du auf Anwenden geklickt hast, solltest du die zwei Patronen am Anfang des Felds „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.

Navigiere zu Verwaltung > Websiteentwicklung > Website importieren & Export > Dienste.
Lade die Datei metadata.zip hoch und importiere sie.
Wenn du gefragt wirst, ob du die ausgewählten Archivierungen importieren möchtest, wähle OK.
Du solltest jetzt sehen, dass der Import im Abschnitt Status unten auf der Seite ausgeführt wird.
Du hast jetzt Zugriff auf eine Seite mit den Einstellungen unter Händler-Tools > Website-Einstellungen > Benutzerdefinierte Einstellungen > Klaviyo. Hier kannst du die folgenden Einstellungen verwalten:
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.

Klaviyo E-Mail-Feldauswahl und Bezahlvorgang-E-Mail-Feldauswahl konfigurieren

Diese Präferenzen sind für die erfolgreiche Identifizierung und das Tracking von Website-Besucher*innen durch Klaviyo unerlässlich. Wenn Besucher*innen in Klaviyo nicht identifiziert werden, werden für diese Besucher*innen keine Ereignisse getrackt. Wenn du mit der Integration fertig bist, erfährst du im Abschnitt Testen der SFCC-Einrichtung, wie du die Einrichtung deiner Feldauswahl für die Klaviyo-E-Mail und die E-Mail beim Bezahlvorgang testest.

Klaviyo Email Feldselektoren

Die Website-Einstellung Klaviyo Email Field Selectors 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 mehrere Elemente auf der Website anhand gemeinsamer Attribute ansteuern können, z. B. input[type=Email]. 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 Feldselektoren: Gib einfach einen einzigen CSS-Selektor ein, der auf das E-Mail-Adressfeld im Bezahlvorgang deiner Website abzielt, unabhängig davon, ob es am Anfang, am Ende oder in der Mitte des Bezahlvorgangs erscheint.

Um das Ereignis Bezahlvorgang gestartet richtig zu verfolgen, ist es wichtig, diese Website-Einstellung erfolgreich zu konfigurieren und das Feld Bezahlvorgang erfassen anzusprechen. Daher ist es dringend empfohlen, dass du testest, um sicherzustellen, dass Ereignisse für Bezahlvorgang gestartet in Klaviyo angezeigt werden, nachdem eine E-Mail-E-Mail in das Feld E-Mail erfassen beim Bezahlvorgang eingegeben wurde.

Beachte auch, dass das Bezahlvorgang-E-Mail-Feld, auf das die Website-Einstellung Bezahlvorgang Email Field Selector abzielt, automatisch verdrahtet wird, um den Benutzer zu identifizieren und das Ereignis Started Bezahlvorgang auszulösen (d.h. es ist nicht notwendig, den CSS-Selektor für das Bezahlvorgang-E-Mail-Feld sowohl in die Klaviyo Email Field Selectors als auch in die Email Field Selector Website-Einstellungen aufzunehmen).

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 die Einrichtung des Fragments für deinen SFRA-Shop abgeschlossen.

Site Genesis (SG) Snippet-Einrichtung

So fügst du die Datei „KlaviyoFooter.isml“ in den globalen Footer ein: Füge den folgenden Code am Ende deiner Datei „footer.isml“ (oder einer ähnlichen Vorlage, die am Ende jeder Seite geladen wird) ein.
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
So fügst du Fragmente für die serverseitige Benutzeridentifizierung hinzu: Füge das folgende Fragment zu deinen Controllern Account-Show und Cart-Show irgendwo vor dem Aufruf hinzu, um ihre jeweiligen Vorlagen zu rendern (d. h. app.getView(...)).
```
   // Klaviyo
    var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils'), klid;
    if(klaviyoUtils.klaviyoEnabled && 
    !klaviyoUtils.getKlaviyoExchangeID()){
    klid = klaviyoUtils.getProfileInfo();
    }
    // END Klaviyo
```

Anschließend aktualisierst du den Aufruf app.getView(...), um klid als Prognosevariable einzuschließen.

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');

So fügst du das Fragment Zum Warenkorb hinzugefügt zum Cart-AddProduct-Controller hinzu: Füge das folgende Fragment vor dem Aufruf zum Rendern der Vorlage zu deinem Cart-AddProduct-Controller hinzu (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 */

Fragmente für gestartete Bezahlvorgänge: Wenn du Klaviyo-Fragmente zu Bezahlvorgang-Controllern hinzufügst, um Ereignisse für gestartete Bezahlvorgänge zu verfolgen, ist es wichtig, Folgendes zu beachten:
Es folgt das Fragment für die erste Route, die beim Bezahlvorgang aufgerufen wird (in der Regel COCustomer-Start). Füge sie an einer beliebigen Stelle vor dem Aufruf ein, um die Vorlage zu rendern (d. h. app.getView(...)). Beachte den Hauptunterschied in diesem Fragment – Übergeben des ersten Arguments KLCheckoutHelpers.startedCheckoutHelper als true-Methode anstelle von false – im Vergleich zu den anderen (unten hervorgehobenen) Bezahlvorgang-Fragmenten. Beachte, dass im folgenden Fragment KLCheckoutHelpers.startedCheckoutHelper ist true anstelle von false (wie in den anderen Bezahlvorgang-Fragmenten). Dies ist wichtig, damit der Code weiß, dass wir ein neues Ereignis „Bezahlvorgang gestartet“ 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 */
```

Aktualisiere dann den Aufruf app.getView(...), um klid als Prognosevariable einzuschließen:

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

Die folgenden Fragmente 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 nicht sicher bist oder einfach nur deine Grundlagen abdecken möchtest, empfehlen wir, dieses Fragment auf allen folgenden Routen hinzuzufügen:Wie bei den obigen Fragmenten füge dieses Fragment an einer beliebigen Stelle vor dem Aufruf hinzu, um die Vorlage zu rendern, oder vor Aufrufen an nachfolgende Controller (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 */
```

Für Routen, die Vorlagen direkt aufrufen (z. B. COShipping-Start), aktualisiere den Aufruf von app.getView(...), um klid als Prognosevariable 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');

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 jetzt die Einrichtung des Fragments für deinen Site-Genesis-Shop abgeschlossen.

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

Bitte beachte die folgenden Voraussetzungen für die Synchronisierung von SMS-Einwilligung bei Bezahlvorgang auf Klaviyo:

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 Fragmente beim Bezahlvorgang angezeigt werden, können sie z. B. in der Vorlage shipmentCard.isml (app_storefront_base) in SFRA oder in der Vorlage billing.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 Fragmente gehen davon aus, dass deine Opt-in-Sprache für die E-Mail und SMS in einem Ressourcenpaket für Eigenschaften mit dem Namen „Bezahlvorgang“ enthalten ist. Ersetze „your.E-Mail.subscribe.resource.string.here“ und „deine.sms.subscribe.resource.string.here“ mit den Schlüsseln, die deiner E-Mail und 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 Abonniere E-Mail-Updates
SMS Abonniere SMS-Updates. 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 automatisch versendeter Nachrichten. Die Zustimmung ist keine Bedingung für einen Kauf. Es können Nachrichten- und Datentarife anfallen. Die Häufigkeit der Nachrichten variiert. Du kannst dich jederzeit abmelden, indem du mit STOPP 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 „Produkt bestellt“ und „ Bestellung aufgegeben“ synchronisieren zusätzliche Daten für die Segmentierung und den Flow-Filter und eignen sich ideal für eine erweiterte Personalisierung, die im Ereignis „ Bestellbestätigung“ nicht verfügbar ist. Für E-Mails zur Bestellbestätigung in Echtzeit verwendest du das Ereignis Bestellbestätigung aus der Patrone.
/sites Ermöglicht es dir, auszuwählen, von welcher Website Klaviyo Daten während der Einrichtung der Integration synchronisiert.
/product_search Verbindet deinen Katalog mit Klaviyo, um Funktionen wie Produktempfehlungen in E-Mails zu aktivieren.
/products/*/variations Aktiviert die Synchronisierung von Varianten mit Klaviyo, um Funktionen wie „Wieder auf Lager“-, „Niedriger Bestand“- und „Preissenkung“-Flows zu aktivieren.

SFCC-seitige Einrichtung

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

Bitte beachte, dass die Klaviyo Integrationen zwar POST-Berechtigungen für order_search und product_search erfordern, wir aber nicht wirklich Daten an SFCC senden; das liegt am Design der OCAPI von SFCC.

Navigiere zu https://account.demandware.com/dw/account/APIAdmin und einen API-Client für Klaviyo hinzufügen. Die API-Client-ID und das Kennwort sind erforderlich, um das Bearer-Token für OCAPI zu generieren.
Sobald der API-Client hinzugefügt wurde, navigiere im SFCC Business Manager zu Administration > Site Development > Open Commerce API Settings.
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. Füge die folgende JSON unter dem Typ Shop and context Global (organization-wide) hinzu, ersetze SHOP_API_VERSION durch deine OCAPI Shop API-Version und klicke dann auf Save. Nach dem Hinzufügen sollten die Einstellungen wie folgt aussehen:
```
{
 "_v":"SHOP_API_VERSION",
 "Kunden":[
 {
 "client_id":"CLIENT_ID",
 "ressourcen":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }
```
2. Füge das folgende JSON unter dem Typ Data and context Global (organization-wide) hinzu, ersetze DATA_API_VERSION durch deine OCAPI Data API-Version und klicke dann auf Save. Nach dem Hinzufügen sollten die Einstellungen wie folgt aussehen:

{
 "_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":"(**)",
 }
 ]
 }
 ]
}

Klaviyo-seitige Einrichtung

Wähle in Klaviyo Integrationen > Integrationen hinzufügen aus.
Suche nach Salesforce Commerce Cloud und klicke auf die Karte und dann auf Installieren.
Klicke auf der Landingpage auf Mit Salesforce Commerce Cloud verbinden.
Auf der nächsten Seite gibst du die folgenden Informationen ein:
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.
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:

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.
Durchsuche deinen Katalog.
Eine Kategorieseite anzeigen.
Eine Produktseite anzeigen.
Füge einen Artikel zu deinem Warenkorb hinzu.
Gib eine Testbestellung auf.
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:

Öffne ein Inkognito-Browserfenster.
Gib in der Entwicklerkonsole den folgenden Befehl ein und klicke auf Enter: klaviyo.isIdentified();. Dies sollte zu der folgenden Ausgabe führen: Versprechen {<fulfilled>: false}
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.
Kehre zur Entwicklerkonsole zurück und rufe klaviyo.isIdentified(); auf. Und wieder. Dies sollte zu der folgenden Ausgabe führen: Versprechen {<fulfilled>: true}
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:

Lege ein oder mehrere Produkte in den Warenkorb und starte dann den Bezahlvorgang.
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.
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.