Interações em redes sociais – acompanhamento da Web (ga.js)

Neste documento, descrevemos como usar o Google Analytics para conferir métricas de interação em redes que não são do Google, como Facebook e Twitter. Use este documento para configurar o Google Analytics para seus botões de compartilhamento em redes sociais se você for proprietário de um site, desenvolvedor de plug-in de gerenciamento de conteúdo ou operador de rede social que quer fornecer relatórios automáticos de interação em redes sociais para os usuários dos seus botões de compartilhamento.

Introdução

Por padrão, o Google Analytics fornece relatórios integrados para o botão +1. Isso significa que, se você implementou a ga.js e um botão +1 na mesma página, todas as interações sociais +1 serão informadas automaticamente. Para mais informações sobre a análise de +1s, incluindo dicas de solução de problemas, consulte Sobre a análise de redes sociais na Central de Ajuda.

Para receber análises e relatórios de interações em redes sociais de outras redes, como Facebook ou Twitter, você precisa integrar o Google Analytics a cada botão de rede. Com as Análises do plug-in de redes sociais, as interações registradas variam de um "Curtir" do Facebook a um "Tweet" do Twitter. Enquanto o acompanhamento de eventos também pode acompanhar interações gerais de conteúdo, a Análise de redes sociais fornece uma estrutura consistente para registrar interações em redes sociais. Isso, por sua vez, fornece aos usuários de relatórios do Google Analytics um conjunto consistente de relatórios para comparar interações de redes sociais em várias redes.

Para ver um exemplo funcional de como integrar o Google Analytics aos botões do Facebook e do Twitter, confira o exemplo de código da análise de redes sociais.

Como configurar a Análise de redes sociais

Para configurar o acompanhamento de interações em redes sociais, é necessário usar o método _trackSocial, que envia dados de interações em redes sociais para o Google Analytics. O método precisa ser chamado quando um usuário conclui uma interação em redes sociais. Cada rede social usa um mecanismo diferente para determinar quando ocorre a interação em redes sociais, e isso normalmente requer integração com a API desse botão.

Como os detalhes específicos para a integração da Análise de redes sociais variam de acordo com a rede social, o restante deste guia fornece práticas recomendadas gerais sobre como configurar as Métricas do plug-in de redes sociais para cada uma dessas redes. Recomendamos que você verifique a documentação do desenvolvedor de cada rede para descobrir a implementação específica da rede.

Veja uma descrição do método _trackSocial:

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

em que os parâmetros representam:

  • network

    Obrigatório. Uma string que representa a rede social que está sendo acompanhada (por exemplo, Facebook, Twitter, LinkedIn).

  • socialAction

    Obrigatório. Uma string que representa a atividade em redes sociais que está sendo acompanhada (por exemplo, "Curtir", "Compartilhar", "Tweet").

  • opt_target

    Opcional. String que representa o URL (ou recurso) que recebe a ação. Por exemplo, se um usuário clicar no botão Gostei em uma página de um site, o opt_target poderá ser definido como o título da página ou um ID usado para identificar a página em um sistema de gerenciamento de conteúdo. Em muitos casos, a página que você usa para Gostei é a mesma em que você está. Portanto, se esse parâmetro for undefined ou for omitido, o código de acompanhamento usará document.location.href por padrão.

  • opt_pagePath

    Opcional. String que representa a página por caminho (incluindo parâmetros) em que a ação ocorreu. Por exemplo, se você clicar em um botão Like em https://developers.google.com/analytics/devguides/, opt_pagePath precisará ser definido como /analytics/devguides. Quase sempre, o caminho da página é a origem da atividade em redes sociais. Portanto, se o parâmetro for undefined ou omitido, o padrão do código de acompanhamento será location.pathname e location.search. Geralmente, você só precisa definir isso se estiver acompanhando exibições virtuais de página modificando o parâmetro opcional de caminho da página com o método _trackPageview do Google Analytics.

Ações do Facebook

De acordo com o SDK para JavaScript do Facebook, a maneira mais simples de configurar um botão Curtir na sua página é usar o seguinte código:

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

Marcações com "Gostei"

Para registrar as curtidas com o Google Analytics, inscreva-se no evento edge.create do Facebook e crie uma função de callback para executar o código de acompanhamento do Google Analytics.

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

Quando um usuário clica na opção Gostei da sua página, a função de callback é executada e recebe o URL do recurso com marcação "gostei". O recurso é transmitido como um valor para o método _trackSocial para que o Google Analytics gere relatórios sobre a rede, a ação e o URL que estão marcados como "gostei".

Não gostei

As APIs do Facebook também permitem que você se inscreva em outros eventos interessantes, como marcações "não gostei".

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

Compartilhamentos

Você também pode se inscrever para compartilhar informações.

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

Tweets do Twitter

De acordo com a documentação do botão Tweet e os eventos JavaScript de intents da Web, para implementar um botão do Twitter na sua página e detectar interações do usuário, o código a seguir precisa ser usado:

<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>

Para acompanhar os eventos do botão do Tweet com o Google Analytics, você precisa usar os eventos JavaScript de Web Intents do Twitter e vincular uma função de callback ao Intent Event. É importante unir as vinculações de eventos em uma função de callback para garantir que tudo seja carregado antes de vincular eventos.

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 um usuário envia um tweet, a função de callback recebe um objeto que geralmente pode ser usado para acessar o URL do recurso que está sendo enviado pelo tweet. Depois que o código JavaScript do Twitter é carregado, ele transforma o link do tweet anotado em um iframe, e o URL que está sendo postado no tweet é codificado e anexado como um parâmetro de consulta ao URL do iframe. O objeto do evento enviado ao callback tem uma referência a esse iframe, e podemos usá-lo para descobrir o URL do recurso que está sendo enviado pelo tweet.

A função de callback acima garante que a referência do iframe seja realmente um iframe e, em seguida, tenta extrair o recurso que está sendo enviado em um tweet analisando o parâmetro de consulta url.

Veja um exemplo de função para extrair um parâmetro de consulta de um 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;
}

O parâmetro será retornado se estiver localizado na string de consulta. Se nenhum parâmetro for localizado, a função retornará undefined, que é transmitido ao método _trackSocial, resultando no comportamento padrão do método.

Práticas recomendadas para integração

Muitos sites adicionam botões de redes sociais usando plug-ins de gerenciamento de conteúdo. Se você é o autor desses plug-ins, recomendamos integrar o Analytics do plug-in de redes sociais para registrar automaticamente essas interações. Da mesma forma, se você é desenvolvedor em uma rede social, também pode facilitar o acompanhamento das suas interações de redes sociais no Google Analytics pelos usuários. Para isso, faça a integração com a Análise de redes sociais.

Para ajudar você, esta seção descreve as práticas recomendadas para integrar as Análises do plug-in de redes sociais para que seu produto ou CMS acompanhe automaticamente as interações em redes sociais. Se você quiser ver um exemplo funcional de todas essas práticas recomendadas, confira o exemplo de código das Estatísticas do plug-in de redes sociais.

Como instanciar e usar a fila _gaq

A versão mais recente do código de acompanhamento do Google Analytics pode ser carregada de forma síncrona e assíncrona. Para permitir que os desenvolvedores chamem métodos que ainda não foram carregados, o Google Analytics oferece uma fila de comandos _gaq, na qual os métodos de acompanhamento podem ser enviados por _gaq.push();.

Depois que o código de acompanhamento é carregado, todos os comandos na fila são executados. Ao integrar o código de acompanhamento do JavaScript do Google Analytics ao seu plug-in ou produto, verifique sempre se essa fila de comandos está instanciada e se a integração envia o comando _trackSocial para essa matriz.

var _gaq = _gaq || [];

Isso oferece uma garantia razoável de que o método será chamado, independentemente de a página do site de destino usar o snippet de código de acompanhamento tradicional ou assíncrono.

Configurações do usuário

Se você estiver desenvolvendo um plug-in que integra as Análises do plug-in de redes sociais, considere fornecer as seguintes opções que permitem que os usuários definam quando usar o plug-in:

Definição do parâmetro opcional caminho da página: o parâmetro final do método _trackSocial substitui o URL atual em que ocorreu uma interação em redes sociais. O objetivo final é fazer com que os mesmos URLs sejam informados entre o acompanhamento de páginas e as Métricas do plug-in de redes sociais. Como alguns usuários podem substituir o URL de página padrão que está sendo acompanhado com o acompanhamento de visualizações de página, eles também precisam de uma forma de substituir o URL na Análise do plug-in de redes sociais para conseguir relatórios consistentes.

Veja um exemplo de como permitir que os usuários definam essas opções e de como seu código precisa responder a elas.

// 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) {}
}

No exemplo acima, se a função trackFacebook for chamada com o parâmetro opt_pagePath definido, o valor padrão do caminho da página será substituído pelo caminho de fornecimento do parâmetro. Caso contrário, o valor desse parâmetro será definido como undefined. O código de acompanhamento do Analytics vai usar o valor padrão para o parâmetro indefinido.

Observação: neste exemplo, algumas verificações também foram adicionadas para garantir que não ocorram erros de script se a API do Facebook não for carregada. Como desenvolvedor responsável, você precisa lidar adequadamente com os erros.

Vários trackers

Alguns usuários do Google Analytics nomeiam o objeto de acompanhamento para distinguir vários rastreadores na mesma página. Não incentivamos o uso de vários rastreadores na mesma página do site, mas é recomendável gerenciar vários deles.

Veja a seguir um exemplo de como iterar e chamar o método _trackSocial para cada objeto do rastreador. Ele usa o método _getTrackers, que retorna uma matriz de todos os objetos do rastreador na página.

Neste exemplo, quando o evento do Facebook é acionado, o método _trackSocial de cada objeto do rastreador é enviado à fila de comandos do 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) {}
}