Inserire degli obiettivi per Google Analytics in VirtueMart 1.1

Vediamo come impostare in VirtueMart delle pagine virtuali in corrispondenza di eventi significativi, in modo da poterle poi usare come obiettivi in Google Anaytics.

Gli obiettivi

Google Analytics ci permette di fissare degli obiettivi, ovvero delle pagine che – quando raggiunte – rappresentano il compimento da parte dell’utente di una azione che ci interessa.

Ad esempio il completamento di un ordine su un e-commerce è chiaramente un obiettivo.

Ma potrebbero esserlo anche altre azioni quali:

  • l’aggiunta del prodotto al carrello
  • la registrazione dell’utente
  • l’iscrizione alla newsletter

e cosi via.

Le pagine virtuali

Non tutti questi eventi corrispondono a una vera e propria pagina del nostro sito.

Ad esempio, se l’aggiunta al carrello viene gestita in modalità Ajax l’utente non abbandona la pagina dove si trova quindi non riusciremo a individuare l’evento.

Inoltre, diverse pagine di VirtueMart vengono rappresentate dal medesimo URL anche se il contenuto della pagina cambia (ad esempio i vari passaggi del carrello).

Per risolvere questa anomalia la tecnica a nostra disposizione si chiama “pagina virtuale“: forziamo Google Analytics a tracciare una pagina che in realtà non esiste, ma serve a rappresentare l’evento raggiunto.

La sintassi generale di questo comando è:

_gaq.push(['_trackPageview','/url-da-tracciare'])

Ma facciamo una parentesi.

Non è raccomandabile inserire codice nel vostro sito senza sapere cosa state facendo. Copiare e incollare da questo blog senza avere la minima nozione di PHP, HTML, JavaScript non è una buona idea.

In particolare, questo codice va a inserirsi in funzioni importanti di VirtueMart per cui se sbagliate a scrivere qualcosa potreste danneggiare il funzionamento del sito.

Quindi:

  • fate un backup dell’intero file;
  • commentate il codice precedente in modo da poterlo rapidamente ripristinare;
  • state molto attenti alla sequenza di virgolette, parentesti, punti e virgola, e segni di escape (\): nessuno di questi caratteri è stato messo a caso;
  • dopo la modfica fate subito dei test in modo da assicurarvi che le funzionalità di base siano rimaste intatte (un errore di battitura potrebbe impedire del tutto l’aggiunta del prodotto al carrello)

Noi vi abbiamo avvertito…

Inserire le pagine virtuali in VirtueMart

Supponendo che abbiate già inserito nel vostro sito il codice di tracciatura per Google Analytics, vediamo nel dettaglio come aggiungere la tracciatura di pagine virtuali in corrispondenza di alcuni eventi rilevanti.

Aggiunta al carrello dalla pagina di elenco prodotti

Modificare il file

/components/com_virtuemart/themes/default/
templates/browse/includes/addtocart_form.tpl.php

N.B. se usate un tema VirtueMart diverso da quello di default, sostituite la cartella “default” con quella relativa al vostro tema.

La riga 21 del file, formattata e spezzata su più righe per essere più chiara, è la seguente:

<form action="<?php echo $mm_action_url ?>index.php" 
 method="post" 
 name="addtocart" 
 id="addtocart<?php echo $i ?>" 
 <?php 
 if( $this->get_cfg( 'useAjaxCartActions', 1 ) && !$notify ) { 
 echo 'onsubmit="handleAddToCart( this.id );return false;"'; 
 }
 ?>
>

Il tutto deve invece diventare:

<form action="<?php echo $mm_action_url ?>index.php" 
   method="post" 
   name="addtocart" 
   id="addtocart<?php echo $i ?>" 
   <?php 
   if( $this->get_cfg( 'useAjaxCartActions', 1 ) && !$notify ) { 
      echo 'onsubmit="
         _gaq.push([\'_trackPageview\',\'/aggiunta-al-carrello\']);
         handleAddToCart( this.id );
         return false;"'; 
   } else {
      echo 'onsubmit="
         _gaq.push([\'_trackPageview\',\'/aggiunta-al-carrello\']);';
   }
   ?>
>

Come si può vedere, è stata inserite l’istruzione che forza il JavaScript di Google Analytics a tracciare una visita “virtuale” a una pagina “/aggiunta-al-carrello” che in realtà non esiste.

Ovviamente potete sostituire “/aggiunta-al-carrello” con qualsiasi stringa a vostro piacere purchè sia composto di caratteri validi per un URL.

Aggiunta al carrello dalla pagina di dettaglio prodotto

/components/com_virtuemart/themes/default/
templates/browse/includes/addtocart_form.tpl.php

E’ esattamente identico all’esempio sopra, solo che la riga in questione è la 15.

Richiesta informazioni su un prodotto

/components/com_virtuemart/themes/default/
templates/product_details/flypage.tpl.php

Nota: noi vi insegniamo come modificare la pagina “flypage.tpl.php”. Se invece state usando una diversa flypage, modificate quella: le modifiche sono simili.

In questo caso, dato che l’HTML del link “Richiedi informazioni su questo prodotto” ci arriva già completo, dovremo applicare il metodo str_replace come già indicato in questo post.

Per cui fate spazio prima della riga 43:

<td colspan="2"><?php echo $ask_seller ?></td>

e aggiungete il codice:

$ask_seller = str_replace(
   '<a ',
   '<a onclick=" _gaq.push([\'_trackPageview\',\'/richiesta-informazioni-prodotto\']);"',
   $str_replace
)

Anche in questo caso la stringa “/richiesta-informazioni-prodotto” è solo un esempio, che può essere sostituito a piacere.

Registrazione utente

/administrator/components/com_virtuemart/
html/checkout_register_form.php

Qui purtroppo dobbiamo modificare una pagina di sistema di VirtueMart.

La riga 76 del file in questione, spezzata su più righe per chiarezza, è la seguente:

<input type="submit" 
   value="'. $VM_LANG->_('BUTTON_SEND_REG') . '" 
   onclick="return( submitregistration());" />

Come potrete immaginare, andiamo a modificare l’attributo onclick:

<input type="submit" 
   value="'. $VM_LANG->_('BUTTON_SEND_REG') . '" 
   onclick="
      _gaq.push([\'_trackPageview\',\'/registrazione-utente\']);
      return( submitregistration());" 
/>

Altri suggerimenti

Per i più esperti programmatori ecco alcuni altri spunti per dei miglioramenti che vi lasciamo però scoprire e risolvere da soli .

  • In tutti gli esempi sopra riportati, l’URL potrebbe essere costruito dinamicamente per contenere ad esempio l’ID del prodotto aggiunto o per il quale sono state richieste informazioni.
  • Tutto il JavaScript sopra riportato potrebbe essere aggiunto in modalità “non intrusiva” creando degli eventi ai quali collegare la tracciatura. L’unica modifica al codice potrebbe essere a quel punto solo l’aggiunta di ID e/o CLASSI nell’HTML per poter identificare rapidamente gli elementi che ci interessano.

programmatore, virtuemart, webanalytics