Configurarea obligatorie a widgeturilor pentru Meta Ads (Facebook)

Scop

Orice landing page care urmează să fie promovat prin Meta Ads (Facebook / Instagram) trebuie configurat astfel încât să transmită corect datele către Facebook Conversions API (CAPI).

Înainte de publicarea landing-ului, trebuie adăugate trei componente obligatorii în widget-ul formularului.

Componente obligatorii

În formular trebuie să existe următoarele elemente:

1. Câmp utilizator – fbclid
2. Bloc HTML (codul va fi furnizat separat)
3. Procesul CAPI Facebook corespunzător proiectului

1. Adăugarea câmpului fbclid

În lista componentelor formularului se adaugă un nou câmp utilizator.

După adăugare, configurați câmpul astfel:

• Câmp: fbclid
• Titlul câmpului: fbclid
• clasa CSS trebuie să conțină:
  • fbclid
  • hidden

Câmpul trebuie să fie unul ascuns (hidden), utilizatorul nu trebuie să îl vadă în formular.

2. Adăugarea blocului HTML

În formular se adaugă un widget de tip HTML.

Acesta trebuie poziționat înaintea butonului de trimitere.

În interiorul lui se introduce următorul cod:

<script>
(function () {
  var KEY = 'fm_fbclid';
  var TTL = 90 * 86400000;
  var sp = new URLSearchParams(location.search || '');
  
  // Сначала ищем fbclid напрямую
  var fbclid = sp.get('fbclid');
  
  // Если нет — ищем внутри ref или loc
  if (!fbclid) {
    var ref = sp.get('ref') || sp.get('loc') || '';
    if (ref) {
      var m = ref.match(/fbclid=([^&]+)/);
      if (m) fbclid = m[1];
    }
  }

  if (fbclid) {
    try { localStorage.setItem(KEY, JSON.stringify({ ts: Date.now(), v: fbclid })); } catch(e) {}
  }

  function getStored() {
    try {
      var raw = localStorage.getItem(KEY);
      if (!raw) return null;
      var o = JSON.parse(raw);
      if (!o || !o.ts || Date.now() - o.ts > TTL) return null;
      return o.v || null;
    } catch(e) { return null; }
  }

  function fill() {
    var val = fbclid || getStored();
    if (!val) return;
    document.querySelectorAll('.fbclid input, .fbclid textarea').forEach(function(el) {
      if (!el.value) { el.value = val; }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fill);
  } else { fill(); }

  setTimeout(fill, 500);
  setTimeout(fill, 1500);
})();
</script>

3. Adăugarea procesului CAPI Facebook

Din secțiunea Gestionarea formularului se adaugă acțiunea Lansare proces.

În funcție de proiectul pentru care se realizează campania, se selectează unul dintre următoarele procese:

Se recomandă păstrarea bifată opțiunea:

• Executați din nou dacă sarcina pentru acest utilizator a fost deja lansată

Verificare înainte de publicare

Înainte ca landing page-ul să intre în publicitate, verificați că sunt îndeplinite toate condițiile:

• ✅ există câmpul utilizator fbclid
• ✅ câmpul are clasele CSS fbclid și hidden
• ✅ este adăugat blocul HTML
• ✅ este introdus codul HTML necesar
• ✅ este configurat procesul CAPI Facebook corespunzător proiectului
• ✅ formularul este salvat și publicat

Exemple de widget-uri configurate

Mai jos sunt câteva exemple de widget-uri care au fost configurate corect și sunt utilizate în producție.

Exemplul 1 – Manifestare

Exemplul 2 – Banii la Treabă

Exemplul 3 – Inginer

Exemplul 4 – Vibe Coding