Guida ai modelli di badging

Il Badging delle campagne è uno strumento utile ai siti di e-commerce per aumentare la visibilità di prodotti o promozioni specifici, creando un senso di urgenza o eccitazione e incoraggiando i visitatori a effettuare un acquisto.

Dynamic Yield offre due modelli di badging con codice personalizzato che ti consentono di aggiungere automaticamente dei badge ai prodotti nelle pagine di categoria e nei risultati di ricerca:

• Badging PLP basato sulle raccomandazioni: attribuisce un badge ai prodotti in base alle strategie di raccomandazione, come Affinità o Visualizzati di recente.
  Ad esempio: "Selezionati per te" o "Visto che ti piace fare campeggio"
• Badging PLP basato sulla prova sociale: attribuisce un badge ai prodotti in base alle prestazioni (prova sociale).
  Ad esempio: "Best-seller" o "Più di 1000 venduti"

Per usare i modelli, completa i seguenti passaggi.

Passaggio 1: Definire i selettori CSS per le schede e le immagini dei prodotti

Definire il selettore della scheda prodotto

Il selettore HTML restituisce un array di tutte le schede prodotto presenti nella pagina della categoria. Per definire il selettore, ispeziona una delle schede prodotto e vai al contenitore superiore della scheda prodotto. Puoi anche usare il riquadro blu come guida visiva: ti trovi nel contenitore giusto se il riquadro blu evidenzia l'intera scheda prodotto. Scegli un selettore che identifichi facilmente tutte le schede prodotto della tua pagina di categoria.

Se utilizzi una classe come selettore, assicurati che non sia una classe dinamica che cambia a ogni pagina. Se è così, scegli un altro selettore che non sia dinamico.

Esempi:

Selettore DY Demo Shop ›  › nome classe › .col-sm-12

Dati Attributi come selettori › selettore › attributo › [data-automation=”product-grid-item”]

Convalidare il selettore

Puoi verificare che il selettore restituisca i prodotti nella tua pagina di categoria inserendo la tua classe nel seguente frammento di codice e incollandolo nella console.

Questo codice restituisce un array di schede prodotto:

document.querySelectorAll('example_ProductCard_Selector')

Questo codice restituisce la prima scheda prodotto:

document.querySelectorAll('example_ProductCard_Selector')[0] 

Definire il selettore di immagini

Definire il selettore CSS per il contenitore di immagini all'interno del contenitore Scheda prodotto. Si tratta del selettore del contenitore che include il tag <img>, non del selettore del tag <img>stesso.

Convalidare il selettore:

Verifica che il selettore che hai definito restituisca l'immagine del primo prodotto nella tua pagina di categoria inserendo i selettori nel seguente frammento di codice e, quindi, incollando quest'ultimo nella console.

Questo codice restituisce l'immagine della prima scheda prodotto: 

document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('example_productImage_Selector')

Passaggio 2: Definire la posizione dello SKU

Esistono due metodi per definire la posizione dello SKU:

Opzione 1: usando l'attributo dati (consigliato)

Il modello pronto all'uso è stato sviluppato per i clienti che hanno SKU sulle schede prodotto come attributo dati. Definisci il nome dell'attributo dati contenente lo SKU del prodotto. L'attributo di dati può avere nomi diversi, ma deve essere facilmente identificabile come SKU. Puoi verificarlo controllato il tuo feed di prodotto Dynamic Yield con il valore corrispondente, per assicurarti che lo SKU restituisca le informazioni sul prodotto previste.

Convalidare la definizione dell'attributo dati:
Verifica che il nome dell'attributo dati sia corretto inserendo il nome del tuo attributo dati nel seguente frammento di codice e incollandolo nella console.

Questo codice restituisce lo SKU della prima scheda prodotto: 

document.querySelectorAll('example_ProductCard_Selector')[0].getAttribute('example_attribute_name')

Esempio: 

DY Demo Shop › Nome attributo = data-dy-sku

Opzione 2: URL del prodotto

Se l'opzione 1 non è possibile e l'URL del prodotto in ogni scheda include lo SKU del prodotto in modo chiaro, usa questa opzione.

I delimitatori devono essere specifici. Ad esempio: product-id=SKU/ › product-id e /
Se i delimitatori non sono specifici, l'espressione regolare non restituisce lo SKU.

Esempio:

Delimitatori: “p/” e “”(stringa vuota)

URL: https://www.demoshop.net/de/p/90630584

Restituito: SKU 90630584 

Esempio con URL di prodotto e delimitatori che non funzionano:

Delimitatori: “-” & “Black” 

URL prodotto: https://www.demostore.com/eu/shop/edits/bestsellers/stride-waterproof-parka-SB4932_Black.html
Motivo: “-” è ripetuto diverse volte nell'URL e “Black” è dinamico e non funziona per tutti i prodotti. In questo scenario o non viene restituito nulla o viene restituito qualcosa che non è lo SKU desiderato. 

Convalidare i delimitatori:
puoi confermare che i delimitatori e il metodo funzionino aggiungendo i delimitatori e la classe Items nel seguente frammento di codice e incollandolo nella console del tuo PLP.

Questo codice restituisce lo SKU:

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('a').getAttribute('href').match(new RegExp(regexSetup, ''))[2]

Opzione 3: URL dell'immagine

Se l'opzione 1 non è possibile e l'URL dell'immagine del prodotto per ogni scheda contiene lo SKU del prodotto in modo chiaro, usa questa opzione.

I delimitatori devono essere specifici. Ad esempio, product-id=SKU/ › product-id e /
Se i delimitatori non sono specifici, l'espressione regolare non restituisce lo SKU.

Esempio:

Delimitatori: “img/p/” e “”(stringa vuota)

URL: https://static.demoshop.com/img/p/6104478-18029579-large.jpg

Restituito: SKU 6104478 

Convalidare i delimitatori:
puoi confermare che i delimitatori e il metodo funzionino aggiungendo i delimitatori e la classe Items nel seguente frammento di codice e incollandolo nella console del tuo PLP.

Questo codice restituisce lo SKU:

const stringBefore = 'BEFORE_DELIMITER';
const stringAfter = 'AFTER_DELIMITER';
let regexSetup = stringAfter === '' ? '(' + stringBefore + ')(.*)(?=' + stringAfter + ')' : '(' + stringBefore + ')(.*?)(?=' + stringAfter + ')';
document.querySelectorAll('example_ProductCard_Selector')[0].querySelector('img').getAttribute('src').match(new RegExp(regexSetup, ''))[2]

Passaggio 3: Definire la logica di badging

Puoi assegnare un badge in base a una strategia di raccomandazione o alle prestazioni del prodotto:

• Strategia di raccomandazione: scegli una strategia. In base alla risposta della raccomandazione, i prodotti della pagina della categoria vengono contrassegnati con un badge. 
• Prestazioni del prodotto: configura un criterio di prova sociale. Ai prodotti che soddisfano quel criterio verrà assegnato un badge. 

Passaggio 4: Creare il design del tuo badge

Utilizza i tuoi strumenti di progettazione che preferisci per creare il design del badge più adatto alle tue esigenze.

Risoluzione dei problemi

Se hai completato correttamente tutti i passaggi e convalidato il tuo lavoro, ma hai comunque dei problemi con il tuo caso d'uso, è probabile che il problema non abbia a che vedere con il modello stesso.

Per il badge di raccomandazione: 

• Verifica che la strategia restituisca effettivamente i prodotti della pagina desiderata e che i prodotti della strategia di raccomandazione esistano nella pagina 

• Se utilizzi la popolarità come strategia, seleziona Popolare nella categoria per avere una maggiore probabilità che ai prodotti venga assegnato un badge. 

Per il badging della prova social: 

• Verifica che l' API sulle prestazioni dei prodotti siano abilitate per il tuo sito Dynamic Yield (in Impostazioni generali).  
• Verifica che l'API sulle prestazioni dei prodotti stia effettivamente restituendo dei dati. 

Hai ancora domande o problemi? Contatta il team degli account.