Facebook / Meta [Wiki]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Facebook / Meta ======


===== Nastavení Pixelu, CAPI a konverzních akcí =====

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

Nastavení pixelu se dělá v [[https://business.facebook.com|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**.

{{:web-marketing:socialni-site:pasted:20231023-220821.png}}


==== Přidání dalších událostí ====

Meta má další [[https://www.facebook.com/business/help/402791146561655?id=1205376682832142|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 [[https://www.facebook.com/business/help/402791146561655|podle návodu]] v ní bude:

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

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

{{:web-marketing:socialni-site:pasted:20231023-221257.png}}

<adm warning>Když odešlu událost do Meta na otestování, tak trvá klidně 30 a více minut, než se v Meta objeví. Člověk tak může nabýt dojmu, že událost nefunguje a stráví hromadu času dalším zkoušením. Problém je pouze v tom, že je zpracování události v Meta opožděné a opravdu to chce počkat. </adm>



==== Vlastní události - nestandardizované ====

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.

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

{{:web-marketing:socialni-site:pasted:20231026-001046.png}}


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. 

{{:web-marketing:socialni-site:pasted:20231026-001246.png}}

<adm warning>Když si vytvořím vlastní událost **InterestLevel1**, tak ji musím nejprve odeslat a počkat cca 60 minut, než se ve Meta projeví. Jinak se v rozbalovacím menu **Událost** moje **InterestLevel1** nezobrazuje.</adm>


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

{{:web-marketing:socialni-site:pasted:20231026-001321.png}}



==== Vlastní události - nestandardizované s hodnotou ====

Při posílání události s hodnotou jsem vycházel z [[https://medium.com/seedlogic/how-to-create-and-use-custom-facebook-conversion-events-using-trackcustom-2f3c5d2ed042|tohoto návodu]].



==== Conversion API - CAPI ====

Při implementaci CAPI jsem se inspiroval a čerpal z článku [[https://www.danielnytra.cz/facebook-capi/|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.

<code php>
<?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);
?>
</code>  

<adm warning>Ve skriptu je potřeba nahradit doména na začátku a pak FB token a FB pixel.</adm> 

V rámci JavaScriptu napoví [[https://developers.facebook.com/docs/marketing-api/conversions-api/parameters|dokumentace k Conversion API]].

Takto by vypadal kód řešící deduplikaci v rámci mojí custom události.
<code javascript>
<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>
</code>

<adm warning>Je třeba ovšem vnímat, že volání zatěžuje server, na kterém web běží. Takže se může stát limitem hosting. Proto stojí za zvážení časté volání této události.</adm>


=== Otestování PHP skriptu a posílání událostí z tagmanagera ===

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:

<code php>

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);
</code>

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.

{{:web-marketing:socialni-site:pasted:20231025-143147.png}}


=== Poslání standardní události lead bez hodnoty ===

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.

<code javascript>
<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>
</code>


=== Posílání PageView přes CAPI ===

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:

<code javascript>
<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>
</code>