Es importante facilitar la acción de compartir nuestro contenido en sus redes sociales, y es imprescindible medir esas interacciones, y es interesante poder medirlo con la misma herramienta que hacemos el seguimiento a nuestra web.
Pero cómo medimos con Analytics la interacción de los visitantes con los botones para compartir de las redes sociales, cuantas veces han interactuado y que contenido ha sido el más compartido. Si Google Analytics sólo registra de forma automática e integrada las acciones de las redes sociales de sus socios de concentrador de datos (Google+).
Depende con que redes sociales trabaje la web, en mi caso me interesa poder compartir contenido con botones de Facebook, Twitter, Pinterest, LinkedIn y Google+. Como he dicho antes el seguimiento de Google+ y demás socios del concentrador de datos es automático, bien, me faltan las otras cuatro redes, y cada una ofrece un código diferente para sus botones.
Hay que hacer una implementación avanzada de Analytics para poder llenar con la información de todas nuestras redes sociales los informe de Analyticscon las métricas de acciones sociales y contenido más compartido, que provienen del informe de “Complementos sociales” (Fuente -> Social -> Complementos) en sus dimensiones primarias de “Entidad social” (las url con más interacción) y “Fuente social e interacción con redes sociales“ (interacciones= twitter: click-tweet / facebook: like / twitter: tweet / Google: +1 / twitter: click-tweetcount / facebook: unlike).
Decidí entonces buscar una solución y esto fue lo que encontré. Entre poca y casi nada de información en castellano y buena información oficial en ingles.
Lo primero a saber es que para poder medir las interacciones de los usuarios con los botones de las redes sociales, Google Analytics implementa un método llamado _trackSocial el que ya viene integrada en el botón de Google+, este consiste en pasar los siguientes valores:
_gaq.push(['_trackSocial', network, social Action, opt target, opt_pagePath])
network: Obligatorio. Pasamos una cadena que representa la red social que haremos el seguimiento (Facebook, Twitter, LinkedIn)
socialAction: Obligatorio. Pasamos una cadena que representa la acción social se está realizando (Pin it, Compartir, Tweet)
opt_target: Opcional. Pasamos una cadena que representa el URL que recibe la acción. En la mayoría de los casos, la URL que recibe la acción es la misma página en la que se encuentra. Así que si este parámetro no está definido o se omite, el valor predeterminado será document.location.href.
opt_pagePath: Opcional. Pasamos una cadena que representa la ruta de acceso de la página (incluyendo parámetros) de la que se produjo la acción. Por lo general sólo es necesario configurarlo si se realiza el seguimiento de páginas vistas virtuales con el método de Google Analytics _trackPageview.
Hasta aquí la teoría de la implementación, ¿chulo verdad?. El problema es aplicarlo a botones con códigos como los que nos dan las diferentes redes sociales, que no son simples etiquetas HTML en las que podamos insertar unonclick. 🙁
Soluciones para Facebook y Twitter:
Aquí hay una documentación oficial por parte de Google y la implementación especial sólo para Facebook y Twitter: ver.
Aquí una demo muy simple de implementación: ver
Entonces guiándome por esta documentación conseguí implementar el seguimiento a los botones de Facebook y Twitter.
Requiero primero el archivo .js – que se puede descargar de aquí – Y luego este script para Facebook, yo lo he puesto en el mismo sitio de la llamada al botón:
<!-- Requiero el script -->
<script src="ga_social_tracking.js"></script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : null, // ENTER your FB App ID
//channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
})
_ga.trackFacebook() //Google Analytics tracking
}
// Load the SDK's source Asynchronously
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]
if (d.getElementById(id)) {return}
js = d.createElement('script') js.id = id js.async = true
js.src = "//connect.facebook.net/es_LA/all" + (debug ? "/debug" : "") + ".js"
ref.parentNode.insertBefore(js, ref)
}(document, /*debug*/ false))
</script>
<!-- Botón fb:like -->
<fb:like layout="button_count" send="false"></fb:like>
Y a continuación el script para Twitter y la llamada al botón
<!-- Load Twitter JS-API asynchronously -->
<script>
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"))
// Wait for the asynchronous resources to load
twttr.ready(function(twttr) {
_ga.trackTwitter() //Google Analytics tracking
})
</script>
<!-- Botón twitter -->
<a href="http://twitter.com/share" data-url="LA_URL" data-via="NOMBRE_USUARIO" data-lang="es" class="twitter-share-button">Tweet</a>
Una vez comprobado que funcionaban, que tenía mi informe “Fuente social e interacción con redes sociales” lleno con interacciones generadas por mi obviamente, ya pensé en soluciones posibles para las otras dos redes que me faltaban implementar Pinterest y LinkedIn.
Solución para LinkedIn
Referencia: LinkedIn Share Plugin.https://developer.linkedin.com/share-plugin
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="IN/Share" data-counter="top" data-onsuccess="trackLinkedIn"></script>
<script>
function trackLinkedIn(targetURL)
{
_gaq.push(['_trackSocial', 'LinkedIn', 'share', targetURL])
}
</script>
Solución para Pinterest
No tiene la exactitud de las anteriores Facebook o Twitter. Consiste en medir todos los clicks que se realicen sobre los contenedores de estos dos botones. Inserto en la etiqueta del contenedor del botón un evento onclick y le paso el anteriormente mencionado _trackPageview, quedando de esta forma:
<span onclick="_gaq.push(['_trackSocial', 'pinterest', 'pin_it', 'LA_URL'])" > Script del botón </span>Se lo inserto en la etiqueta <span> porque es lo que lo rodea al botón y se mantiene sin perjudicar la ejecución del código javaScript del botón. El problema es que mide los clicks sin comprobar que realmente se comparta el contenido después del click. Quedando los botones de la siguiente forma:
<!-- pinterest -->
<script>
(function (d, buildThese) {
var homeScript, newScript, n = buildThese.length, i
for (i = 0 i < n i = i + 1) {
newScript = d.createElement('SCRIPT')
newScript.type = 'text/javascript'
newScript.async = true
newScript.src = buildThese[i]
homeScript = d.getElementsByTagName('SCRIPT')[0]
homeScript.parentNode.insertBefore(newScript, homeScript)
}
}(document, [
'//assets.pinterest.com/js/pinit.js'
])
)
</script>
<span onclick="_gaq.push(['_trackSocial', 'pinterest', 'pin_it', 'LA_URL'])">
<a data-pin-config="beside" href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</span>
NOTA: reemplazar para todos los casos LA_URL (url de la pagina a compartir)NOMBRE_USUARIO (por tu nombre de cuenta en twitter)
Código completo con estilos css
<style>
.comp100{ width:102px}
.comp90{ width:98px padding:2px 0px 2px 4px}
.comp60{ width:60px}
.comppin{ padding:2px 4px 2px }
.fb_edge_widget_with_comment{ display:block float:left padding:2px 6px 0px 4px }
</style>
<!-- Requiero el script -->
<script src="ga_social_tracking.js"></script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : null, // ENTER your FB App ID
//channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
})
_ga.trackFacebook() //Google Analytics tracking
}
// Load the SDK's source Asynchronously
(function(d, debug){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]
if (d.getElementById(id)) {return}
js = d.createElement('script') js.id = id js.async = true
js.src = "//connect.facebook.net/es_LA/all" + (debug ? "/debug" : "") + ".js"
ref.parentNode.insertBefore(js, ref)
}(document, /*debug*/ false))
</script>
<!--Botón fb:like-->
<fb:like layout="button_count" send="false"></fb:like>
<!-- Load Twitter JS-API asynchronously -->
<script>
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"))
// Wait for the asynchronous resources to load
twttr.ready(function(twttr) {
_ga.trackTwitter() //Google Analytics tracking
})
</script>
<!--Botón twitter-->
<span class="compartir comp100">
<a href="http://twitter.com/share" data-url="LA_URL" data-via="NOMBRE_USUARIO" data-lang="es" class="twitter-share-button">Tweet</a>
</span>
<!-- pinterest -->
<script>
(function (d, buildThese) {
var homeScript, newScript, n = buildThese.length, i
for (i = 0 i < n i = i + 1) {
newScript = d.createElement('SCRIPT')
newScript.type = 'text/javascript'
newScript.async = true
newScript.src = buildThese[i]
homeScript = d.getElementsByTagName('SCRIPT')[0]
homeScript.parentNode.insertBefore(newScript, homeScript)
}
}(document, [
'//assets.pinterest.com/js/pinit.js'
])
)
</script>
<span class="compartir comp60 comppin" onclick="_gaq.push(['_trackSocial', 'pinterest', 'pin_it', 'LA_URL'])">
<a data-pin-config="beside" href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</span>
<!-- google -->
<span class="compartir comp60">
<div class="g-plusone" data-size="medium" ></div>
</span>
<script>
window.___gcfg = {lang:"es"}
(function() {
var po = document.createElement("script") po.type = "text/javascript" po.async = true
po.src = "https://apis.google.com/js/plusone.js"
var s = document.getElementsByTagName("script")[0] s.parentNode.insertBefore(po, s)
})()
</script>
<!-- linkedin -->
<span class="compartir comp90">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
<script type="IN/Share" data-counter="top" data-onsuccess="trackLinkedIn"></script>
</span>
<script>
function trackLinkedIn(targetURL)
{
_gaq.push(['_trackSocial', 'LinkedIn', 'share', targetURL])
}
</script>
Ahora toca ver los resultados: recomiendo el vídeo de la ponencia de Pere Rovira: “Midiendo el ROI de nuestras acciones en Redes Sociales” ver.
En la primera parte del video enseña un práctico dashboard de Analytics, en las diapositivas de la presentación está el enlace para descargar ese dashboard.
Comparto para quien le interese mi dashboard social descargar dashboard que es una adaptación del que compartió Pere Rovira.
Nota: el widget de Engagement tiene asociada la métrica de “Consecuciones del objetivo” de un objetivo establecido previamente, y aplico un filtro de visitas desde redes sociales. Establezco un objetivo de 3 o más páginas vistas. Ver imágenes.
¿Y tú ya lo has implementado?
Tienes alguna solución mejor para el seguimiento de los botones de Pinterest
Lo comentamos en las redes.
Muchas gracias, son estos los artículos que realmente ayudan. Me instalaré el dashboard en mi Analytics.
Genial, muy buen aporte. Intentaré aplicarlo a mi web.
Y voy a implementar también el Dashboard para una web que tiene comparte mucho contenido con las redes sociales, a ver que resultados recojo.