Interazioni social - Monitoraggio web (ga.js)

Questo documento descrive come utilizzare Google Analytics per ottenere metriche sulle interazioni su reti non Google, come Facebook e Twitter. Utilizza questo documento per configurare Analytics per i pulsanti di condivisione sui social se sei il proprietario del sito, lo sviluppatore di plug-in per la gestione dei contenuti o un operatore di social network e vuoi fornire report automatici sulle interazioni social per gli utenti dei pulsanti di condivisione.

Introduzione

Per impostazione predefinita, Google Analytics fornisce report integrati per il pulsante +1. Ciò significa che se hai implementato ga.js e un pulsante +1 sulla stessa pagina, tutte le interazioni social +1 verranno registrate automaticamente. Per ulteriori informazioni su Analytics per +1, inclusi suggerimenti per la risoluzione dei problemi, consulta la sezione Informazioni sull'analisi dei dati social nel Centro assistenza.

Per ottenere l'analisi delle interazioni social e i report per altre reti come Facebook o Twitter, devi integrare Google Analytics in ogni pulsante della rete. Con l'analisi dei plug-in social, le interazioni registrate vanno da un "Mi piace" su Facebook a un "Tweet" di Twitter. Sebbene il monitoraggio degli eventi sia in grado di monitorare anche le interazioni generali con i contenuti, l'analisi dei dati social fornisce un framework coerente per la registrazione delle interazioni social. Questo a sua volta fornisce agli utenti dei report di Google Analytics un insieme coerente di report per confrontare le interazioni con i social network su più reti.

Per un esempio pratico di come integrare Analytics con i pulsanti di Facebook e Twitter, consulta il codice campione di Analisi dati social.

Impostazione dell'analisi dei dati social

Per impostare il monitoraggio delle interazioni social, devi utilizzare il metodo _trackSocial, che invia i dati sulle interazioni social a Google Analytics. Il metodo deve essere chiamato dopo che l'utente ha completato un'interazione social. Ogni social network utilizza un meccanismo diverso per determinare quando si verifica l'interazione social, e questo in genere richiede l'integrazione con l'API per quel pulsante di rete.

Poiché i dettagli specifici per l'integrazione di analisi dei dati social variano a seconda dei social network, la parte restante di questa guida fornisce best practice generali su come configurare l'analisi dei plug-in social per ognuna di queste reti. Ti consigliamo di consultare la documentazione per gli sviluppatori di ogni rete per capire l'implementazione specifica della rete.

Ecco una descrizione del metodo _trackSocial:

_gaq.push(['_trackSocial', network, socialAction, opt_target, opt_pagePath]);

dove i parametri rappresentano:

  • network

    Obbligatoria. Una stringa che rappresenta il social network monitorato (ad es. Facebook, Twitter, LinkedIn).

  • socialAction

    Obbligatoria. Una stringa che rappresenta l'azione social monitorata (ad es. Mi piace, Condividi, Tweet).

  • opt_target

    Campo facoltativo. Una stringa che rappresenta l'URL (o la risorsa) che riceve l'azione. Ad esempio, se un utente fa clic sul pulsante Mi piace in una pagina di un sito, opt_target potrebbe essere impostato sul titolo della pagina o su un ID utilizzato per identificare la pagina in un sistema di gestione dei contenuti. In molti casi, la pagina su cui mi piace è la stessa pagina su cui ti trovi. Pertanto, se questo parametro è undefined o omesso, il codice di monitoraggio utilizzerà document.location.href per impostazione predefinita.

  • opt_pagePath

    Campo facoltativo. Una stringa che rappresenta la pagina in base al percorso (inclusi i parametri) da cui si è verificata l'azione. Ad esempio, se fai clic sul pulsante Mi piace su https://developers.google.com/analytics/devguides/, opt_pagePath deve essere impostato su /analytics/devguides. Quasi sempre, il percorso della pagina è la sorgente dell'azione social. Pertanto, se questo parametro è undefined o omesso, il codice di monitoraggio utilizzerà per impostazione predefinita location.pathname più location.search. In genere, devi impostare questa opzione solo se monitori le visualizzazioni di pagina virtuali modificando il parametro facoltativo del percorso pagina con il metodo _trackPageview di Google Analytics.

Azioni di Facebook

Secondo l'SDK JavaScript di Facebook, il modo più semplice per impostare un pulsante Mi piace sulla tua pagina è utilizzare il seguente codice:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like></fb:like>

Mi piace

Per registrare i Mi piace con Google Analytics, iscriviti all'evento edge.create di Facebook e crea una funzione di callback per eseguire il codice di monitoraggio di Google Analytics.

FB.Event.subscribe('edge.create', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
});

Quando un utente seleziona un Mi piace per la tua pagina, viene eseguita la funzione di callback e riceve l'URL della risorsa a cui ti piace. La risorsa viene quindi passata come valore al metodo _trackSocial in modo che Google Analytics possa generare report sulla rete, sull'azione e sull'URL a cui viene Mi piace.

Non mi piace

Le API di Facebook ti consentono inoltre di iscriverti ad altri eventi interessanti, come il messaggio Non mi piace.

FB.Event.subscribe('edge.remove', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
});

Condivisioni

Puoi anche iscriverti alle condivisioni.

FB.Event.subscribe('message.send', function(targetUrl) {
  _gaq.push(['_trackSocial', 'facebook', 'send', targetUrl]);
});

Tweet di Twitter

In base alla documentazione sul pulsante tweet e agli eventi JavaScript di Web Intent, per implementare un pulsante Twitter nella pagina e rilevare le interazioni degli utenti, è necessario utilizzare il seguente codice:

<a href="http://developers.google.com/analytics" class="twitter-share-button" data-lang="en">Tweet</a>
<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

Per monitorare gli eventi Pulsante Tweet con Google Analytics, devi utilizzare gli eventi JavaScript Web Intent di Twitter e associare una funzione di callback a Intent Event. È importante aggregare le associazioni di eventi in una funzione di callback per assicurarsi che tutto sia stato caricato prima di associare gli eventi.

function trackTwitter(intent_event) {
  if (intent_event) {
    var opt_pagePath;
    if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
          opt_target = extractParamFromUri(intent_event.target.src, 'url');
    }
    _gaq.push(['_trackSocial', 'twitter', 'tweet', opt_pagePath]);
  }
}

//Wrap event bindings - Wait for async js to load
twttr.ready(function (twttr) {
  //event bindings
  twttr.events.bind('tweet', trackTwitter);
});

Quando un utente invia tweet, la funzione di callback riceve un oggetto che di solito può essere utilizzato per ottenere l'URL della risorsa twittata. Una volta caricato il codice JavaScript di Twitter, trasforma il link del tweet annotato in un iframe e l'URL twittato viene codificato e aggiunto come parametro di query all'URL dell'iframe. L'oggetto evento passato al nostro callback fa riferimento a questo iframe e possiamo utilizzarlo per ottenere l'URL della risorsa twittata.

La funzione di callback sopra riportata verifica che il riferimento iframe sia effettivamente un iframe, quindi tenta di estrarre la risorsa twittata esaminando il parametro di query url.

Ecco una funzione di esempio per estrarre un parametro di query da un URI:

function extractParamFromUri(uri, paramName) {
  if (!uri) {
    return;
  }
  var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
  var params = regex.exec(uri);
  if (params != null) {
    return unescape(params[1]);
  }
  return;
}

Il parametro viene restituito se si trova nella stringa di query. Se non viene rilevato alcun parametro, la funzione restituisce undefined, che viene passato al metodo _trackSocial, determinando il comportamento predefinito del metodo.

Best practice per l'integrazione

Molti siti aggiungono pulsanti social usando plug-in per la gestione dei contenuti. Se sei l'autore di questi plug-in, ti consigliamo vivamente di integrare la funzionalità Analisi plug-in social per registrare automaticamente queste interazioni. Analogamente, se sei uno sviluppatore di un social network, puoi integrare molto più facilmente le interazioni con i social network in Google Analytics integrando questa funzionalità per gli utenti.

Per aiutarti, questa sezione descrive le best practice per integrare l'analisi dei plug-in social in modo che il tuo prodotto o CMS monitori automaticamente le interazioni social. Se vuoi vedere un esempio funzionante di tutte queste best practice, consulta il codice campione di analisi plug-in social.

Creazione dell'istanza e utilizzo della coda _gaq

L'ultima versione del codice di monitoraggio di Google Analytics supporta il caricamento sia in modo sincrono che asincrono. Per consentire agli sviluppatori di chiamare metodi che non sono ancora stati caricati, Google Analytics fornisce una coda di comandi _gaq su cui è possibile eseguire il push dei metodi di monitoraggio _gaq.push();.

Una volta caricato il codice di monitoraggio, vengono eseguiti tutti i comandi in coda. Quando integri il codice di monitoraggio JavaScript di Google Analytics con il plug-in o il prodotto, devi sempre assicurarti che venga creata un'istanza di questa coda di comando e che l'integrazione esegua il push del comando _trackSocial in questo array.

var _gaq = _gaq || [];

Ciò fornisce una ragionevole garanzia che il metodo verrà chiamato indipendentemente dal fatto che la pagina del sito web ricevente utilizzi lo snippet di codice di monitoraggio tradizionale o asincrono.

Configurazioni utente

Se stai sviluppando un plug-in che integra l'analisi dei plug-in social, dovresti considerare di fornire le seguenti opzioni che consentano agli utenti di impostare quando utilizzano il tuo plug-in:

Impostazione del parametro facoltativo del percorso della pagina: il parametro finale del metodo _trackSocial sostituisce l'URL corrente da cui si è verificata un'interazione social. L'obiettivo finale è registrare gli stessi URL tra il monitoraggio delle pagine e l'analisi dei plug-in social. Poiché alcuni utenti potrebbero ignorare l'URL predefinito della pagina monitorato con il monitoraggio delle visualizzazioni di pagina, è necessario anche un modo per sostituire l'URL in Analisi plug-in social per ottenere report coerenti.

Ecco un esempio di come puoi consentire agli utenti di impostare queste opzioni e di come il tuo codice deve rispondere.

// Create a function for a user to call to pass in the options.
function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(['_trackSocial', 'facebook', 'like',
            opt_target, opt_pagePath]);
      });
    }
  } catch(e) {}
}

Nell'esempio precedente, se la funzione trackFacebook viene richiamata con il set di parametri opt_pagePath, il valore predefinito del percorso pagina verrà sovrascritto con il percorso di fornitura del parametro. In caso contrario, il valore di quel parametro verrà impostato su undefined. e il codice di monitoraggio di Google Analytics utilizzerà il valore predefinito per il parametro non definito.

Nota: in questo esempio sono stati aggiunti anche un paio di controlli per garantire che non si verifichino errori di script se l'API Facebook non è stata caricata. In qualità di sviluppatore responsabile, dovresti assicurarti di gestire gli errori in modo appropriato.

Più tracker

Alcuni utenti di Google Analytics assegnano un nome all'oggetto di monitoraggio per distinguere più tracker sulla stessa pagina. Sebbene non sia consigliabile utilizzare più tracker sulla stessa pagina del sito web, potresti considerare la possibilità di utilizzare più tracker.

Di seguito è riportato un esempio di come eseguire l'iterazione e chiamare il metodo _trackSocial per ogni oggetto tracker. Viene utilizzato il metodo _getTrackers, che restituisce un array di tutti gli oggetti tracker sulla pagina.

In questo esempio, quando viene attivato l'evento di Facebook, il metodo _trackSocial per ogni oggetto tracker viene inviato tramite push alla coda dei comandi di Google Analytics _gaq. 

getSocialActionTrackers = function(network, socialAction, opt_target, opt_pagePath) {
  return function() {
    var trackers = _gat._getTrackers();
    for (var i = 0, tracker; tracker = trackers[i]; i++) {
      tracker._trackSocial(network, socialAction, opt_target, opt_pagePath);
    }
  };
}

function trackFacebook(opt_pagePath) {
  try {
    if (FB && FB.Event && FB.Event.subscribe) {
      FB.Event.subscribe('edge.create', function(targetUrl) {
        _gaq.push(_ga.getSocialActionTrackers_('facebook', 'like',
            opt_target, opt_pagePath));
      });
    }
  } catch(e) {}
}