Uno dei tipi di touchpoint più utilizzati sono le raccomandazioni di prodotti in una notifica. Questi touchpoint sono ampiamente utilizzati da vari tipi di negozi: che si tratti di uno smartphone importante, di una camera d'albergo ad alto margine o di un servizio premium, tutti questi tipi di contenuti possono essere serviti in una raccomandazione prodotto.

Sebbene sia possibile preselezionare una raccomandazione di prodotto nella sezione dei modelli, in questo articolo vedremo insieme come crearne una da zero. Per prima cosa, vi consigliamo di visitare gli articoli di riferimento per familiarizzare con i vari componenti per la creazione di un touchpoint quali content collection, posizioni, template, elementi del template e touchpoint builder.

Per creare una raccomandazione di prodotto, è necessario decidere quali prodotti raccomandare e lo stile questo touchpoint. In questo articolo, vogliamo mostrare una raccomandazione di prodotto per la moda maschile.

Innanzitutto, è necessario selezionare una content collection. Si tratta di un insieme dinamico di contenuti basato su regole specifiche. Se un articolo non corrisponde più alle regole (ad esempio, se è esaurito), verrà scartato automaticamente dalla raccolta.

Ogni touchpoint ha bisogno di una posizione in cui essere visualizzato nella pagina. Utilizziamo la posizione predefinita in basso a destra. Questa posizione consente di avere una larghezza di 420 pixel e una distanza di 20 pixel rispetto al bordo orizzontale e verticale.

È possibile impostare l'articolo predefinito che deve essere visualizzato in anteprima nella selezione Template delle Impostazioni. Nel nostro esempio, utilizziamo uno dei nostri articoli di moda.

Prima di tutto, creare un template facendo clic su Start from scratch > Website. Dopo l'apertura del template builder, aggiungere un nome e fare clic sul pulsante Posizione per definire la posizione in basso a destra.

Per iniziare, trascinare l'elemento Dynamic image nella notifica. Aprire la scheda delle proprietà e selezionare il tag image merge. Qui si deve aggiungere la variabile del contenuto dell'immagine desiderata, che nella maggior parte dei casi è {{item.image}}. Se si desidera rendere l'immagine cliccabile e collegarla a una pagina web, è possibile aggiungere l'URL dell'elemento nella sezione Action Image link. Queste variabili sono verificabili in una scheda prodotto accessibile nella sezione Contenuti.

Aggiungere una persuasione, ad esempio Consigliato per te, sotto l'immagine, utilizzando l'elemento paragrafo. Dopo aver aperto le proprietà, il font globale che utilizziamo è quello standard delle impostazioni del modello. Cambiamo il colore del testo in rosso scuro. È inoltre possibile selezionare i colori del tema del progetto facendo clic sulle opzioni sotto il selezionatore di colori.

Sebbene si possano apportare varie modifiche al testocome il padding, l'allineamento e la spaziatura, creeremo un testo semplice cambiandone solo il colore.

Dopo aver creato la persuasione, aggiungiamo nome o il titolo della notifica in basso con l'elemento chiamato Title. Il nome sarà selezionato dinamicamente dalla variabile content, quindi dovrebbe essere un merge tag o un handlebar. Abbiamo cambiato il titolo in H2, che è leggermente più piccolo di H1. Controllate se avete abbastanza padding sul lato sinistro, altrimenti potete aggiungere 10px qui per le opzioni di blocco.

Ora aggiungiamo una descrizione proveniente dagli elementi della collection, trasciando un paragrafo sotto il titolo. Poiché le descrizioni possono contenere molti caratteri che rendono la notifica sgradevole, è possibile ridurre il numero di caratteri troncandoli. Pertanto, utilizzare la variabile helper truncate come {{#truncate item.description 40 ...}}, che troncata la descrizione dopo 40 caratteri con tre punti alla fine (...). Il template avrà un aspetto simile a questo:

Trascinare un elemento button sotto la descrizione. Questo pulsante avrà come colore di sfondo il colore del tema primario. Nelle proprietà è possibile modificare il colore. Aggiungere il link all'azione dal contenuto, che nella maggior parte dei casi è {{item.url}}. Inoltre, vogliamo che il pulsante abbia una larghezza completa, quindi disattiviamo la larghezza automatica e trasciniamo la barra della larghezza al 100%. Fare clic nella preview per modificare il testo del pulsante.

È possibile aggiungere il prezzo come paragrafo sopra il pulsante. Se il contenuto utilizza special_prices o sale_prices, è necessario utilizzare gli helper per visualizzare il prezzo corretto. Si può cercare nel proprio progetto se esistono già raccomandazioni con questi helper e copiarle, oppure crearle da soli, come:

Si noti che questo codice non funziona in tutti i casi, in quanto le etichette dei prezzi potrebbero avere un nome diverso. Verificare sempre che i prezzi siano visualizzati correttamente. Si consiglia di salvare il prezzo corretto come riga salvata, in modo da poterlo riutilizzare per altri modelli.

Quando si utilizzano variabili e helper, il template verrà riempito con il contenuti delle variabili, che verranno poi tradotte con i valori reali del prodotto nel touchpoint

Una volte completato il template, è necessario inserirlo in un touchpoint attraverso il touchpoint editor. In questo articolo elencheremo le informazioni essenziali, in quanto il funzionamento del touchpoint builder è documentato in questo articolo.

Aprire la journey o campagna dove si vuole inserire il touchpoint e premere Add Touchpoint per aprire il touchpoint builder, e dare un nome al nuovo elemento.

Selezionare il template precedentemente creato e, in questo caso, sceglieremo un solo blocco senza intestazione o piè di pagina. Selezionare la posizione, che è quella predefinita in basso a destra. Fare clic su Avanti nel menu secondario per procedere.

Selezioniamo Filtered content > Select existing content collection per usare la Collection già esistente in questo touchpoint, e quindi la strategia di raccomandazione. In questo esempio useremo Lascia decidere l'algoritmo, in ogni caso è possibile scoprire le logiche di tutte le nostre strategie di raccomandazione in questo articolo.
​

Clicchiamo quindi su Next per procedere.

Selezionare l'audience che visualizzerà il touchpoint. In questo esempio, mostreremo la nostra notifica in qualunque pagina tranne quella prodotto.

In questa sezione è possibile configurare tutte le impostazioni avanzate per il touchpoint. In questo esempio, ci limiteremo a configurare un Frequency cap di 1 per sessione per ogni utente.