Iniziare con Salesforce Commerce Cloud

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.

Le fasi principali dell'integrazione della SFCC con Klaviyo, trattate in questa guida, sono tre:

1. Installazione della cartuccia Klaviyo in SFCC.
2. Aggiungere snippet di abilitazione a SFCC.
3. 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.

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 desidera iniziare integrando prima il suo ambiente di sviluppo, può creare un account Klaviyo collegato utilizzando il metodo descritto in questo articolo e collegare il suo ambiente di sviluppo con quell'account. Consigliamo di includere la parola "Dev" o "Staging" nel nome dell'azienda che utilizza al momento della creazione dell'account, per differenziare meglio gli account al momento dell'accesso. 

Configurare le cartucce Klaviyo

Scaricare le cartucce

Può trovare il nostro elenco di applicazioni sul Salesforce AppExchange. Sull'AppExchange, può saperne di più su Klaviyo e cliccare su Get It Now per essere portato su Github, dove le nostre cartucce sono disponibili in un file zip da scaricare. Se ha un sito SFRA, scarichi il file zip KlaviyoSFRA e se ha un sito Site Genesis, scarichi il file zip KlaviyoSG. 

Dovrà configurare due cartucce, entrambe incluse nel file zip che ha 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 è importare le cartucce in Visual Studio Code o Eclipse, in modo che siano disponibili per il collegamento con la sua istanza SFCC.

Nel codice VS

1. Copia e incolla la cartuccia int_klaviyo_core.
2. 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

1. Si rechi in Amministrazione > Importazione > Generale > Progetti esistenti nell'area di lavoro.
2. Importi la cartella int_klaviyo_core utilizzando la procedura guidata di importazione.
3. Selezioni l'istanza SFCC con cui collegare la cartuccia.
4. Selezionare Proprietà.
5. Selezioni Riferimenti del progetto.
6. Controlli nella cartuccia int_klaviyo_core.
7. 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.

1. Si rechi in Amministrazione > Siti > Gestire i siti.
2. Selezioni il suo sito.
3. Selezioni la scheda Impostazioni.
4. 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).
5. Clicchi su Applica.

Dopo aver cliccato su Applica, dovrebbe ora vedere le due 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.

1. Si rechi in Amministrazione > Sviluppo del sito > Importazione del sito & Esportazione > Servizi.
2. Carichi, quindi importi il file metadata.zip.
   
3. Quando le viene chiesto di confermare se desidera importare l'archivio selezionato, selezioni OK.
4. Ora dovrebbe vedere l'importazione in corso nella sezione Stato, vicino alla parte inferiore della pagina.
   
5. Avrà ora accesso ad una pagina di preferenze all'indirizzo Strumenti del commerciante > Preferenze del sito > Preferenze personalizzate > klaviyo.
   
   Da qui, può gestire le seguenti impostazioni:
   • Klaviyo Abilitato
     Deve essere impostato su "Sì" per abilitare la cartuccia.
   • Chiave privata di Klaviyo
     Una chiave API privata di Klaviyo. Si assicuri che alla chiave API privata di Klaviyo che utilizza per questa integrazione sia stato concesso l'accesso completo. 
   • Account Klaviyo
     La sua chiave API pubblica Klaviyo, o ID del sito.
   • Etichetta gli eventi come SFCC
     Se sceglie di etichettare gli eventi come SFCC, avrà accesso a Flusso precostituito in Klaviyo utilizzando i dati SFCC. Un inconveniente attuale dell'etichettatura degli eventi è che, se sceglie di etichettarli, non avrà accesso alle raccomandazioni Prodotto visto o Aggiunto al carrello nei feed di prodotto di Klaviyo. 
     
     • Se in precedenza ha installato una versione di cartuccia precedente alla 23.7.0 e sta effettuando l'aggiornamento alla versione 23.7.0 o superiore, imposti su No. Le integrazioni create prima del 13 luglio 2023 (cioè le versioni di cartuccia precedenti alla 23.7.0) generano metriche che non sono etichettate come SFCC. Se in passato ha utilizzato una versione precedente alla 23.7.0, questa impostazione tiene conto delle vecchie convenzioni di denominazione per evitare una discontinuità dei dati metrici nel suo conto. 
   • Inviare l'evento Aggiunto al carrello come "Aggiungi al carrello"
     Se in precedenza ha installato una versione della cartuccia precedente alla 23.7.0 e sta effettuando l'aggiornamento alla versione 23.7.0 o superiore, imposti su Sì. Altrimenti, impostare su No. Questa impostazione impedisce la discontinuità dei dati metrici nel suo conto. 
   • Selettori di campo e-mail di Klaviyo e Selettore di campo e-mail di checkout
     Per informazioni dettagliate su come configurare questi due campi, consulti la sezione sottostante.
   • Tipo di immagine
     Il tipo di immagine del prodotto che desidera utilizzare nei dati degli eventi inviati a Klaviyo. Se non è sicuro del tipo di immagine da impostare, si rechi su Merchant tools > Products and Catalogs > Products, clicchi su un prodotto e determini il tipo di visualizzazione che desidera utilizzare in base a ciò che è disponibile (es. grande, medio, piccolo, hi-res).
   • ID della lista e-mail di marketing
     Può raccogliere gli iscritti all'email al momento del checkout e sincronizzarli con una lista di Klaviyo. Questa impostazione è l'ID della lista in Klaviyo a cui desidera aggiungere gli iscritti alle e-mail. Scopra come trovare l'ID di un elenco in Klaviyo. Per raccogliere gli abbonati via e-mail al momento del checkout, dovrà anche aggiungere uno snippet di casella di controllo, descritto in una sezione successiva.
   • ID della lista SMS di marketing
     Può raccogliere gli abbonati agli SMS al momento del pagamento e sincronizzarli con una lista Klaviyo. Questa impostazione è la lista ID Klaviyo a cui desidera aggiungere gli abbonati agli SMS. Scopra come trovare l'ID di un elenco in Klaviyo. Se raccoglie sia abbonati agli SMS che alle e-mail, scelga una lista diversa per gli SMS rispetto a quella per le e-mail. Questo assicura che il consenso venga sempre attribuito correttamente al canale corretto. Per raccogliere gli abbonati agli SMS al momento del checkout, avrà bisogno di altri prerequisiti, insieme ad uno snippet di casella di controllo, che sono descritti in una sezione successiva.
     
6. 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 e-mail di Klaviyo e del selettore di campo e-mail del checkout 

Queste preferenze sono parte integrante dell'identificazione e del monitoraggio dei visitatori del sito da parte di Klaviyo. Se un visitatore non viene identificato da Klaviyo, non verrà tracciato alcun evento per quel visitatore. Una volta terminata l'integrazione, può scoprire come testare l'impostazione dell'e-mail di Klaviyo e del selettore di campo dell'e-mail di checkout nella sezione Test dell'impostazione 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 dell'e-mail e del numero di telefono sul sito (ad eccezione dell'inserimento dell'e-mail situato nel checkout, che viene trattato di seguito). Identifichiamo questi campi tramite selettori CSS standard, e ognuno di essi viene aggiunto individualmente alla preferenza 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 indirizzare un elemento specifico, ad esempio #dwfrm_login div.username input.input-text è accettabile, così come lo sono i selettori che possono indirizzare più elementi nel sito in base ad attributi condivisi, ad esempio input[type=email]. Si assicuri di evitare di indirizzare gli input tramite ID generati dinamicamente - un caso molto comune in SiteGen - in quanto questi ID cambieranno in base al caricamento della pagina e quindi falliranno (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 e-mail nel checkout è un caso speciale, e come tale ha una propria preferenza di sito per il targeting. Il principio funziona esattamente come la preferenza del sito Klaviyo Email Field Selectors: basta inserire un unico selettore CSS che si rivolge al campo dell'indirizzo e-mail nel flusso di checkout del suo sito, indipendentemente dal fatto che appaia all'inizio, alla fine o nel mezzo del checkout.

Configurare con successo questa preferenza del sito per indirizzare il campo di raccolta e-mail nel checkout è essenziale per tracciare correttamente l'evento Checkout Iniziato, e pertanto si raccomanda vivamente di eseguire un test per assicurarsi che gli eventi Checkout Iniziato appaiano in Klaviyo dopo che un indirizzo e-mail è stato inserito nel campo di raccolta e-mail nel checkout. 

Si noti inoltre che il campo e-mail di checkout mirato dalla preferenza del sito Checkout Email Field Selector verrà automaticamente cablato per identificare l'utente, oltre a scatenare l'evento Started Checkout - cioè, non è necessario includere il selettore CSS per il campo e-mail di checkout in entrambe le preferenze del sito Klaviyo Email Field Selectors e Checkout 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 ha completato l'impostazione degli snippet per il suo negozio SFRA. 

Configurazione dello snippet di Site Genesis (SG)

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

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Per aggiungere snippet per l'identificazione dell'utente lato server: Aggiunga il seguente snippet ai controllori Account-Show e Cart-Show, in un punto qualsiasi 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

3. Quindi, aggiornerà la chiamata app.getView(...) per includere klid come variabile pdict.
   •  Nel suo Account-Mostra controller:
     

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

   • Nel suo controller Cart-Show:
     

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

4. Per aggiungere lo snippet Added To Cart al controllore Cart-AddProduct: Aggiunga il seguente snippet al suo controllore Cart-AddProduct in un punto qualsiasi prima della chiamata per il rendering del modello (cioè, 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 */

5. Snippet Started Checkout: Quando aggiunge gli snippet di Klaviyo ai controllori di checkout per tracciare gli eventi di Checkout Iniziato , è importante tenere presente quanto segue:
   • L'obiettivo dell'aggiunta di questi snippet è verificare se un indirizzo e-mail è stato allegato all'oggetto Cestino all'interno del flusso di pagamento e, quando è allegato, attivare l'evento Checkout avviato . È importante individuare l'associazione di un indirizzo e-mail con il Carrello il più presto possibile nel flusso di cassa.
   • A causa della personalizzazione del checkout basata sul sito, non è possibile per Klaviyo definire esattamente quale controller sarà il primo a ricevere un oggetto Cestino con un indirizzo e-mail collegato.
   • Consigliamo di aggiungere gli snippet di codice a tutti i percorsi principali che vengono attivati all'interno del checkout. Se è in grado di utilizzare il debugger per identificare esattamente il momento in cui l'indirizzo e-mail viene collegato al carrello nel suo flusso di checkout, si senta libero di aggiungere gli snippet solo a quel percorso, ma esegua un test accurato per assicurarsi che tutti i possibili percorsi di checkout (ospite, login, login all'interno del checkout, ecc) attivino il codice.
6. Segue lo snippet per la prima rotta colpita nel checkout (tipicamente COCustomer-Start). Lo inserisca in un punto qualsiasi prima della chiamata per il rendering del modello (ad esempio, app.getView(...)). Si noti la differenza chiave in questo snippet - passare il primo argomento del metodo KLCheckoutHelpers.startedCheckoutHelper come vero anziché falso - rispetto agli altri snippet di checkout (evidenziati di seguito). Si noti che nello snippet qui sotto, il KLCheckoutHelpers.startedCheckoutHelper è vero anziché falso (come negli altri snippet di checkout). Questo è essenziale per far sapere al codice che abbiamo un nuovo evento Started Checkout da monitorare.

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

7. Quindi, aggiorni la chiamata app.getView(...) per 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');

8. I seguenti snippet devono essere aggiunti alla prima rotta che si attiva dopo che un indirizzo e-mail è stato allegato all'oggetto Cestino. Se non è sicuro, o semplicemente vuole coprire le sue basi, le consigliamo di aggiungere questo snippet a tutti i seguenti percorsi:
   • COShipping-Start
   • Fatturazione-PublicStart
   • Fatturazione-Salvataggio
   • COPlaceOrder-Start
   Come per gli snippet precedenti, aggiunga questo snippet in qualsiasi punto prima della chiamata per il rendering del modello, o prima delle chiamate ai controllori 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 */

9. Per i percorsi che chiamano direttamente i modelli (ad esempio, COShipping-Start), aggiorni la chiamata app.getView(...) per includere klid come variabile pdict. 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');

10. 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 ha completato l'impostazione degli snippet per il suo negozio Site Genesis. 

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

• Abiliti gli SMS in Klaviyo e imposti i numeri di invio.
• 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 checkout, 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 il suo linguaggio di opt-in per le e-mail e gli SMS sia contenuto in un pacchetto di risorse di proprietà chiamato 'checkout'. Dovrà sostituire `sua.email.subscribe.resource.string.here`. e `il tuo.sms.subscribe.resource.string.here` con i tasti corrispondenti alla sua lingua di opt-in via 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:

• E-mail
  Si abboni agli aggiornamenti via e-mail
• SMS
  Si abboni agli aggiornamenti via SMS. Selezionando questa casella e inserendo il suo numero di telefono qui sopra, acconsente 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 varia. Può annullare l'iscrizione in qualsiasi momento rispondendo a 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

Punti finali

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

• /ordine_ricerca
  Sincronizza i dati storici degli ordini a Klaviyo sincronizza gli eventi degli ordini in corso ogni 60 minuti. Gli eventi Prodotto ordinato e Ordine effettuato sincronizzeranno dati aggiuntivi per la segmentazione e il filtraggio del flusso, e sono ideali per una personalizzazione avanzata non disponibile dall'evento Conferma d'ordine. Per le e-mail di conferma dell'ordine in tempo reale, utilizzi l'evento Conferma dell'ordine della cartuccia.
• /siti
  Permette di selezionare il sito da cui Klaviyo sincronizza i dati durante la configurazione dell'integrazione.
• /product_search
  Collega il suo catalogo a Klaviyo per abilitare le funzionalità che includono le raccomandazioni di prodotti nelle e-mail.
• /products/*/variations
  Abilita la sincronizzazione delle varianti con Klaviyo per abilitare funzionalità come Back in Stock.

Configurazione lato SFCC

Prima di poter comunicare con l'OCAPI di SFCC, è necessario impostare alcune autorizzazioni e impostazioni in SFCC.

1. Si rechi su https://account.demandware.com/dw/account/APIAdmin e aggiungere un client API per Klaviyo. L'ID e la password del cliente API saranno necessari per generare il token del portatore per OCAPI.
2. Una volta aggiunto il client API, si rechi in Amministrazione > Sviluppo del sito > Impostazioni API Open Commerce nel Business Manager SFCC.
3. 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. 1. 1. Aggiunga il seguente JSON sotto il tipo Shop e il contesto Global (a livello di organizzazione), sostituendo SHOP_API_VERSION con la versione della sua API OCAPI Shop, quindi faccia clic su Salva.
            

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

            Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:
            
         2. Aggiunga il seguente JSON sotto il tipo Dati e il contesto Globale (a livello di organizzazione), sostituendo DATA_API_VERSION con la sua versione OCAPI Data API, quindi faccia clic su Salva.
            

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

            Una volta aggiunte, le impostazioni dovrebbero apparire simili a queste:
            
4.  

Configurazione lato Klaviyo

1. In Klaviyo, faccia clic sul nome del suo account nell'angolo inferiore sinistro e si rechi su Integrazioni > Aggiungi integrazioni.
2. Cerchi Salesforce Commerce Cloud e clicchi sulla scheda, quindi su Installa.
3. Clicca su Connetti a Salesforce Commerce Cloud sul sito landing page. 
4. Nella pagina successiva, compili le seguenti informazioni: 
   • URL del negozio
     Il dominio del suo sito web (ad esempio, example.com o dev03-na01-example.demandware.net).
   • Token di autorizzazione
     Crea un token di autenticazione per questa integrazione, che sarà utilizzato per richiedere un token portatore. Il token di autenticazione viene generato codificando in base-64 l'ID del cliente e la password uniti da un punto (ad esempio, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx:password).
   • Versione API dei dati
     La versione della sua Data API per la quale ha aggiunto l'accesso nella fase di Impostazione lato SFCC (ad esempio, v19_10).
   • Versione API del negozio
     La versione della sua API del negozio per la quale ha aggiunto l'accesso nella fase di Impostazione lato SFCC (ad es. v19_10).
   • ID catalogo
     L'ID del catalogo SFCC da sincronizzare con Klaviyo (ad esempio, storefront-catalog-en).
     
5. Una volta inserite queste credenziali, clicchi sul link Recupera elenco siti per recuperare un elenco di siti sulla sua istanza SFCC.
6. 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:

1. 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.
2. Cerchi nel suo catalogo.
3. Visualizza la pagina di una categoria.
4. Visualizza la pagina di un prodotto.
5. Aggiunga un articolo al suo carrello.
6. Effettui un ordine di prova.
7. 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:

1. Apra una finestra del browser in incognito.
2. Nella Console per sviluppatori inserisca il seguente comando e prema invio:
   klaviyo.isIdentified();
   Il risultato dovrebbe essere il seguente:
   Promessa {<fulfilled>: false}
3. Digiti un indirizzo e-mail nel campo mirato e clicchi sul tasto tabulazione per cambiare il focus su qualsiasi altro elemento della pagina.
4. Torni alla Console per sviluppatori e inserisca klaviyo.isIdentified(); di nuovo. Il risultato dovrebbe essere il seguente:
   Promessa {<fulfilled>: true}
5. 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 :

1. Aggiunga uno o più prodotti al carrello, e poi avvii il checkout.
2. 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.
3. 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.

Risorse aggiuntive 

• Riferimento dati Salesforce Commerce Cloud
• Come aggiornare la sua cartuccia di Salesforce Commerce Cloud
• Con quale frequenza le integrazioni sincronizzano il riferimento