Aan de slag met Salesforce Commerce Cloud

Wat je leert

Lees hoe je Salesforce Commerce Cloud kunt integreren met Klaviyo. Met de Klaviyo-cartridge en API-integratie kunnen websites die Salesforce Commerce Cloud (voorheen Demandware) gebruiken snel verbinding maken en zowel realtime als historische data naar Klaviyo sturen. Wanneer je Klaviyo integreert met Salesforce Commerce Cloud (SFCC), gaat Klaviyo acties die mensen uitvoeren in realtime tracken, zoals website-navigatie, zoektracking, producten bekijken, categorieën bekijken, items aan een winkelwagen toevoegen, afrekenen en bestellingen plaatsen.

Er zijn 3 hoofdstappen om SFCC met Klaviyo te integreren:

1. De Klaviyo-cartridge installeren in SFCC.
2. Enablement-snippets toevoegen aan SFCC.
3. De SFCC OCAPI-integraties inschakelen in Klaviyo.

Voordat je van start gaat

Klaviyo integreert met zowel op SFCC Controller gebaseerde Site Genesis (SG)-sites als Storefront Reference Architecture (SFRA)-sites. Elk framework vereist een iets andere cartridge-setup en snippets, zoals hieronder beschreven.

Om onze cartridge van versie 23.7.0 (of een hogere versie) te gebruiken, raden we aan om je SFCC-compatibiliteitsmodus te updaten naar 21.7 of hoger.

Als je liever eerst begint met het integreren van je ontwikkelomgeving, kun je een gekoppeld Klaviyo-account maken via de methode die in dit artikel wordt beschreven en je ontwikkelomgeving met dat account verbinden. We raden aan om het woord "Dev" of "Staging" op te nemen in de bedrijfsnaam die je gebruikt bij het instellen van het account, zodat je beter onderscheid kunt maken tussen accounts wanneer je bent ingelogd.

Het wordt ook aanbevolen om IP's van Klaviyo toe te voegen aan de positieve lijst van je firewallprovider om problemen met verificatie en configuratie te minimaliseren. Ga voor meer informatie naar Hoe IP-adressen van Klaviyo-integratieverkeer op de positieve lijst zetten.

De Klaviyo-cartridges instellen

Download de cartridges

Je kunt onze app-vermelding vinden op de Salesforce AppExchange. Op de AppExchange kun je meer te weten komen over Klaviyo en op Nu ophalen klikken om naar Github te gaan, waar onze cartridges beschikbaar zijn in een zipbestand om te downloaden. Als je een SFRA-site hebt, download je het KlaviyoSFRA-zipbestand en als je een Site Genesis-site hebt, download je het KlaviyoSG-zipbestand.

Je moet 2 cartridges instellen. Beide zijn inbegrepen in het zipbestand dat je hebt gedownload. Deze cartridges omvatten:

• int_klaviyo of int_klaviyo_sfra: Een sitespecifieke cartridge; int_klaviyo is voor websites op basis van SiteGenesis en int_klaviyo_sfra is voor websites op basis van SFRA.
• int_klaviyo_core: voor beide typen infrastructuren, met een aantal basisfuncties die overlappen.

Importeer de cartridges.

De eerste stap is om de cartridges te importeren in Visual Studio Code of Eclipse, zodat ze beschikbaar zijn om te koppelen aan je SFCC-instantie.

In VS Code

1. Kopieer en plak de cartridge int_klaviyo_core.
2. Kopieer de mappen int_klaviyo (Site Genesis) of int_klaviyo_sfra (SFRA) naar de codebase als siblings naast je andere cartriagemappen.

In Eclipse

1. Ga naar Beheer > Importeren > Algemeen > Bestaande projecten naar werkruimte.
2. Importeer de map int_klaviyo_core met de importwizard.
3. Selecteer de SFCC-instantie waarmee je de cartridge wilt verbinden.
4. Selecteer Eigenschappen.
5. Selecteer Project References.
6. Controleer in de int_klaviyo_core-cartridge.
7. Herhaal stappen 2 tot en met 6 voor de andere cartridge die specifiek is voor je framework (ofwel int_klaviyo of int_klaviyo_sfra).

Voeg de cartridges toe aan het cartridgepad

Zodra de cartridges zijn geïmporteerd, moeten ze worden toegevoegd aan de lijst met cartridges die je site gebruikt via SFCC's Business Manager.

1. Ga naar Beheer > Sites > Sites beheren.
2. Selecteer je site.
3. Selecteer het tabblad Instellingen.
4. Voeg aan het begin van het invoerpad voor cartridges met het label Cartridges de namen toe van de geïmporteerde Klaviyo-cartridges, met de core-cartridge als laatste (ofwel int_klaviyo:int_klaviyo_core of int_klaviyo_sfra:int_klaviyo_core).
5. Klik op Toepassen.

Zodra je op Toepassen hebt geklikt, zou je nu de 2 cartridges moeten zien aan het begin van het veld met het label Effectief cartridgepad.

Services toevoegen

Nadat je de cartridges hebt geïmporteerd en aan het site cartridge path hebt toegevoegd, moet de Klaviyo Service worden toegevoegd om de instellingenconfiguratie voor de cartridge in te schakelen. In de rootdirectory van het zipbestand met Klaviyo-cartridges staat nog een zipbestand met de naam metadata.zip. In de volgende instructies wordt naar dit zipbestand verwezen.

1. Navigeer naar Beheer > Siteontwikkeling > Site-import en -export > Services.
2. Upload en importeer daarna het bestand metadata.zip.
   

3. Wanneer je wordt gevraagd te bevestigen of je het geselecteerde archief wilt importeren, selecteer je OK.
4. Je zou nu de import moeten zien lopen onder het gedeelte Status onderaan de pagina.
   

5. Je hebt nu toegang tot een voorkeurenpagina via Merchant tools > Site Preferences > Custom Preferences > klaviyo.
   
   Vanaf hier kun je de volgende instellingen beheren:

• Klaviyo ingeschakeld
  Moet zijn ingesteld op "Ja" om de cartridge in te schakelen.
• Klaviyo-privésleutel
  Een Klaviyo private API-sleutel. Zorg ervoor dat de Klaviyo private API-sleutel die je voor deze integratie gebruikt, volledige toegang heeft gekregen.
• Klaviyo-account
  Je openbare API-sleutel van Klaviyo, oftewel site-ID.
• Label events als SFCC
  Als je ervoor kiest om events als SFCC te labelen, krijg je toegang tot vooraf gebouwde flow in Klaviyo met behulp van SFCC-data. Een huidig nadeel van events labelen is dat als je ervoor kiest om ze te labelen, je geen toegang hebt tot aanbevelingen voor Viewed Product of Added to Cart in Klaviyo-productfeed.
  
  • Als je eerder een cartridgeversie ouder dan 23.7.0 hebt geïnstalleerd en nu upgradet naar versie 23.7.0 of hoger, stel dit dan in op Nee. Integraties die vóór 13 juli 2023 zijn gemaakt (d.w.z. cartridgeversies vóór 23.7.0) genereren meetwaarden die niet als SFCC zijn gelabeld. Als je in het verleden een versie vóór 23.7.0 hebt gebruikt, houdt deze instelling rekening met de oude naamgevingsconventies om een onderbreking van meetwaardedata in je account te voorkomen.
• Verzend 'Added To Cart'-event als "Add To Cart"
  Als je eerder een cartridgeversie ouder dan 23.7.0 hebt geïnstalleerd en nu een upgrade uitvoert naar versie 23.7.0 of hoger, stel je dit in op Ja. Stel het anders in op Nee. Deze instelling voorkomt een onderbreking van meetwaardedata in je account.
• Selectoren voor velden voor Klaviyo Email en selector voor e-mailveld bij checkout
  Bekijk de sectie hieronder voor gedetailleerde informatie over hoe je deze 2 velden configureert.
• Afbeeldingstype
  Het type productafbeelding dat je wilt gebruiken in gebeurtenisgegevens die naar Klaviyo worden verzonden. Als je niet zeker weet welk afbeeldingstype je moet instellen, navigeer je naar Merchant tools > Products and Catalogs > Products, klik je op een product en bepaal je welk weergavetype je wilt gebruiken op basis van wat er beschikbaar is (bijv. large, medium, small, hi-res).
• Marketing-e-maillijst-ID
  Je kunt e-mailabonnees verzamelen bij het afrekenen en ze synchroniseren met een Klaviyo-lijst. Deze instelling is de ID van de lijst in Klaviyo waaraan je e-mailabonnees wilt toevoegen. Lees hoe je een lijst-ID vindt in Klaviyo. Om e-mailabonnees te verzamelen bij het afrekenen, moet je ook een selectievakje-snippet toevoegen, die in een later gedeelte wordt beschreven.
• Marketing-sms-lijst-ID
  Je kunt sms-abonnees verzamelen bij het afrekenen en ze synchroniseren met een Klaviyo-lijst. Deze instelling is het ID van de Klaviyo-lijst waaraan je sms-abonnees wilt toevoegen. Ontdek hoe je een lijst-ID vindt in Klaviyo. Als je zowel sms- als e-mailabonnees verzamelt, kies dan een andere lijst voor sms dan voor e-mail. Zo weet je zeker dat toestemming altijd correct wordt toegewezen aan het juiste kanaal. Om sms-abonnees te verzamelen bij het afrekenen, heb je nog een paar andere vereisten nodig, plus een selectievakje-snippet, die in een later gedeelte worden beschreven.
  

6. Het bestand metadata.zip maakt ook een nieuwe service aan in SFCC. Als je naar Administratie > Operations > Services gaat, zie je nu onder het tabblad Services 2 nieuwe items met de naam KlaviyoEventService en KlaviyoSubscribeProfilesService, elk met bijbehorende profiel- en referentiegegevensitems.

Klaviyo Email-veldselectoren en e-mailveldselector voor checkout configureren

Deze voorkeuren zijn essentieel zodat Klaviyo sitebezoekers succesvol kan identificeren en tracking kan uitvoeren. Als een bezoeker niet door Klaviyo wordt geïdentificeerd, worden er geen events voor die bezoeker bijgehouden. Zodra je klaar bent met de integratie, kun je in de sectie Test je SFCC-setup hieronder lezen hoe je je Klaviyo Email en de configuratie van de veldselector voor e-mailvelden bij de checkout kunt testen.

Klaviyo Email-veldselectors

De sitevoorkeur Klaviyo Email Field Selectors wordt gebruikt om alle e-mail- en telefoonnummerinvoervelden op de site te targeten (met uitzondering van het e-mailinvoerveld in de checkout, dat hieronder wordt behandeld). We identificeren deze velden via standaard CSS-selectors, waarbij elke selector afzonderlijk wordt toegevoegd aan de sitevoorkeur (een “Set of Strings”, waarmee je meerdere tekenreekswaarden stuk voor stuk kunt invoeren). Elke complexe selector die je in een standaard stylesheet zou kunnen gebruiken om een specifiek element te targeten, kun je gebruiken; bijvoorbeeld #dwfrm_login div.username input.input-text is acceptabel, net als selectors die meerdere elementen op de site kunnen targeten op basis van gedeelde kenmerken, bijvoorbeeld input[type=email]. Zorg dat je geen invoervelden target via dynamisch gegenereerde ID's — een heel veelvoorkomend geval in SiteGen — omdat die ID's veranderen bij het laden van de pagina en daardoor niet werken (bijv. #dwfrm_login_username_d0fignzngiyq).

Let op: velden die na het laden van de pagina aan de DOM worden toegevoegd, kunnen nog steeds worden getarget. Voorbeelden hiervan zijn een veld voor e-mailadres dat na een AJAX-aanroep in een modal wordt ingevoegd, of een veld dat door JavaScripts van derden in de DOM wordt geïnjecteerd.

Let er ook op dat velden met alleen een telefoonnummer de gebruiker mogelijk niet volledig identificeren voor Klaviyo, afhankelijk van je sms-instellingen in je Klaviyo-account (als sms is ingeschakeld en je een verzendnummer hebt dat is gekoppeld aan het land van het ingevoerde telefoonnummer, wordt de browser geïdentificeerd). Daarom kan het toevoegen van CSS-selectors om telefoonnummervelden te targeten worden beschouwd als 'nice to have' of 'indien nodig', terwijl het toevoegen ervan voor e-mailvelden als essentieel moet worden beschouwd.

E-mailveldselector voor afrekenen

Het veld voor het verzamelen van e-mailadressen bij het afrekenen is een speciaal geval en heeft daarom een eigen sitevoorkeur voor targeting. Het principe werkt precies hetzelfde als bij de sitevoorkeur Klaviyo Email Field Selectors: voer simpelweg één CSS-selector in die het veld voor het e-mailadres target in de checkout-flow van je site, ongeacht of dit aan het begin, einde of in het midden van de checkout verschijnt.

Het succesvol configureren van deze sitevoorkeur om het veld voor e-mailverzameling in checkout te targeten, is essentieel om de Started Checkout -gebeurtenis correct bij te houden. Daarom raden we sterk aan dat je test of Started Checkout -gebeurtenissen in Klaviyo verschijnen nadat er een e-mailadres is ingevoerd in het veld voor e-mailverzameling in checkout.

Houd er ook rekening mee dat het checkout-e-mailveld dat als doel is ingesteld via de sitevoorkeur Checkout Email Field Selector automatisch wordt gekoppeld om de gebruiker te identificeren, naast het activeren van de gebeurtenis Checkout gestart (d.w.z. je hoeft de CSS-selector voor het checkout-e-mailveld niet in zowel de sitevoorkeuren Klaviyo Email Field Selectors als Checkout Email Field Selector op te nemen).

Stel fragmenten in

Het laatste deel van de cartridgeconfiguratie is dat je de snippets aan je site-templatebestanden toevoegt, zodat de cartridge kan communiceren met de site. Deze stappen verschillen sterk voor Site Genesis (SG)- en Storefront Reference Architecture (SFRA)-infrastructuren, dus zorg ervoor dat je de juiste instructies voor jouw setup volgt.

Storefront Reference Architecture (SFRA) snippet-setup

Voeg de volgende code toe onderaan je pageFooter.isml-bestand:

<isinclude template="klaviyo/klaviyoFooter"/>

Je hebt de snippetconfiguratie voor je SFRA-store nu voltooid.

Site Genesis (SG)-snippet instellen

1. Om KlaviyoFooter.isml toe te voegen aan de globale footer: voeg de volgende code toe aan de onderkant van je footer.isml-bestand (of een vergelijkbare template die wordt geladen aan het einde van elke pagina).
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. Om snippets toe te voegen voor server-side gebruikersidentificatie: voeg de volgende snippet toe aan je Account-Show- en Cart-Show-controllers, ergens vóór de aanroep om hun respectieve templates te renderen (d.w.z. app.getView(...)).
   

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

1. Vervolgens werk je de aanroep app.getView(...) bij om klid op te nemen als een pdict-variabele.
   • In je Account-Show-controller:
     

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

• In je Cart-Show-controller:
  

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

1. Om het Added To Cart -snippet toe te voegen aan de Cart-AddProduct-controller: voeg het volgende snippet toe aan je Cart-AddProduct-controller, ergens vóór de aanroep om de template te renderen (d.w.z. 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. Checkout gestart -snippets: wanneer je Klaviyo-snippets toevoegt aan checkout-controllers om Checkout gestart -events te tracken, is het belangrijk om het volgende in gedachten te houden:
   • Het doel van het toevoegen van deze snippets is om te controleren of er in de checkout-flow een e-mailadres is gekoppeld aan het Basket-object, en als dat is gekoppeld, de Started Checkout event te activeren. Het is belangrijk om de koppeling van een e-mailadres aan de Basket zo vroeg mogelijk in de checkout-flow op te vangen.
   • Door aanpassingen aan afrekenen op siteniveau kan Klaviyo niet precies definiëren welke controller als eerste een Basket-object ontvangt waaraan een e-mailadres is gekoppeld.
   • We raden aan om de codefragmenten toe te voegen aan alle belangrijkste routes die worden geactiveerd tijdens het afrekenen. Als je de debugger kunt gebruiken om precies te bepalen wanneer het e-mailadres aan de winkelwagen wordt gekoppeld in je checkout-flow, kun je de snippets gerust alleen aan die route toevoegen, maar test grondig om te garanderen dat alle mogelijke checkout-paden (gast, ingelogd, inloggen tijdens het afrekenen, enz.) de code activeren.
2. Hieronder staat het snippet voor de eerste route-hit in checkout (meestal COCustomer-Start). Voeg dit ergens in vóór de aanroep om de template te renderen (dus app.getView(...)). Let op het belangrijkste verschil in dit snippet – de eerste argumentwaarde van de methode KLCheckoutHelpers.startedCheckoutHelper doorgeven als true in plaats van false – vergeleken met de andere checkout-snippets (hieronder gemarkeerd). Let op dat in het snippet hieronder de KLCheckoutHelpers.startedCheckoutHelper methode true is in plaats van false (zoals in de andere checkout-snippets). Dit is essentieel zodat de code weet dat we een nieuwe Started Checkout -gebeurtenis moeten tracken.

/* 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. Werk vervolgens de aanroep app.getView(...) bij zodat klid wordt opgenomen als pdict-variabele:

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

1. De volgende snippets moeten worden toegevoegd aan de eerste route die wordt geactiveerd nadat er een e-mailadres is gekoppeld aan het Basket-object. Als je het niet zeker weet, of gewoon zeker wilt spelen, raden we aan om deze snippet toe te voegen aan alle volgende routes: voeg deze snippet, net als de bovenstaande snippets, ergens toe vóór de call om de template te renderen, of vóór calls naar volgende controllers (voorbeeld uit 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. Voor routes die templates wel rechtstreeks aanroepen (bijv. COShipping-Start), werk je de app.getView(...) -aanroep bij zodat klid wordt opgenomen als een pdict-variabele. Hier is een voorbeeld voor de COShipping-Start-route:

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

1. Om de Order Confirmation -snippet toe te voegen aan de COSummary-ShowConfirmation-controller: voeg de volgende snippet toe aan je COSummary-ShowConfirmation-controller, ergens vóór de aanroep om de template te renderen.

/* 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 */

Je hebt nu de snippetconfiguratie voor je Site Genesis-store voltooid.

Consent bij afrekenen-checkbox-snippets toevoegen (SG en SFRA)

Om toestemming bij checkout te verzamelen voor e-mail en sms, moet je codefragmenten toevoegen zodat de selectievakjes voor toestemming op de gewenste plek worden weergegeven, naast het configureren van de List ID-instellingen die hierboven worden vermeld in de sectie Add services.

Als je deze fragmenten bijvoorbeeld wilt laten verschijnen tijdens het afrekenen, kun je ze plaatsen in de template shipmentCard.isml (app_storefront_base) binnen SFRA of in de template billing.isml (app_storefront_core) binnen SiteGen.

Hieronder staan de ISML-snippets voor zowel Site Genesis als SFRA, en je kunt ze overal in de checkout flow plaatsen waar dat het beste past bij je specifieke site. Let erop dat je, om toestemming bij checkout correct te laten werken op Site Genesis, de snippet voor Bestelbevestiging hebt opgenomen waarnaar wordt verwezen in de sectie Installatiesnippets toevoegen hierboven.

De onderstaande snippets gaan ervan uit dat je opt-in-tekst voor e-mail en sms is opgenomen in een properties-resourcebundle met de naam 'checkout'. Je moet `your.email.subscribe.resource.string.here` en `your.sms.aanmelden.resource.string.here` vervangen door de sleutels die overeenkomen met je opt-in-tekst voor e-mail en sms. Deze tekst wordt weergegeven naast het selectievakje.

Je opt-in-tekst kan er bijvoorbeeld zo uitzien:

• E-mail
  Aanmelden voor e-mailupdates
• Sms
  Aanmelden voor sms-updates. Door dit vakje aan te vinken en je telefoonnummer hierboven in te voeren, geef je toestemming voor het ontvangen van marketingberichten via sms (zoals [promotiecodes] en [winkelwagenherinneringen]) van [bedrijfsnaam] op het opgegeven nummer, inclusief berichten die via automatische kiestechnologie worden verzonden. Toestemming is geen voorwaarde voor aankoop. Er kunnen sms- en datatarieven van toepassing zijn. De frequentie van berichten varieert. Je kunt je op elk moment afmelden door STOP te antwoorden of door op de afmeldingslink te klikken (indien beschikbaar). Bekijk ons privacybeleid [link] en onze servicevoorwaarden [link].

 <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)}

De OCAPI-integratie inschakelen in Klaviyo

Eindpunten

Om te integreren met SFCC voor productcatalogus en historische/lopende bestelgegevens, maakt Klaviyo gebruik van vier OCAPI-eindpunten:

• /order_search
  Synchroniseert historische bestelgegevens naar Klaviyo en synchroniseert doorlopende bestelgebeurtenissen elke 60 minuten. De gebeurtenissen Ordered Product en Placed Order synchroniseren extra gegevens voor segmentatie en flowfilter, en zijn ideaal voor verbeterde personalisatie die niet beschikbaar is via de gebeurtenis Order Confirmation. Voor real-time orderbevestigingsmails gebruik je de gebeurtenis Order Confirmation uit de cartridge.
• /sites
  Hiermee kun je selecteren van welke site Klaviyo data synchroniseert tijdens het instellen van je integraties.
• /product_search
  Verbindt je catalogus met Klaviyo om functionaliteit mogelijk te maken, waaronder productaanbevelingen in e-mails.
• /products/*/variaties
  Maakt het mogelijk om variaties te synchroniseren met Klaviyo om functionaliteit zoals weer op voorraad-, lage voorraad- en prijsdalingflows mogelijk te maken.

Instelling aan de SFCC-kant

Voordat we met OCAPI van SFCC kunnen communiceren, moeten er in SFCC enkele machtigingen en instellingen worden ingesteld.

Let op: hoewel de Klaviyo-integraties POST-machtigingen vereisen voor order_search en product_search, plaatsen we geen data naar SFCC; dit komt door het ontwerp van OCAPI van SFCC.

1. Ga naar https://account.demandware.com/dw/account/APIAdmin en voeg een API-client toe voor Klaviyo. De API Client ID en het wachtwoord zijn vereist om het bearer token voor OCAPI te genereren.
2. Zodra de API-client is toegevoegd, navigeer je naar Administration > Site Development > Open Commerce API Settings in de SFCC Business manager.
3. Voeg de volgende snippets toe en vervang de API-versie en client-ID. We ondersteunen API-versies 19.5 en hoger, evenals 18.8. Vervang CLIENT_ID door de API-client-ID die is gegenereerd via de API-clientinstelling in de vorige stap (dit ziet er ongeveer zo uit: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Als de instellingen al bestaan voor deze API's, hoef je misschien alleen de gemarkeerde secties hieronder toe te voegen aan de bestaande JSON-array met clients.
   1. Voeg de volgende JSON toe onder het type Shop en de context Global (organization-wide), vervang SHOP_API_VERSION door je OCAPI Shop API-versie en klik vervolgens op Opslaan.
      Als je deze hebt toegevoegd, zouden de instellingen er ongeveer zo uit moeten zien:
      

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

1. Voeg de volgende JSON toe onder het type Data en de context Global (organization-wide), vervang DATA_API_VERSION door je OCAPI Data API-versie en klik vervolgens op Opslaan.
   Zodra je dit hebt toegevoegd, moeten de instellingen er ongeveer zo uitzien:
   

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

Instelling aan de kant van Klaviyo

1. Selecteer in Klaviyo Integraties > Integraties toevoegen.
2. Zoek naar Salesforce Commerce Cloud en klik op de kaart en daarna op Installeren.
3. Klik op Koppelen met Salesforce Commerce Cloud op de landingspagina.
4. Vul op de volgende pagina de volgende informatie in:
   • Winkel-URL
     Het domein van je website (bijv. example.com of dev03-na01-example.demandware.net).
   • autorisatietoken
     Maak een autorisatietoken voor deze integratie dat gebruikt zal worden om een bearer-token aan te vragen. Het autorisatietoken wordt gegenereerd door base-64-codering van de client-ID en het wachtwoord, verbonden door een dubbele punt (bijv. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Data API-versie
     De versie van je Data API waarvoor je toegang hebt toegevoegd in de stap SFCC-side-instellingen (zoals v19_10).
   • Shop API-versie
     De versie van je Shop API waarvoor je toegang hebt toegevoegd in de stap Setup aan de SFCC-kant (zoals v19_10).
   • Catalogus-ID
     De ID van de SFCC-catalogus die met Klaviyo gesynchroniseerd moet worden (bijv. storefront-catalog-en). Je vindt je catalogus-ID in Salesforce Business Manager onder Merchant Tools > Products and Catalogs > Catalogs.
     

5. Nadat je deze inloggegevens hebt ingevoerd, klik je op de link Lijst met sites ophalen om een lijst met sites op je SFCC-instance op te halen.
6. Nadat de sites zijn opgehaald, selecteer je de site(s) die je met dit account wilt integreren en klik je op Installatie voltooien. Je integraties zouden nu moeten beginnen met het synchroniseren van je bestellings-, catalogus- en klantgegevens.

Je SFCC-integratie testen

Ga naar je site en volg deze instructies om je cartridge-installatie te testen:

1. Plaats een cookie bij jezelf door de URL-parameter utm_email als je e-mailadres toe te voegen aan je adresbalk. Bijvoorbeeld: https://www.example.com/?utm_email=your@email.com.
2. Zoek in je catalogus.
3. Een categoriepagina bekijken.
4. Bekijk een productpagina.
5. Voeg een item toe aan je winkelwagen.
6. Plaats een testbestelling.
7. Ga in Klaviyo naar Analytics > Meetwaarden en zoek vervolgens naar meetwaarden die uit Salesforce Commerce Cloud komen.

Test selectors voor Klaviyo Email-velden

Om te testen of een bepaald e-mailveld correct is getarget en de gebruiker correct identificeert voor Klaviyo:

1. Open een incognitovenster in je browser.
2. Voer in de Developer Console de volgende opdracht in en druk op enter:
   klaviyo.isIdentified();
   Dit zou moeten resulteren in de volgende output:
   Promise {<fulfilled>: false}
3. Typ een e-mailadres in het doelveld en druk op de Tab-toets om de focus te verplaatsen naar een ander element op de pagina.
4. Ga terug naar de Developer Console en voer klaviyo.isIdentified(); opnieuw in. Dit zou moeten resulteren in de volgende output:
   Promise {<fulfilled>: true}
5. Je kunt dubbelchecken dat Klaviyo inderdaad Identify-calls ontvangt door in Klaviyo naar Analytics > Meetwaarde te gaan en de activity feed van Actief op site -events te zoeken, waar je de e-mailadres(sen) die je hebt ingevuld zou moeten zien staan.

E-mailveldselector voor checkout testen

Om te testen of het checkout-e-mailverzamelveld het Started Checkout -event succesvol triggert:

1. Voeg een of meer producten toe aan de winkelwagen en start daarna het afrekenen.
2. Typ tijdens checkout een e-mailadres in het doelveld en druk op de tab-toets om de focus naar een ander element op de pagina te verplaatsen.
3. Je kunt dubbelchecken dat Klaviyo inderdaad Identify-aanroepen ontvangt door naar Analytics > meetwaarden in Klaviyo te gaan en de activiteitenfeed van Started Checkout -events te zoeken, waar je zou moeten zien dat je recente event is bijgehouden.

Resultaat

Je hebt Salesforce Commerce Cloud nu geïntegreerd met Klaviyo en je integraties getest.