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