Cyrus Shepard in una recente Whiteboard su SEOMOZ ricorda che in questi ultimi giorni Matt Cutts ha rilasciato l’ennesimo editto SEO, dove rammenta che Google si sta muovendo per ridimensionare il posizionamento dei siti over ottimizzati.

per dirla con una frase…Smettila di ottimizzare, ma inizia a creare qualcosa di nuovo!

In questo scenario, guadagnare link di qualità lasciando da parte certe tecniche di link building border line è davvero uno dei temi centrali.

Nell’era della condivisione, uno degli strumenti più utili per ottenere link è quello di creare dei widget: un sito web fornisce gratuitamente  una funzionalità alla comunità del web e come “remunerazione” richiede l’inserimento di un link che punta al proprio sito.

Slideshare, ad esempio, ad ogni inserimento di una presentazione nel proprio sito propone all’utente un codice HTML contenente un link testuale verso la presentazione.

In questo post raccolgo una serie di consigli se vi accingete a prendere la strada della costruzione di un widget per generare link, con un esempio virtuoso finale.

1. Scopri come potresti essere utile e appetibile

Si tratta della fase più difficile e creativa in cui si deve capire come un’azienda o un sito possa essere utile ad altri siti, offrendo una funzionalità degna di essere ospitata altrove.

Le funzionalità offerte non devono essere per forza direttamente correlate ad un’azione di conversione, bisogna invece concentrarsi su una reale utilità per gli utenti.

Mi rendo conto che a parole possa sembrare facile, ma con un po’ di immaginazione e creatività in alcuni casi si possono raggiungere ottimi risultati.

Qualche esempio per qualche sito web:

• un comparatore di prezzi delle assicurazioni potrebbe offrire un preventivatore light che con pochi campi permette di ricevere una stima di prezzo indicativa;
• una testata giornalistica online potrebbe fornire la possibilità di includere una sidebar che include le ultime notizie su un determinato argomento;
• un e-commerce di abbigliamento potrebbe dare la possibilità agli utenti di condividere il proprio look preferito;
• un e-commerce di libri potrebbe fornire un widget con la propria libreria, oppure una lista di libri di una determinata categoria;
• un e-commerce di abbigliamento invernale potrebbe regalare agli utenti un widget per capire gli impianti sciistici aperti e la quantità di neve presente sul suolo;
• un’azienda che vende pannelli fotovoltaici potrebbe offrire uno strumento di calcolo dell’energia da un impianto.

E’ importante valutare bene come inserire i link all’interno del widget.

La prima cosa fondamentale è che il link del widget sia presente direttamente nel codice HTML del sito ospitante in modo che sia spiderizzabile e che passi link juice alla pagina di destinazione.

Oltre alla presenza del link in HTML è necessario che il testo ancorato e la pagina di destinazione siano scelti correttamente: è bene non focalizzarsi solo ed esclusivamente su un’unica pagina, ma potrebbe essere utile dosare link sia verso l’homepage del sito che alle pagine interne.

3. Evita le manomissioni

Per non vanificare il lavoro, un ulteriore consiglio è che il widget funzioni solo ed esclusivamente se il link è presente. Nel caso in cui un utente decida di eliminarlo, il widget dovrebbe cessare di funzionare.

Diciamo che l’eliminazione del link è come se l’utente rompa il patto tra le parti: niente link, niente funzionalità gratuita!

4. Scegli il modello di remunerazione

Si sa che nessuno fa niente per niente e i pixel del proprio sito sono molto importanti, quindi non è detto che il proprietario di un sito esterno sia disposto ad includere un widget esterno senza un’adeguata remunerazione.

In alcuni casi la sola funzionalità gratuita potrebbe non essere sufficiente.

Per gli e-commerce, ad esempio, se un utente inserisce il widget nel proprio sito si potrebbe addirittura utile “pagare l’utente” secondo i classici modelli di affiliazione. In questi casi il modello di remunerazione a CPA è l’ideale poichè potrebbe far guadagnare al proprietario del sito web una fee fissa o una percentuale sull’ordine effettuato.

Amazon gigante mondiale del mondo e-commerce ha scelto proprio questa strada per remunerare gli utenti che desiderano inserire il widget sul proprio sito web.

In altri casi, invece, si potrebbero regalare dei codici sconti o dei coupon.

Creare un widget di per sè potrebbe non essere sufficiente, è necessario anche spargere la voce in rete.

Per prima cosa occorre cercare quali sono i potenziali blog e siti che potrebbero essere interessati all’inclusione del widget, facendo una mappatura della rete.

Durante la mappatura della rete è importante raccogliere tutti gli indirizzi email, per poi inviare una DEM per stimolare gli utenti all’inserimento del widget.

Oltre al contatto di blogger e gestori di siti web in target, potrebbe essere utile fare una mappatura dei siti web che segnalano risorse utili, richiedendo poi la pubblicazione di un guest post dove si segnala la presenza del widget. In questo modo i lettori potrebbero essere interessati all’inserimento, sempre che sia una cosa davvero interessante.

6. Il caso de ilmeteo.net

Assieme all’amico Riccardo Mares, aka Merlinox, abbiamo trovato un caso davvero virtuoso per lo sviluppo di widget offerto da ilmeteo.net.

Il widget da loro creato offre la possibilità di fornire agli utenti del proprio sito web il meteo di qualsiasi località.

Il widget al suo interno contiene un link immerso nel codice HTML che punta alla pagina interna della località del sito ilmeteo.net.

<div id="cont_f13807ba8d0d6c1438beed30cc65a88b">

<span id="h_f13807ba8d0d6c1438beed30cc65a88b">

<a [...] href="http://www.ilmeteo.net/meteo_Roma-Europa-Italia-Roma--1-30862.html">

Meteo Roma</a>

</span>

<script type="text/javascript" src="http://www.ilmeteo.net/wid_loader/f13807ba8d0d6c1438beed30cc65a88b">

</script>

</div>

Inoltre se provate ad eliminare il link dal codice fornito, il contenuto del widget non viene visualizzato.

Avete altri esempi di widget interessanti da condividere?

In questo post vorrei “sbobinare” la presentazione che ho fatto sul mobile first: una filosofia di progettazione dei siti web che è diventata il cavallo di battaglia di Luke Wroblewski, autore di un libro e di moltissime presentazioni sull’argomento.

L’approccio classico alla progettazione di un sito web mobile molto spesso è subordinata a quella del sito web per desktop. Generalmente si parte dalla progettazione del sito per desktop, ragionando in profondità sul look ‘n feel, sui contenuti da servire all’utente e sulle funzionalità da rendere disponibili.

Dopo aver ragionato per mesi alla versione PC, si passa poi alla progettazione mobile: il rischio di questo processo è che si possa voler in tutti i modi di far incastrare tutti i contenuti in uno schermo molto più piccolo.

Il risultato è un sito web non pensato per gli utenti mobile e che spesso ricalca la stessa struttura e approccio del sito per desktop: questo causa spesso inefficienza e una scarsa soddisfazione degli utenti.

I motivi possono essere molteplici:

• ritardo di progetto a causa dell’incertezza del cliente sul design della grafica dell’homepage;
• la fase di approvazione dell’IA è stata molto faticosa, ripensarla per il mobile potrebbe generare eccessiva tensione nel progetto;
• poca dimestichezza del team a pensare mobile;
• ecc.

Il mobile first, invece, prevede un ribaltamento di prospettiva dove prima viene progettato il sito mobile e solo successivamente si lavora alla versione desktop.

Parlando di processi, pensare mobile first potrebbe permettere un grande anticipo del lavoro di sviluppo: la progettazione mobile generalmente è più breve perché è meno “disturbata” da tanti attori dell’azienda. Gli iter di approvazione sono più veloci poiché la discussione non si concentra su dettagli di interfaccia, sul pixel in più o pixel in meno, sul color grigio ma non troppo grigio, (e chi più ne ha, più ne metta )!

Con la chiusura della progettazione mobile, il team di sviluppo potrebbe già iniziare il suo lavoro, mentre nei piani alti dell’azienda si farà la progettazione per PC e ci si scannerà allegramente su dettagli grafici e isterismi vari degli Hippo.

Visto che nel 99% dei progetti in cui ho lavorato, i tempi di sviluppo sono sempre molto compressi mi sembra che pensare mobile first potrebbe essere davvero un vantaggio!

L’approccio mobile first non è detto che sia vantaggioso sempre, ma può essere utile soprattutto per siti web dove il mobile è effettivamente un fulcro importante per il business.

Pensiamo ad esempio a tutti i servizi di trasporto, i servizi pubblici, i siti web di telefonia mobile, ecc.

Sappiamo bene che se si parla di Trenitalia è come sparare sulla croce rossa, ma probabilmente siamo tutti d’accordo che pensare mobile first per un progetto del genere è davvero vantaggioso, no?

Quali sono i motivi che hanno spinto Luke Wroblewski a sposare questo approccio?

Per tre ragioni principali:

1. Il mobile è in una fase di crescita vertiginosa: Gartner stima che nel 2013 il traffico dati da mobile supererà il traffico dati da PC, diventando così la prima via di accesso al web.
2. I limiti del mezzo mobile, permettono di focalizzarsi non sui ghirigori, bensì sugli utenti, sui task che devono compiere, su informazioni essenziali e mirate: insomma ci si preoccupa più dell’aspetto funzionale senza curare troppo la grafica.
3. Le funzionalità che offrono i dispositivi mobile (ad es. GPS, accelerometro, fotocamera,ecc.) offrono l’opportunità di risolvere i problemi degli utenti, in modo diverso e innovativo!

Analizziamo ora le differenze tra i due approcci di progettazione.

Differenza #1: il contesto

La prima grande differenza è il contesto d’uso: quando si usa il mobile non ci si trova comodamente davanti al PC ma ci si trova in posti diversi in posizioni diversi, probabilmente non seduti davanti ad una scrivania con illuminazione perfetta, sicuramente con meno tempo a disposizione per svolgere un task o risolvere un problema.

L’immagine del manager che attende il business meeting checkando i suoi feeds nel suo feedreader (da notare lo slang), è soltanto uno dei casi. La verità è che in moltissimi usiamo il mobile in situazioni e contesti d’uso che si incastrano nella vita di tutti i giorni: dalla mamma che va a fare la spesa, allo studente pendolare di un’università di Milano, dalla ragazza shopping-addicted che lavora come commessa, all’operaio che va in discoteca tutti i fine settimana e scatta milioni di foto da condividere su Facebook, ecc.

Compete in questo post raccoglie alcune statistiche dei casi classici d’uso del mobile:, riassumibili con il grafico sotto:

In questi contesti d’uso spesso il mobile viene utilizzato in background, mentre si stanno facendo altre cose, il livello di attenzione è molto basso e soggetto a distrazioni. Gli utenti guardano lo smartphone, poi alzano lo sguardo verso la TV, poi riprendono quello che stanno facendo, ecc.

Hanno bisogno di informazioni veloci da consultare in modo immediato.

Luke nel suo libro usa una citazione di Rachel Hinman, ricercatrice di Nokia, davvero illuminante per comparare l’esperienza mobile da quella desktop:

Desktop behavior is ‘diving’ while mobile is ‘snorkeling’

Dal differente contesto d’uso è quindi possibile creare delle personas differenti da quelle del web, alle quali poi assegnare dei task che l’interfaccia e il sistema web deve supportare in modo semplice ed intuitivo.

Differenza #2: lo schermo

Senza dubbio un’altra differenza banale e scontata è che il mobile costringe a progettare per uno schermo più piccolo. Mentre per il desktop lo standard classico adottato è il 1024 x 768, per il mobile la risoluzione alla quale fare riferimento è la 320 x 480. Ad aggiungere maggiore complessità, bisogna considerare che ora per il mobile le risoluzioni di schermo sono diverse da modello a modello.

Se da un certo punto di vista la dimensione dello schermo può sembrare un limite, dall’altro può essere l’opportunità di focalizzarsi sui reali bisogni informativi degli utenti, ragionare sulle cose effettivamente utili per l’utente.

La legge principe di tutta la progettazione è “less is more”: la presenza di ogni singolo elemento nella pagina dev’essere ponderata bene lasciando da parte i fronzoli e “voli pindarici markettari”.

Lo schermo di dimensioni ridotte anche se costringe ad un design minimalista, permette la progettazione di interfacce che maggiormente interattive, dove ci sono interfacce composte da delle sotto-schermate affiancate l’una con l’altra attivabili attraverso le dita delle mani con le gestures.

Oltre al “less is more”, in questo caso è davvero importante e centrale curare nei minimi dettagli l’interaction design: una transizione poco intuitiva potrebbe precludere gli sforzi fatti.

In fase di prototipazione a causa dell’elevata interattività delle pagine, può essere utile non limitarsi ai wireframes ma intraprendere la strada di prototipi HTML navigabili e “toccabili” con mano.

Differenza #3: il modello di interazione

L’interazione non avviene più con i classici dispositivi di input tastiera e mouse, ma tutto avviene in modo più naturale con le dita.

Alcuni telefoni Android permettono anche l’uso di comodi bottoni sull’area inferiore dello smartphone, mentre iPhone ha un solo bottone centrale.

Inoltre, il contesto d’uso prevede un modello di interazione dove l’utente utilizza soltanto una mano: in questo caso bisogna prestare attenzione ai bottoni di azione per evitare che un utente abbia difficoltà a tappare e concludere un’azione.

Il modello di interazione, considerando le dimensione dello schermo, deve prestare attenzione alla grandezza degli elementi di azione, quali bottoni/form, ecc.

Permettere un’esperienza d’uso piacevole anche per gli utenti con grandi manone, in gergo americano “French Fry Finger“, molti player del mobile hanno deciso di darsi delle regole sulla dimensione degli elementi di azione di sistemi operativi, applicazioni, ecc.

Microsoft nella sua guida Windows Phone UI Design and Interaction Guide definisce una dimensione minima di 7mm con uno spazio di 2mm tra diversi elementi.

Sebbene lo scenario posse sembrare grigio, le gestures possono essere davvero un fulcro dove lavorare: l’uso della dita permette di svolgere dei compiti in modo veloce e innovativo.

Pensate ad esempio a Yahoo Sketch Search, dove è possibile ricercare un ristorante interagendo con le dita direttamente sulla mappa disegnando l’area all’interno del quale si vuole andare a mangiare.

Differenza #4: le capacità del dispositivo

Le capacità del dispositivo mobile offrono una grandissima opportunità per creare un progetto davvero innovativo ed interessante per gli utenti. Il mobile, infatti, ha dei dispositivi di input e output che possono davvero risolvere dei problemi agli utenti in modo che non hanno mai sperimentato.

Google Googgles, offre ad esempio agli utenti la possibilità di effettuare ricerca di contenuti attraverso l’uso della fotocamera come dispositivo di input.

Nearest Tube, invece, già due anni fa offriva la possibilità di orientarsi nella città di Londra con l’aiuto della sola fotocamera del telefonino ed una connessione internet. E’ sufficiente inquadrare la strada sulla quale si sta passeggiando e l’applicazione aggiunge all’immagine del luogo circostante anche l’informazione sulle stazioni della metropolitana più vicina.

Se pensiamo ai siti web di e-commerce che iniziano a targare i prodotti con l’RFID, allora l’immaginazione può portare anche più lontano!

Il mobile grazie a capacità di input che sfruttano il contesto ed il mondo reale, offre all’utente una terza generazione di interfaccia la NUI “Natural User Interface” lasciandosi alle spalle la GUI (Graphical User Interface) e la CLI (Code Line Interface).

Riassumendo…

Mobile first può mettere al centro il mobile nell’esperienza di progettazione di un sito web.

Risolvere dei problemi per gli utenti mobile, significa anche un sottoinsieme di problemi degli utenti PC ma con un approccio diretto.

Permette di concentrarsi sui reali bisogni informativi degli utenti (urgenti) e non sul pixel

Apre le porte a sperimentazioni per l’innovazione.

Può garantire un anticipo della fase di sviluppo migliorando l’efficienza e la qualità del progetto.

Perché non provarci?

Moltissime aziende che possiedono una catena di negozi per vendere i propri prodotti, inseriscono all’interno del sito una sezione store locator che permette agli utenti di ottenere informazioni sugli orari di apertura, l’indirizzo, il numero di telefono, ecc.

Questa sezione potrebbe trasformarsi in una vera e propria occasione per aumentare la visibilità dei punti vendita nei motori di ricerca, non solo per le ricerche da PC ma anche per le query effettuate da dispositivi mobile.

Inoltre con il Venice Update, Google premia i risultati localizzati non solo per parole chiave (business + località), ma anche per ricerche generiche personalizzate per area geografica. Qui un esempio tratto dall’ottimo post di SEOMOZ sul Venice Update, dove la SERP per la query “Divorce Attorney” localizzata per la location “Chicago” mostra in evidenza dei risultati relativi alla città.

Quindi l’obiettivo del posizionamento è da considerarsi duplice: da un lato bisogna lavorare sulle Mappe di Google per essere rilevanti sugli “One box Universal Search” ma dall’altro è necessario porre grande attenzione ai risultati testuali. 

Qui un esempio della catena Walmart per la ricerca “Walmart Mountain View” vengono mostrati:

• (in alto) un “One box Universal Search” delle Mappe con l’indirizzo, numero di telefono ed un link che porta a walmart.com sulla pagina di dettaglio dello store;
• (nella spalla destra) una miniatura della mappa integrata con orari di apertura e recensioni;
• (nei risultati testuali) una pagina dello store locator con la mappa degli store Walmart vicini a Mountain View.

La situazione ideale lato utente è quella di portare l’utente da una ricerca localizzata (ad es. “prada milano“, “negozio limoni parma“, ecc.), verso la pagina interna dello store locator del brand con le informazioni del punto vendita più vicino o in alternativa nella scheda di Google Maps con tutti i dettagli del negozio.

Una buona progettazione in ottica SEO dello store locator e qualche attività su Google Places for Business possono essere un buon modo per ottenerli entrambi.

 1. Architettura informativa dello store locator in ottica SEO:

Lato tecnico è necessario che tutte le informazioni presenti in pagina nello store locator siano ben organizzate attraverso i microdati HTML5, in questo modo sarà più semplice per il motore interpretare il significato dei diversi testi in pagina e includerli negli rich snippet.

Ad esempio la pagina di dettaglio dello store, per garantire buone performance nel posizionamento dovrebbe avere più informazioni possibili sul punto vendita organizzate come nell’esempio:

<div itemscope itemtype="http://schema.org/LocalBusiness">
<meta itemprop="branchof" content="Brand" />
<a itemprop="url" href="http://URL-negozio"><span itemprop="name"> Brand + Nome Negozio - Località </span></a>
(se c’è il rating del negozio) 
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4</span> stars -
    based on <span itemprop="reviewCount">250</span> reviews
  </div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Via </span>
<span itemprop="addressLocality">Località</span>,
<span itemprop="addressCountry">Italy</span>
<span itemprop="postalCode">CAP</span>
<span itemprop="email">email</span>
</div>
<span itemprop="telephone">tel</span>
Hours:
<meta itemprop="openingHours" content="Mo-Sa 11:00-14:30" />Lun-Sab  11 - 20
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="0.0" />
<meta itemprop="longitude" content="0.0" />
</div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

4. Aggiunta dei punti vendita su Google Places 

Oltre a fornire a Google dei dati strutturati sulle pagine con dei tag semantici HTML, è utile fornire a Google i dati in altri formati attraverso il servizio di Google Places e costruendo una GEO sitemap in formato KML.

Google Places offre la possibilità di inserire le informazioni sui punti vendita nell’archivio di Google Maps attraverso: l’aggiunta di un punto vendita per volta o l’aggiunta multipla con dei fogli di calcolo opportunamente formattati.

Per ottenere una buona visibilità nelle Mappe bisogna curare al massimo la completezza delle informazioni e rimanere il più possibile aderente alle linee guida di Google Places.

Una volta inseriti i punti vendita nell’account è necessario ottenere l’approvazione della richiesta di aggiunta da parte di Google.

Nel caso si disponga di numerosi punti vendita, oltre alla possibilità di verificarli uno ad uno attraverso la verifica via posta o telefonica, si può procedere alla più comoda verifica multipla.

Dopo l’operazione di inserimento e verifica, nel caso in cui vengano mostrate erroneamente due location di Google Places per lo stesso punto vendita è possibile segnalare a Google l’eliminazione dei risultati errati.

5. Submission della GEO sitemap

Come i file HTML anche le locations hanno la loro sitemap, chiamata GEO sitemap, che ha il compito di notificare a Google la presenza di un file KML contenente la lista dei negozi.

La creazione del file KML può essere eseguita in modo semplice attraverso il tool Geo Sitemap Generator

Qui un esempio del formato della sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:geo="http://www.google.com/geo/schemas/sitemap/1.0">
<url>
   <loc>http://www.example.com/geo-sitemap.kml</loc>
   <geo:geo>
       <geo:format>kml</geo:format>
   </geo:geo>
</url>
</urlset>

e del file KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>Negozi Brand</name>
<description>Descrizione file KML</description>
<atom:author>
<atom:name>Brand</atom:name>
</atom:author>
<atom:link rel="related" href="http://store.locator.negozi.it">
<Folder>
<Placemark>
<name><![CDATA[Outlet - Monza]]></name>
<address><![CDATA[via monza - monza, Monza, 20100, Italy]]></address>
<description><![CDATA[Descrizione completa con orari, ec.]]></description>
<Point>
<coordinates>9.2834111,45.5841014,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name><![CDATA[Outlet Fidenza 2]]></name>
<address><![CDATA[indirizzo 2, città 2, 30100, Italy]]></address>
<description><![CDATA[Top Descr]]></description>
<Point>
<coordinates>12.2344073,43.3676666,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>

6. Tutto questo in attesa di Google Photos for Business

A maggio 2011 Google con Google Business Photos ha lanciato un nuovo progetto che consente ai proprietari della catena di negozi di mostrare i propri locali in modo da attirare nuovi clienti. Al momento in alcuni stati è possibile iscriversi il programma ed un fotografo andrà direttamente a scattare l’interno del locale.

In Italia non c’è ancora la copertura ma la aspettiamo trepidanti .

Qualche link utile:

• Local Search Ranking Factors
• Using KML for SEO
• Local Search Recipe
• Schema.org, la guida ai microdata
• Understand and rock the Google Venice Update
• GEO sitemap Generator
• Infografica sulle Local Searches

Tutto questo è possibile solo se si ha a disposizione uno strumento che integra dati delle visite al sito con le transazioni e-commerce.

Se utilizzate Google Analytics il processo di integrazione con i dati di e-commerce è abbastanza semplice: è sufficiente abilitare il modulo e-commerce dal menù di impostazione del profilo, poi aggiungere al momento dell’acquisto il seguente codice che permette il corretto tracciamento dell’acquisto.

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  _gaq.push(['_addTrans',
    '1234',           // order ID - required
    'Acme Clothing',  // affiliation or store name
    '11.99',          // total - required
    '1.29',           // tax
    '5',              // shipping
    'San Jose',       // city
    'California',     // state or province
    'USA'             // country
  ]);

   // add item might be called for every item in the shopping cart
   // where your ecommerce engine loops through each item in the cart and
   // prints out _addItem for each
  _gaq.push(['_addItem',
    '1234',           // order ID - required
    'DD44',           // SKU/code - required
    'T-Shirt',        // product name
    'Green Medium',   // category or variation
    '11.99',          // unit price - required
    '1'               // quantity - required
  ]);
  _gaq.push(['_trackTrans']); //submits transaction to the Analytics servers

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Per avere i dati precisi sulle conversioni e la canalizzazione degli utenti è bene configurare bene anche gli obiettivi ed le URL delle pagine che rappresentano i diversi step del flusso di conversione.

Qui un possibile esempio con un processo di acquisto che si articola in 6 passi:

1. punto di ingresso al sito (homepage, landing pages, pagina promozionale, ecc. );
2. visualizzazione scheda prodotto;
3. aggiunta al carrello;
4. inserimento anagrafica e informazioni di spedizione;
5. effettuazione pagamento;
6. acquisto completato.

Una volta a disposizione lo strumento opportunamente configurato è possibile estrarre un sacco di dati davvero interessanti: in questo post raccolgo le 10 irrinunciabili viste sui dati per l’analisi di rendimento di un e-commerce.

1) Numero di transazioni

E’ il primo KPI elementare che conta semplicemente il numero di acquisti effettuati sul sito.

Oltre al semplice numero di acquisti, potrebbe essere interessante abbinare il numero di acquisti “Gold”, ovvero degli ordini oltre una certa soglia.

2) Conversion rate 

Indica la percentuale di utenti che effettuano un acquisto sul totale.

La domanda più frequente dei clienti su questa misura è “Qual è il conversion rate che ha generalmente un e-commerce?”. La risposta è dipende.

Il conversion rate è una metrica da valutare caso per caso poiché dipende da tantissimi fattori:

• alla composizione del traffico in ingresso, se ad esempio si fanno moltissime campagne poco targetizzate il conversion rate potrebbe essere molto basso;
• grado di fidelizzazione degli utenti, se gli utenti che visitano il sito sono principalmente nuovi utenti il conversion rate potrebbe risentirne;
• il prodotto, se ad esempio il costo dei prodotti è più alto rispetto alla concorrenza il conversion rate sarà sicuramente più basso rispetto al competitor con il prezzo migliore;
• la completezza delle informazioni sul prodotto presenti sul sito, se ad esempio le schede prodotto contengono informazioni esaurienti esse probabilmente influiscono in positivo;
• il grado di usabilità del sito, alcuni errori di usabilità possono rendere la vita complicata agli utenti fino a scoraggiarne l’acquisto;
• promozioni, il “free shipping”, i saldi e altre promozioni aggressive sono in grado di far esplodere il conversion rate;
• ecc.

Un possibile benchmark che può essere utilizzato come primo spunto è l’IBM Coremetrics Cyber Monday Report. I valori però sono da prendere con le pinze poichè lo studio è rivolto agli shop online U.S.nei giorni caldi dello shopping americano, quindi non propriamente una condizione equiparabile alla normale vita di un e commerce di viti italiano.

Oltre alla conversione classica (acquisto), potrebbe essere utile considerare il conversion rate per altre microconversion come ad esempio: sharing di un prodotto nei social network, salvataggio di un prodotto o una configurazione, registrazione sito o newsletter.

3) Costo di acquisizione acquisto

Indica quanto un’azienda di e commerce investe per ottenere un acquisto.

Si tratta di una metrica davvero utile per valutare quali sono le attività tattiche che portano clienti a buon mercato. Va detto che il costo di acquisizione, però, non dice nulla sulla qualità dei clienti ottenuti e dell’effettivo ritorno in termini di business.

Nel caso di una campagna PPC il costo di acquisizione è pari a ( budget PPC + costo di gestione campagna) / n° acquisti; nel caso del costo acquisizione SEO è pari a (costo risorse utilizzare per la SEO sviluppatori,consulenze,copywriting, ecc.)/ n° acquisti.

4) Average order value

Indica il valore medio dello scontrino di un cliente.

Si tratta di una metrica piuttosto strategica per gli online store perchè aumentare l’average order value significa limitare l’impatto delle spese di spedizione sul totale del fatturato.

Uno dei possibili modi per aumentare l’average order value è quello di garantire ai clienti la spedizione gratuita per un ordine superiore ad un particolare importo.

5) Numeri di acquisti per anno

E’ una metrica che dà l’idea del grado di fidelizzazione del cliente a medio e lungo termine.

Puntare sull’aumento del numero di acquisti per anno e sulla fidelizzazione del cliente è una mossa intelligente poiché stimolare un acquisto da un cliente già conosciuto probabilmente costa meno rispetto ad ottenerne uno di nuovo. Aumentare la fidelizzazione quindi nella maggior parte dei casi significa abbassare il costo di acquisizione globale dei clienti.

6) Tasso di reso

Indica il numero di prodotti resi rispetto al numero totale dei prodotti venduti.

Questo valore nel caso degli e-commerce di abbigliamento è un valore normale e fisiologico in un processo di acquisto online: Zappos è stato il player che ne ha fatto un grande cavallo di battaglia con la 365 Day Return Policy, registrando un tasso di reso del 35%.

Anche se in genere il tasso di reso non è il demonio, sarebbe interessante riuscire a contenerlo poiché il reso impatta inevitabilmente sui costi aziendali. Alcune possibili azioni tattiche per limitare il tasso di reso possono esseree una scheda prodotto completa di informazioni dettagliate, una guida alle taglie semplice da interpretare, l’uso di immagini ad alta risoluzione e dettaglio del prodotto.

7) Interazioni sociali per visitatore

E’ un indicatore che dà il numero medio di interazione sociali per visita.

Questa metrica è utile perchè può dare la dimensione del gradimento degli utenti per i prodotti e della propensione alla condivisione dei contenuti proposti. A tal proposito Google Analytics offre la possibilità di tracciare le azioni sociali con la Social Plugin Analytics.

8 ) Bad page views

Indica il numero di pagine “critiche” visualizzate dagli utenti. 

Durante il flusso di navigazione di un e commerce, infatti, può succedere che un utente visualizzi delle pagine critiche che causano l’abbandono da parte dei clienti. Le pagine critiche possono essere diverse, ad esempio le pagine 404 o di errore 500, risultati di ricerca prodotti con 0 risultati, schede prodotto con item non disponibili, ecc.

E’ bene tener monitorato questo KPI con degli alert per tenere sotto occhio l’efficienza del sito web, intercettando e risolvendo in modo rapido eventuali criticità.

Per settare degli alert automatici sulla visualizzazione delle pagine critiche è sufficiente impostare una microconversion per ogni pagina critica vista e poi configurare i custom alert.

9 ) ROI

Il ritorno sull’investimento è la metrica “regina” dei progetti e-commerce, rispetto al costo di acquisizione offre anche un dettaglio sulla qualità del cliente ottenuto.

Questo indicatore si ottiene dividendo il valore degli acquisti effettuati dagli utenti con la somma delle spese sostenute per ottenerli. Il ROI è utilissimo per valutare i rendimenti di campagne e delle attività di web marketing in genere. In questo post di Craig Tomlin c’è un’interessante esempio di come il ROI può guidare le decisioni di business, in questo caso la domanda è “Meglio investire in usabilità o Advertising?“.

10) Funnel per processo di acquisto

Il funnel non è un semplice metrica ma uno dei diagrammi più diffusi nei report di web analytics degli e-commerce. Si tratta di una rappresentazione ad imbuto che permette di conoscere nel dettaglio in che modo gli utenti si muovono nei vari step del processo di acquisto online.

Dall’osservazione ed il monitoraggio del funnel è possibile comprendere quali siano i passi più critici durante il processo di conversione.

Google Analytics garantisce davvero moltissime soluzioni per ottenere questa importante rappresentazione: attraverso la visualizzazione di un funnel statico.

L’utilizzo dell’interfaccia interattiva Goals Flow che permette di creare al volo Funnel in modo intuitivo avvalendosi anche della segmentazione del traffico:

Per i veri feticisti del dato, oltre al funnel classico del processo di conversione c’è anche la possibilità di analizzare il funnel dei canali di acquisizione:

Voi utilizzate altre metriche per il monitoraggio delle performance del vostro e-commerce?

Qualche lettura interessante:

• Promozioni nei Social Media: come si comporta il traffico? di Enrico Pavan
• Google Analytics Ecommerce Tracking Guide
• Guida-presentazione al setup dell’Ecommerce Tracking di Google Conversion University
• Creating an commerce tracking plan for Google Analytics di Cutroni
• IBM Core Metrics Cyber Monday Report - pdf version

Perchè considerare i video come un’opportunità per la SEO?

Forrester già nel “lontano” 2009 affermava che usare i video è il miglior modo per ottenere visibilità nei motori di ricerca per due ragioni principali.

I risultati Blended Search sono davvero molto presenti nelle SERP: un’analisi di SearchMetrics stima che il 15% circa delle SERP di Google contiene dei video e vengono mostrati in media 2,2 video per ciascuna pagina.

I risultati video, così come tutti i risultati non testuali, sono in grado di attirare l’attenzione degli utenti scardinando il concetto di Golden Triangle. L’immagine sotto tratta da un interessante studio di eyetracking di Dr. Pete su Google Universal Search mostra come il video al secondo posto per la parola chiave “How to make a pizza” risulta molto più visto del risultato testuale presente al primo posto.

Pensate quanto può essere importante il posizionamento dei video per una casa automobilistica che vuole massimizzare la propria visibilità per parole chiave relative ai propri modelli di auto:

Oppure ad un e-commerce di scarpe che vuole posizionarsi per i nomi delle scarpe da ginnastica Nike più vendute.

Qualche consiglio per l’ottimizzazione dei video

1- Includi i video in pagine “descrittiva”

Google ha bisogno di informazioni testuali per comprendere che un video può essere rilevante per una parola chiave: evitare di inserire il filmato in semplici “gallery”, meglio introdurre il Player in una pagina con un testo descrittivo.

2- Segui tutte le buone norme di scrittura nei motori di ricerca

I testi all’interno della pagina devono essere ottimizzati per la SEO: per non dilungarmi troppo nell’argomentazione mi affido ad un’efficace presentazione di Giacomo Mason che riassume tutti gli aspetti.

3- Consenti i commenti o le recensioni degli utenti

Permettere agli utenti di commentare ed esprimere la propria opinione sul contenuto è un’ottimo modo per avere  informazioni “fresche” e quindi considerate più rilevanti dai motori di ricerca. Inoltre spesso i commenti potrebbero “farcire” di testo con buone parole chiave le pagine in modo naturale ed “etico“.

Un ottimo esempio di come sfruttare i commenti in chiave SEO è Zappos, che addirittura inserisce link verso pagine di categoria o di prodotto se l’utente li nomina nei suoi commenti:

<div itemscope itemtype="http://schema.org/VideoObject">
<h2>Video: <span itemprop="name">Title</span></h2>
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailURL" content="thumbnail.jpg" />
<meta itemprop="embedURL"
content="http://www.example.com/videoplayer.swf?video=123" />
<object ...>
<embed type="application/x-shockwave-flash" ...>
</object>
<span itemprop="description">Video description</span>
</div>

<meta name="title" content="Example title" />
<meta name="description" content="Example description" />
<link rel="image_src" href="http://example.com/thumbnail_preview.jpg" />
<link rel="video_src" href="http://example.com/video_object.swf?id=12345"/>
<meta name="video_height" content="296" />
<meta name="video_width" content="512" />
<meta name="video_type" content="application/x-shockwave-flash" />

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
   <url>
     <loc>http://www.example.com/videos/qualsiasi_pagina_di_destinazione_video.html</loc>
     <video:video>
       <video:thumbnail_loc>http://www.example.com/thumbs/123.jpg</video:thumbnail_loc>
       <video:title>Bistecche alla griglia per l'estate</video:title>
      <video:description>Alkis dimostra come ottenere sempre bistecche perfette</video:description>
       <video:content_loc>http://www.example.com/video123.flv</video:content_loc>
      <video:player_loc allow_embed="yes" autoplay="ap=1">http://www.example.com/videoplayer.swf?video=123</video:player_loc>
      <video:duration>600</video:duration>
       <video:expiration_date>2009-11-05T19:20:30+08:00</video:expiration_date>
      <video:rating>4.2</video:rating>
       <video:view_count>12345</video:view_count>
       <video:publication_date>2007-11-05T19:20:30+08:00</video:publication_date>
       <video:family_friendly>yes</video:family_friendly>
       <video:restriction relationship="allow">IE GB US CA</video:restriction>
    <video:gallery_loc title="Cooking Videos">http://cooking.example.com</video:gallery_loc>
       <video:price currency="EUR">1,99</video:price>
       <video:requires_subscription>yes</video:requires_subscription>
       <video:uploader info="http://www.example.com/users/grillymcgrillerson">GrillyMcGrillerson
         </video:uploader>
       <video:live>no</video:live>
     </video:video>
   </url>
</urlset>