Hoje vamos falar de tagueamento das ações do Facebook. Quando falo desse termo, estou me referindo à ações como: curtir e descurtir, criar e excluir comentários, enviar mensagens, entre outras.
Muitas pessoas encontram problemas no tagueamento dos botões curtir e descurtir e pensam ser possível apenas a mensuração dos LikeButtons. Abaixo mostrarei que também é possível fazer o tagueamento de LikeBoxes implementados via HTML5 e XFBML. Para isso, é necessária a criação de um App do Facebook, pois através dele será possível disparar corretamente o edge.create (evento disparado quando o usuário clica no botão curtir) e assim mensurar de forma correta as “curtidas” e “descurtidas”.
Criando um APP no Facebook
Como mencionado acima, sem a criação de um app não é possível medir as interações do LikeBox (via XFBML e HTML5). Portanto, vamos às orientações sobre como criá-lo:
- Logado em uma conta do Facebook, entre em developers.facebook.com/apps
- Clique em “Criar Novo Aplicativo” no canto superior direito. Escolha um nome para o app, clique em “Continuar” e depois coloque o código de segurança e clique em enviar.
- Aparecerá uma página de configuração básica do app. Logo abaixo terá a aba “Selecione o modo como seu aplicativo se integra com Facebook”. Clique em “Website with Facebook Login”, coloque a URL da página em questão e clique em “Salvar alterações” no final da página.
Página utilizada como exemplo: http://www.brandaop.com.br/testes/facebook/
Obs 1: No terceiro ponto é necessário colocar o domínio da página em questão e, dependendo da URL, incluir www e os protocolos http ou https.
Alterações necessárias no HTML da página
É necessário adicionar a chamada do seguinte script ao html:
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ’123456789′, // LEIA OBS 1
channelUrl : ‘//www.dominio.com.br/testes/facebook/channel.html’, // LEIA OBS 2
status : true, // Verifica status de login
cookie : true, // Habilita os cookies para permitir que o servidor acesse a sessão
xfbml : true // Análise XFBML
});
//Código de inicialização adicional aqui (Eventos, etc.)
};
// Carregamento do SDK de forma assíncrona
(function(d){
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/en_US/all.js”;
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Obs 2: É de extrema importância que o appId esteja de acordo com o app que foi criado (caso contrário, os eventos não irão disparar).
Para saber o Id de um App, vá em https://developers.facebook.com/apps > Selecione o App criado > Olhe a aba configurações > Resumo > AppId/Api Key.
Obs 3: O channel.html serve para resolver alguns problemas de “cross domains” para alguns browsers e deixa a inicialização do plugin muito mais rápida. É necessário que esse HTML esteja no mesmo domínio do site. O conteúdo desse .html pode ser resumido a uma linha:
<script src=”//connect.facebook.net/en_US/all.js”></script>
Adicionando eventos
Para mensurarmos as interações dos usuários, iremos adicionar eventos ao script mostrado anteriormente na parte “//Código de inicialização adicional aqui (eventos,etc.)”. Para facilitar a manipulação desses eventos e não ser necessária a alteração do html, adicione apenas a criação da div ao html “<div id=”fb-root”></div>” e coloque todo o script em um js separado, exemplo: “tagueamento.js”.
Método Track Social do Google Anlytics
O método Track Social envia as informações das interações sociais feitas pelo usuário ao Google Analytics. Ele deve ser chamado logo após o usuário fazer uma interação social no site.
A forma correta de chamar esse método é:
_gaq.push([‘_trackSocial’, network, socialAction, opt_target, opt_pagePath]);
- Network: Rede social que o usuário fez a interação
Ex: Facebook
Parâmetro obrigatório - socialAction: Tipo de interação feita pelo usuário
Ex: Curtir
Parâmetro obrigatório - opt_target: Página aonde o usuário fez a interação
Ex: Página de contato
Parâmetro opcional - opt_pagepth: Pathname da página onde o usuário fez a interação
Ex: Se o usuário curtiu a página www.brandaop.com.br/testes/facebook
deverá ser passado no opt_pagepath: /testes/facebook
Se preferir, passe apenas como parâmetro location.pathname.
Parâmetro opcional
Abaixo segue uma lista de eventos e seus respectivos códigos para implementação e mensuração dos clicks.
Em cada um dos eventos foi adicionado o método _trackSocial do Google Analytics. Ao final da lista existe um print screen que demonstra o relatório gerado.
Curtir:
FB.Event.subscribe(‘edge.create’, function(response) {
alert(“Você acabou de curtir a página! :) “);
_gaq.push(['_trackSocial', 'Facebook', 'Curtir', location.href]);
});
//Alert = Dispara uma mensagem para o usuário
//FB.Event.subscribe = Atribui um manipulador a um evento e retorna um callback quando o evento dispara.
//Response = retorna a url da página em questão
//edge.create = dispara quando o usuário clica no botão “curtir” de alguma página
Descurtir:
FB.Event.subscribe(‘edge.remove’, function(response) {
alert(“Você acabou de descurtir a página :( “);
_gaq.push(['_trackSocial', 'Facebook', 'Descurtir', location.href]);
});
//edge.remove = dispara quando o usuário clica no botão “descurtir” de alguma página
Enviar mensagem:
FB.Event.subscribe(‘message.send’, function(response) {
alert(“Você acabou de mandar uma mensagem :) !”);
_gaq.push(['_trackSocial', 'Facebook', 'Mensagem', location.href]);
});
//message.send = dispara quando o usuário envia uma mensagem
Criar comentário:
FB.Event.subscribe(‘comment.create’, function(response) {
alert(“Você acabou de criar um comentário :) !”);
_gaq.push(['_trackSocial', 'Facebook', 'Criar Comentario', location.href]);
});
// comment.create = dispara quando o usuário cria um comentário
Excluir comentário:
FB.Event.subscribe(‘comment.remove’, function(response) {
alert(“Você acabou de excluir um comentário :( !”);
_gaq.push(['_trackSocial', 'Facebook', 'Excluir Comentario', location.href]);
});
//comment.remove = dispara quando o usuário exclui um comentário
Obs 4: Lembre-se de retirar os alertas na hora da implementação.
Segue o relatório de Track Social gerado pelo Google Analytics a partir das interações do usuário:
Para saber outros tipos de interações do Facebook que são possíveis de serem mensuradas, confira esta página.
LikeBox via iFrame
Quando implementamos um LikeBox via iFrame, estamos fazendo referência a uma página que está em outro domínio (facebook.com), impossibilitando o tagueamento do mesmo.
Curiosidade
O Google implementou a pouco tempo o _trackSocial automático para os clicks de g +1 (Google Plus), ou seja, qualquer site que tenha o botão G+1 e faça referência corretamente à API do Google em seu código script, terá os dados automaticamente nos relatórios de Tracking Social do Google Analytics.
Bom pessoal, espero que tenham gostado do artigo. Teremos novas postagens em breve.
Abraços!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?