Iniziare con Salesforce Commerce Cloud – Klaviyo - Help Center - IT

Imparerai

Scopra come integrare Salesforce Commerce Cloud con Klaviyo. L'integrazione della cartuccia e dell'API di Klaviyo consente ai siti web che utilizzano Salesforce Commerce Cloud (ex Demandware) di connettersi rapidamente e di inviare dati storici e in tempo reale a Klaviyo. Quando integra Klaviyo con Salesforce Commerce Cloud (SFCC), Klaviyo inizierà a tracciare le azioni che le persone compiono in tempo reale, come la navigazione del sito web, il tracciamento delle ricerche, la visualizzazione dei prodotti, la visualizzazione delle categorie, l'aggiunta di articoli al carrello, il check-out e l'ordine.

L'integrazione di SFCC con Klaviyo prevede 3 fasi principali:

Installazione della cartuccia Klaviyo in SFCC.
Aggiunta di snippet di abilitazione a SFCC.
Abilitazione dell'integrazione SFCC OCAPI in Klaviyo.

Prima di iniziare

Klaviyo si integra sia con i siti Site Genesis (SG) basati sul controller SFCC, sia con i siti Storefront Reference Architecture (SFRA). Ogni framework richiede una configurazione della cartuccia e degli snippet leggermente diversi, descritti di seguito.

Stai utilizzando una cartuccia Klaviyo SFCC di versione precedente alla 23.7.0? La versione 23.7.0 e successive includono una serie di funzionalità aggiuntive, un'installazione pronta all'uso più completa e miglioramenti relativi all'esperienza dello sviluppatore. Se desideri effettuare l'upgrade, leggi Come aggiornare la tua cartuccia Salesforce Commerce Cloud.

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

Se desideri iniziare integrando prima il tuo ambiente di sviluppo, puoi creare un account Klaviyo collegato utilizzando il metodo descritto in questo articolo e collegare il tuo ambiente di sviluppo con quell'account. Ti consigliamo di includere la parola "Sviluppatore" o "In prova" nel nome dell'azienda che utilizzi durante la configurazione dell'account, al fine di differenziare meglio gli account al momento dell'accesso.

Per ridurre al minimo i problemi di autenticazione e configurazione, ti consigliamo anche di aggiungere gli IP di Klaviyo all'elenco degli indirizzi consentiti del tuo provider firewall. Per maggiori dettagli, consulta la sezione Come lista consentita gli indirizzi IP del traffico di integrazione di Klaviyo.

Configurare le cartucce Klaviyo

Scaricare le cartucce

Puoi trovare la nostra inserzione app su Salesforce AppExchange. Su AppExchange puoi scoprire di più su Klaviyo e fare clic su Ottieni ora per andare su Github, dove le nostre cartucce sono disponibili in un file zip per il download. Se hai un sito SFRA, scarica il file zip KlaviyoSFRA; se hai un sito Site Genesis, scarica il file zip KlaviyoSG.

Dovrai configurare due 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, mentre int_klaviyo_sfra è per i siti web basati su SFRA.
int_klaviyo_core: per entrambi i tipi di infrastrutture, contenente alcune funzionalità di base che si sovrappongono.

Importazione delle cartucce

Il primo passo è quello di importare le cartucce in Visual Studio Code o Eclipse in modo che siano disponibili per il collegamento con la tua istanza SFCC.

Nel codice VS

Copia e incolla la cartuccia int_klaviyo_core.
Copi le cartelle int_klaviyo (Site Genesis) o int_klaviyo_sfra (SFRA) nella base di codice come fratelli delle altre cartelle della sua cartuccia.

In eclissi

Si rechi in Amministrazione > Importazione > Generale > Progetti esistenti nell'area di lavoro.
Importi la cartella int_klaviyo_core utilizzando la procedura guidata di importazione.
Selezioni l'istanza SFCC con cui collegare la cartuccia.
Selezionare Proprietà.
Selezioni Riferimenti del progetto.
Controlli nella cartuccia int_klaviyo_core.
Ripeta i passaggi da 2 a 6 per l'altra cartuccia specifica del suo framework (int_klaviyo o int_klaviyo_sfra).

Aggiunga le cartucce al percorso delle cartucce.

Una volta importate, le cartucce devono essere aggiunte all'elenco delle cartucce utilizzate dal suo sito utilizzando il Business Manager della SFCC.

Si rechi in Amministrazione > Siti > Gestire i siti.
Selezioni il suo sito.
Selezioni la scheda Impostazioni.
All'inizio del percorso di cartucce etichettato Cartucce, aggiunga i nomi delle cartucce Klaviyo importate, con la cartuccia core per ultima (int_klaviyo:int_klaviyo_core o int_klaviyo_sfra:int_klaviyo_core).
Clicchi su Applica.

Una volta cliccato su Applica, ora dovresti vedere le 2 cartucce all'inizio del campo etichettato Percorso effettivo della cartuccia.

Aggiungi servizi

Dopo aver importato le cartucce e averle aggiunte al percorso delle cartucce del sito, è necessario aggiungere il servizio Klaviyo per abilitare la configurazione delle impostazioni per la cartuccia. Nella directory principale del file zip delle cartucce Klaviyo c'è un altro file zip chiamato metadata.zip. Le seguenti indicazioni faranno riferimento a questo file zip.

Si rechi in Amministrazione > Sviluppo del sito > Importazione del sito & Esportazione > Servizi.
Carica, quindi importa il file metadata.zip.
Quando le viene chiesto di confermare se desidera importare l'archivio selezionato, selezioni OK.
Ora dovresti vedere l'importazione in corso nella sezione Stato in fondo alla pagina.
Ora avrai accesso a una pagina delle preferenze in Strumenti per i commercianti > Preferenze del sito > Preferenze personalizzate > Klaviyo. Da qui, puoi gestire le seguenti impostazioni:
Il file metadata.zip creerà anche un nuovo servizio in SFCC. Navigando in Amministrazione > Operazioni > Servizi, dovrebbe ora 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 di Klaviyo Email e del selettore di campo e-mail per il pagamento

Queste preferenze sono parte integrante dell'identificazione e del tracciamento dei visitatori del sito da parte di Klaviyo. Se un visitatore non viene identificato in Klaviyo, non verrà tracciato alcun evento per quel visitatore. Una volta completata l'integrazione, puoi imparare a testare la configurazione del selettore dei campi e-mail e pagamento di Klaviyo nella sezione Test della configurazione SFCC qui sotto.

Selettori di campi e-mail di Klaviyo

La preferenza del sito Klaviyo Email Field Selectors viene utilizzata per indirizzare tutti i campi di inserimento di e-mail e numeri di telefono presenti sul sito (ad eccezione dell'inserimento di e-mail situato nel pagamento, che viene trattato di seguito). Identifichiamo questi campi tramite selettori CSS standard e ognuno di essi viene aggiunto individualmente alle preferenze del sito (che è un "insieme di stringhe" che consente di inserire più valori di stringa uno per uno). È possibile utilizzare qualsiasi selettore complesso che possa essere utilizzato in un foglio di stile standard per puntare a un elemento specifico, ad esempio #dwfrm_login div.username input.input-text è accettabile, così come i selettori che possono puntare a più elementi del sito in base ad attributi condivisi, ad esempio input[type=e-mail]. Assicurati di evitare di puntare agli input tramite ID generati dinamicamente - un caso molto comune in SiteGen - poiché questi ID cambieranno in base al caricamento della pagina e quindi non funzioneranno (ad esempio, #dwfrm_login_username_d0fignzngiyq).

Si noti che i campi aggiunti al DOM dopo il caricamento della pagina possono ancora essere mirati. Esempi di questo tipo sono un campo di indirizzo e-mail che viene inserito in una modale dopo una chiamata AJAX, o uno che viene iniettato nel DOM da JavaScript di terze parti.

Si noti inoltre che i campi del numero di telefono da soli potrebbero non identificare completamente l'utente a Klaviyo, a seconda delle impostazioni degli SMS all'interno del suo account Klaviyo (se gli SMS sono abilitati e lei ha un numero di invio associato al Paese del numero di telefono inserito, il browser verrà identificato). Per questo motivo, l'aggiunta di selettori CSS per i campi dei numeri di telefono può essere considerata "piacevole da avere" o "come necessaria", mentre l'aggiunta di selettori CSS per i campi delle e-mail dovrebbe essere considerata essenziale.

Selettore del campo dell'e-mail di checkout

Il campo di raccolta delle e-mail nel pagamento è un caso speciale e come tale ha una sua preferenza per il targeting del sito. Il principio funziona esattamente come la preferenza del sito Klaviyo Email Field Selectors: basta inserire un singolo selettore CSS che si rivolge al campo dell'indirizzo e-mail nel pagamento Flusso del tuo sito, indipendentemente dal fatto che appaia all'inizio, alla fine o al centro del pagamento.

La corretta configurazione di questa preferenza del sito per indirizzare il campo della raccolta di e-mail durante il pagamento è essenziale per tracciare correttamente l'evento Pagamento avviato, pertanto ti consigliamo di eseguire un test per assicurarti che gli eventi Pagamento avviato appaiano in Klaviyo dopo che un indirizzo e-mail è stato inserito nel campo della raccolta di e-mail durante il pagamento.

Tieni inoltre presente che il campo e-mail del pagamento, che è stato scelto come target dalla preferenza del sito Email Field Selector, verrà automaticamente cablato per identificare l'utente, oltre a scatenare l'evento Started pagamento (cioè, non è necessario includere il selettore CSS per il campo e-mail del pagamento in entrambe le preferenze del sito Klaviyo Email Field Selectors e pagamento Email Field Selector).

Aggiungere snippet di impostazione

L'ultima parte della configurazione della cartuccia consiste nell'aggiungere gli snippet ai file del modello del suo sito, per consentire alla cartuccia di comunicare con il sito. Questi passaggi differiscono notevolmente per le infrastrutture Site Genesis (SG) e Storefront Reference Architecture (SFRA), quindi si assicuri di seguire le istruzioni corrette per la sua configurazione.

Configurazione dello snippet dell'Architettura di Riferimento Storefront (SFRA)

Aggiunga il seguente codice in fondo al suo 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)

Per aggiungere KlaviyoFooter.isml al piè di pagina globale: Aggiungi il seguente codice in fondo al tuo file footer.isml (o qualsiasi modello simile caricato in fondo a ogni pagina).
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
Per aggiungere snippet per l'identificazione degli utenti lato server: Aggiungi il seguente snippet ai tuoi controller Account-Show e Cart-Show ovunque prima della chiamata per 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();
    }
    // FINE KLAVIYO
```

Dopodiché, aggiornerai la chiamata app.getView(...) per includere klid come variabile del prezzo.

Nel tuo controller Account-Show:

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

Nel tuo controller Cart-Show:

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

Per aggiungere lo snippet Aggiunto al carrello al controller Cart-AddProduct: Aggiungi il seguente snippet al tuo controller Cart-AddProduct ovunque prima della chiamata per il rendering del modello (ad esempio, app.getView(...)).

 /* Tracciamento dell'evento Klaviyo Added to Cart */
    var BasketMgr = require('dw/order/BasketMgr');
    var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
    var addedToCartData = require('*/cartridge/scripts/klaviyo/eventData/addedToCart');
    se(klaviyoUtils.klaviyoEnabled){
    var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
    var dataObj, serviceCallResult, currentBasket;
    var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? vero
    : falso;
    se (exchangeID) {
    currentBasket = BasketMgr.getCurrentBasket();
    se (currentBasket && currentBasket.getProductLineItems().toArray().length)
    {
    dataObj = addedToCartData.getData(currentBasket);
    serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
    false);
    se (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 */

Snippet di pagamento avviato: quando aggiungi gli snippet di Klaviyo ai controller di pagamento per tracciare gli eventi di pagamento avviato , è importante tenere presente quanto segue:
Segue lo snippet per il primo hit del percorso durante il pagamento (in genere COCustomer-Start). Inseriscila ovunque prima della chiamata per il rendering del modello (ad esempio, app.getView(...)). Tieni presente la differenza fondamentale in questo snippet, passando il primo argomento KLCheckoutHelpers.startedCheckoutHelper come true invece di false, rispetto agli altri snippet di pagamento (evidenziati di seguito). Tieni presente che nello snippet qui sotto, KLCheckoutHelpers.startedCheckoutHelper Il metodo è true anziché false (come negli altri snippet di pagamento). Questo è essenziale per far sapere al codice che abbiamo un nuovo evento di Pagamento avviato da tracciare.
```
/* Tracciamento degli eventi di checkout avviato da Klaviyo */
   var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
   var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
   var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail);
   se (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
       app.getView({
           klDebugData: KLTplVars.klDebugData,
           serviceCallData: KLTplVars.serviceCallData
       }).render('klaviyo/klaviyoDebug');
   }
   /* FINE del tracciamento dell'evento Checkout avviato da Klaviyo */
```

Quindi, aggiorna la chiamata app.getView(...) per includere klid come variabile del prodotto:

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

I seguenti snippet devono essere aggiunti al primo percorso che viene attivato dopo che un indirizzo e-mail è stato collegato all'oggetto Basket. Se non sei sicuro o vuoi semplicemente coprire le tue basi, ti consigliamo di aggiungere questo snippet a tutti i seguenti percorsi:Come per gli snippet di cui sopra, aggiungi questo snippet ovunque prima della chiamata per il rendering del modello o prima delle chiamate ai controller successivi (esempio da COBilling-Save: app.getController(‘COSummary’).Start()).
```
/* Tracciamento degli eventi di checkout avviato da Klaviyo */
  var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers');
var customerEmail = KLCheckoutHelpers.getEmailFromBasket();
  var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail);
se (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
app.getView({
klDebugData: KLTplVars.klDebugData,
serviceCallData: KLTplVars.serviceCallData
}).render('klaviyo/klaviyoDebug');
}
/* FINE del tracciamento dell'evento Checkout avviato da Klaviyo */
```

Per i percorsi che chiamano direttamente i modelli (ad esempio COShipping-Start), aggiorna la chiamata app.getView(...) per includere klid come variabile del prodotto. Ecco un esempio per il percorso 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');

Per aggiungere lo snippet Conferma dell'ordine al controllore COSummary-ShowConfirmation: Aggiunga il seguente snippet al suo controllore COSummary-ShowConfirmation in un punto qualsiasi prima della chiamata per il rendering del modello.

/* Tracciamento dell'evento di conferma dell'ordine di Klaviyo */
  var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils');
  var orderConfirmationData = require('*/cartridge/scripts/klaviyo/eventData/orderConfirmation');
var Logger = require('dw/system/Logger');
se (klaviyoUtils.klaviyoEnabled){
sessione.privacy.klaviyoCheckoutTracked = false;
var exchangeID = klaviyoUtils.getKlaviyoExchangeID();
var dataObj, serviceCallResult;
se (ordine && order.customerEmail) {
// verifica se lo stato è nuovo o creato
  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}$/);
se (telefono) {
  // NOTA: Klaviyo accetta solo i numeri di telefono che includono + e il prefisso internazionale
  all'inizio (ad esempio per gli Stati Uniti: +16465551212)
  // per ottenere con successo l'iscrizione degli utenti all'elenco di SMS, deve raccogliere
  il codice del Paese nel campo del numero di telefono dell'ordine!
phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
if(!e164PhoneRegex.test(phone)) {
if (session.custom.KLSmsSubscribe) {
  var logger = Logger.getLogger('Klaviyo', Klaviyo.core: Conferma ordine');
  logger.error(`SMS L'abbonamento è stato richiesto dall'utente, ma è stato fornito un numero di telefono non valido.
  è stato fornito. Numero di telefono: ${phone}`);
}
phone = null;
}
}
if (email || telefono) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* FINE del tracciamento dell'evento di conferma dell'ordine di Klaviyo */

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

Aggiungere snippet di checkbox per il consenso alla cassa (SG e SFRA)

Tenga presente i seguenti prerequisiti per sincronizzare il consenso via SMS al momento del checkout con Klaviyo:

Abilita l'SMS in Klaviyo e configura i numeri mittente.
Il campo del numero di telefono nel modulo di pagamento deve supportare un codice paese.

Per raccogliere il consenso alla cassa per le e-mail e gli SMS, dovrà includere degli snippet di codice per far apparire le caselle di controllo del consenso dove desiderato, oltre a configurare le impostazioni dell'ID lista indicate nella sezione Aggiungi servizi.

Ad esempio, affinché questi snippet appaiano nel pagamento, possono essere inseriti nel modello shipmentCard.isml (app_storefront_base) all'interno di SFRA o nel modello billing.isml (app_storefront_core) all'interno di SiteGen.

Di seguito sono riportati gli snippet ISML sia per Site Genesis che per SFRA, che possono essere collocati in qualsiasi punto del flusso di cassa che meglio si adatta al suo sito specifico. Si noti che per far sì che il consenso alla cassa funzioni correttamente su Site Genesis, deve aver incluso lo snippet di Conferma dell'ordine a cui fa riferimento nella sezione Aggiungi snippet di configurazione qui sopra.

Gli snippet qui sotto presuppongono che la tua lingua di opt-in per e-mail e SMS sia contenuta in un pacchetto di risorse chiamato "pagamento". Dovrai sostituire `your.email.subscribe.resource.string.here` e `your.sms.subscribe.resource.string.here` con le chiavi corrispondenti alla tua lingua di opt-in per e-mail e SMS, rispettivamente. Questa lingua apparirà accanto alla casella di controllo.

Per esempio, il linguaggio del suo opt-in potrebbe essere simile a questo:

Iscriviti agli aggiornamenti via e-mail
SMS Iscriviti agli aggiornamenti 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. Consulta 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

Punti finali

Per integrarsi con SFCC per il catalogo dei prodotti e i dati degli ordini storici/in corso, Klaviyo utilizza quattro endpoint OCAPI:

/order_search Sincronizza lo storico dei dati degli ordini con Klaviyo, sincronizzando gli eventi degli ordini in corso ogni 60 minuti. Gli eventi Prodotto ordinato e Ordine effettuato sincronizzeranno i dati aggiuntivi per la segmentazione e il filtro del flusso e sono ideali per una personalizzazione avanzata non disponibile dall'evento di conferma dell'ordine. Per le e-mail di conferma dell'ordine in tempo reale, utilizza l'evento di conferma dell'ordine dalla cartuccia.
/sites Consente di selezionare da quale sito Klaviyo sincronizza i dati durante la configurazione dell'integrazione.
/product_search Collega il tuo catalogo a Klaviyo per abilitare le funzionalità che includono 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 l'OCAPI di SFCC, è necessario impostare alcune autorizzazioni e impostazioni in SFCC.

Tieni presente che mentre Klaviyo integrazioni richiede i permessi POST per order_search e product_search, non stiamo effettivamente inviando dati a SFCC; questo è dovuto alla struttura dell'OCAPI di SFCC.

Vai su https://account.demandware.com/dw/account/APIAdmin e aggiungere un client API per Klaviyo. Per generare il token del titolare per OCAPI saranno necessari l'ID del client API e la password.
Una volta aggiunto il client API, si rechi in Amministrazione > Sviluppo del sito > Impostazioni API Open Commerce nel Business Manager SFCC.
Aggiunga i seguenti snippet, sostituendo la versione API e l'ID cliente. Supportiamo le versioni API 19.5 e successive e 18.8. Sostituisca CLIENT_ID con l'ID del client API generato dalla configurazione del client API nel passaggio precedente (dovrebbe essere simile a "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Se le impostazioni esistono già per queste API, potrebbe essere sufficiente aggiungere le sezioni evidenziate di seguito all'array JSON dei clienti esistenti.
1. Aggiungi il seguente JSON sotto il tipo Shop and context Global (organization-wide), sostituendo SHOP_API_VERSION con la tua versione OCAPI Shop API, quindi clicca su Save (Salva). Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:
```
{
 "_v":"SHOP_API_VERSION",
 "clienti":[
 {
 "client_id":"CLIENT_ID",
 "risorse":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }
```
2. Aggiungi il seguente JSON sotto il tipo Dati e contesto globale (a livello di organizzazione), sostituendo DATA_API_VERSION con la tua versione API Dati OCAPI, quindi fai clic su Salva. Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:

{
 "_v":"DATA_API_VERSION",
 "clienti":[
 {
 "client_id":"CLIENT_ID",
 "risorse":[
 {
 "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

In Klaviyo, seleziona Integrazioni > Aggiungi integrazioni.
Cerchi Salesforce Commerce Cloud e clicchi sulla scheda, quindi su Installa.
Fai clic su Connetti a Salesforce Commerce Cloud nella landing page.
Nella pagina successiva, inserisci le seguenti informazioni:
Una volta inserite queste credenziali, clicchi sul link Recupera elenco siti per recuperare un elenco di siti sulla sua istanza SFCC.
Dopo aver recuperato i siti, selezioni il sito o i siti da integrare con questo account e clicchi su Completa configurazione. La sua integrazione dovrebbe ora iniziare a sincronizzare i dati degli ordini, del catalogo e dei clienti.

Provi la sua integrazione con l'SFCC

Per testare la configurazione della sua cartuccia, vada sul suo sito e segua queste istruzioni:

Si autocurifichi aggiungendo il parametro url utm_email come indirizzo e-mail nella barra degli indirizzi. Per esempio: https://www.example.com/?utm_email=your@email.com.
Cerchi nel suo catalogo.
Visualizza la pagina di una categoria.
Visualizza la pagina di un prodotto.
Aggiunga un articolo al suo carrello.
Effettui un ordine di prova.
Naviga in Analytics > Metrics in Klaviyo, quindi cerca le metriche provenienti da Salesforce Commerce Cloud.

Testare i selezionatori di campi e-mail di Klaviyo

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

Apra una finestra del browser in incognito.
Nella Developer Console inserisci il seguente comando e fai clic su enter: klaviyo.isIdentified(); Ciò dovrebbe produrre i seguenti risultati: Promessa {<fulfilled>: false}
Digiti un indirizzo e-mail nel campo mirato e clicchi sul tasto tabulazione per cambiare il focus su qualsiasi altro elemento della pagina.
Torna alla Developer Console e inserisci klaviyo.isIdentified(); di nuovo. Ciò dovrebbe produrre i seguenti risultati: Promessa {<fulfilled>: true}
Può verificare che Klaviyo stia effettivamente ricevendo le chiamate di identificazione andando su Analytics > Metrics in Klaviyo e trovando il feed di attività degli eventi Active on Site, dove dovrebbe vedere elencati gli indirizzi e-mail che ha inserito.

Test del selettore di campo dell'e-mail di checkout

Per verificare che il campo di raccolta dell'e-mail di checkout sia in grado di attivare l'evento Started Checkout :

Aggiunga uno o più prodotti al carrello, e poi avvii il checkout.
All'interno del checkout, digiti un indirizzo e-mail nel campo mirato e clicchi sul tasto tab per cambiare l'attenzione su qualsiasi altro elemento della pagina.
Può verificare che Klaviyo stia effettivamente ricevendo le chiamate di identificazione andando su Analytics > Metrics in Klaviyo e trovando il feed di attività degli eventi Started Checkout, dove dovrebbe vedere che il suo recente evento è stato monitorato.

Risultato

Ora ha integrato Salesforce Commerce Cloud con Klaviyo e ha testato l'integrazione.