Meta Pixel a CAPI

meta_capi

Použití: příklad kombinace Meta Pixel eventů a CAPI volání s event deduplikací přes společné eventID.

Pozor na:

• Obsahuje GTM placeholdery a komentářové placeholdery, které nejsou validní JavaScript bez doplnění.
• fbq('consent', 'grant/revoke') je pouze zástupná hodnota; v reálné implementaci musí odpovídat consent stavu.
• V EHP/EU by se Meta Pixel ani CAPI ve výchozím stavu bez marketingového souhlasu neměly spouštět vůbec. Best practice je řídit spuštění značky přes consent trigger v GTM ještě před načtením fbevents.js a CAPI helperu, ne jen uvnitř snippet kódu.
• Před použitím je nutné sladit strukturu customer dat s tím, co vrací enhanced customer info.
• U purchase eventů posílej value jako hodnotu objednávky bez DPH, pokud reporting metodika neříká výslovně jinak.
• Access token do veřejného frontend snippet kódu nepatří. Nejlepší je řešit ho serverově v endpointu /capi.

Předpoklad CAPI knihovny, jejíž přesný obsah je níže v sekci capi_helper:

• Skript https://app.narrativva.com/public/capi.js vystaví globální funkci window.CAPI.
• CAPI přijímá buď objekt, nebo poziční argumenty event_name, event_id, pixelId, custom_data, user_data a test_event_code.
• Browser helper skládá payload s poli event_name, custom_data, user_data, pixelId, unixTime, event_id, href_ a test_event_code.
• Payload odesílá pomocí fetch na https://app.narrativva.com/capi s mode: "no-cors" a keepalive: true.

Proměnné v ukázce:

• var UUID_pw = "{{UUID}}"; je GTM proměnná pro unikátní eventID page view eventu. Hodnota musí být stejná pro browser Pixel hit a případný odpovídající CAPI hit, aby Meta uměla eventy deduplikovat. Pro generování UUID můžeš použít utility snippety, ideálně uuid_crypto.
• var consent_marketing = {{marketing}}; je GTM proměnná se stavem marketingového souhlasu. Prakticky má vracet boolean true / false, kde true znamená povolený marketingový souhlas a false zamítnutý nebo neznámý souhlas. V EHP/EU je lepší ji použít už pro trigger značky a Meta Pixel/CAPI spustit jen při true; fbq('consent', consent_marketing ? 'grant' : 'revoke') ber spíš jako doplňkovou pojistku v ukázce. Pokud CMP vrací textové hodnoty, například granted / denied, je lepší je v GTM nejdřív namapovat na boolean.

<script type="text/javascript" src="https://app.narrativva.com/public/capi.js"></script>


  var UUID_pw = "{{UUID}}";
  var consent_marketing = {{marketing}};

  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('consent', 'grant/revoke');

  fbq('init', '<!-- ID PIXELU -->');
  fbq('track', 'PageView',{},{eventID: UUID_pw});




  var UUID_purchase = "{{UUID}}";
  var c_purchase = {
    content_type: 'product',
    value: <!-- hodnota nákupu -->,
    content_ids: <!-- id nakoupených produktů -->,
    name: <!-- název nakoupených produktů -->,
    currency: <!-- měna -->
  };

  fbq('track', 'Purchase', c_purchase, {
    eventID: UUID_purchase
  });


var ee_c = <!-- ident. zákazníka z enhanced_customer_info -->;

CAPI({
  event_name: "Purchase",
  event_id: UUID_purchase,
  pixelId: <!-- ID PIXELU -->,
  custom_data: c_purchase,
  user_data: {
    "fbp": {{cookies_fbp}},
    "fbc": {{cookies_fbc}},
    "em": ee_c.email,
    "ph": ee_c.phone_number.replace("+",""),
    "fn": ee_c.first_name,
    "ln": ee_c.last_name,
    "ct": ee_c.home_address.city,
    "zp": ee_c.home_address.postal_code
  },
  test_event_code: ""
});

meta_pixel_all_events

Použití: katalog standardních Meta Pixel eventů bez CAPI. V praxi z něj vyber jen event, který odpovídá konkrétnímu triggeru v GTM.

<script>
  var pixelId = "<!-- ID PIXELU -->";
  var consent_marketing = {{marketing}};

  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('consent', consent_marketing ? 'grant' : 'revoke');
  fbq('init', pixelId);

  var metaEvents = {
    PageView: {},
    ViewContent: {
      content_type: 'product',
      content_ids: <!-- id produktu nebo obsahu -->,
      value: <!-- hodnota produktu nebo obsahu -->,
      currency: '<!-- měna -->'
    },
    AddToCart: {
      content_type: 'product',
      content_ids: <!-- id produktů -->,
      value: <!-- hodnota košíku -->,
      currency: '<!-- měna -->'
    },
    InitiateCheckout: {
      content_type: 'product',
      content_ids: <!-- id produktů -->,
      num_items: <!-- počet položek -->,
      value: <!-- hodnota checkoutu -->,
      currency: '<!-- měna -->'
    },
    AddPaymentInfo: {
      content_type: 'product',
      value: <!-- hodnota checkoutu -->,
      currency: '<!-- měna -->'
    },
    Purchase: {
      content_type: 'product',
      content_ids: <!-- id nakoupených produktů -->,
      num_items: <!-- počet položek -->,
      value: <!-- hodnota nákupu -->,
      currency: '<!-- měna -->'
    },
    Lead: {
      content_name: '<!-- název lead formuláře -->'
    },
    Contact: {},
    Donate: {
      value: <!-- hodnota daru -->,
      currency: '<!-- měna -->'
    }
  };

  var eventName = "<!-- název eventu, např. Purchase -->";
  var eventId = "{{UUID}}";

  fbq('track', eventName, metaEvents[eventName] || {}, {
    eventID: eventId
  });
</script>

meta_pixel_capi_all_events

Použití: katalog standardních eventů pro kombinaci Meta Pixel + CAPI. Pro deduplikaci musí mít Pixel i CAPI stejný event_name a stejný event_id.

<script type="text/javascript" src="https://app.narrativva.com/public/capi.js"></script>

<script>
  var pixelId = "<!-- ID PIXELU -->";
  var consent_marketing = {{marketing}};
  var ee_c = <!-- ident. zákazníka z enhanced_customer_info -->;

  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('consent', consent_marketing ? 'grant' : 'revoke');
  fbq('init', pixelId);

  var userData = {
    "fbp": {{cookies_fbp}},
    "fbc": {{cookies_fbc}},
    "em": ee_c.email,
    "ph": ee_c.phone_number.replace("+",""),
    "fn": ee_c.first_name,
    "ln": ee_c.last_name,
    "ct": ee_c.home_address.city,
    "zp": ee_c.home_address.postal_code
  };

  var metaEvents = {
    PageView: {},
    ViewContent: {
      content_type: 'product',
      content_ids: <!-- id produktu nebo obsahu -->,
      value: <!-- hodnota produktu nebo obsahu -->,
      currency: '<!-- měna -->'
    },
    AddToCart: {
      content_type: 'product',
      content_ids: <!-- id produktů -->,
      value: <!-- hodnota košíku -->,
      currency: '<!-- měna -->'
    },
    InitiateCheckout: {
      content_type: 'product',
      content_ids: <!-- id produktů -->,
      num_items: <!-- počet položek -->,
      value: <!-- hodnota checkoutu -->,
      currency: '<!-- měna -->'
    },
    AddPaymentInfo: {
      content_type: 'product',
      value: <!-- hodnota checkoutu -->,
      currency: '<!-- měna -->'
    },
    Purchase: {
      content_type: 'product',
      content_ids: <!-- id nakoupených produktů -->,
      num_items: <!-- počet položek -->,
      value: <!-- hodnota nákupu -->,
      currency: '<!-- měna -->'
    },
    Lead: {
      content_name: '<!-- název lead formuláře -->'
    },
    Contact: {},
    Donate: {
      value: <!-- hodnota daru -->,
      currency: '<!-- měna -->'
    }
  };

  var eventName = "<!-- název eventu, např. Purchase -->";
  var eventId = "{{UUID}}";
  var customData = metaEvents[eventName] || {};

  fbq('track', eventName, customData, {
    eventID: eventId
  });

  CAPI({
    event_name: eventName,
    event_id: eventId,
    pixelId: pixelId,
    custom_data: customData,
    user_data: userData,
    test_event_code: ""
  });
</script>

capi_helper

Přesný obsah veřejné knihovny na https://app.narrativva.com/public/capi.js:

/**
 * Meta CAPI Helper
 * Version: 1.2
 */
(function(global) {
  var endpointOrigin = "https://app.narrativva.com";

  function isPlainObject(value) {
    return value && Object.prototype.toString.call(value) === "[object Object]";
  }

  function CAPI(event_name, event_id, pixelId, custom_data, user_data, access_token, test_event_code) {
    var input = isPlainObject(event_name)
      ? event_name
      : {
          event_name: event_name,
          event_id: event_id,
          pixelId: pixelId,
          custom_data: custom_data,
          user_data: user_data,
          test_event_code: test_event_code
        };

    var payload = {
      event_name: input.event_name || "",
      custom_data: isPlainObject(input.custom_data) ? input.custom_data : {},
      user_data: isPlainObject(input.user_data) ? input.user_data : {},
      pixelId: input.pixelId || "",
      unixTime: String(Math.floor(Date.now() / 1000)),
      event_id: input.event_id || "",
      href_: input.href_ || location.href,
      test_event_code: input.test_event_code || ""
    };

    fetch(endpointOrigin + "/capi", {
      method: "POST",
      mode: "no-cors",
      keepalive: true,
      headers: {
        "content-type": "text/plain;charset=UTF-8"
      },
      body: JSON.stringify(payload)
    }).catch(function() {
      // Fail silently in browser to prevent user-facing errors.
    });
  }

  global.CAPI = CAPI;
})(window);

Relevantní dokumentace

• Meta Pixel
• Meta Conversions API
• Meta: Deduplicate Pixel and Server Events