Primi passi con Salesforce Commerce Cloud

Cosa imparerai

Scopri come integrare Salesforce Commerce Cloud con Klaviyo. La cartuccia Klaviyo e l'integrazione API consentono ai siti web che utilizzano Salesforce Commerce Cloud (in precedenza Demandware) di connettersi rapidamente e inviare a Klaviyo sia dati in tempo reale che storici. Quando integri Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo inizierà a monitorare in tempo reale le azioni che le persone compiono, come la navigazione sul sito web, il tracciamento delle ricerche, la visualizzazione dei prodotti, la visualizzazione delle categorie, l'aggiunta di articoli a un carrello, il check-out e l'ordine.

Per integrare SFCC con Klaviyo, sono necessari 3 passaggi principali:

1. Installazione del pacchetto Klaviyo in SFCC.
2. Aggiungere gli snippet di abilitazione a SFCC.
3. Abilitazione dell'integrazione OCAPI SFCC in Klaviyo.

Prima di iniziare

Klaviyo si integra con siti basati sia su SFCC Controller-based Site Genesis (SG) sia su Storefront Reference Architecture (SFRA). Ogni framework richiede una configurazione di cartridge e snippet leggermente diversa, descritta di seguito.

Per utilizzare la nostra cartuccia versione 23.7.0 (o qualsiasi versione successiva), consigliamo di aggiornare la modalità di compatibilità SFCC alla versione 21.7 o successiva.

Se vuoi iniziare integrando prima il tuo ambiente di sviluppo, puoi creare un account Klaviyo collegato usando il metodo descritto in questo articolo e collegare il tuo ambiente di sviluppo a quell’account. Ti consigliamo di includere la parola "Dev" o "Staging" nel nome dell’azienda che usi durante la configurazione dell’account, così potrai distinguere meglio tra gli account quando hai effettuato l’accesso.

Ti consigliamo inoltre di aggiungere gli IP di Klaviyo alla lista consentita del provider del firewall per ridurre al minimo i problemi di autenticazione e configurazione. Per ulteriori informazioni, consulta la sezione Come aggiungere gli indirizzi IP del traffico delle integrazioni Klaviyo alla lista consentita.

Imposta le cartucce di Klaviyo

Scarica le cartucce

Puoi trovare la scheda della nostra app su Salesforce AppExchange. Su AppExchange, puoi scoprire di più su Klaviyo e fare clic su Ottienilo subito per passare a Github, dove le nostre cartucce sono disponibili in un file zip da scaricare. Se hai un sito SFRA, scarica il file zip KlaviyoSFRA; se hai un sito Site Genesis, scarica il file zip KlaviyoSG.

Dovrai configurare 2 cartucce, entrambe incluse nel file ZIP che hai scaricato. Queste cartucce includono:

• int_klaviyo o int_klaviyo_sfra: una cartuccia specifica per il sito; int_klaviyo è per i siti web basati su Site Genesis e int_klaviyo_sfra è per i siti web basati su SFRA.
• int_klaviyo_core: per entrambi i tipi di infrastrutture, con alcune funzionalità di base sovrapposte.

Importa le cartucce

Il primo passaggio consiste nell’importare le cartucce in Visual Studio Code o Eclipse in modo che siano disponibili per collegarle alla tua istanza SFCC.

In VS Code

1. Copia e incolla la cartuccia int_klaviyo_core.
2. Copia le cartelle int_klaviyo (Site Genesis) o int_klaviyo_sfra (SFRA) nella base di codice come cartelle allo stesso livello delle altre cartelle di cartridge.

In Eclipse

1. Vai a Amministrazione > Importa > Generale > Progetti esistenti nell’area di lavoro.
2. Importa la directory int_klaviyo_core utilizzando la procedura guidata di importazione.
3. Seleziona l'istanza SFCC a cui connettere la cartridge.
4. Seleziona Proprietà.
5. Seleziona Riferimenti del progetto.
6. Esegui il check-in della cartuccia int_klaviyo_core.
7. Ripeti i passaggi da 2 a 6 per l'altra cartuccia specifica per il tuo framework (int_klaviyo o int_klaviyo_sfra).

Aggiungi le cartucce al percorso della cartuccia

Una volta importate, le cartucce devono essere aggiunte all’elenco di cartucce usate dal tuo sito tramite Business Manager di SFCC.

1. Vai a Amministrazione > Siti > Gestisci siti.
2. Seleziona il tuo sito.
3. Seleziona la scheda Impostazioni.
4. All’inizio dell’input del percorso della cartuccia etichettato Cartridges, aggiungi i nomi delle cartucce Klaviyo importate, con la cartuccia principale per ultima (int_klaviyo:int_klaviyo_core oppure int_klaviyo_sfra:int_klaviyo_core).
5. Fai clic su Applica.

Dopo aver fatto clic su Applica, ora dovresti vedere le 2 cartucce all’inizio del campo denominato Percorso cartuccia effettivo.

Aggiungi servizi

Dopo aver importato le cartridge e averle aggiunte al percorso delle cartridge del sito, devi aggiungere il Klaviyo Service per abilitare la configurazione delle impostazioni per la cartridge. Nella directory radice del file zip delle cartridge di Klaviyo è presente un altro file zip chiamato metadata.zip. Le istruzioni seguenti faranno riferimento a questo file zip.

1. Vai a Amministrazione > Sviluppo sito > Importazione ed esportazione sito > Servizi.
2. Carica, quindi importa il file metadata.zip.
   

3. Quando ti viene chiesto di confermare se vuoi importare l'archivio selezionato, seleziona OK.
4. Ora dovresti vedere l’importazione in esecuzione nella sezione Stato vicino alla parte inferiore della pagina.
   

5. Ora avrai accesso a una pagina delle preferenze in Strumenti per i merchant > Preferenze del sito > Preferenze personalizzate > klaviyo.
   
   Da qui puoi gestire le seguenti impostazioni:

• Klaviyo attivato
  Deve essere impostato su "Sì" per attivare la cartuccia.
• Chiave privata di Klaviyo
  Una chiave API privata di Klaviyo. Assicurati che alla chiave API privata di Klaviyo che usi per questa integrazione sia stato concesso l’accesso completo.
• Account Klaviyo
  La tua chiave API pubblica di Klaviyo, o Site ID.
• Etichetta gli eventi come SFCC
  Se scegli di etichettare gli eventi come SFCC, avrai accesso a flussi predefiniti in Klaviyo utilizzando i dati SFCC. Uno svantaggio attuale dell’etichettatura degli eventi è che, se scegli di etichettarli, non avrai accesso ai consigli su Viewed Product o Added to Cart nei feed dei prodotti di Klaviyo.
  
  • Se in precedenza hai installato una versione del cartridge precedente alla 23.7.0 e ora stai eseguendo l’upgrade alla versione 23.7.0 o successiva, imposta su No. Le integrazioni create prima del 13 luglio 2023 (ovvero le versioni del cartridge precedenti alla 23.7.0) generano metriche che non sono etichettate come SFCC. Se in passato hai utilizzato una versione precedente alla 23.7.0, questa impostazione tiene conto delle vecchie convenzioni di denominazione per evitare un’interruzione dei dati delle metriche nel tuo account.
• Invia l’evento Added To Cart come “Add To Cart”
  Se in precedenza hai installato una versione della cartuccia precedente alla 23.7.0 e ora stai eseguendo l’upgrade alla versione 23.7.0 o successiva, imposta su Sì. Altrimenti, imposta su No. Questa impostazione evita l’interruzione dei dati della metrica nel tuo account.
• Selettori del campo e-mail di Klaviyo e Selettore del campo e-mail di checkout
  Consulta la sezione seguente per informazioni dettagliate su come configurare questi 2 campi.
• Tipo di immagine
  Il tipo di immagine del prodotto che vuoi utilizzare nei dati degli eventi inviati a Klaviyo. Se non sai quale tipo di immagine impostare, vai a Strumenti per i merchant > Prodotti e cataloghi > Prodotti, fai clic su un prodotto e determina quale tipo di visualizzazione vuoi utilizzare in base a quelle disponibili (ad esempio: grande, media, piccola, alta risoluzione).
• ID dell’elenco e-mail di marketing
  Puoi raccogliere iscritti e-mail al checkout e sincronizzarli con un elenco Klaviyo. Questa impostazione è l’ID dell’elenco in Klaviyo a cui vuoi aggiungere gli iscritti e-mail. Scopri come trovare l’ID di un elenco in Klaviyo. Per raccogliere iscritti e-mail al checkout, dovrai anche aggiungere uno snippet di casella di controllo descritto in una sezione successiva.
• ID elenco SMS marketing
  Puoi raccogliere iscritti SMS al checkout e sincronizzarli con un elenco Klaviyo. Questa impostazione è l’ID dell’elenco Klaviyo a cui vuoi aggiungere gli iscritti SMS. Scopri come trovare un ID elenco in Klaviyo. Se raccogli sia iscritti SMS sia iscritti e-mail, scegli un elenco diverso per SMS rispetto a quello per e-mail. In questo modo, il consenso verrà sempre attribuito correttamente al canale giusto. Per raccogliere iscritti SMS al checkout, ti serviranno altri prerequisiti, insieme a uno snippet di checkbox, descritti in una sezione successiva.
  

6. Il file metadata.zip creerà anche un nuovo servizio in SFCC. Andando su Amministrazione > Operazioni > Servizi, ora dovresti vedere 2 nuove voci nella scheda Servizi chiamate KlaviyoEventService e KlaviyoSubscribeProfilesService, ciascuna con le rispettive voci di profilo e credenziali.

Configurazione dei selettori di campo e-mail di Klaviyo e del selettore del campo e-mail del checkout

Queste preferenze sono fondamentali per consentire a Klaviyo di identificare e per il tracciamento correttamente le persone che visitano il sito. Se Klaviyo non riesce a identificare un visitatore, non verranno tracciati eventi per quel visitatore. Una volta completata l'integrazione, puoi scoprire come testare la configurazione di Klaviyo Email e il selettore del campo e-mail di checkout nella sezione Testa la tua configurazione SFCC qui sotto.

Selettori dei campi di Klaviyo Email

La preferenza del sito Selettori dei campi e-mail di Klaviyo Email viene utilizzata per individuare tutti i campi di inserimento di e-mail e numero di telefono sul sito (ad eccezione del campo di inserimento dell’e-mail nella pagina di pagamento, che viene gestito di seguito). Identifichiamo questi campi tramite selettori CSS standard, aggiungendoli singolarmente alla preferenza del sito (che è un “set di stringhe”, che consente di inserire più valori di stringa uno alla volta). Puoi utilizzare qualsiasi selettore complesso che useresti in un foglio di stile standard per individuare un elemento specifico, ad esempio #dwfrm_login div.username input.input-text è accettabile, così come i selettori che possono individuare più elementi sul sito in base ad attributi condivisi, ad esempio input[type=email]. Assicurati di evitare di individuare i campi di inserimento tramite ID generati dinamicamente, un caso molto comune in SiteGen, perché questi ID cambiano in base al caricamento della pagina e quindi non funzionano (ad esempio #dwfrm_login_username_d0fignzngiyq).

Nota che i campi aggiunti al DOM dopo il caricamento della pagina possono comunque essere selezionati come target. Esempi in questo senso includono un campo dell’indirizzo e-mail inserito in una finestra modale dopo una chiamata AJAX o uno inserito nel DOM da JavaScript di terze parti.

Tieni anche presente che i campi del numero di telefono da soli potrebbero non identificare completamente l’utente per Klaviyo, a seconda delle impostazioni SMS all’interno del tuo account Klaviyo (se gli SMS sono abilitati e hai un numero mittente associato al Paese del numero di telefono inserito, il browser verrà identificato). Di conseguenza, aggiungere selettori CSS per scegliere come target i campi del numero di telefono può essere considerato un "optional" o "quando necessario", mentre aggiungerli per i campi e-mail dovrebbe essere considerato essenziale.

Selettore dei campi e-mail del checkout

Il campo di raccolta dell'e-mail nel checkout è un caso particolare e, per questo, ha una preferenza del sito dedicata al targeting. Il principio funziona esattamente come la preferenza del sito Klaviyo Email Field Selectors: inserisci semplicemente un unico selettore CSS che punti al campo dell'indirizzo e-mail nel flusso di checkout del tuo sito, indipendentemente dal fatto che appaia all'inizio, alla fine o a metà del checkout.

Configurare correttamente questa preferenza del sito per indirizzare il campo di raccolta dell'e-mail nel checkout è essenziale per tracciare correttamente l'evento Started Checkout; pertanto, ti consigliamo vivamente di eseguire un test per verificare che gli eventi Started Checkout compaiano in Klaviyo dopo l'inserimento di un indirizzo e-mail nel campo di raccolta dell'e-mail nel checkout.

Nota inoltre che il campo e-mail del checkout selezionato dalla preferenza del sito Checkout Email Field Selector verrà automaticamente collegato per identificare l’utente, oltre ad attivare l’evento Started Checkout (ovvero non è necessario includere il selettore CSS per il campo e-mail del checkout sia nelle preferenze del sito Klaviyo Email Field Selectors sia in Checkout Email Field Selector).

Aggiungi snippet di configurazione

L'ultima parte della configurazione consiste nell'aggiungere gli snippet ai file del modello del tuo sito per consentire al pacchetto di comunicare con il sito. I passaggi differiscono notevolmente tra le infrastrutture Site Genesis (SG) e Storefront Reference Architecture (SFRA): assicurati di seguire le istruzioni corrette per la tua configurazione.

Configurazione dello snippet di Storefront Reference Architecture (SFRA)

Aggiungi il seguente codice in fondo al file pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Ora hai completato la configurazione dello snippet per il tuo negozio SFRA.

Configurazione dello snippet di Site Genesis (SG)

1. Per aggiungere KlaviyoFooter.isml al piè di pagina globale: aggiungi il seguente codice in fondo al file footer.isml (o a qualsiasi modello simile che viene caricato vicino al fondo di ogni pagina).
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. Per aggiungere snippet per l'identificazione lato server degli utenti: aggiungi il seguente snippet ai controller Account-Show e Cart-Show, in qualsiasi punto prima della chiamata per eseguire il rendering dei rispettivi modelli (ad esempio, app.getView(...)).
   

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

1. Poi aggiornerai la chiamata app.getView(...) in modo da includere klid come variabile pdict.
   • Nel controller Account-Show:
     

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

• Nel controller Cart-Show:
  

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

1. Per aggiungere lo snippet Added To Cart al controller Cart-AddProduct: aggiungi il seguente snippet al controller Cart-AddProduct in qualsiasi punto prima della chiamata per eseguire il rendering del modello (ad esempio, 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. Snippet Started Checkout: quando aggiungi snippet Klaviyo ai controller di checkout per monitorare gli eventi Started Checkout , è importante tenere presente quanto segue:
   • L’obiettivo dell’aggiunta di questi snippet è verificare se al tuo oggetto Basket è stato associato un indirizzo e-mail nel flusso di checkout e, quando viene associato, attivare l’evento Started Checkout . È importante rilevare l’associazione di un indirizzo e-mail al Basket il prima possibile nel flusso di checkout.
   • A causa della personalizzazione del checkout basata sul sito, non è possibile per Klaviyo definire con esattezza quale controller sarà il primo a ricevere un oggetto Basket con un indirizzo e-mail associato.
   • Ti consigliamo di aggiungere gli snippet di codice a tutti i principali percorsi attivati durante il checkout. Se sai usare il debugger per identificare esattamente quando l’indirizzo e-mail viene associato al carrello nel flusso di checkout, puoi aggiungere gli snippet solo a quel percorso, ma esegui test approfonditi per assicurarti che tutti i possibili percorsi di checkout (ospite, con accesso effettuato, accesso durante il checkout, ecc.) attivino il codice.
2. Di seguito è riportato lo snippet per la prima route raggiunta nel checkout (in genere COCustomer-Start). Inseriscilo ovunque prima della chiamata per eseguire il rendering del modello (ovvero app.getView(...)). Nota la differenza principale in questo snippet: passa il primo argomento del metodo KLCheckoutHelpers.startedCheckoutHelper come true anziché false, rispetto agli altri snippet di checkout (evidenziati di seguito). Nota che nello snippet qui sotto, per il metodo KLCheckoutHelpers.startedCheckoutHelper il valore è true anziché false (come negli altri snippet di checkout). Questo è essenziale per far sapere al codice che abbiamo un nuovo evento Started Checkout da tracciare.

/* 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. Poi aggiorna la chiamata app.getView(...) in modo da includere klid come variabile pdict:

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

1. I seguenti snippet devono essere aggiunti al primo percorso che viene eseguito dopo che un indirizzo e-mail è stato associato all'oggetto Basket. Se non sei sicuro o vuoi semplicemente andare sul sicuro, ti consigliamo di aggiungere questo snippet a tutti i seguenti percorsi: come per gli snippet sopra, aggiungi questo snippet in qualsiasi punto prima della chiamata per eseguire il rendering del modello o prima delle chiamate ai controller successivi (esempio da 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. Per le route che chiamano direttamente i modelli (ad esempio COShipping-Start), aggiorna la chiamata app.getView(...) in modo da includere klid come variabile pdict. Ecco un esempio per la 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. Per aggiungere lo snippet Conferma dell'ordine al controller COSummary-ShowConfirmation: aggiungi il seguente snippet al controller COSummary-ShowConfirmation in qualsiasi punto prima della chiamata per eseguire il rendering del modello.

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

Ora hai completato la configurazione dello snippet per il tuo store Site Genesis.

Aggiungere il consenso agli snippet della casella di controllo durante il pagamento (SG e SFRA)

Per raccogliere il consenso al momento del checkout per e-mail e SMS, dovrai includere snippet di codice affinché le caselle di controllo del consenso vengano visualizzate dove desideri, oltre a configurare le impostazioni dell’ID elenco indicate nella sezione Aggiungi servizi qui sopra.

Ad esempio, perché questi snippet vengano visualizzati nel checkout, puoi inserirli nel modello shipmentCard.isml (app_storefront_base) in SFRA oppure nel modello billing.isml (app_storefront_core) in SiteGen.

Di seguito trovi gli snippet ISML sia per Site Genesis sia per SFRA e puoi inserirli in qualsiasi punto del flusso di checkout più adatto al tuo sito specifico. Tieni presente che, affinché il consenso al checkout funzioni correttamente su Site Genesis, devi aver incluso lo snippet di Conferma ordine a cui si fa riferimento nella sezione Aggiungi snippet di configurazione sopra.

Gli snippet riportati di seguito presumono che il testo di opt-in per e-mail e SMS sia contenuto in un bundle di risorse delle proprietà chiamato 'checkout'. Dovrai sostituire `your.email.iscriviti.resource.string.here` e `your.sms.subscribe.resource.string.here` con le chiavi corrispondenti rispettivamente al testo di opt-in per e-mail e SMS. Questo testo apparirà accanto alla casella di controllo.

Ad esempio, il testo per l'iscrizione potrebbe essere simile a questo:

• E-mail
  Iscriviti agli aggiornamenti via e-mail
• SMS
  Iscriviti agli aggiornamenti via SMS. Selezionando questa casella e inserendo il tuo numero di telefono qui sopra, acconsenti a ricevere messaggi di testo di marketing (come [codici promozionali] e [promemoria del carrello]) da parte di [nome dell'azienda] al numero fornito, compresi i messaggi inviati tramite autodialer. Il consenso non è una condizione per l'acquisto. Potrebbero essere applicate tariffe per messaggi e dati. La frequenza dei messaggi può variare. Puoi annullare l'iscrizione in qualsiasi momento rispondendo STOP o cliccando sul link di annullamento dell'iscrizione (se disponibile) in uno dei nostri messaggi. Visualizza la nostra informativa sulla privacy [link] e i termini di servizio [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)}

Abilitare l'integrazione OCAPI in Klaviyo

Endpoint

Per l'integrazione con SFCC dei dati relativi al catalogo prodotti e allo storico/continuativo degli ordini, Klaviyo utilizza quattro endpoint di OCAPI:

• /order_search
  Sincronizza i dati storici degli ordini con Klaviyo e sincronizza gli eventi degli ordini in corso ogni 60 minuti. Gli eventi Ordered Product e Placed Order sincronizzeranno dati aggiuntivi per la segmentazione e il filtro del flusso, e sono ideali per una personalizzazione avanzata non disponibile con l’evento Order Confirmation. Per le e-mail di conferma dell’ordine in tempo reale, usa l’evento Order Confirmation dal cartridge.
• /sites
  Ti consente di selezionare da quale sito Klaviyo sincronizza i dati durante la configurazione delle integrazioni.
• /product_search
  Connette il tuo catalogo a Klaviyo per attivare funzionalità tra cui i consigli sui prodotti nelle e-mail.
• /products/*/variations
  Consente di sincronizzare le varianti con Klaviyo per abilitare funzionalità come i flussi per prodotti nuovamente disponibili, basso livello di inventario e riduzione dei prezzi.

Configurazione lato SFCC

Prima di poter comunicare con OCAPI di SFCC, devi configurare alcune autorizzazioni e impostazioni in SFCC.

Tieni presente che, sebbene l'integrazione Klaviyo richieda le autorizzazioni POST per order_search e product_search, in realtà non stiamo inviando dati a SFCC; ciò è dovuto alla progettazione dell'OCAPI di SFCC.

1. Vai a https://account.demandware.com/dw/account/APIAdmin e aggiungi un client API per Klaviyo. L'ID e la password del client API saranno necessari per generare il token bearer per OCAPI.
2. Dopo aver aggiunto il client API, vai a Amministrazione > Sviluppo del sito > Impostazioni API Open Commerce in SFCC Business Manager.
3. Aggiungi i seguenti snippet, sostituendo la versione dell’API e l’ID client. Supportiamo le versioni dell’API 19.5 e successive, oltre alla 18.8. Sostituisci CLIENT_ID con l’ID client dell’API generato dalla configurazione del client API nel passaggio precedente (dovrebbe avere un aspetto simile a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Se le impostazioni esistono già per queste API, potrebbe essere sufficiente aggiungere alle sezioni evidenziate di seguito all’array JSON dei client esistente.
   1. Aggiungi il seguente JSON sotto il tipo Shop e il contesto Global (organization-wide), sostituendo SHOP_API_VERSION con la tua versione dell'API Shop OCAPI, quindi fai clic su Salva.
      Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:
      

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

1. Aggiungi il seguente JSON sotto il tipo Data e il contesto Global (organization-wide), sostituendo DATA_API_VERSION con la versione dell’API Data OCAPI, quindi fai clic su Salva.
   Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:
   

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

Configurazione lato Klaviyo

1. In Klaviyo, seleziona Integrazioni > Aggiungi integrazioni.
2. Cerca Salesforce Commerce Cloud e fai clic sulla scheda, quindi fai clic su Installa.
3. Clicca su Connetti a Salesforce Commerce Cloud sulla landing page.
4. Nella pagina successiva, compila le seguenti informazioni:
   • URL del negozio
     Il dominio del tuo sito web (ad es. example.com o dev03-na01-example.demandware.net).
   • Token di autenticazione
     Crea un token di autenticazione per questa integrazione che verrà utilizzato per richiedere un token bearer. Il token di autenticazione viene generato codificando in base-64 l'ID client e la password uniti da due punti (ad es. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Versione API dei dati
     La versione della tua API dei dati per cui hai aggiunto l'accesso nella fase di configurazione lato SFCC (ad es. v19_10).
   • Versione API Shop
     La versione della tua API Shop per la quale hai aggiunto l'accesso nella fase di configurazione lato SFCC (ad es. v19_10).
   • ID catalogo
     L'ID del catalogo SFCC da sincronizzare con Klaviyo (ad es. storefront-catalog-en). Puoi trovare l'ID catalogo in Salesforce Business Manager in Strumenti per merchant > Prodotti e cataloghi > Cataloghi.
     

5. Dopo aver inserito queste credenziali, fai clic sul link Recupera elenco di siti per recuperare un elenco di siti nella tua istanza SFCC.
6. Dopo aver recuperato i siti, seleziona il/i sito/i da integrare con questo account e fai clic su Completa configurazione. Ora l'integrazione dovrebbe iniziare a sincronizzare i dati di ordini, catalogo e clienti.

Testare l'integrazione con SFCC

Per testare la configurazione del tuo pacchetto di integrazione, vai sul tuo sito e segui queste istruzioni:

1. Inserisci un cookie per te aggiungendo il parametro URL utm_email come indirizzo e-mail alla barra degli indirizzi. Ad esempio: https://www.example.com/?utm_email=your@email.com.
2. Cerca nel tuo catalogo.
3. Visualizza una pagina di categoria.
4. Visualizza una pagina del prodotto.
5. Aggiungi un articolo al carrello.
6. Effettua un ordine di prova.
7. Vai su Analytics > Metriche in Klaviyo, quindi cerca le metriche provenienti da Salesforce Commerce Cloud.

Testa i selettori dei campi e-mail di Klaviyo Email

Per verificare che un determinato campo e-mail sia stato individuato correttamente e stia identificando correttamente l’utente in Klaviyo:

1. Apri una finestra del browser in modalità di navigazione in incognito.
2. Nella Console per sviluppatori inserisci il seguente comando e premi invio:
   klaviyo.isIdentified();
   Dovresti ottenere il seguente output:
   Promise {<fulfilled>: false}
3. Digita un indirizzo e-mail nel campo di destinazione e premi il tasto Tab per spostare lo stato attivo su qualsiasi altro elemento della pagina.
4. Torna alla Developer Console e inserisci di nuovo klaviyo.isIdentified();. Dovresti ottenere il seguente output:
   Promise {<fulfilled>: true}
5. Puoi ricontrollare che Klaviyo stia effettivamente ricevendo le chiamate Identify andando su Analisi > Metriche in Klaviyo e trovando il feed di attività degli eventi Attivo sul sito, dove dovresti vedere elencati gli indirizzi e-mail che hai inserito.

Selettore del campo e-mail di test del checkout

Per verificare che il campo di raccolta dell’e-mail nel checkout attivi correttamente l’evento Started Checkout :

1. Aggiungi uno o più prodotti al carrello, quindi avvia la procedura di pagamento.
2. Nel check-out, digita un indirizzo e-mail nel campo di destinazione e premi il tasto Tab per spostare lo stato attivo su qualsiasi altro elemento della pagina.
3. Puoi verificare un’ulteriore volta che Klaviyo stia effettivamente ricevendo le chiamate Identify andando in Analytics > Metriche in Klaviyo e trovando il feed delle attività degli eventi Started Checkout, dove dovresti vedere che l’evento recente è stato tracciato.

Risultato

Hai integrato Salesforce Commerce Cloud con Klaviyo e hai testato l’integrazione.

Risorse aggiuntive