Spesso quando navighiamo un ecommerce tendiamo ad inserire più prodotti all’interno del carrello, soprattutto per capire se, una volta arrivati al checkout, ci imbattiamo in spese nascoste o altri elementi che ci impediscono di concludere l’acquisto.

Altra abitudine che ho riscontrato durante l’analisi del comportamento degli utenti è l’apertura di più tab di ecommerce diversi dove vengono inseriti a carrello gli stessi prodotti in modo da creare un benchmark di confronto.

L’acquisto però avviene spesso negli ecommerce presenti nelle ultime tab aperte (a parità di fattori – es. shipping, prezzi, ecc) e le altre vengono dimenticate nel marasma di schede aperte.

A tal proposito mi sono chiesto: è possibile attirare l’attenzione degli utenti nella tab del mio ecommerce anche se si trova “nel mezzo” delle schede che sta navigando l’utente? Probabilmente si, vediamo come.

Inserire il numero di prodotti a carrello nella favicon

Da test che abbiamo svolto, con un numero superiore a 5 di tab aperte, gli utenti cercano di riconoscere quelle di interesse guardando Favicon e Title.. in quest’ordine.

Potremmo quindi provare a “manomettere” la Favicon in modo da attirare lo sguardo – e l’interesse- dell’utente sulla nostra scheda? In altre parole, possiamo distinguerci dagli altri?

La risposta è sì ma bisogna stare attenti ad inserire qualcosa di realmente utile all’utente nella Favicon… non gattini, per farla semplice.

Parlando di Ecommerce possiamo inserire all’interno della miniatura del nostro logo è la quantità di prodotti inserita a carrello. In questo modo, tra tutte le tab, la nostra sarebbe più visibile e utile di tutte le altre presenti nel browser dell’utente.

Favicon Dinamica con Google Tag Manager

Vediamo gli step da seguire per rendere dinamica la nostra favicon.

Custom HTML: Favicon Manipulation

Per prima cosa è necessario creare un custom HTML che deve essere triggerato in tutte le pagine del nostro sito.

Non vi metto di seguito il codice completo in quanto è molto, molto lungo. A questo link potete scaricare la funzione javascript che dovrete inserire all’interno del custom HTML (ricordatevi di includerlo tra <script></script>; Il codice è ricavato su licenza MIT e GitHub ejci).

Date un nome al tag (es. Favicon Manipulator) e salvate.

Nota: di default vi aggiunge un pallino rosso con scritta bianca all’interno della favicon. Se volete potete modificare questi campi iniziali per cambiare colore testo e colore background, font e posizione.

var _def = {
  bgColor: '#d00',
  textColor: '#fff',
  fontFamily: 'sans-serif', //Arial,Verdana,Times New Roman,serif,sans-serif,...
  fontStyle: 'bold', //normal,italic,oblique,bold,bolder,lighter,100,200,300,400,500,600,700,800,900
  type: 'circle',
  position: 'down', // down, up, left, leftup (upleft)
  animation: 'slide',
  elementId: false,
  element: null,
  dataUrl: false,
  win: window
};

Custom HTML & Variabili per l’upload

Per aggiornare la favicon con i prodotti messi a carrello dall’utente è necessario utilizzare un’altro custom HTML che dovrà scattare quando il counter del carrello viene aggiornato. Il dato aggiornato deve essere passato in una custom variable che sarà richiamata all’interno del cHTML appena creato.

Il codice è il seguente:

<script>
var favicon=new Favico({
    animation:'popFade'
});
favicon.badge(#miaVariabile);
</script>

Al posto di #miaVariabile dovete inserire la vostra reale variabile counter che contiene il numero di items presenti nel carrello.

La “notifica” all’interno della favicon apparirà in modalità popFade; se volete potete testare altri tipi di entrate sostituendo a popFade i valori: slide, fade, pop, up, none.

Il risultato finale sarà quindi una cosa simile a:

Considerazioni

Durante i test che abbiamo eseguito, ci siamo accorti che pochissimi ecommerce modificano la Favicon inserendo elementi di richiamo come i prodotti a carrello o il “blink” di un qualche elemento per attirare l’attenzione dell’utente.

Al momento, quindi, avere un “badge” che contraddistingue la tua scheda in mezzo alle altre e ricorda all’utente quanti items sono presenti nel carrello potrebbe portarti ad ottenere un incremento di visibilità/utilità rispetto ai tuoi competitor. Ovviamente rimarco il potrebbe in quanto dovete come sempre testare il tutto.

Con il codice che trovate in questo articolo teoricamente potreste uploadare nella favicon qualsiasi cosa, dagli items al prezzo complessivo del carrello fino ad un video html5: ricordatevi però che le dimensioni sono minime e che dobbiamo dare un servizio al cliente, non confonderlo ancora di più ;).

Nota: la manipolazione della favicon funziona solo su Chrome e Firefox, non su Safari (non ci sono le favicon 😉 ). Se la vostra favicon presenta qualche restrizione il codice non andrà in esecuzione.