Widget di raccomandazione sul sito
Un widget è un blocco di prodotti pronto per il sito: «Potrebbe interessarLe anche» nella home page, «Acquistati insieme» nella scheda prodotto, «Visti di recente» nel carrello. Lo si configura in OneTrace.pro e si inserisce nel sito un breve codice una sola volta. In seguito tipo, aspetto e attivazione si modificano senza intervenire sul sito.
Per funzionare servono il tracker installato (Collegamento del sito), un catalogo prodotti e gli eventi di visualizzazione, carrello e acquisto (Raccomandazioni e catalogo prodotti). Creare e modificare i widget possono «Proprietario», «Amministratore» e «Manager».
Come creare un widget
- Apra Coinvolgimento → Sito web, scheda Widget.
- Faccia clic su Crea widget.
- Compili le impostazioni a sinistra: a destra compare subito l'anteprima.
- Faccia clic su Salva.
Impostazioni
| Campo | Cosa definisce |
|---|---|
| Nome | nome del widget; visibile solo nel pannello di amministrazione |
| Cosa mostrare | tipo di raccomandazioni: Personali, Popolari, Di tendenza, Visti insieme, Acquistati insieme, Simili, Visti di recente |
| Categoria | per i prodotti popolari e di tendenza: id della categoria del catalogo; vuoto significa l'intero catalogo |
| Titolo | testo sopra i prodotti, ad esempio «Potrebbe interessarLe anche» |
| Layout | Griglia o Carosello con scorrimento |
| Schede per riga | da 1 a 8 |
| Prodotti in totale | da 1 a 24 |
| Colore di accento | colore del prezzo e del pulsante; senza di esso si usa il colore del testo del sito |
| Raggio degli angoli | angoli delle immagini e del pulsante, da 0 a 32 px |
| Pulsante | testo del pulsante, ad esempio «Scopri di più»; vuoto significa nessun pulsante |
| Mostra il prezzo | prezzo e prezzo precedente nella scheda |
Anteprima
L'anteprima disegna il widget come sul sito, con i prodotti reali del Suo catalogo. Per «Visti insieme» e per i simili viene preso un esempio, il primo prodotto disponibile, il cui id è indicato sopra l'anteprima. Se non ci sono prodotti adatti, vengono mostrati dei segnaposto grigi per valutare l'aspetto. Il selettore Desktop / Telefono restringe lo spazio alla larghezza di un telefono.
Sul sito il layout si adatta alla larghezza dello spazio disponibile, non dello schermo: in una colonna stretta e sul telefono le schede si dispongono due per riga. Il widget eredita dal sito il carattere e il colore del testo.
Codice per il sito web
Ogni widget dell'elenco ha il blocco Codice per il sito web. Lo inserisca nel modello della pagina nel punto in cui deve comparire il blocco:
<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>
Attributi:
data-item: id del prodotto della pagina o dei prodotti del carrello separati da virgola:data-item="SKU-1,SKU-7". È obbligatorio per i tipi «Visti insieme», «Acquistati insieme» e «Simili»: lo inserisca dal modello della pagina.data-category: id della categoria per i prodotti popolari, se su pagine diverse servono categorie diverse.data-exclude: id dei prodotti, separati da virgola, da non mostrare, ad esempio quelli già nel carrello.
I prodotti personali e visti di recente vengono selezionati in base al visitatore, quindi non serve data-item.
Se non ci sono prodotti adatti, lo spazio sulla pagina resta vuoto e il layout non si rompe.
Attivazione e disattivazione
L'interruttore Mostra sul sito web nella scheda del widget lo disattiva senza modificare il sito: lo stato diventa «In pausa» e il blocco sulla pagina viene svuotato. Riattivandolo, i prodotti ricompaiono. Il pulsante con il cestino elimina definitivamente il widget, che non verrà più mostrato sul sito.
Il pulsante con la matita apre Modifica widget. Le modifiche sono visibili sul sito al successivo caricamento della pagina, senza cambiare il codice.
Statistiche
Sotto il nome del widget sono riportate le statistiche degli ultimi 30 giorni:
| Indicatore | Come viene calcolato |
|---|---|
| Impressioni | il widget è entrato nel campo visivo del visitatore almeno per metà. Il caricamento della pagina senza scorrere fino al blocco non viene conteggiato, per cui il CTR di un widget in fondo alla pagina è attendibile |
| Clic | clic sulle schede dei prodotti |
| CTR | clic divisi per impressioni |
| Acquisti | acquisti del prodotto da parte dello stesso cliente entro 7 giorni dal clic |
| Ricavi | importo di questi acquisti |
L'effetto complessivo delle raccomandazioni sul sito per tipo si trova nella sezione Raccomandazioni.
Siti a pagina singola
Il tracker trova da solo i widget dopo il caricamento della pagina, quando compaiono nuovi elementi e quando cambia data-item. Per questo, sui siti in React, Vue e simili, basta modificare l'attributo: il blocco verrà ridisegnato.
Se occorre aggiornare i prodotti senza modificare gli attributi, ad esempio dopo una modifica del carrello, chiami:
cdp.widgets({ force: true });
Codice proprio al posto del widget
Gli sviluppatori possono visualizzare un blocco di raccomandazioni dal codice, senza configurarlo nel pannello di amministrazione:
window.addEventListener('load', () => {
cdp.renderRecommendations('#recs', {
type: 'viewed_with', item: 'SKU-1', title: 'Visti insieme', layout: 'carousel', columns: 4,
});
});
Il blocco ha lo stesso aspetto del widget e impressioni e clic vengono conteggiati automaticamente. Può chiamarlo anche prima del caricamento del tracker: la chiamata attende in coda. L'elemento deve essere già nella pagina, per questo l'esempio attende l'evento load. Un risultato vuoto svuota l'elemento. Colore, raggio degli angoli e pulsante sono più comodi da configurare nel widget del pannello di amministrazione.