# Structura unui Widget

# 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)

# Widgeturile de înscriere — structură și blocuri de acțiuni

> Widgetul este formularul de înscriere de pe landing. Pe lângă câmpurile vizibile, el conține o listă de **acțiuni** care se execută în ordine, la trimiterea formularului. Articolul descrie ce conține fiecare variantă de widget — **Gratuit** și **VIP** — și ce face fiecare bloc.

---

### Widgetul Gratuit

Blocurile, în ordinea în care apar și se execută:

<table id="bkmrk-%23-bloc-ce-face-1-aut"><thead><tr><th>\#</th><th>Bloc</th><th>Ce face</th></tr></thead><tbody><tr><td>1</td><td>Autorizați utilizatorul</td><td>Autentifică automat utilizatorul în cont, ca să nu fie nevoit să se logheze manual</td></tr><tr><td>2</td><td>Lansare proces</td><td>Pornește procesul descris în articolul [Configurarea obligatorie a widgeturilor pentru Meta Ads (Facebook)](https://wiki.getcourse.md/books/configurare-landinguri/page/configurarea-obligatorie-a-widgeturilor-pentru-meta-ads-facebook)</td></tr><tr><td>3</td><td>Creare cerere / comandă</td><td>Creează comanda pe oferta corespunzătoare</td></tr><tr><td>4</td><td>Trimite o scrisoare</td><td>Trimite emailul de confirmare</td></tr><tr><td>5</td><td>Configurați comanda</td><td>Se adaugă eticheta, în caz de necesitate</td></tr><tr><td>6</td><td>Redirecționare</td><td>Trimite utilizatorul pe pagina de mulțumire</td></tr></tbody></table>

#### Ce se întâmplă imediat după trimiterea formularului

- **Redirect spre pagina de mulțumire** — imediat după completarea și trimiterea formularului, fără pas intermediar de plată.
- **Expedierea emailului** — tot imediat după trimiterea formularului, nu la un interval ulterior.

Restul acțiunilor (creare comandă, configurare, lansare proces) rulează în fundal, în același moment.

---

### Widgetul VIP

Blocurile, în ordinea în care apar și se execută:

<table id="bkmrk-%23-bloc-ce-face-1-aut-1"><thead><tr><th>\#</th><th>Bloc</th><th>Ce face</th></tr></thead><tbody><tr><td>1</td><td>Autorizați utilizatorul</td><td>Autentifică automat utilizatorul în cont</td></tr><tr><td>2</td><td>Lansare proces</td><td>Pornește procesul descris în articolul [Configurarea obligatorie a widgeturilor pentru Meta Ads (Facebook)](https://wiki.getcourse.md/books/configurare-landinguri/page/configurarea-obligatorie-a-widgeturilor-pentru-meta-ads-facebook)</td></tr><tr><td>3</td><td>Creare cerere / comandă</td><td>Creează comanda pe oferta VIP</td></tr><tr><td>4</td><td>Configurați comanda *(opțional)*</td><td>Poate fi prezent și aici, dacă e nevoie de adăugarea unei etichete</td></tr></tbody></table>

---

### Diferențele dintre Gratuit și VIP

Widgetul VIP **nu conține** două blocuri care există la cel gratuit:

<table id="bkmrk-bloc-gratuit-vip-tri"><thead><tr><th>Bloc</th><th>Gratuit</th><th>VIP</th></tr></thead><tbody><tr><td>Trimite o scrisoare</td><td>✅ Da — emailul pleacă imediat după trimiterea formularului</td><td>❌ Nu — widgetul nu expediază email</td></tr><tr><td>Redirecționare</td><td>✅ Da — utilizatorul ajunge direct pe pagina de mulțumire</td><td>❌ Nu — redirectul nu se face din widget</td></tr></tbody></table>

Motivul este că **oferta VIP se plătește separat**. Utilizatorul nu trebuie dus pe pagina de mulțumire imediat după completarea formularului, ci abia după efectuarea plății, iar emailul de confirmare pleacă tot pe traseul de plată, nu din widget.