Salesforce Commerce Cloud

Riepilogo

Fanplayr traccia il comportamento degli utenti sul tuo sito e ti consente di indirizzare questi utenti con offerte e chiamate all'azione.

Sia le visualizzazioni generali delle pagine che i dettagli degli ordini vengono tracciati da Fanplayr.

Hai anche la possibilità di aggiungere la funzionalità "Session Coupon" al tuo sito. Ciò ti consente di mostrare agli utenti, tramite Fanplayr, offerte che saranno attive solo per quell'utente. Questa funzionalità assicura che le offerte non finiscano su siti di condivisione offerte.

In questo documento, dettagliamo l'installazione del cartridge Fanplayr e i punti in cui può essere integrato nel negozio SiteGenesis. Tieni presente che l'integrazione del tuo negozio potrebbe variare.

Prima di iniziare, dovrai ottenere la tua ACCOUNT KEY dal tuo rappresentante Fanplayr.

Download

https://cdn.fanplayr.com/integrations/sfcc/packages/commercecloud-20.3.zip

Installazione

Per installare il nostro cartridge e integrarlo nel tuo negozio, dovrai seguire i seguenti passaggi:

• Importare le preferenze del sito
• Importare il Cartridge in UX Studio
• Aggiungere al Percorso Effettivo del Cartridge
• Configurare le preferenze del sito
• Aggiungere il tag Fanplayr al tuo template
• Testare il tracciamento
• Testare "Applica al Carrello"
• Configurare le Offerte di Sessione
• Utilizzo della Pipeline
• Utilizzo del Controller
• Test delle Offerte di Sessione

Importare le preferenze del sito

La prima cosa da fare è importare le preferenze

• Accedi al tuo Business Manager
• Vai su Administration / Site Development / Import & Export
• Clicca su Upload sotto Import & Export File

• Scegli il file _/metadata/fanplayr_preferences.xm_l e clicca su Upload
• Torna su Administration / Site Development / Import & Export e clicca sul link Import

• Seleziona il file appena caricato. Clicca su Next >>.

• Il Passaggio 3 dovrebbe visualizzare le seguenti informazioni. Clicca sul link Import in basso a destra.

Ora dovresti avere accesso alle preferenze di Fanplayr in Merchant Tools / Site Preferences / Custom Site Preferences

Importare il Cartridge in UX Studio

Se stai utilizzando UX Studio per lavorare con il tuo sito, questi passaggi mostrano come importare il nostro Cartridge inclusi Script, Controller e Pipeline. Se stai sviluppando il tuo sito utilizzando un'altra tecnica, contattaci per assistenza o segui le regole generali per l'aggiunta di Cartridge in quel contesto.

• Apri UX Studio
• Vai al menu File / Import
• Scegli General / Existing Projects into Workspace e clicca su Next

• Seleziona la directory /int_fanplayr/ e poi spunta la casella accanto alla voce Fanplayr. Clicca su Finish. Questo dovrebbe aggiungere i componenti Fanplayr al tuo progetto. Ti potrebbe essere chiesto se vuoi sincronizzarli con il tuo negozio, per favore fallo.

Aggiungere al Percorso Effettivo del Cartridge

Ora dobbiamo aggiungere Fanplayr al nostro Effective Cartridge Path. Questo consente al tuo sito di sapere di eseguire il codice importato con Fanplayr sul tuo sito.

• Accedi al tuo Business Manager
• Vai su Administration / Sites / Manage Sites

• Scegli il tuo sito
• Vai su Settings
• Aggiungi la stringa "int_fanplayr:" (senza virgolette, assicurati che ci sia un due punti alla fine) all'inizio del campo Cartridges.

Il codice Fanplayr dovrebbe ora essere in esecuzione sul tuo sito. Puoi assicurarti che sia in esecuzione andando all'URL /Fanplayr-Apply/. Questo dovrebbe portarti al tuo carrello se funziona, o a una pagina di errore in caso contrario.

Configurare le preferenze del sito

Prima di far iniziare il tracciamento a Fanplayr, dovremo aggiungere la tua ACCOUNT KEY di Fanplayr alle preferenze. Se non hai una ACCOUNT KEY, contatta il tuo rappresentante Fanplayr.

• Accedi al tuo Business Manager
• Vai su Merchant Tools / Site Preferences / Custom Preferences

• Clicca su Fanplayr

I primi due valori, "Abilita Fanplayr?" e "Chiave account Fanplayr" sono necessari per far iniziare il tracciamento di Fanplayr sul tuo sito.

Di seguito sono elencati i dettagli di ogni opzione.

Abilita Fanplayr? (obbligatorio)

Imposta questo valore su true per abilitare il tracciamento Fanplayr.

Chiave account Fanplayr (obbligatoria)

Devi fornire la tua Chiave Account per iniziare il tracciamento con Fanplayr. Se non hai ancora una Chiave Account, contatta il tuo account manager Fanplayr.

Abilita "Applica al Carrello"?

Imposta su true per fare in modo che il widget Fanplayr visualizzi un pulsante "Aggiungi al Carrello", che proverà ad applicare il coupon corrente e poi porterà l'utente alla pagina del Carrello.

Abilita Offerte di Sessione?

Fanplayr ha la capacità di abilitare i coupon solo per gli utenti a cui sono stati forniti tali coupon tramite Fanplayr, nella sessione di un visitatore. Per maggiori dettagli, consulta la sezione seguente sulla configurazione delle Offerte di Sessione. Il valore predefinito è true.

Prefisso per Offerte di Sessione

Le Offerte di Sessione richiedono un prefisso per il tuo coupon. Qualsiasi coupon con questo prefisso sarà disabilitato per i tuoi utenti a meno che non sia abilitato dallo script Fanplayr. Il valore predefinito è "FPTEST_", e dovrebbe essere modificato per l'uso in produzione.

Traccia durante il Checkout?

Per impostazione predefinita è impostato su false. Non tracciamo durante il checkout per aiutarti con la conformità PCI. Se desideri che Fanplayr tracci durante il checkout, abilita questa opzione. Tieni presente che non inviamo alcuna informazione sui metodi o dettagli di pagamento.

JS personalizzato (deprecato)

Inserisci JS che verrà aggiunto sia al tracciamento dell'utente che dell'ordine. Nota che le virgolette doppie e i commenti non sono supportati.

URL JS del caricatore personalizzato

A volte i dati dal tuo sito SFCC dovranno essere elaborati prima di essere inviati a Fanplayr. In questo caso Fanplayr ti darà l'URL di un file JavaScript da inserire qui.

Tipo di visualizzazione immagine prodotto

Sovrascrivi il valore predefinito di "large" quando ottieni i link delle immagini per i prodotti.

Forza HTTPS sui reindirizzamenti?

I reindirizzamenti al Carrello (esempio) sono forzati da HTTP a HTTPS anche quando provengono da una pagina non sicura. Forza anche HTTPS per immagini e URL dei prodotti.

Traccia solo ordini 'ORDER_STATUS_NEW'?

Traccia gli ordini solo quando il loro stato è NEW. Alcuni siti traccerebbero gli ordini di carte di credito fallite come ordini completati.

Aggiungere il tag Fanplayr al tuo template

L'ultimo passaggio per far iniziare il tracciamento a Fanplayr è aggiungere il nostro tag al tuo template. Questo dovrebbe essere fatto in un template presente su tutte le pagine. Normalmente questo sarebbe nei file di intestazione o piè di pagina che dovrebbero trovarsi:

Intestazione: Templates/components/header/htmlhead.isml
&#xNAN;Footer: Templates/components/footer/footer.isml

Il tag da includere è il seguente:

<isinclude template="util/FanplayrTracking.isml" />

Questo template traccerà sia il tracciamento normale dell'utente che il tracciamento degli ordini.

Testare il Tracciamento

A questo punto è una buona idea verificare che Fanplayr stia tracciando i dettagli come ci aspettiamo. Per questo dovrai impostare un coupon.

Impostiamo un coupon come segue per semplicità:

• 10% di sconto sul carrello
• "FPTEST_10OFF" come codice coupon

Aggiungi un articolo al carrello, quindi assicurati che il codice si applichi al carrello inserito nel modo normale, ovvero nel campo di inserimento del coupon al checkout.

Puoi vedere quali dati Fanplayr sta tracciando aprendo la Console Javascript nel tuo browser preferito e ispezionando la seguente variabile:

window.fanplayr._i[0].data;

Dovresti quindi vedere qualcosa di simile a quanto segue:

Nota che dovresti controllare questa variabile su ciascuno dei nostri tipi di pagina: la tua home page, pagina di categoria, pagina di prodotto e il carrello. I dati che cambieranno sono i seguenti:

• Home page
  • pageType: "home"
• Pagina di categoria
  • pageType: "cat"
  • categoryId e categoryName impostati
• Pagina di prodotto
  • pageType: "prod"
  • productId, productImage, productName, productPrice, productSku e productUrl impostati
• Carrello
• pageType: "cart"

Dovresti quindi completare un ordine e, nella pagina di conferma dell'ordine, ispezionare l'oggetto Javascript:

window.fp_sales_order.data;

Dovresti vedere qualcosa di simile a quanto segue:

Ora dovresti tracciare correttamente.

Testare l'URL "Applica al Carrello"

Ora testeremo per assicurarci che il pulsante "Applica al Carrello" funzioni come previsto. Fai quanto segue:

• Aggiungi un prodotto al tuo carrello.
• Vai all'URL del tuo sito con il suffisso "/Fanplayr-Apply?code=FPTEST_10OFF"

Nota che stiamo usando lo stesso codice coupon che abbiamo usato in precedenza. Se ne hai usato uno diverso, usa quel codice invece.

Questo dovrebbe aver applicato il coupon e ti dovrebbe aver portato alla pagina del carrello.

Configurare le Offerte di Sessione

Fanplayr offre la possibilità di disabilitare i coupon, con un prefisso specifico, dall'essere utilizzati finché non vengono dati ai tuoi utenti (abilitati da Fanplayr). Per i dettagli su come ciò viene implementato in generale, consulta Offerte di Sessione.

In CommerceCloud abbiamo il supporto per le Offerte di Sessione sia tramite Pipeline che Controller. Implementa le Offerte di Sessione utilizzando il metodo appropriato per il tuo sito.

Assicurati di cambiare il prefisso nelle preferenze (vedi sopra) per l'uso in produzione. Per impostazione predefinita è impostato su "FPTEST_" e solo i coupon con quel prefisso saranno trattati come Offerte di Sessione.

Nota: le seguenti istruzioni dettagliate ti indicano come impostare i Coupon di Sessione basati su GenesisStore. Seguendo le istruzioni dettagliate qui sono informazioni su altri luoghi in cui potresti dover implementare i Coupon di Sessione.

Utilizzo della Pipeline

Apri la Cart Pipeline che probabilmente si trova in Pipelines/Checkout/Cart. Trova le sub-pipeline AddCoupon e AddCouponJson.

Dovrai aggiungere un nodo Script Pipelet tra l'impostazione della variabile dizionario della pipeline CouponCode e il suo controllo o applicazione al carrello. Puoi vedere dove questo è aggiunto nell'immagine seguente per l'implementazione di SiteGenesis.

Il Script Pipelet deve eseguire lo script FanplayrCheckSessionCoupon.ds.

Dovrai anche impostare le due variabili di input del Dizionario come segue:

• CouponCode > CouponCode
• CurrentSession > CurrentSession

Nota che la variabile dizionario della pipeline CouponCode potrebbe essere diversa sul tuo sistema. In tal caso, sostituiscila con il nome della variabile implementata.

Utilizzo del Controller

Se usi i Controller per il tuo Carrello, implementa le Offerte di Sessione usando il seguente codice. Nell'implementazione di SiteGenesis in /controllers/Cart.js, inserisci il codice di gestione delle Offerte di Sessione di Fanplayr.

Aggiungi coupon generale

Il codice dovrebbe essere inserito nella funzione submitForm tra il controllo che sia stato fornito un valore per il coupon e la chiamata al metodo cart.addCoupon. Di seguito è riportato dove dovrebbe essere aggiunto nel codice predefinito del controller a partire da settembre 2016.

if (formgroup.couponCode.htmlValue) {
    // INSERIRE IL CODICE FANPLAYR QUI
    status = cart.addCoupon(formgroup.couponCode.htmlValue);

Il codice di gestione delle offerte di sessione è il seguente:

/*
 * INIZIO Gestione delle offerte di sessione Fanplayr
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = formgroup.couponCode.htmlValue && formgroup.couponCode.htmlValue.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // ottenere i coupon di sessione consentiti dalla sessione
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // se il coupon di sessione che l'utente ha tentato di applicare
    // non esiste nella sessione, semplicemente rimuovere il codice
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        return {
            cart: cart,
            CouponError: 'NO_ACTIVE_PROMOTION'
        };
    }
}
/*
 * FINE Gestione delle offerte di sessione Fanplayr
 */

Aggiungere coupon usando JSON

Il tuo sistema potrebbe anche utilizzare Javascript per applicare un coupon usando JSON, senza ricaricare la pagina. Questo viene gestito anche dal controller Cart.js, all'interno della funzione addCouponJson.

Il codice deve essere aggiunto dopo questa riga:

couponCode = request.httpParameterMap.couponCode.stringValue;

E prima che avvenga questa chiamata:

Transaction.wrap(function () {
  couponStatus = cart.addCoupon(couponCode);
});

Il codice da inserire è quasi lo stesso di quello sopra, tranne che invece di restituire un errore, semplicemente impostiamo couponCode su una stringa vuota se non è consentito.

/*
 * INIZIO Gestione delle offerte di sessione Fanplayr
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = couponCode && couponCode.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // ottenere i coupon di sessione consentiti dalla sessione
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // se il coupon di sessione che l'utente ha tentato di applicare
    // non esiste nella sessione, semplicemente rimuovere il codice
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        couponCode = '';
    }
}
/*
 * FINE Gestione delle offerte di sessione Fanplayr
 */

Testare i Coupon di Sessione

Avendo implementato il codice delle Offerte di Sessione, qualsiasi codice che inizia con il Prefisso Offerte di Sessione dovrebbe ora essere rifiutato quando un utente tenta di applicarlo al carrello. Per impostazione predefinita, il prefisso è "FPTEST_" e dovrebbe essere modificato nelle preferenze per l'uso in produzione.

Proviamo quanto segue:

• Aggiungi un prodotto al tuo carrello.
• Applica il coupon "FPTEST_10OFF" (supponendo che questo sia il coupon che abbiamo usato in precedenza per il test)

Questo coupon dovrebbe ora fallire nell'applicazione.

• Ora vai all'URL del tuo sito con il suffisso "/Fanplayr-Session?code=FPTEST_10OFF"
• Applica il coupon "FPTEST_10OFF"

Il coupon dovrebbe ora essere applicato al tuo carrello, dato che è un coupon valido per l'utente e i prodotti.

Coupon di sessione al di fuori di GenesisStore

Quanto sopra descrive come implementare i Coupon di Sessione in GenesisStore, l'implementazione predefinita fornita con CommerceCloud. Inoltre, implementa i Coupon di Sessione solo nel Carrello, non durante il Checkout. Di seguito sono riportati alcuni dettagli su dove potresti aver bisogno di implementare i Coupon di Sessione.

Utilizzo delle Pipeline

Non dovrebbero essere richieste modifiche extra qui, a patto che tu stia chiamando la Pipeline Cart-AddCoupon. Se non la stai utilizzando per gestire l'applicazione, dovrai aggiungere lo stesso script FanplayrCheckSessionCoupon per gestire il controllo di un coupon consentito.

Utilizzo dei Controller

Alcuni Controller potrebbero aver bisogno di codice aggiuntivo per verificare i Coupon di Sessione. Un esempio, che potrebbe essere presente nel tuo GenesisStore, si trova in COBilling.js. Utilizza lo stesso codice per l'aggiunta del coupon con JSON, inserendolo nella funzione applyCoupon tra questa riga:

var couponCode =
  request.httpParameterMap.couponCode.stringValue ||
  request.httpParameterMap.dwfrm_billing_couponCode.stringValue;

E prima della riga:

app.getController('Cart').AddCoupon(couponCode);