Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- it:marketing:facebook-meta [2023/10/23 20:25] – Petr Nosek
+++ it:marketing:facebook-meta [2023/10/25 22:23] (aktuální) – Petr Nosek
@@ Řádek 60: / Řádek 60: @@
 <code javascript>
 <script>
-  fbq('trackCustom', 'Mikrokonverze', {content_name: 'interest_level1'});
+  fbq('trackCustom', 'InterestLevel1', {content_name: 'interest_level1'});
 </script>
 </code>
-{{:it:marketing:pasted:20231023-221820.png}}
+{{:it:marketing:pasted:20231026-001046.png}}
-Tím si vytvořím vlastní kategorii **Mikrokonverze** a její parametr bude **interest_level1**. Nastavím si tímto způsobem.
+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.
-{{:it:marketing:pasted:20231023-222304.png}}
+{{:it:marketing:pasted:20231026-001246.png}}
-<adm warning>Když si vytvořím vlastní událost **Mikrokonverze**, 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 **Mikrokonverze** nezobrazuje.</adm>
+<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 **Mikrokonverze**.
+Když se pak podívám do menu **Zdroje dat**, tak je vidět, že už tam mám i vlastí událost **InterestLevel1**.
-{{:it:marketing:pasted:20231023-222552.png}}
+{{:it:marketing: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.
+{{:it:marketing: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>