Facebook CAPI jednoduše

Facebook CAPI může opravdu extrémně pomoct s konverzemi nejen prodeje, ale i se získáváním kontaktů.. např. na webinář.

628f66eddf4db51f48df1fbe How do Conversions API and FB pixel work v Facebook CAPI jednoduše

Dávám k dispozici techničtějším typům velice jednoduché nastavení skrz vlastní php script. Díky javascriptu spuštěnému např. při vložení zboží do košíku nebo nákupu, můžete poslat informaci nejen skrz prohlížeč, ale i skrz server (tzv. server-side).

O deduplikaci se také postará uvedený javascript.

Obsah článku

Postup

  1. Nejdříve je nutné nahrát váš upravený php kód na vaši doménu skrz FTP. Např. do podadresáře /sync. Odkaz na něj pak bude https://www.vasedomena.cz/sync/capi.php
  2. Pro jednotlivé události spustíte speciální kód na standardní konverze (více o konverzích zde)
    • pro eshopy minimálně:
      • ViewContent
      • AddToCart
      • InitiateCheckout
      • Purchase
    • pro weby, které získávají kontakty
      • CompleteRegistration
  3. Otestujete a máte to 😃

PHP script

Jde o jednoduchý PHP script, který převezme hodnotu zaslanou javascriptem a předá skrz API Facebooku.

Červeně označené věci si změňte podle vašeho nastavení.

<?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);
?>

Javascript

Tyto scripty se spouští v případě udělané konverze. Použil jsem to i na obyčejné zobrazení stránky (PageView), ale není to nutné.

Script počítá i s tím, pokud byste věděli email návštěvníka stránky (nemusí to být jen v rámci objednávky 😃). V rámci našeho Klubu NDigital je spousta vychytávek, jak email posílat nejen do Facebooku a zpřesnit tak měření o cca 20%.

Ukázka scriptu s deduplikací v případě dokončení objednávky (Purchase). Samozřejmě musíte červené hodnoty dynamicky měnit… já to dělám v Google Tag Manageru a díky datalayer, ale můžete to měnit i např. ve vašem eshopu doplněním proměnných.

Pro deduplikaci jsem použil id transakce: {{ecommerce.transaction_id}}. Pokud máte email {{ecommerce.email}}, přidejte ho tam.

<script>
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,
    "em": {{SHA256}}({{ecommerce.email}}), // SHA256 email
    "event_id": {{ecommerce.transaction_id}}
  };
  var options = {
    method: "POST",
    headers: headers,
    mode: "cors",
    body: JSON.stringify(body)
  };
  fetch("https://www.vasedomena.cz/sync/capi.php", options);
}

var custom_data = {
  value: {{TransactionTotalPrice}},
  content_ids: {{transactionProductsId}},
  currency: {{currency}},
  content_type: 'product',
}
CAPI ('Purchase', custom_data);

if (typeof fbq == 'function') {
  fbq('track', 'Purchase', {currency: {{currency}}, content_type: 'product',value: {{TransactionTotalPrice}}, content_ids: {{transactionProductsId}}},{eventID: {{ecommerce.transaction_id}}});
}
</script>

..a tady např. vložení do košíku (AddToCart). Deduplikace je zde jednoduchá proměnná customEventID, který vznikl ve spojení času a náhodného čísla {{Random Number}}:

<script>
var customEventID = 'addtocart.'+Date.now()+'.'+{{Random Number}};

function CAPI(event, eventData) {
  .. stejné jako v Purchase ..
}

var custom_data = {
  .. stejné jako v Purchase .. 
}
CAPI ('AddToCart', custom_data);

if (typeof fbq == 'function') {
   fbq('track', 'AddToCart', custom_data, {eventID: customEventID});
}
</script>

… to samé pak uděláte pro ViewContent:

<script>
var customEventID = 'viewcontent.'+Date.now()+'.'+{{Random Number}};

function CAPI(event, eventData) {
  .. stejné jako v Purchase ..
}

var custom_data = {
  .. stejné jako v Purchase .. 
}
CAPI ('ViewContent', custom_data);

if (typeof fbq == 'function') {
   fbq('track', 'ViewContent', custom_data, {eventID: customEventID});
}
</script>

a další je pro InitialCheckout

<script>
var customEventID = 'initialcheckout.'+Date.now()+'.'+{{Random Number}};

function CAPI(event, eventData) {
  .. stejné jako v Purchase ..
}

var custom_data = {
  .. stejné jako v Purchase .. 
}
CAPI ('InitialCheckout', custom_data);

if (typeof fbq == 'function') {
   fbq('track', 'InitialCheckout', custom_data, {eventID: customEventID});
}
</script>

Jde to samozřejmě dělat i pro PageView, ale bacha na výkon webhostingu nebo serveru. Není zde už proměnná customdata.

Zde ukazuji i možnost posílat to „obrázkem“ (musíte změnit ID_PIXEL)

<script>
var customEventID = 'pageview.'+Date.now()+'.'+{{Random Number}};

function CAPI(event) {
  .. stejné jako v Purchase, pouze bez customdata proměnné ..
}

CAPI ('PageView');

if (typeof fbq == 'function') {
   fbq('track', 'PageView',NULL, {eventID: customEventID});
}
</script>
<img src="https://www.facebook.com/tr?id=ID_PIXEL&ev=PageView" height="1" width="1" style="display:none"/>

Závěr

Určitě vás napadne i spousta dalších možností, jak zlepšit měření… namátkou jsou to:

  • Google Analytics 4
  • Google Ads
  • Activecampaign
    apod…

Mám pro vás dobrou zprávu: Extrémně to pomáhá nejen s analytikou, ale i s lepší efektivitou reklamních nástrojů.

Doporučuji se registrovat do našeho Klubu NDigital, kde to probíráme a řešíme v rámci tipů a od dubna 2023 plánuji i speciální sekci: Server-side měření.

Napsat komentář