Měření Facebook widgetů

Rozšířené měření Google Analytics.

Co je měřeno

Měřeny jsou akce:

  • edge.create - kliknutí na tlačítko "Líbí se mi", "Doporučit" nebo "Sdílet"
  • edge.remove -zrušení příznaku "Líbí se mi", "Doporučit" nebo "Sdílet"
  • comment.create - přidání komentáře
  • comment.remove - odebrání komentáře
  • auth.login - přihlášení na Facebook
  • auth.logout - odhlášení z Facebooku
Lidé, kteří kliknuli na tlačítko "Líbí se mi", "Doporučit" nebo "Sdílet" jsou navíc označováni jako "Facebook liker" pomocí proměnné custom var (slot 5).

Jak nastavit měření

Facebook lze k 1. 1. 2012 integrovat do stránek ve 3 různých formátech - XFBML, HTML5 a iFrame. Skript aktuálně podporuje pouze integraci pomocí XFBML a HTML5. Podpora iFrame není technicky možná.

Pro integraci je třeba:

  1. Nastavit měření pomocí GA skriptu - můžete použít třeba Google Analytics konfigurátor,
  2. vytvořit FB aplikaci,
  3. vložit kód FB boxu do webu,
  4. vložit a upravit kód pro nahrání knihovny FB - přidat řádek _gas.init(FB).

Vytvoření facebook aplikace

Pro měření aplikace je třeba vytvořit novou Facebook aplikaci. Na stránce https://developers.facebook.com/apps je třeba kliknout na "Přidat aplikaci".

Vytvoreni Facebook aplikace

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.

Konfigurace of Facebook aplikace

Příklad je převzat z www.sabatka.net.

Vložení Facebook boxu do stránky

Kód můžete získat na webu Facebooku pro vývojáře.

Kód tlačítka pak může vypadat například takto:

<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Sledujte i další pokyny pro vložní boxu do stránky, které se zobrazí po stisknutí "Get code". Upozorňujeme, že pokud používáte pro vkládání formát XFBML, je třeba přidat FB namespace do tagu HTML. Kód pak vypadá takto.

<html xmlns:fb="http://ogp.me/ns/fb#">

Vložení a úprava kódu pro nahrání knihovny FB

Pro nastavení měření stačí pouze zavolat metodu _gas.init( FB ), kde FB je vytvořený objekt javascriptové knihovny Facebook. Asynchronní volání pak může vypadat takto:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    _gas.init(FB);
};
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/cs_CZ/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Zobrazení v Google Analytics

Veškeré akce jsou odesílány pomocí metody _trackSocial. V Google Analytics lze zobrazit změřené hodnoty v panelu "Standardní přehledy" -> "Cílové publikum" -> "Sociální".

Vyzkoušení

Pro zobrazení odeslaných parametrů lze použít plugin GA debug pro Chrome. Můžete také sdílet náš web a kliknout na tlačítko "Doporučit" v pravém sloupci.