# Eseménykövetés Google Analytics 4-gyel (Tag Manageren át)

> Űrlapmegtekintések és beküldések mérése a Google Tag Manager és a GA4 segítségével, hibaelhárítással.

Ezzel a beállítással megtudod, hányan látták az űrlapodat, és hányan küldték be. Ebből látszik, hogy hosszú-e az űrlap, vagy a látogatók el sem jutnak hozzá, és mérheted, hogy egy módosítás (például egy mező elhagyása vagy a küldés gomb szövegének cseréje) javított-e az arányon. A leírás a Google Analytics 4-re (GA4) vonatkozik, és a hagyományos meg a [beszélgetős űrlapokra](https://hub.hellowp.io/hu/plugins/fluentformpro/urlapok-letrehozasa-beszelgetos/) is ugyanúgy működik: mindkettőnél ugyanaz a megtekintés- és a beküldésesemény.

## Hogyan működik együtt a három eszköz

1. **Fluent Forms:** az űrlap megjelenésekor és sikeres beküldésekor jelzést küld az oldalon.
2. **Google Tag Manager (GTM):** elkapja a jelzést, kiolvassa belőle az űrlap azonosítóját és az esemény típusát (megtekintés vagy beküldés).
3. **Google Analytics 4:** a GTM-től kapott eseményeket jeleníti meg, így láthatod például, hogy a héten 100-an látták az árajánlatkérő űrlapot, és 10-en küldték be.

A GTM-ben összesen két címkét (Custom HTML és GA4-konfiguráció), egy eseményindítót (Custom Event) és három változót (kettő kötelező, egy opcionális) hozol létre. Az esemény típusát a beépített **Event** változó adja.

## 1. Változók létrehozása

A GTM-változók a weboldal adatait (például az adatréteg értékeit) tárolják, hogy a címkék és az indítók használhassák.

1. A GTM munkaterületén nyisd meg a **Variables** fület.
2. A **User-Defined Variables** részben kattints a **New** gombra.
3. A felugró ablakban kattints a szerkesztés ikonra, és típusnak válaszd a **Data Layer Variable** lehetőséget.
4. Hozd létre az alábbi két változót:

| Title | Variable Type | Data Layer Variable Name | Data Layer Version |
|---|---|---|---|
| `FluentFormID` | Data Layer Variable | `FluentFormID` | Version 2 |
| `FluentFormEventAction` | Data Layer Variable | `eventAction` | Version 2 |

Opcionálisan készíthetsz egy harmadik változót az űrlap oldalának címéhez (ez egy JavaScript-változó).

## 2. Eseményindító létrehozása

Az indító (Trigger) határozza meg, mikor fusson le egy címke.

1. A GTM-ben nyisd meg a **Triggers** részt, és kattints a **New** gombra.
2. Állítsd be:

| Beállítás | Érték |
|---|---|
| Title | `FluentFormActivitiesEvent` |
| Event Type | Custom Event |
| Event Name | `FluentFormActivities` |
| Trigger Fires on | All Custom Events |

## 3. Címkék létrehozása

### Custom HTML címke

Ez a címke figyeli az űrlapokat az oldalon, és az adatrétegbe küldi az eseményeket.

1. A **Tags** részben kattints a **New** gombra.
2. A címke neve legyen `cHTML - FluentFormsDataPush`, a típusa **Custom HTML**.
3. Illeszd be az alábbi kódot:

```html
<script>
(function($){
  var fluentForms = $('.frm-fluent-form');
  fluentForms.each(function() {
    var $form = $(this);
    var formId = $form.attr('data-form_id');
    dataLayer.push({
      'event': 'FluentFormActivities',
      'eventCategory': 'FluentForm',
      'eventAction': 'FormView',
      'FluentFormID' : formId
    });
    $form.on('fluentform_submission_success', function() {
      dataLayer.push({
        'event': 'FluentFormActivities',
        'eventCategory': 'FluentForm',
        'eventAction': 'FormSubmitted',
        'FluentFormID' : formId
      });
    });
  });
})(jQuery);
</script>
```

4. A **Triggering** résznél indítónak a **Page View - All Pages** lehetőséget válaszd.

### GA4-címke

Ez a címke továbbítja az eseményeket a Google Analyticsnek.

1. Hozz létre új címkét, a típusa legyen **Google Tag** (GA4-konfiguráció).
2. A neve legyen `FluentForms - GA4`.
3. A **Measurement ID** mezőbe írd be a GA4 mérőazonosítót (`G-XXXXXXXX`, lásd alább).
4. Állítsd be a mezőket:

| Mező | Érték |
|---|---|
| `debug_mode` | `true` (a DebugView-hoz) |
| `EventType` | változóból |
| `EventAction` | változóból |
| `FormID` | változóból |
| `FormName` | változóból (opcionális) |

5. Indítónak a korábban létrehozott `FluentFormActivitiesEvent` indítót válaszd, ne az **All Pages**-t.

### A GA4 mérőazonosító megszerzése

1. A Google Analytics felületén kattints az **Admin** (fogaskerék) ikonra a bal alsó sarokban.
2. Válaszd ki a fiókot és a tulajdont, vagy hozz létre újat.
3. A tulajdon neve alatt nyisd meg a **Data Streams** részt.
4. Ha a webhelyed még nincs bekötve, hozz létre egy **Web** adatfolyamot: add meg a webhely címét protokoll nélkül, és egy nevet.
5. Opcionális: a fogaskerékre kattintva ebben a beállításban csak az oldalmegtekintéseket hagyd bekapcsolva, a többi adat fölösleges zaj a Fluent Forms-eseményekhez.
6. Mentés után az adatfolyam adatai között megjelenik a **Measurement ID**. Másold be a GTM GA4-címkéjébe.

## 4. Kipróbálás és közzététel

1. A GTM Preview módjával kipróbálhatod a beállítást, vagy a munkaterületen közzéteheted (**Publish**).
2. Adj a verziónak beszédes nevet, hogy később azonosítható legyen és visszaállítható.
3. A közzététel után nyiss meg egy űrlapot tartalmazó oldalt, küldd be tesztadatokkal, és nézd meg az **Events** listát a Google Analyticsben.

Az oldal betöltése után, még bármilyen kitöltés nélkül megjelenik a `FormView` esemény, a beküldés után pedig a `FormSubmitted`. Mivel a `debug_mode` be van kapcsolva, az eseményeket élőben a GA4 **DebugView** nézetében is látod. A szokásos jelentésekben az adatok akár 24-48 óra késéssel jelennek meg.

## Hibaelhárítás

| Tünet | Teendő |
|---|---|
| Sem a GTM-ben, sem a GA4-ben nem látszik semmi | Tedd közzé a GTM munkaterületét a módosítások után. Próbáld inkognitóablakban, kikapcsolt reklámblokkolóval. Ellenőrizd, hogy a GTM-tároló az oldalon van, és ürítsd a webhely gyorsítótárát. |
| A `FormView` működik, a `FormSubmitted` nem | A `fluentform_submission_success` esemény csak sikeres beküldésnél fut le: várd meg a visszaigazoló üzenetet. A sikertelen ellenőrzés vagy a spamvédelem blokkolja. Próbáld egy egyszerű űrlappal. |
| Nincs `FormView` az oldal betöltésekor | A Custom HTML címke indítója legyen **Page View - All Pages**. Az oldalon legyen betöltve a jQuery. Az űrlapnak a `frm-fluent-form` osztályt kell viselnie. Felugró ablakban vagy oldalépítőben az űrlap későn töltődhet be, ezért először próbáld egy hagyományos oldalon. |
| A GTM működik, a GA4 üres | Ellenőrizd a mérőazonosítót a `FluentForms - GA4` címkében. A GA4-címke indítója a `FluentFormActivitiesEvent` legyen. Az adatréteg-változók neve pontosan `FluentFormID` és `eventAction` legyen. Élő eredményhez használd a DebugView-t. |
| A változók értéke undefined | Javítsd a `FluentFormID` és `FluentFormEventAction` változók nevét a GTM-ben. Távolítsd el a `FormName` mezőt a GA4-címkéből, ha az opcionális változót nem hoztad létre. |
| Duplikált események | Ne használj egyszerre GTM-et és külön GA4-kódrészletet ugyanazon az oldalon. Nézd meg, nincs-e több GTM-tároló vagy ismétlődő Custom HTML kód. |

Ha továbbra sem működik, használd a GTM Preview módját: töltsd be az űrlap oldalát, keresd a `FluentFormActivities` eseményt, majd küldd be az űrlapot, és keresd a `FormSubmitted` eseményt. Ha a Preview rendben van, de a GA4 nem, ellenőrizd újra a mérőazonosítót és a GA4-címke indítóját.

A konverziókat a WordPressen belül is elemezheted, a GA4 mellett: lásd a [beküldési jelentéseket](https://hub.hellowp.io/hu/plugins/fluentformpro/bekuldesek-jelentesek/).