Facebook / Meta

FB konfiguruju jednou za čas a tak je radost zjišťovat a hledat, co všechno nastavit. Proto část věcí dokumentuju, ať ušetřím příště čas na hledání.

Co se týče nastavení FB, tak je vhodné nastavit jak pixel, CAPI.

Meta pixel je základním nástrojem pro sledování konverzí na webových stránkách. Používá soubory cookie k odesílání informací o uživatelích a jejich interakcích s vašimi webovými stránkami na servery společnosti Meta.

Conversions API je server-to-server nástroj, který umožňuje odesílání konverzních dat přímo z vašich systémů na servery společnosti Meta. Tento způsob odesílání dat je přesnější a spolehlivější než použití souborů cookie, protože není ovlivněn blokováním souborů cookie nebo jinými problémy s prohlížečem.

Výhody nastavení obou možností:

• Zvýšená přesnost a spolehlivost konverzních dat: Conversions API poskytuje přesnější a spolehlivější data o konverzích než Meta pixel.
• Zvýšená kontrola nad daty: Conversions API vám umožňuje kontrolovat, jaké data jsou sdílena s Facebookem.
• Zvýšená viditelnost funnelu: Conversions API poskytuje širší pohled na funnel konverzí než Meta pixel.

Nevýhody nastavení obou možností:

• Dvojí práce: Nastavení a správa obou možností vyžaduje více práce.
• Zvýšená spotřeba zdrojů: Conversions API může spotřebovávat více zdrojů než Meta pixel.

Nastavení pixelu se dělá v Meta Business managerovi ve menu Zdroje dat. Tam se vytvoří jako zdroj dat nový Pixel a vloží se pomocí Tagmanagera do webových stránek. Tím je automaticky zajištěno generování události PageView v menu Zdroj Dat.

Meta má další standardizované události, které lze přidat. Například při vygenerování formuláře budu chtít vygenerovat událost Lead.

Pomocí Tagmanagera stačí jednoduše vložit vlastí značku typu Vlastní HTML a podle návodu v ní bude:

<script>
  fbq('track', 'Lead');
</script>

Je dobré si projít všechny standardnizované události, protože jsou často používané.

Po odeslání události se mi v událostech zobrazuje jako Potenciální zákazník.

Pak jsou tu vlastí události - nestandardizované, které taky mohu chtít posílat. To se nastavuje v menu Vlastní konverze. Nejprve si nastavím v Tagmanagerovi novou značku typu HTML a do ní dám vlastí konverzi.

<script>
  fbq('trackCustom', 'InterestLevel1', {content_name: 'interest_level1'});
</script>

Tím si vytvořím vlastní událost InterestLevel1 a její parametr bude content_name s hodnotou interest_level1. Nastavím si tímto způsobem.

Když se pak podívám do menu Zdroje dat, tak je vidět, že už tam mám i vlastí událost InterestLevel1.

Při posílání události s hodnotou jsem vycházel z tohoto návodu.

Při implementaci CAPI jsem se inspiroval a čerpal z článku Facebook CAPI jednoduše.

V článku je také kód jak pro serverovou část, tak pro tagmanagera. Kód pro Tagmanagera zajišťuje také deduplikaci.

Na server (webové stránky) je potřeba nahrát PHP script. Daniel uvádí, že skript uvádí jako příklad cestu: https://www.vasedomena.cz/sync/capi.php. Tady je samotný PHP script.

<?php
header("Access-Control-Allow-Origin: https://www.vasedomena.cz");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: *");
 
// Check POST data
$post_json = file_get_contents('php://input');
if (!$post_json) die(); // The post data required
 
// Setup
$fb_access_token = 'VAS_TOKEN_Z_FACEBOOKU'; 
$fb_pixel_id = 'VAS_FACEBOOK_PIXEL';
$fb_test_event_code = '';
 
$timestamp = time();
$post_array = array();
$data = array();
$error_send = FALSE;
 
$post_array = json_decode($post_json, true);
if (!$post_array['event']) die(); // The event name required
 
// IP address
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
  $ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
  $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
  $ip = $_SERVER['REMOTE_ADDR'];
}
 
$ch = curl_init();
 
$data['event_name'] = &$post_array['event'];
$data['event_time'] = $timestamp;
if ($post_array['event_id']) {
  $data['event_id'] = &$post_array['event_id'];
}
$data['event_source_url'] = &$post_array['url'];
$data['action_source'] = "website";
if ($post_array['event_data']) {
  $data['custom_data'] = &$post_array['event_data'];
}
$data['user_data']['client_ip_address'] = $ip; // ip address
$data['user_data']['client_user_agent'] = &$post_array['user_agent'];
$data['user_data']['fbp'] = &$post_array['fbp'];
$data['user_data']['fbc'] = &$post_array['fbclid'];
if ($post_array['em']) {
  $data['user_data']['em'] = &$post_array['em']; // email
}
 
$fields = "{'data':'[".json_encode($data)."]'";
if ($fb_test_event_code) $fields .= ",'test_event_code':'".$fb_test_event_code."'";
$fields .= "}";
 
curl_setopt_array($ch, array(
CURLOPT_URL => 'https://graph.facebook.com/v10.0/'.$fb_pixel_id.'/events?access_token='.$fb_access_token,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'POST',
CURLOPT_POSTFIELDS => $fields,
CURLOPT_HTTPHEADER => array(
'Content-Type: application/json'
),
));
 
$result = curl_exec($ch);
curl_close ($ch);
?>

V rámci JavaScriptu napoví dokumentace k Conversion API.

Takto by vypadal kód řešící deduplikaci v rámci mojí custom události.

<script>
 
  var randomNumber = Math.floor(Math.random() * 100000);
  var customEventID = 'interestValue.' + Date.now() + "." + randomNumber; 
 
  function CAPI(event, eventData) {
 
  var fbp = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbp=');
  }).map(function (c) {
    return c.split('_fbp=')[1];
  });
 
  var fbc = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbc=');
  }).map(function (c) {
    return c.split('_fbc=')[1];
  });
  fbp = fbp.length && fbp[0] || null;
  fbc = fbc.length && fbc[0] || null;
  var headers = new Headers();
  headers.append("Content-Type", "application/json");
  var body = {
    "event": event,
    "event_data": eventData,
    "fbp": fbp,
    "fbclid": fbc,
    "user_agent": navigator.userAgent,
    "url": window.location.origin + window.location.pathname,
    "event_id": customEventID
  };
  var options = {
    method: "POST",
    headers: headers,
    mode: "cors",
    body: JSON.stringify(body)
  };
  fetch("https://www.vasedomena.cz/sync/capi.php", options);
}
 
  var custom_data = {
    content_name: 'interest_value',
    value: parseFloat('{{DLV - interest value}}')
  }
 
 
  CAPI ('InterestValue', custom_data);
 
 
  if (typeof fbq == 'function') {  
    fbq('trackCustom', 'InterestValue', custom_data, {eventID: customEventID} );
  }
 
</script>

Pro otestování toho, zda se posílají události správně do Meta jsem na serveru vytvořil stránku test.html. Do ní jsem nahrál skript z tagmanagera a spustil v prohlížeči.

PHP skript jsem ke konci upravil tak, aby se kominikace logovala:

file_put_contents("log.txt", "Data sent to FB:\n".json_encode($data, JSON_PRETTY_PRINT)."\n\n", FILE_APPEND);
 
$result = curl_exec($ch);
if ($result === FALSE) {
    file_put_contents("log.txt", "cURL error: " . curl_error($ch) . "\n\n", FILE_APPEND);
} else {
    file_put_contents("log.txt", "Response from FB:\n".$result."\n\n", FILE_APPEND);
}
 
curl_close ($ch);

Když jsem viděl, že všechno probíhá v pořádku, vrátil jsem kód do původního stavu bez logování.

Ve zdrojích dat na Meta bylo po čase vidět, že jsou události v pořádku přijímány už i ze serveru.

Pokud jsem dříve vložil událost poslání leadu, nyní musím skript editovat. S posláním události musí jít zároveň volání CAPI. Tady je ukázka skriptu, který vložím do Tagmanagera.

<script>
 
  var randomNumber = Math.floor(Math.random() * 100000);
  var customEventID = 'lead.' + Date.now() + "." + randomNumber; 
 
  function CAPI(event, eventData) {
 
  var fbp = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbp=');
  }).map(function (c) {
    return c.split('_fbp=')[1];
  });
 
  var fbc = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbc=');
  }).map(function (c) {
    return c.split('_fbc=')[1];
  });
  fbp = fbp.length && fbp[0] || null;
  fbc = fbc.length && fbc[0] || null;
  var headers = new Headers();
  headers.append("Content-Type", "application/json");
  var body = {
    "event": event,
    "event_data": eventData,
    "fbp": fbp,
    "fbclid": fbc,
    "user_agent": navigator.userAgent,
    "url": window.location.origin + window.location.pathname,
    "event_id": customEventID
  };
  var options = {
    method: "POST",
    headers: headers,
    mode: "cors",
    body: JSON.stringify(body)
  };
  fetch("https://www.vasedomena.cz/sync/capi.php", options);
}
 
 
 
  var custom_data = {}
 
 
  CAPI ('Lead', custom_data);
 
  if (typeof fbq == 'function') {  
    fbq('track', 'Lead', custom_data, {eventID: customEventID});
  }
 
 
</script>

Jednou z událostí, kterou mohu posílat přes CAPI je i pageView. Pozor ovšem na jedn uvěc. Událost pageView se často posílá automaticky pod instalací kódu Pixelu. Proto se musí pixel zkontrolovat a pokud je tam zadané posílání pageView, tak se musí odstranit. Jinak by nedošlo ke správnému odstranění duplicity záznamů.

Tady je pak příklad posílání pageView v Tagmanageru přes CAPI a přes pixel:

<script>
 
  var randomNumber = Math.floor(Math.random() * 100000);
  var customEventID = 'pageView.' + Date.now() + "." + randomNumber; 
 
  function CAPI(event, eventData) {
 
  var fbp = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbp=');
  }).map(function (c) {
    return c.split('_fbp=')[1];
  });
 
  var fbc = document.cookie.split(';').filter(function (c) {
    return c.includes('_fbc=');
  }).map(function (c) {
    return c.split('_fbc=')[1];
  });
  fbp = fbp.length && fbp[0] || null;
  fbc = fbc.length && fbc[0] || null;
  var headers = new Headers();
  headers.append("Content-Type", "application/json");
  var body = {
    "event": event,
    "event_data": eventData,
    "fbp": fbp,
    "fbclid": fbc,
    "user_agent": navigator.userAgent,
    "url": window.location.origin + window.location.pathname,
    "event_id": customEventID
  };
  var options = {
    method: "POST",
    headers: headers,
    mode: "cors",
    body: JSON.stringify(body)
  };
  fetch("https://www.vasedomena.cz/sync/capi.php", options);
}
 
 
 
  var custom_data = {}
 
 
  CAPI ('PageView', custom_data);
 
  if (typeof fbq == 'function') {  
    fbq('track', 'PageView', custom_data, {eventID: customEventID});
  }
 
 
</script>