Monitorare gli utenti loggati sui social con Google Analytics

di il 2 marzo 2012 · 9 commenti

in Ottimizzare il sito

Rilevazione utenti sui social network

Per chi gestisce un sito può essere sicuramente interessante sapere quanti dei propri visitatori utilizzino i vari servizi social, ad esempio per indirizzare eventuali scelte di marketing oppure valutare l’inserimento di particolari widget sulle proprie pagine web.

Grazie ad un codice Javascript è possibile tracciare, all’interno di Google Analytics, se gli utenti che stanno visitando il tuo sito sono anche contemporaneamente loggati:

  • con un account Google
  • ad un profilo Google+
  • a Twitter
  • a Facebook

Per Facebook tale operazione è più semplice perché il social network mette a disposizione le API per questo genere di operazione, per gli altri invece è necessario adottare alcuni stratagemmi. Comunque ho testato il sistema e vi assicuro che funziona :)
Vediamo quindi come fare.

Creazione di un’applicazione Facebook

Il primo passaggio da compiere consiste nella creazione di un’applicazione Facebook. Può sembrare una cosa complicata ma in realtà è un’operazione che richiede meno di un minuto. E’ sufficiente visitare la pagina developers.facebook.com/apps e cliccare sul pulsante “Crea applicazione”. Ovviamente per fare ciò dovrete essere loggati con il vostro account Facebook.

Creare un'applicazione facebook

  1. Inserite poi il nome che volete nel campo “App Display Name”
  2. Il dominio del vostro sito in “App Domain”
  3. L’indirizzo del sito nella sezione “Website”
  4. Salvate i dati inseriti

A questo punto otterrete un codice numerico chiamato “App ID” che vi servirà in seguito.

Inserire i codici Javascript sulle pagine del vostro sito

Ora è necessario incollare i codici Javascript che permetteranno di passare i dati che vi servono a Google Analytics, che naturalmente deve essere già presente sul vostro sito. Se così non fosse, procedete prima ad installare il codice di Google Analytics per monitorare il traffico del sito.

Il primo codice da inserire, va posizionato subito dopo quello di Analytics, sempre nella sezione <head></head> delle vostre pagine ed è questo:

<script type="text/javascript">
			function record_login_status(slot, network, status)
			{
				// This code is for the async version of Google Analytics; if you're still on
				// the old code then you need to adjust it accordingly.
				if (status)
				{
					_gaq.push(["_setCustomVar", slot, network + "_State", "LoggedIn", 1]);
					// You may prefer to record this data with _trackEvent
					// _gaq.push(['_trackEvent', network + '_State',  'status',  "LoggedIn"]);
				}else{
					_gaq.push(["_setCustomVar", slot, network + "_State", "NotLoggedIn", 1]);
					// You may prefer to record this data with _trackEvent
					//_gaq.push(['_trackEvent', network + '_State',  'status',  "NotLoggedIn"]);
				}
			}
	</script>

Successivamente, dovrai inserire anche il codice seguente, ma questa volta prima della chiusura del tag body. Dovrai anche inserire l’App ID dell’applicazione Facebook precedentemente creata all’interno di questo codice (al posto di XXXXXXXXXXXXXXXXX):

<img style="display:none;"
onload="record_login_status(1, 'Google', true)"
onerror="record_login_status(1, 'Google', false)"
src="https://accounts.google.com/CheckCookie?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png" />

<img style="display:none;"
onload="record_login_status(2, 'GooglePlus', true)"
onerror="record_login_status(2, 'GooglePlus', false)"
src="https://plus.google.com/up/?continue=https://www.google.com/intl/en/images/logos/accounts_logo.png&type=st&gpsrc=ogpy0" />

<img style="display:none;" src="https://twitter.com/login?redirect_after_login=%2Fimages%2Fspinner.gif" onload="record_login_status(3, 'Twitter', true)" onerror="record_login_status(3, 'Twitter', false)" />

<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function(){
		FB.init({ appId:'XXXXXXXXXXXXXXXXX', status:true,  cookie:true, xfbml:true});
		FB.getLoginStatus(function(response){
			if (response.status != "unknown")
			{
				record_login_status(4, "Facebook", true);
			}else{
				record_login_status(4, "Facebook", false);
			}
		});
	};
	// Load the SDK Asynchronously
	(function(d){
		var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
		js = d.createElement('script'); js.id = id; js.async = true;
		js.src = "//connect.facebook.net/it_IT/all.js";
		d.getElementsByTagName('head')[0].appendChild(js);
	}(document));
</script>
	</script>

Ecco fatto, le modifiche al codice HTML del tuo sito sono terminate, ora passiamo ad impostare Google Analytics.

Impostazioni di Google Analytics

Per sfruttare tutto il lavoro fatto in precedenza, è però necessario impostare Google Analytics in modo che per te sia più facile leggere i dati raccolti. Nella sezione “Dati demografici -> Variabili personalizzate” di Analytics ti sarà possibile consultare i dati raccolti con questo sistema di tracciamento.

Dati demografici - Variabili personalizzate

Per sfruttare però al massimo tali informazioni è caldamente consigliata la creazione di “Segmenti personalizzati”, in modo da analizzare meglio le differenze tra gli utenti loggati ai vari social rispetto a tutti gli altri visitatori del sito.

Creare segmenti personalizzati

Creare segmenti personalizzati con Google Analytics è un’operazione facilissima. Basta cliccare sul pulsante “Segmenti avanzati” che trovi in alto a sinistra nell’interfaccia di Analytics. Ti si aprirà un box contenente diverse voci, relative ai segmenti predefiniti. In basso a destra sarà presente un pulsante “+ Nuovo segmento personalizzato” che dovrai cliccare.

A questo punto ti si aprirà la schermata che ti permette di creare un nuovo segmento personalizzato.

Segmento personalizzato analytics

Come nome puoi inserire quello che vuoi, basta che ti permetta di capire in seguito a cosa si riferisce quel segmento. Io ho utilizzato “Utenti Twitter” per tracciare appunto gli utenti di questo social network.

Clicca poi sul pulsante con lo sfondo verde e seleziona la variabile personalizzata che ti interessa monitorare (presente nei codici Javascript inseriti in precedenza). Tieni presente che Analytics permette fino a 5 variabili personalizzate e noi ne stiamo utilizzando 4 e precisamente:

  • 1 = Google
  • 2 = Google+
  • 3 = Twitter
  • 4 = Facebook

Quindi se dal menu con lo sfondo verde selezioni “Variabile personalizzata (Valore 03)” stai considerando gli utenti di Twitter, se selezioni “Variabile personalizzata (Valore 04)” stai considerando gli utenti di Facebook e così via.

Fai attenzione a selezionare la voce “Variabile personalizzata (Valore…” e non “Variabile personalizzata (Chiave…”

Quando hai finito clicca sul pulsante “Salva segmento” e ripeti l’operazione per gli altri tre segmenti.

Visualizzare i dati su Google Analytics

Una volta effettuate tutte le operazioni precedenti, sarà necessario attendere almeno qualche ora per iniziare a visualizzare un po’ di dati con Google Analytics utilizzando i nuovi segmenti personalizzati appena creati. Per fare ciò è sufficiente cliccare sul pulsante “Segmenti avanzati”, selezionare i segmenti personalizzati desiderati e cliccare sul pulsante “Applica”:

Selezione segmenti personalizzati

Analytics ti mostrerà subito i segmenti personalizzati nei grafici e nelle tabelle, permettendoti di valutare il diverso comportamento degli utenti loggati ai diversi social network:

Visite degli utenti loggati ai social network

Se hai trovato utile questo articolo condividilo pure con i tuoi amici sui social network utilizzando i pulsanti sottostanti :)

[tratto da Monitor Which Social Networks Your Visitors are Logged Into With Google Analytics]

AGGIORNAMENTO: Se volete utilizzare una sola variabile personalizzata utilizzate i codici disponibili in questa pagina.


Non vuoi perdere gli aggiornamenti di Motoricerca e ricevere anche preziosi ed utili consigli per ottimizzare il tuo sito? Iscriviti alla NEWSLETTER.