# 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

---

#### **<span role="text">1. Adăugarea câmpului `fbclid`</span>**

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

![Screenshot 2026-06-30 at 11.49.24.png](https://wiki.getcourse.md/uploads/images/gallery/2026-06/screenshot-2026-06-30-at-11-49-24.png)

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

[![Screenshot 2026-06-30 at 11.49.02.png](https://wiki.getcourse.md/uploads/images/gallery/2026-06/scaled-1680-/screenshot-2026-06-30-at-11-49-02.png)](https://wiki.getcourse.md/uploads/images/gallery/2026-06/screenshot-2026-06-30-at-11-49-02.png)

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

<div class="TyagGW_tableContainer" id="bkmrk-proiect-proces-manif"><div class="group TyagGW_tableWrapper flex flex-col-reverse w-fit" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="2195" data-start="1979"><thead data-end="1999" data-start="1979"><tr data-end="1999" data-start="1979"><th class="last:pe-10" data-col-size="sm" data-end="1989" data-start="1979">Proiect</th><th class="last:pe-10" data-col-size="sm" data-end="1999" data-start="1989">Proces</th></tr></thead><tbody data-end="2195" data-start="2022"><tr data-end="2057" data-start="2022"><td data-col-size="sm" data-end="2036" data-start="2022">Manifestare</td><td data-col-size="sm" data-end="2057" data-start="2036">**CAPI Facebook**</td></tr><tr data-end="2097" data-start="2058"><td data-col-size="sm" data-end="2076" data-start="2058">Banii la Treabă</td><td data-col-size="sm" data-end="2097" data-start="2076">**CAPI Facebook**</td></tr><tr data-end="2137" data-start="2098"><td data-col-size="sm" data-end="2108" data-start="2098">Inginer</td><td data-col-size="sm" data-end="2137" data-start="2108">**CAPI Facebook Inginer**</td></tr><tr data-end="2195" data-start="2138"><td data-col-size="sm" data-end="2166" data-start="2138">VibeCoding</td><td data-col-size="sm" data-end="2195" data-start="2166">**CAPI Facebook Vibe Coding**</td></tr></tbody></table>

</div></div>Se recomandă păstrarea bifată opțiunea:

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

[![capi.png](https://wiki.getcourse.md/uploads/images/gallery/2026-06/scaled-1680-/capi.png)](https://wiki.getcourse.md/uploads/images/gallery/2026-06/capi.png)

---

#### **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](https://manifestare.md/pl/lite/widget/editor?id=1607580)

##### Exemplul 2 – [Banii la Treabă](https://edu.baniilatreaba.ro/pl/lite/widget/editor?id=1599903)

##### Exemplul 3 – [Inginer](https://edu.inginer.ai/pl/lite/widget/editor?id=1621007)

##### Exemplul 4 – [Vibe Coding](https://edu.inginer.ai/pl/lite/widget/editor?id=1595616)