Aan de slag met Salesforce Commerce Cloud

Wat je leert

Leer hoe je Salesforce Commerce Cloud kunt integreren met Klaviyo. Met de Klaviyo cartridge en API integraties kunnen websites die Salesforce Commerce Cloud (voorheen Demandware) gebruiken snel verbinding maken en zowel realtime als historische gegevens naar Klaviyo sturen. Als je Klaviyo integreert met Salesforce Commerce Cloud (SFCC), start Klaviyo tracking acties die mensen in realtime uitvoeren, zoals websitenavigatie, zoeken tracking, producten bekijken, categorieën bekijken, items aan een winkelwagentje toevoegen, afrekenen en bestellen.

Er zijn 3 belangrijke stappen om SFCC met Klaviyo te integreren:

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

Voordat je van start gaat

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

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

Als je eerst je ontwikkelomgeving wilt integreren, kun je een gekoppeld Klaviyo account aanmaken met 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 de account, om beter onderscheid te maken tussen accounts bij het inloggen. 

De Klaviyo-cartridges instellen

De cartridges downloaden

Je kunt onze app vinden op de Salesforce AppExchange. Op de AppExchange kun je meer te weten komen over Klaviyo en op Get It Now klikken om naar Github te worden gebracht, waar onze cartridges in een zip-bestand beschikbaar zijn om te downloaden. Als je een SFRA site hebt, download dan het KlaviyoSFRA zip-bestand, en als je een Site Genesis site hebt, download dan het KlaviyoSG zip-bestand. 

Je moet 2 cartridges instellen, die allebei zijn opgenomen in het zip-bestand dat je hebt gedownload. Deze cartridges omvatten:

• int_klaviyo of int_klaviyo_sfra: Een site-specifieke cartridge; int_klaviyo is voor websites gebaseerd op Site Genesis, en int_klaviyo_sfra is voor websites gebaseerd op SFRA.
• int_klaviyo_core: voor beide soorten infrastructuren, met enkele overlappende basisfunctionaliteiten.

De cartridges importeren

De eerste stap is het importeren van de cartridges in Visual Studio Code of Eclipse, zodat ze beschikbaar zijn om te koppelen met je SFCC instance.

In VS-code

1. Kopieer en plak het patroon int_klaviyo_core.
2. Kopieer de mappen int_klaviyo (Site Genesis) of int_klaviyo_sfra (SFRA) naar de codebase als broertjes en zusjes van je andere cartridge-mappen.

In Eclips

1. Navigeer naar Beheer > importeren > Algemeen > Bestaande projecten in werkruimte.
2. importeer de int_klaviyo_core map met de importeer wizard.
3. Selecteer de SFCC-instantie waarmee je de cartridge wilt verbinden.
4. Selecteer Eigenschappen.
5. Selecteer Projectreferenties.
6. Controleer de int_klaviyo_core cartridge.
7. Herhaal stap 2 tot en met 6 voor de andere cartridge die specifiek is voor jouw framework (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 van cartridges die door je site worden gebruikt met behulp van SFCC's Business manager.

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

Nadat je op Toepassen hebt geklikt, zou je nu de 2 patronen moeten zien aan het begin van het veld met het label Effective Cartridge Path.

Diensten toevoegen

Nadat de cartridges zijn geïmporteerd en toegevoegd aan het cartridgepad van de site, moet de Klaviyo Service worden toegevoegd aan de instellingenconfiguratie voor de cartridge inschakelen. In de hoofdmap van het zipbestand van de Klaviyo cartridges staat nog een zipbestand met de naam metadata.zip. De volgende aanwijzingen verwijzen naar dit zip-bestand.

1. Navigeer naar Beheer > Siteontwikkeling > Site importeren & Exporteren > Diensten.
2. Upload en importeer dan het bestand metadata.zip.
   
3. Wanneer je wordt gevraagd om te bevestigen of je het geselecteerde archief wilt importeren, selecteer je OK.
4. Je zou nu het importeren moeten zien onder het kopje Status onderaan de pagina.
   
5. Je hebt nu toegang tot een voorkeurenpagina op Merchant tools > Site Preferences > Custom Preferences > Klaviyo .
   
   Van hieruit kun je de volgende instellingen beheren:
   • Klaviyo inschakelen
     Moet worden ingesteld op "Ja" om de cartridge in te schakelen.
   • Klaviyo Prive Sleutel
     Een Klaviyo privé API-sleutel. Zorg ervoor dat de Klaviyo private API-sleutel die je gebruikt voor deze integraties volledige toegang heeft gekregen. 
   • Klaviyo account
     Uw openbare Klaviyo API-sleutel of site-ID.
   • Evenementen labelen als SFCC
     Als je ervoor kiest om evenementen te labelen als SFCC, krijg je toegang tot kant-en-klare stromen in Klaviyo met behulp van SFCC-gegevens. Een huidig nadeel van het labelen van gebeurtenissen is dat als je ervoor kiest om ze te labelen, je geen toegang hebt tot Bekeken product of Aan winkelwagen toegevoegd aanbevelingen in Klaviyo productfeed. 
     
     • 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 deze dan in op Nee. integraties die zijn gemaakt vóór 13 juli 2023 (d.w.z. cartridgeversies vóór 23.7.0) genereren meetwaarden die niet zijn gelabeld als SFCC. Als je in het verleden een versie hebt gebruikt die ouder was dan 23.7.0, dan houdt deze instelling rekening met de oude naamgevingsconventies om een onderbreking van meetwaardegegevens in je account te voorkomen. 
   • Verzend Gebeurtenis toegevoegd aan winkelwagentje als "Toevoegen aan winkelwagentje"
     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 dan Ja in. Stel anders in op Nee. Deze instelling voorkomt de discontinuïteit van meetwaarde gegevens in je account. 
   • Klaviyo Email Veldselectoren en afrekenen Email Veldselector
     Raadpleeg de sectie hieronder voor gedetailleerde informatie over het configureren van deze 2 velden.
   • Type afbeelding
     Het type productafbeelding dat je wilt gebruiken in evenementgegevens die naar Klaviyo worden gestuurd. Als je niet zeker weet welk afbeeldingstype je moet instellen, ga dan naar Verkooptools > Producten en Catalogi > Producten, klik op een product en bepaal welk weergavetype je wilt gebruiken op basis van wat er beschikbaar is (bijv. groot, middel, klein, hi-res).
   • Marketing e-maillijst ID
     Je kunt e-mail abonnee verzamelen bij afrekenen en deze synchroniseren met een Klaviyo lijst. Deze instelling is het ID van de lijst in Klaviyo waaraan je e-mail abonnee wilt toevoegen. Leer hoe je een lijst-ID kunt vinden in Klaviyo. Om e-mail abonnee bij afrekenen te verzamelen, moet je ook een checkbox snippet toevoegen die in een later gedeelte wordt beschreven.
   • Marketing sms lijst ID
     Je kunt sms-abonnees verzamelen bij afrekenen en ze synchroniseren met een Klaviyo lijst. Deze instelling is de ID Klaviyo lijst waaraan je sms abonnee wilt toevoegen. Leer hoe je een lijst-ID kunt vinden in Klaviyo. Als je zowel sms- als e-mailabonnees verzamelt, kies dan een andere lijst voor sms dan voor e-mail. Dit zorgt ervoor dat toestemming altijd op de juiste manier wordt toegekend aan het juiste kanaal. Om sms abonnee bij afrekenen te verzamelen, heb je een aantal andere vereisten nodig, samen met een checkbox snippet, die worden beschreven in een later gedeelte.
     
6. Het metadata.zip bestand maakt ook een nieuwe service aan in SFCC. Als je naar Administratie > Operations > Services navigeert, zou je nu 2 nieuwe items moeten zien op het tabblad Services, genaamd KlaviyoEventService en KlaviyoSubscribeProfilesService, elk met hun eigen profiel en referenties.

Configureren van Klaviyo Email Veldselectors en afrekenen Email Veldselector 

Deze voorkeuren maken integraal deel uit van Klaviyo's succesvolle identificatie en tracking van websitebezoekers. Als een bezoeker niet geïdentificeerd is bij Klaviyo, dan worden er geen gebeurtenissen bijgehouden voor die bezoeker. Zodra je klaar bent met de integratie, kun je leren hoe je je Klaviyo E-mail en afrekenen e-mail veld selector setup kunt testen in de Test je SFCC setup sectie hieronder. 

Klaviyo Email Veldkiezers

De sitevoorkeur Klaviyo Email Field Selectors wordt gebruikt om alle invoervelden voor e-mail en telefoonnummers op de site te targeten (met uitzondering van de e-mailinvoer in afrekenen, die hieronder wordt behandeld). We identificeren deze velden via standaard CSS selectors, waarbij elk veld afzonderlijk wordt toegevoegd aan de sitevoorkeur (die een "Set van Teksten" is, zodat meerdere tekenreeksen één voor één kunnen worden ingevoerd). Elke complexe selector die kan worden gebruikt in een standaard stylesheet om een specifieke element te targeten kan worden gebruikt, 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 attributen, bijvoorbeeld input[type=e-mail]. Zorg ervoor dat je geen ingangen target via dynamisch gegenereerde ID's - een veel voorkomend geval in SiteGen - omdat deze ID's veranderen bij het laden van de pagina en dus mislukken (bijvoorbeeld #dwfrm_login_username_d0fignzngiyq).

Merk op dat velden die na het laden van de pagina aan de DOM zijn toegevoegd nog steeds doelwit kunnen zijn. Voorbeelden hiervan zijn een e-mailadresveld dat wordt ingevoegd in een modal na een AJAX-oproep, of een veld dat in de DOM wordt geïnjecteerd door JavaScripts van derden.

Houd er ook rekening mee dat telefoonnummervelden alleen de gebruiker mogelijk niet volledig identificeren op Klaviyo, afhankelijk van je sms-instellingen binnen je Klaviyo account (als sms is ingeschakeld en je hebt een verzendnummer gekoppeld aan het land van het ingevoerde telefoonnummer, wordt de browser geïdentificeerd). Als zodanig kan het toevoegen van CSS selectors voor telefoonnummervelden worden beschouwd als "leuk om te hebben" of "overbodig", terwijl het toevoegen voor e-mailvelden als essentieel moet worden beschouwd.

afrekenen Email Veldkiezer

Het verzamelveld voor e-mail bij het afrekenen is een speciaal geval en heeft als zodanig zijn eigen sitevoorkeur voor targeting. Het principe werkt precies hetzelfde als bij de sitevoorkeur Klaviyo Email Veldselectoren: voer gewoon een enkele CSS-selector in die zich richt op het e-mailadresveld in de afrekeningen van je site flow, ongeacht of het aan het begin, het einde of in het midden van de afrekeningen staat.

Het succesvol configureren van deze sitevoorkeur om het e-mailverzamelveld in afrekenen te targeten is essentieel voor het correct bijhouden van de gebeurtenis Begonnen afrekenen, en daarom wordt het ten zeerste aangeraden om te testen of Begonnen afrekenen gebeurtenissen verschijnen in Klaviyo nadat een e-mailadres is ingevoerd in het e-mailverzamelveld in afrekenen. 

Houd er ook rekening mee dat het afreken e-mailveld waarop de afreken Email veldselector sitevoorkeur is gericht, automatisch wordt gekoppeld om de gebruiker te identificeren, naast het triggeren van de gebeurtenis Afrekenen gestart (het is dus niet nodig om de CSS-selector voor het afreken e-mailveld op te nemen in zowel de Klaviyo Email veldselectors als de afreken Email veldselector sitevoorkeuren).

Snippets voor instellingen toevoegen

Het laatste onderdeel van het instellen van de cartridge is het toevoegen van de snippets aan je site template bestanden om de cartridge in te schakelen voor communicatie 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 volgt voor jouw opstelling.

Storefront Referentie Architectuur (SFRA) snippet instellen

Voeg de volgende code toe aan de onderkant van je pageFooter.isml bestand:

<isinclude template="klaviyo/klaviyoFooter"/>

Je hebt nu het instellen van de snippet voor je SFRA-zaak voltooid. 

Site Genesis (SG) snippet instellen

1. Om de KlaviyoFooter.isml toe te voegen aan de globale voettekst: Voeg de volgende code toe aan de onderkant van je footer.isml bestand (of een andere vergelijkbare template die onderaan elke pagina wordt geladen).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Snippets toevoegen voor gebruikersidentificatie op de server: Voeg het volgende knipsel toe aan je account-Show en Cart-Show controllers ergens voor de aanroep om hun respectievelijke sjabloon te renderen (d.w.z. app.getView(...)).
   

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

3. Dan update je de app.getView(...) aanroep om klid op te nemen als een pdict-variabele.
   •  In je account-Toon controller:
     

     app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverzicht');
     // Klaviyo: toegevoegd 'klid: klid'.

   • In je Cart-Show controller:
     

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

4. Zo voeg je het knipsel Toegevoegd aan winkelwagen toe aan de controller Cart-AddProduct: Voeg het volgende knipsel toe aan je Cart-AddProduct controller ergens voor de aanroep om de template te renderen (d.w.z. app.getView(...)).
   

    /* Klaviyo Aan winkelwagen toegevoegd evenement 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();
       Als (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);
       }
      }
      }
      }
      /* EINDE Klaviyo Toegevoegd aan winkelwagen event tracking */

5. Begonnen afrekenen snippets: Bij het toevoegen van Klaviyo snippets aan afrekenen controllers om Gestart afrekenen events te volgen, is het belangrijk om het volgende in gedachten te houden:
   • Het doel van het toevoegen van deze snippers is om te controleren of er een e-mailadres is gekoppeld aan het Mandje-object binnen het afrekenen flow, en als het is gekoppeld, de gebeurtenis Afrekenen starten. Het is belangrijk om de associatie van een e-mailadres met de Mand zo vroeg mogelijk in het afrekenen flow op te vangen.
   • Vanwege site-gebaseerd afrekenen is het voor Klaviyo niet mogelijk om precies te definiëren welke controller als eerste een Basket-object met een e-mailadres eraan ontvangt.
   • We raden aan om het codefragment toe te voegen aan alle belangrijke routes die worden geactiveerd binnen afrekenen. Als je de debugger kunt gebruiken om precies te bepalen wanneer het e-mailadres aan het mandje wordt gekoppeld in je afrekenen flow, voeg de snippets dan gerust alleen aan die route toe, maar test grondig om er zeker van te zijn dat alle mogelijke afrekenenpaden (gast, inloggen, inloggen binnen afrekenen, etc.) de code triggeren.
6. De snippet voor de eerste route bij het afrekenen (meestal COCustomer-Start) volgt hieronder. Voeg het ergens in vóór de aanroep om de template te renderen (d.w.z. app.getView(...)). Let op het belangrijkste verschil in deze snippet - het doorgeven van het eerste argument KLCheckoutHelpers.startedCheckoutHelper methode als true in plaats van false - in vergelijking met de andere afrekenen snippets (hieronder gemarkeerd). Merk op dat in het onderstaande fragment de KLCheckoutHelpers.startedCheckoutHelper methode waar is in plaats van onwaar (zoals in de andere afrekenen-fragmenten. Dit is essentieel om de code te laten weten dat we een nieuwe gebeurtenis Started afrekenen moeten volgen.

   /* Klaviyo Afrekenen evenement gestart 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');
      }
     /* EINDE Klaviyo Begonnen met afrekenen gebeurtenis tracking */
   

7. Dan update de app.getView(...) aanroep om klid op te nemen als een pdict-variabele:

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

8. De volgende fragmenten moeten worden toegevoegd aan de eerste route die wordt uitgevoerd nadat een e-mailadres is gekoppeld aan het mandobject. Als je het niet zeker weet, of je wilt je gewoon indekken, dan raden we je aan om dit knipsel toe te voegen aan alle volgende routes:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start
   Net als bij de bovenstaande snippets, voeg je dit snippet ergens toe vóór de aanroep om de template te renderen, of vóór aanroepen naar volgende controllers (voorbeeld van COBilling-Save: app.getController('COSummary').Start()). 

   /* Klaviyo Afrekenen evenement gestart 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');
   }
   /* EINDE Klaviyo Begonnen met afrekenen gebeurtenis tracking */

9. Voor routes die het sjabloon direct aanroepen (bijvoorbeeld COShipping-Start), update de app.getView(...) aanroep om klid op te nemen 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('afrekenen/shipping/singleshipping');

10. Snippet Bestelbevestiging toevoegen aan de controller COSummary-ShowConfirmation: Voeg de volgende snippet toe aan je COSummary-ShowConfirmation controller ergens voor de aanroep om de template te renderen.

    /* Klaviyo Orderbevestigingsgebeurtenis 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;
    als (order && order.customerEmail) {
    // controleer of de status nieuw of aangemaakt is
     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 telefoon = order.defaultShipment.shippingAddress.phone;
    var e164PhoneRegex = new RegExp(/^^[1-9]\d{1,14}$/);
    if (phone) {
     // NB: Klaviyo accepteert alleen telefoonnummers met + en de landcode
     aan het begin (ex voor VS: +16465551212)
     // om gebruikers succesvol te laten aanmelden voor sms lijst moet je
     de landcode verzamelen in het veld met het telefoonnummer van je bestelling!
    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 Abonnement aangevraagd door gebruiker, maar een ongeldig telefoonnummer
     is opgegeven. Telefoonnummer: ${phone}`);
    }
    phone = null;
    }
    }
    if (e-mail || phone) {
    klaviyoUtils.subscribeUser(email, phone);
    }
    }
    }
    }
    /* END Klaviyo Orderbevestiging event tracking */

Je hebt nu het instellen van de snippet voor je Site Genesis zaak voltooid. 

Toestemming bij afrekenen checkbox snippets toevoegen (SG en SFRA)

Om toestemming te verzamelen bij het afrekenen voor e-mail en sms, moet je een codefragment toevoegen zodat de toestemmingsvakjes waar gewenst worden weergegeven, naast het configureren van de instellingen voor de lijst-ID die hierboven zijn vermeld in het gedeelte Services toevoegen.

Om deze snippets bijvoorbeeld te laten verschijnen in afrekenen, kunnen ze worden geplaatst in de shipmentCard.isml template (app_storefront_base) binnen SFRA of worden geplaatst in de facturering.isml template (app_storefront_core) binnen SiteGen. 

Hieronder staan de ISML snippets voor zowel Site Genesis als SFRA, en ze kunnen overal in het afrekenen flow worden geplaatst dat het beste past bij jouw specifieke site. Om toestemming bij het afrekenen correct te laten functioneren op Site Genesis, moet je het Bestellingsbevestigingsfragment hebben opgenomen waarnaar wordt verwezen in het gedeelte Instellingenfragmenten toevoegen hierboven.

De onderstaande fragmenten gaan ervan uit dat je opt-in taal voor e-mail en sms is opgenomen in een properties resource bundel genaamd 'afrekenen'. Je moet `je.e-mail.aanmelden.resource.string.hier` vervangen. en `uw.sms.aanmelden.resource.string.hier` met de toetsen die respectievelijk overeenkomen met je e-mail en sms opt-in taal. Deze taal verschijnt naast het selectievakje. 

Je opt-in taal zou er bijvoorbeeld zo uit kunnen zien:

• Email
  aanmelden voor e-mail update
• sms
  aanmelden voor sms update. Door dit vakje aan te vinken en je telefoonnummer hierboven in te vullen, geef je toestemming voor het ontvangen van marketing tekstberichten (zoals [promotiecodes] en [winkelwagenherinneringen]) van [bedrijfsnaam] op het opgegeven nummer, inclusief berichten die door een autodialer worden verzonden. Toestemming is geen voorwaarde voor aankoop. Tarieven voor berichten en gegevens kunnen van toepassing zijn. De berichtenfrequentie varieert. Je kunt op elk moment afmelden door te antwoorden op STOP of door te klikken op de afmeldingslink (indien beschikbaar) in een van onze berichten. Bekijk ons privacybeleid [link] en servicevoorwaarden [link].

 <"""" ${KLSmsSubscribed} > 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= xml-ph-0031@deepl.inter ${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 ordergegevens, maakt Klaviyo gebruik van vier OCAPI eindpunten:

• /order_zoeken
  Synchroniseert historische ordergegevens naar Klaviyo synchroniseert lopende ordergebeurtenissen elke 60 minuten. De gebeurtenissen Besteld product en Geplaatste bestelling synchroniseren extra gegevens voor segmentatie en flowfilter, en zijn ideaal voor verbeterde personalisatie die niet beschikbaar is via de gebeurtenis Bestelbevestiging. Voor een realtime orderbevestigingse-mail gebruik je de gebeurtenis Orderbevestiging uit de cartridge.
• /sites
  Hiermee kun je selecteren vanaf welke site Klaviyo gegevens synchroniseert tijdens het opzetten van je integraties.
• /product_zoeken
  Verbindt je catalogus met Klaviyo om functionaliteit in te schakelen, waaronder productaanbevelingen in e-mail.
• /products/*/variations
  Maakt het mogelijk om varianten te synchroniseren met Klaviyo om functionaliteiten zoals terug in voorraad, lage voorraad en prijsdalingen mogelijk te maken. 

Opstelling SFCC-zijde

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

Houd er rekening mee dat, hoewel de Klaviyo integraties POST-rechten vereisen voor order_search en product_search, we eigenlijk geen gegevens naar SFCC posten; dit komt door het ontwerp van SFCC's OCAPI.

1. Navigeer naar https://account.demandware.com/dw/account/APIAdmin en voeg een API-client voor Klaviyo toe. De API Client ID en het wachtwoord zijn nodig om het token voor OCAPI te genereren.
2. Zodra de API client is toegevoegd, navigeer je naar Administratie > Siteontwikkeling > Open Commerce API Instellingen in de SFCC Business manager.
3. Voeg de volgende fragmenten toe, ter vervanging van de API-versie en Client-ID. We support API versies 19.5 en hoger en 18.8. Vervang CLIENT_ID door de API Client ID die is gegenereerd bij het instellen van de API client in de vorige stap (dit zou er ongeveer uit moeten zien als "xxxxxxxx-xxxx-xxxxxxxx-xxxxxxxxxxxxxxxx"). Als de instellingen voor deze API's al bestaan, dan hoef je alleen de gemarkeerde secties hieronder toe te voegen aan de bestaande clients JSON array.
   1. Voeg de volgende JSON toe onder het type Shop en context Global (organisatiebreed), waarbij je SHOP_API_VERSION vervangt door je OCAPI Shop API versie en klik dan op Save.
      

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

      Eenmaal toegevoegd zouden de instellingen er ongeveer zo uit moeten zien:
      
   2. Voeg de volgende JSON toe onder het type gegevens en de context Wereldwijd (organisatiebreed), waarbij je DATA_API_VERSION vervangt door je OCAPI gegevens API versie en klik vervolgens op Opslaan.
      

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

      Eenmaal toegevoegd zouden de instellingen er ongeveer zo uit moeten zien:
      

Klaviyo installatie aan de zijkant

1. Selecteer in Klaviyo integraties > integraties toevoegen.
2. Zoek naar Salesforce Commerce Cloud en klik op de kaart, klik vervolgens op Installeren.
3. Klik op Verbinden met Salesforce Commerce Cloud op de landingspagina. 
4. Vul op de volgende pagina de volgende informatie in: 
   • URL van de zaak
     Het domein van je website (bijvoorbeeld example.com of dev03-na01-example.demandware.net).
   • autorisatietoken
     Creëer een autorisatietoken voor deze integratie die gebruikt zal worden om een token aan te vragen. Het autorisatietoken wordt gegenereerd door base-64 codering van de cliënt-ID en het wachtwoord, samengevoegd met een dubbele punt (bijvoorbeeld xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxx:wachtwoord).
   • gegevens API Versie
     De versie van je gegevens API waarvoor je toegang hebt toegevoegd in de stap SFCC-side Setup (bijvoorbeeld v19_10).
   • Versie Shop API
     De versie van je Shop API waarvoor je toegang hebt toegevoegd in de SFCC-side Setup stap (bijv. v19_10).
   • Catalogus ID
     De ID van de SFCC catalogus die met Klaviyo gesynchroniseerd moet worden (bijv. storefront-catalog-en). U kunt uw catalogus-ID vinden in Salesforce Business Manager onder Merchant Tools > Producten en catalogi > Catalogs. 
     
5. Als je deze gegevens hebt ingevoerd, klik je op de link Lijst met sites ophalen om een lijst met sites op je SFCC-instantie op te halen.
6. Nadat de sites zijn opgehaald, selecteer je de site(s) die je wilt integreren met deze account en klik je op Installatie voltooien. Je integraties zouden nu moeten beginnen met het synchroniseren van je bestelling, catalogus en klantgegevens.

Test je SFCC-integraties

Om de instelling van je cartridge te testen, ga je naar je site en volg je deze instructies:

1. cookie zelf 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. Doorzoek je catalogus.
3. Bekijk een categoriepagina.
4. Bekijk een productpagina.
5. Voeg een artikel toe aan je winkelwagentje.
6. Plaats een testbestelling.
7. Navigeer naar analyses > meetwaarde in Klaviyo, zoek dan naar meetwaarde afkomstig van Salesforce Commerce Cloud.

Test Klaviyo Email Veldkiezers

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

1. Open een incognito browservenster.
2. Voer in de Developer Console het volgende commando in en druk op enter:
   Klaviyo.isIdentified();
   Dit zou de volgende uitvoer moeten opleveren:
   Belofte {<fulfilled>: false}
3. Typ een e-mailadres in het doelveld en klik op de tab-toets om de focus te wijzigen naar een andere element op de pagina.
4. Ga terug naar de Developer Console en voer Klaviyo.isIdentified() in; weer. Dit zou de volgende uitvoer moeten opleveren:
   Belofte {<fulfilled>: true}
5. Je kunt controleren of Klaviyo inderdaad Identify calls ontvangt door naar analyses > meetwaarde in Klaviyo te gaan en de activity feed van actief op Site events te vinden, waar je het e-mailadres of de e-mailadressen die je hebt ingevoerd zou moeten zien staan.

Test afrekenen Email Veldkiezer

Om te testen of het Afrekenen e-mailverzamelveld met succes de gebeurtenis Afrekenen gestart triggert:

1. Voeg een of meer producten toe aan de winkelwagen en begin met afrekenen.
2. Typ binnen afrekenen een e-mailadres in het doelveld en klik op de tab-toets om de focus te wijzigen naar een andere element op de pagina.
3. Je kunt dubbelchecken of Klaviyo inderdaad Identify calls ontvangt door naar analyses > meetwaarde te gaan in Klaviyo en de activity feed van Started afrekenen events te vinden, waar je zou moeten zien dat je recente event werd gevolgd.

Resultaat

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

Extra hulpbronnen 

• Salesforce Commerce Cloud gegevens referentie
• Hoe je je Salesforce Commerce Cloud-cartridge kunt upgraden
• Hoe vaak integraties referentie synchroniseren