Měření Facebook akcí na vašem webu

11. Září 2011
  •  
  •  

Značná část webů se snaží být sociální. Aby se nestal asociál ze mě, musím tyto sociální weby měřit. Abych mohl měřit aktivity Facebooku, musím Facebooku rozumět. A to je skoro jako rozumět ženě...

Co budeme potřebovat

Budeme potřebovat vytvořenou fun page nejskvělejší osoby, zvířete či věci, kterou budeme na nejskvělejší a nejsociálnější síti propagovat. A dál Facebook aplikaci. Kde to vzít?

Facebook fun page

I když je to poněkud nepříjemné, je třeba na několik minut přetrhat vazby s okolním světem a z Facebooku se odhlásit. Místo přihlášení je třeba kliknout na odkaz "Vytvořit stránku" pro skupinu, společnost apod. Přidávám ještě printscreen - sleduj červený kurzor...

Vytvoření Facebook fun page

Po vyplnění údajů a odsouhlasení s podmínkami, které stejně nikdo nečetl, dostanete možnost fun page propojit s osobním účtem. Můžete buď vytvořit nový, nebo propojit s existujícím - jak je komu libo.

Propojení FB aplikace s existujícím účtem

A je to. Nastavení fun page, nahrání obrázků a propagace k celkovému zamilování všemi uživateli sítě už je pak na Vás.

Vytvoření aplikace

Nyní se už se z Facebooku odhlašovat nemusíte, stačí přejít na http://developers.facebook.com/ a zde v menu kliknout na aplikace a kliknout na založit aplikaci.

Aplikce na developers.facebook.com

Důležitý údaj je "ID aplikace / API klíč". Je to stejné číslo, jako je uváděno v URL v detailu aplikace. V "App Domain" je nutné vyplnit doménu vaší aplikace a v záložce website URL vaší aplikace. URL nemusí nutně existovat, musí ale být na doméně uvedené v "App Domain". Konfigurace je uvedena na obrázku.

Nastavení Facebook aplikace

Hodina pravdy

A nyní přichází nejzajímavější část - implementace. Pokud používáte pouze like us button, vystačíte si s dokumentací a metodou FB.Event.subscribe. Pokud používáte like us box, je nutné nejprve vyrenderovat element a teprve pak registrovat funkci pro zpracování události. Kód pak vypadá takto:\n

<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
  <meta charset="utf-8" />
  <title>Facebook Like Button</title>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
    FB.init({appId: '{FACEBOOK-APPLICATION-API-KEY}', status: true, cookie: true,xfbml: true});
    FB.Event.subscribe("xfbml.render", function() {
      FB.Event.subscribe("edge.create", function(targetUrl) {
        console.log(''TADY JE KÓD PRO ZPRACOVÁNÍ UDÁLOSTI'');
      });
      FB.Event.subscribe("edge.remove", function(targetUrl) {
        console.log(''TADY JE KÓD PRO ZPRACOVÁNÍ UDÁLOSTI'');
      });
    });
  };
  (function() {
    var e = document.createElement(''script''); e.async = true;
    e.src = document.location.protocol +
      ''//connect.facebook.net/en_US/all.js'';
    document.getElementById(''fb-root'').appendChild(e);
  }());
</script>
<fb:like-box href="{FACEBOOK-PAGE-URL}"></fb:like-box>
</body>
</html>

Kód byl převzat z webu stackoverflow.com.

Na co dát pozor

  • Definice namespace fb v tagu html - pokud není definován, nemusí trackování fungovat v IE.
  • Registrace listeneru události až po události xfbml.render - pak nejsou generovány žádné události.

Track social Google Analytics

Zbývá jen dodat, že pokud používáte Google Analytics, nepoužívejte k trackování události. V červenci 2011 byly analytics rozšířeny o měření sociálních aplikací.

Dále bych upozornil, že Facebook API se rádo mění (asi jako schodiště v Bradavicích). Když by tento postup nefungoval, je možné, že API bylo již změněno.

Přidat komentář