Erste Schritte mit Salesforce Commerce Cloud

Übersicht

Erfahre, wie du Salesforce Commerce Cloud mit Klaviyo integrierst. Die Klaviyo Cartridge- und API-Integration ermöglicht es Websites, die Salesforce Commerce Cloud (ehemals Demandware) verwenden, schnell eine Verbindung herzustellen und sowohl Echtzeit- als auch historische Daten an Klaviyo zu senden. Wenn du Klaviyo mit Salesforce Commerce Cloud (SFCC) integrierst, beginnt Klaviyo damit, Aktionen, die Nutzer*innen in Echtzeit ausführen, zu Tracking, wie z. B. Navigation auf der Website, Suchvorgänge, das Ansehen von Produkten, das Ansehen von Kategorien, das Hinzufügen von Artikeln zum Warenkorb, der Checkout und das Bestellen.

Es gibt 3 Hauptschritte zur Integration von SFCC mit Klaviyo:

1. Den Klaviyo Cartridge in SFCC installieren.
2. Enablement-Snippets zu SFCC hinzufügen.
3. Die SFCC OCAPI-Integration in Klaviyo aktivieren.

Bevor du anfängst

Klaviyo lässt sich sowohl mit SFCC Controller-basierten Site Genesis (SG)- als auch mit Storefront Reference Architecture (SFRA)-Websites integrieren. Für jedes Framework ist ein etwas anderes Cartridge-Setup und andere Snippets erforderlich, die unten beschrieben werden.

Zur Verwendung unserer Cartridge-Version 23.7.0 (oder einer höheren Version) empfehlen wir, deinen SFCC-Kompatibilitätsmodus auf 21.7 oder höher zu aktualisieren.

Wenn du zunächst mit der Integration deiner Entwicklungsumgebung beginnen möchtest, kannst du mithilfe der in diesem Artikel beschriebenen Methode ein verknüpftes Klaviyo-Konto erstellen und deine Entwicklungsumgebung mit diesem Konto verbinden. Wir empfehlen, bei der Einrichtung des Kontos die Worte „Dev“ oder „Staging“ in den Firmennamen aufzunehmen, um die Konten beim Anmelden besser unterscheiden zu können.

Es wird außerdem empfohlen, Klaviyo-IP-Adressen zur Zulassungsliste deines Firewall-Anbieters hinzuzufügen, um Authentifizierungs- und Konfigurationsprobleme zu minimieren. Weitere Informationen findest du unter So setzt du IP-Adressen für Klaviyo-Integrations-Traffic auf die Zulassungsliste.

Die Klaviyo-Cartridges einrichten

Lade die Cartridges herunter

Du findest unsere App-Auflistung im Salesforce AppExchange. Auf der AppExchange kannst du mehr über Klaviyo erfahren und auf Jetzt herunterladen klicken, um zu GitHub weitergeleitet zu werden, wo unsere Cartridges als ZIP-Datei zum Download 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 Cartridges einrichten; beide sind in der ZIP-Datei enthalten, die du heruntergeladen hast. Diese Cartridges enthalten:

• int_klaviyo oder int_klaviyo_sfra: Eine Website-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 Infrastrukturtypen, die einige grundlegende, sich überschneidende Funktionen enthalten.

Die Cartridges importieren

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

In VS Code

1. Kopiere das int_klaviyo_core-Cartridge, und füge es ein.
2. Kopiere entweder die Ordner int_klaviyo (Site Genesis) oder int_klaviyo_sfra (SFRA) in die Codebase, sodass sie auf derselben Ebene wie deine anderen Cartridge-Ordner liegen.

In Eclipse

1. Navigiere zu Administration > Import > Allgemein > Vorhandene Projekte in Workspace importieren.
2. Importiere das Verzeichnis int_klaviyo_core mithilfe des Import-Assistenten.
3. Wähle die SFCC-Instanz aus, mit der du die Cartridge verbinden möchtest.
4. Wähle Eigenschaften aus.
5. Wähle Projektreferenzen aus.
6. Prüfe in der int_klaviyo_core Cartridge 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 zum Patronenpfad hinzu

Sobald die Cartridges importiert sind, müssen sie mithilfe des Business Manager von SFCC zur Liste der von deiner Website verwendeten Cartridges hinzugefügt werden.

1. Navigiere zu Administration > Sites > Manage Sites.
2. Wähle deine Website aus.
3. Wähle die Registerkarte Einstellungen.
4. Füge am Anfang des Eingabefelds für den Cartridge-Pfad mit der Bezeichnung Cartridges die Namen der importierten Klaviyo-Cartridges hinzu, wobei die Core-Cartridge zuletzt steht (entweder int_klaviyo:int_klaviyo_core oder int_klaviyo_sfra:int_klaviyo_core).
5. Klicke auf Anwenden.

Nachdem du auf „Anwenden“ geklickt hast, solltest du jetzt die 2 cartridges am Anfang des Feldes mit der Bezeichnung Effective Cartridge Path sehen.

Services hinzufügen

Nachdem die Cartridges importiert und dem Site-Cartridge-Pfad hinzugefügt wurden, muss der Klaviyo Service hinzugefügt werden, um die Einstellungskonfiguration für die Cartridge zu aktivieren. Im Root-Verzeichnis der ZIP-Datei mit den Klaviyo Cartridges befindet sich eine weitere ZIP-Datei namens metadata.zip. Die folgenden Anweisungen beziehen sich auf diese ZIP-Datei.

1. Navigiere zu Administration > Site Development > Site Import & Export > Services.
2. Lade dann die Datei metadata.zip hoch und importiere sie.
   

3. Wenn du aufgefordert wirst zu bestätigen, ob du das ausgewählte Archiv importieren möchtest, wähle OK aus.
4. Unter dem Abschnitt Status unten auf der Seite solltest du jetzt den laufenden Import sehen.
   

5. Du hast jetzt Zugriff auf eine Einstellungsseite unter Merchant tools > Site Preferences > Custom Preferences > klaviyo.
   
   Von hier aus kannst du die folgenden Einstellungen verwalten:

• Klaviyo aktiviert
  Muss auf „Ja“ eingestellt sein, um die Cartridge zu aktivieren.
• Klaviyo Private Key
  Ein privater API-Schlüssel von Klaviyo. Stell sicher, dass dem privaten API-Schlüssel von Klaviyo, den du für diese Integrationen verwendest, Vollzugriff gewährt wurde.
• Klaviyo-Konto
  Dein öffentlicher Klaviyo API-Schlüssel oder deine Site-ID.
• Ereignisse als SFCC kennzeichnen
  Wenn du dich dafür entscheidest, Ereignisse als SFCC zu kennzeichnen, hast du Zugriff auf vorgefertigte Flows in Klaviyo, die SFCC-Daten verwenden. Ein derzeitiger Nachteil der Kennzeichnung von Ereignissen ist, dass du, wenn du dich für die Kennzeichnung entscheidest, keinen Zugriff auf Viewed Product - oder Added to Cart -Empfehlungen in Klaviyo Produkt-Feeds hast.
  
  • 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 in der Vergangenheit eine Version vor 23.7.0 verwendet wurde, 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-Feldauswähler und Checkout-E-Mail-Feldauswähler
  Im folgenden Abschnitt findest du detaillierte Informationen dazu, wie du diese 2 Felder konfigurierst.
• Bildtyp
  Der Produktbildtyp, der in den Ereignisdaten verwendet werden soll, die an Klaviyo gesendet werden. Wenn du dir nicht sicher bist, welchen Bildtyp du festlegen sollst, navigiere zu Händler-Tools > Produkte und Kataloge > Produkte, klicke auf ein Produkt und lege anhand der verfügbaren Optionen fest, welchen Ansichtstyp du verwenden möchtest (z. B. large, medium, small, hi-res).
• Marketing-E-Mail-Listen-ID
  Du kannst E-Mail-Abonnent*innen beim Checkout sammeln und mit einer Klaviyo-Liste synchronisieren. Diese Einstellung ist die ID der Liste in Klaviyo, zu der du E-Mail-Abonnent*innen hinzufügen möchtest. Erfahre wie du eine Listen-ID in Klaviyo findest. Um E-Mail-Abonnent*innen beim Checkout zu erfassen, musst du außerdem ein Checkbox-Snippet hinzufügen, das in einem späteren Abschnitt beschrieben wird.
• Marketing-SMS-Listen-ID
  Du kannst SMS-Abonnent*innen beim Checkout erfassen und sie mit einer Klaviyo-Liste synchronisieren. Diese Einstellung ist die ID der Klaviyo-Liste, der du SMS-Abonnent*innen hinzufügen möchtest. Hier erfährst du, wie du eine Listen-ID in Klaviyo findest. Wenn du sowohl SMS- als auch E-Mail-Abonnent*innen erfasst, wähle für SMS eine andere Liste als für E-Mail. So wird sichergestellt, dass die Einwilligung immer korrekt dem richtigen Kanal zugeordnet wird. Um SMS-Abonnent*innen beim Checkout zu erfassen, brauchst du neben einem Kontrollkästchen-Snippet noch weitere Voraussetzungen. Diese werden in einem späteren Abschnitt beschrieben.
  

6. Die Datei metadata.zip erstellt außerdem einen neuen Service in SFCC. Wenn du zu Administration > Operations > Services navigierst, solltest du jetzt unter dem Tab „Services“ 2 neue Einträge namens KlaviyoEventService und KlaviyoSubscribeProfilesService sehen, jeweils mit entsprechenden Profil- und Anmeldedaten-Einträgen.

Konfigurieren von Klaviyo Email-Feldselektoren und Checkout-E-Mail-Feldselektor

Diese Einstellungen sind dafür entscheidend, dass Klaviyo erfolgreiches Tracking von Website-Besucher*innen ermöglicht. Wenn ein*e Besucher*in für Klaviyo nicht identifiziert ist, werden für diese*n Besucher*in keine Ereignisse getrackt. Sobald du mit der Integration fertig bist, erfährst du im Abschnitt Teste dein SFCC-Setup unten, wie du deinen Klaviyo Email- und Checkout-E-Mail-Feldselektor-Setup testen kannst.

Klaviyo Email-Feldauswahlen

Die Website-Einstellung für Klaviyo Email Field Selectors wird verwendet, um alle E-Mail- und Telefonnummern-Eingabefelder auf der Website gezielt anzusprechen (mit Ausnahme des E-Mail-Eingabefelds im Checkout, das weiter unten behandelt wird). Wir identifizieren diese Felder über standardmäßige CSS-Selektoren, wobei jeder einzelne Selektor zur Website-Einstellung hinzugefügt wird (bei der es sich um eine „Zeichenfolgenmenge“ handelt, sodass mehrere Zeichenfolgenwerte einzeln eingegeben werden können). Jeder komplexe Selektor, der in einem Standard-Stylesheet verwendet werden kann, um ein bestimmtes Element anzusprechen, kann verwendet werden, z. B. ist #dwfrm_login div.username input.input-text zulässig, ebenso wie Selektoren, die mehrere Elemente auf der Website anhand gemeinsamer Attribute ansprechen können, z. B. input[type=email]. Achte darauf, Eingaben nicht über dynamisch generierte IDs anzusprechen – 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, trotzdem anvisiert 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 das DOM eingefügt wird.

Beachte außerdem, dass Felder für Telefonnummern allein Klaviyo je nach deinen SMS-Einstellungen in deinem Klaviyo-Konto möglicherweise nicht ausreichen, um die Person vollständig zu identifizieren (wenn SMS aktiviert ist und du eine Absendernummer hast, die dem Land der eingegebenen Telefonnummer zugeordnet ist, wird der Browser identifiziert). Daher kann das Hinzufügen von CSS-Selektoren zum Anvisieren von Feldern für Telefonnummern als „nice to have“ oder „bei Bedarf“ betrachtet werden, während das Hinzufügen für E-Mail-Felder als essenziell betrachtet werden sollte.

Auswahl für Checkout-E-Mail-Felder

Das Feld zur E-Mail-Erfassung im Checkout ist ein Sonderfall und hat deshalb eine eigene Website-Einstellung für das Targeting. Das Prinzip funktioniert genauso wie die Website-Einstellung Klaviyo Email Field Selectors: Gib einfach einen einzelnen CSS-Selektor ein, der das Feld für die E-Mail-Adresse im Checkout-Flow deiner Website anspricht – unabhängig davon, ob es am Anfang, Ende oder in der Mitte des Checkouts angezeigt wird.

Die erfolgreiche Konfiguration dieser Website-Einstellung, um das Feld zur E-Mail-Erfassung im Checkout anzusteuern, ist entscheidend, um das Ereignis Started Checkout korrekt zu tracken. Daher wird dringend empfohlen, dass du testest, ob Started Checkout -Ereignisse in Klaviyo angezeigt werden, nachdem im Feld zur E-Mail-Erfassung im Checkout eine E-Mail-Adresse eingegeben wurde.

Beachte außerdem, dass das Checkout-E-Mail-Feld, das über die Website-Einstellung „Checkout Email Field Selector“ ausgewählt wird, automatisch verknüpft wird, um die Nutzer*in zu identifizieren, und zusätzlich das Event Started Checkout auslöst (d. h., du musst den CSS-Selektor für das Checkout-E-Mail-Feld nicht sowohl in den Website-Einstellungen „Klaviyo Email Field Selectors“ als auch „Checkout Email Field Selector“ angeben).

Setup-Snippets hinzufügen

Als letzten Teil der Einrichtung der Cartridge musst du die Snippets zu deinen Website-Vorlagendateien hinzufügen, damit die Cartridge mit der Website kommunizieren kann. Die Schritte sind je nach Infrastruktur – Site Genesis (SG) oder Storefront Reference Architecture (SFRA) – sehr unterschiedlich. Achte daher darauf, die richtigen Anweisungen für dein Setup zu befolgen.

Einrichtung des Storefront Reference Architecture (SFRA)-Snippets

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

<isinclude template="klaviyo/klaviyoFooter"/>

Du hast die Snippet-Einrichtung für deinen SFRA-Shop jetzt abgeschlossen.

Einrichtung des Site Genesis (SG)-Snippets

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

<isinclude template="klaviyo/klaviyoFooter"/>

1. So fügst du Snippets für die serverseitige Nutzer*innen-Identifizierung hinzu: Füge das folgende Snippet zu deinen Konto-Show- und Cart-Show-Controllern an einer beliebigen Stelle vor dem Aufruf hinzu, um die 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

1. Dann aktualisierst du den app.getView(...)-Aufruf, um klid als pdict-Variable einzuschließen.
   • In deinem Konto-Show-Controller:
     

app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview');
// KLAVIYO: added 'klid: klid'

• In deinem Cart-Show-Controller:
  

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

1. Um das Snippet Added To Cart zum Cart-AddProduct-Controller hinzuzufügen: Füge das folgende Snippet in deinen Cart-AddProduct-Controller an einer beliebigen Stelle vor dem Aufruf zum Rendern der Vorlage ein (d. h. app.getView(...)).
   

 /* Klaviyo Added to Cart event tracking */
    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 */

1. Snippets für Started Checkout: Wenn du Klaviyo-Snippets zu Checkout-Controllern hinzufügst, um Started Checkout -Events zu tracken, solltest du Folgendes beachten:
   • Das Ziel beim Hinzufügen dieser Snippets ist es, zu prüfen, ob eine E-Mail-Adresse im Checkout-Flow mit dem Basket-Objekt verknüpft wurde, und sobald das der Fall ist, das Ereignis Started Checkout auszulösen. Es ist wichtig, die Verknüpfung einer E-Mail-Adresse mit dem Basket so früh wie möglich im Checkout-Flow zu erfassen.
   • Aufgrund der standortbasierten Anpassung des Checkouts ist es Klaviyo nicht möglich, genau festzulegen, welcher Controller als Erstes ein Basket-Objekt erhält, an das eine E-Mail-Adresse angehängt ist.
   • Wir empfehlen, die Code-Fragmente zu allen wichtigen Routen hinzuzufügen, die innerhalb des Checkouts ausgelöst werden. Wenn du mithilfe des Debuggers genau feststellen kannst, wann die E-Mail-Adresse in deinem Checkout-Flow an den Warenkorb angehängt wird, kannst du die Fragmente gern nur zu dieser Route hinzufügen, aber teste gründlich, um sicherzustellen, dass alle möglichen Checkout-Pfade (als Gast, angemeldet, Anmeldung innerhalb des Checkouts usw.) den Code auslösen.
2. Es folgt das Snippet für den ersten Route-Hit im Checkout (in der Regel COCustomer-Start). Füge es an beliebiger Stelle vor dem Aufruf ein, um die Vorlage zu rendern (d. h. app.getView(...)). Beachte den wichtigsten Unterschied in diesem Snippet – das Übergeben des ersten Arguments der Methode KLCheckoutHelpers.startedCheckoutHelper als true statt false – im Vergleich zu den anderen Checkout-Snippets (unten hervorgehoben). Beachte, dass im Snippet unten die KLCheckoutHelpers.startedCheckoutHelper- Methode true statt false ist (wie in den anderen Checkout-Snippets). Das ist wichtig, damit der Code erkennt, dass wir ein neues Started Checkout -Event tracken müssen.

/* Klaviyo Started Checkout event 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');
   }
   /* END Klaviyo Started Checkout event tracking */

1. Aktualisiere dann den Aufruf app.getView(...), sodass klid als pdict-Variable enthalten ist:

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

1. Die folgenden Snippets sollten zur 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 auf Nummer sicher gehen willst, empfehlen wir, dieses Snippet zu allen folgenden Routen hinzuzufügen: Wie bei den obigen Snippets fügst du dieses Snippet an einer beliebigen Stelle vor dem Aufruf zum Rendern der Vorlage oder vor Aufrufen nachfolgender Controller hinzu (Beispiel aus COBilling-Save: app.getController(‘COSummary’).Start()).
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start

/* Klaviyo Started Checkout event 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');
}
/* END Klaviyo Started Checkout event tracking */

1. Für Routen, die Vorlagen direkt aufrufen (z. B. COShipping-Start), aktualisiere den app.getView(...)‑Aufruf so, dass klid als pdict-Variable enthalten ist. 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('checkout/shipping/singleshipping');

1. So fügst du das Snippet Order Confirmation zum Controller COSummary-ShowConfirmation hinzu: Füge das folgende Snippet an einer beliebigen Stelle in deinen Controller COSummary-ShowConfirmation ein, bevor die Vorlage gerendert wird.

/* Klaviyo Order Confirmation event tracking */
  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) {
// check to see if the status is new or created
  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 email = order.customerEmail;
var phone = order.defaultShipment.shippingAddress.phone;
var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
if (phone) {
  // NOTE: Klaviyo only accepts phone numbers that include + and the country code
  at the start (ex for US: +16465551212)
  // in order to successfully get users subscribed to SMS list you must collect
  the country code in your order phone number field!
phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
if(!e164PhoneRegex.test(phone)) {
if (session.custom.KLSmsSubscribe) {
  var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: Order-Confirm');
  logger.error(`SMS Subscription requested by user, but an invalid phone number
  was provided. Phone number: ${phone}`);
}
phone = null;
}
}
if (email || phone) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Klaviyo Order Confirmation event tracking */

Du hast jetzt die Snippet-Einrichtung für deinen Site Genesis-Shop abgeschlossen.

Kontrollkästchen-Snippets für die Einwilligung beim Bezahlvorgang hinzufügen (SG und SFRA)

Um die Einwilligung für E-Mail und SMS beim Bezahlvorgang einzuholen, musst du Code-Fragmente für die Kontrollkästchen zur Einwilligung an den gewünschten Positionen einfügen und außerdem die Listen-ID-Einstellungen konfigurieren, wie oben im Abschnitt Services hinzufügen beschrieben.

Damit diese Snippets beispielsweise im Checkout angezeigt werden, können sie in der Vorlage shipmentCard.isml (app_storefront_base) in SFRA platziert oder in der Vorlage billing.isml (app_storefront_core) in SiteGen platziert werden.

Unten findest du die ISML-Snippets sowohl für Site Genesis als auch für SFRA. Du kannst sie an beliebiger Stelle im Checkout-Flow platzieren, die für deine Website am besten geeignet ist. Beachte, dass du damit die Einwilligung beim Checkout auf Site Genesis korrekt funktioniert, das Snippet zur Bestellbestätigung, auf das im Abschnitt Setup-Snippets hinzufügen oben verwiesen wird, eingebunden haben musst.

Die Snippets unten setzen voraus, dass deine Opt-in-Sprache für E-Mail und SMS in einem Properties-Resource-Bundle namens „checkout“ enthalten ist. Du musst `your.email.subscribe.resource.string.here` ersetzen und `your.sms.subscribe.resource.string.here` durch die Schlüssel, die jeweils deiner E-Mail- und SMS-Opt-in-Sprache entsprechen. Diese Sprache wird neben dem Kontrollkästchen angezeigt.

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

• E-Mail
  E-Mail-Updates abonnieren
• SMS
  SMS-Updates abonnieren. 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)}

OCAPI-Integration in Klaviyo aktivieren

Endpunkte

Zur Integration mit SFCC für den Produktkatalog und historische/laufende Bestelldaten nutzt Klaviyo vier OCAPI-Endpunkte:

• /order_search
  Synchronisiert historische Bestelldaten mit Klaviyo und synchronisiert fortlaufende Bestellereignisse alle 60 Minuten. Die Ereignisse Ordered Product und Placed Order synchronisieren zusätzliche Daten für die Segmentierung und das Flow-Filter und eignen sich ideal für erweiterte Personalisierung, die über das Ereignis Order Confirmation nicht verfügbar ist. Für Bestellbestätigungs-E-Mails in Echtzeit verwende das Ereignis Order Confirmation aus der Cartridge.
• /sites
  Ermöglicht dir, auszuwählen, von welcher Website Klaviyo während der Einrichtung deiner Integrationen Daten synchronisiert.
• /product_search
  Verbindet deinen Katalog mit Klaviyo, um Funktionen wie Produktempfehlungen in E-Mails zu ermöglichen.
• /products/*/variations
  Ermöglicht, Varianten mit Klaviyo zu synchronisieren, um Funktionen wie „wieder auf Lager“, „niedriger Bestand“ und „Preissenkung“-Flow zu ermöglichen.

SFCC-seitiges Setup

Bevor wir mit 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 erfordert, wir aber tatsächlich keine Daten an SFCC posten; das liegt am Design von SFCCs OCAPI.

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 sind erforderlich, um das Bearer-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 Snippets 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 bei der Einrichtung des API-Clients im vorherigen Schritt generiert wurde (das sollte ungefähr so aussehen: „xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx“). Wenn die Einstellungen für diese API bereits vorhanden sind, musst du möglicherweise nur die unten hervorgehobenen Abschnitte zum bestehenden JSON-Array der Clients hinzufügen.
   1. Füge das folgende JSON unter dem Typ Shop und dem Kontext Global (organisationsweit) hinzu, ersetze SHOP_API_VERSION durch deine OCAPI Shop API-Version und klicke dann auf Speichern.
      Nach dem Hinzufügen sollten die Einstellungen ähnlich wie folgt aussehen:
      

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

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

{
 "_v":"DATA_API_VERSION",
 "clients":[
 {
 "client_id":"CLIENT_ID",
 "resources":[
 {
 "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":"(**)",
 }
 ]
 }
 ]
}

Einrichtung auf Klaviyo-Seite

1. Wähle in Klaviyo Integrationen > Integrationen hinzufügen aus.
2. Suche nach Salesforce Commerce Cloud. Klicke auf die Karte und dann auf Installieren.
3. Klicke auf der Landingpage auf Mit Salesforce Commerce Cloud verbinden.
4. Fülle auf der nächsten Seite die folgenden Informationen aus:
   • Shop-URL
     Deine Website-Domain (z. B. example.com oder dev03-na01-example.demandware.net).
   • Authentifizierungstoken
     Erstelle für diese Integrationen einAuthentifizierungstoken, mit dem ein Bearer-Token angefordert wird. Das Authentifizierungstoken wird erzeugt, indem die Client-ID und das Passwort, durch einen Doppelpunkt verbunden, Base-64-kodiert werden (z. B. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Data API Version
     Die Version deiner Data API, für die du im SFCC-seitigen Einrichtungsschritt Zugriff hinzugefügt hast (z. B. v19_10).
   • Shop API-Version
     Die Version deiner Shop-API, für die du im SFCC-seitigen Einrichtungsschritt 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-en). Du findest deine Katalog-ID im Salesforce Business Manager unter Merchant Tools > Products and Catalogs > Catalogs.
     

5. Nachdem du diese Anmeldedaten eingegeben hast, klicke auf den Link Liste der Websites abrufen, um eine Liste der Websites in deiner SFCC-Instanz abzurufen.
6. Nachdem die Websites abgerufen wurden, wähle die Website(s) aus, die du mit diesem Konto integrieren möchtest, und klicke auf Setup abschließen. Deine Integration sollte jetzt mit der Synchronisierung deiner Bestell-, Katalog- und Kund*innendaten beginnen.

Teste deine SFCC-Integration

Um dein Cartridge-Setup zu testen, gehe auf deine Website und befolge diese Anweisungen:

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

Klaviyo Email-Feldauswahlen testen

So testest du, ob ein bestimmtes E-Mail-Feld korrekt angesprochen wurde und die Person für Klaviyo korrekt identifiziert:

1. Öffne ein Inkognito-Browserfenster.
2. Gib in der Developer Console den folgenden Befehl ein und drücke die Eingabetaste:
   klaviyo.isIdentified();
   Das sollte zu der folgenden Ausgabe führen:
   Promise {<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. Wechsle zurück zur Developer Console und gib klaviyo.isIdentified(); erneut ein. Dies sollte zu folgender Ausgabe führen:
   Promise {<fulfilled>: true}
5. Du kannst überprüfen, ob Klaviyo tatsächlich Identify-Aufrufe empfängt, indem du in Klaviyo zu Analytics > Metrik gehst und dort den Aktivitäts-Feed von aktiv auf der Website -Ereignissen findest, wo du die eingegebene(n) E-Mail-Adresse(n) aufgeführt sehen solltest.

E-Mail-Feldselektor für den Checkout testen

Um zu testen, ob das Feld zur Erfassung von E-Mail-Adressen beim Checkout das Started Checkout -Ereignis erfolgreich auslöst:

1. Füge ein oder mehrere Produkte zum Warenkorb hinzu und starte dann den Checkout.
2. Gib im Checkout eine E-Mail-Adresse in das entsprechende Feld ein und drücke die Tabulatortaste, um den Fokus auf ein anderes Element auf der Seite zu ändern.
3. Du kannst noch einmal überprüfen, dass Klaviyo tatsächlich Identify-Aufrufe empfängt, indem du in Klaviyo zu Analytics > Metrik gehst und den Aktivitätsfeed von Started Checkout -Ereignissen suchst. Dort solltest du sehen, dass dein jüngstes Ereignis getrackt wurde.

Ergebnis

Du hast jetzt Salesforce Commerce Cloud mit Klaviyo integriert und deine Integrationen getestet.