# Eseménykövetés Google Analyticsszel (GA4) és Google Tag Managerrel

> Az űrlapmegtekintések és beküldések mérése a Google Tag Manageren át a Google Analytics 4-ben.

Ez a fejezet azt mutatja meg, hogyan mérheted a Google Analytics 4-ben (GA4), hányan látják az űrlapodat, és hányan küldik be. A méréshez nem kell külön beállítás a Fluent Formsban: az űrlapok a jelzéseiket a Google Tag Managernek (GTM) adják át, a GTM továbbítja őket a GA4-nek. A módszer a hagyományos és a konverzációs űrlapokra is ugyanúgy működik, mindkettőnél ugyanaz a megtekintés- és beküldésesemény.

A mérésből kiderül például, hogy sokan megnézik-e az űrlapot, de nem küldik be (túl hosszú lehet), és hogy egy módosítás (egy mező elhagyása, más gombfelirat) javított-e a beküldések arányán.

## Hogyan dolgozik együtt a három eszköz

| Eszköz | Szerepe |
| --- | --- |
| Fluent Forms | Az űrlap az oldalon. Megtekintéskor és sikeres beküldéskor jelzést ad. |
| Google Tag Manager | Közvetítő: elkapja a jelzést, kiolvassa az űrlap azonosítóját és a történés fajtáját. |
| Google Analytics 4 | A jelentések helye: itt látod, hány megtekintés és beküldés történt. |

A GTM-ben összesen ez kell hozzá:

| | Címkék | Eseményindítók | Változók |
| --- | --- | --- | --- |
| Darab | 2 | 1 | 3 (2 kötelező, 1 nem kötelező) |
| Típus | Custom HTML, Google Analytics: GA4 Configuration | Custom Event | 2 Data Layer, 1 JavaScript |

Az esemény típusát a GTM beépített **Event** változója azonosítja.

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

A GTM-ben a változók az oldalról érkező értékeket (például az adatréteg tulajdonságait) tárolják, hogy a címkék és az eseményindítók használhassák őket.

1. Nyisd meg a GTM-munkaterület **Variables** (Változók) fülét.
2. A **User-Defined Variables** résznél kattints a **New** gombra.
3. A felugró ablakban kattints a szerkesztés ikonra, és válaszd a **Data Layer Variable** típust.
4. Add meg az első változót:

| Mező | Érték |
| --- | --- |
| Title | FluentFormID |
| Variable Type | Data Layer Variable |
| Data Layer Variable Name | FluentFormID |
| Data Layer Version | Version 2 |

5. Hozd létre a másodikat:

| Mező | Érték |
| --- | --- |
| Title | FluentFormEventAction |
| Variable Type | Data Layer Variable |
| Data Layer Variable Name | eventAction |
| Data Layer Version | Version 2 |

6. Nem kötelezően létrehozhatsz egy harmadik, JavaScript típusú változót is, amely az űrlap oldalának címét adja meg. Ha nem hozod létre, a GA4-címkéből hagyd ki a **FormName** mezőt (lásd lejjebb).

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

Az eseményindító azt határozza meg, mikor fusson le egy címke. Itt egy egyéni eseményre kell figyelnie, amelyet az űrlap küld.

1. A GTM-ben nyisd meg a **Triggers** (Eseményindítók) részt, és kattints a **New** gombra.
2. Állítsd be:

| Mező | Érték |
| --- | --- |
| Title | FluentFormActivitiesEvent |
| Event Type | Custom Event |
| Event Name | FluentFormActivities |
| Trigger Fires on | All Custom Events |

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

Két címke kell: egy Custom HTML, amely az űrlap jelzéseit az adatrétegbe teszi, és egy GA4-címke, amely a kapott adatot a Google Analyticsnek küldi.

### A Custom HTML címke

1. Nyisd meg a **Tags** (Címkék) részt, és kattints a **New** gombra.
2. A címke neve legyen **cHTML - FluentFormsDataPush**, a típusa **Custom HTML**.
3. Illeszd be a következő kódot a szerkesztőbe:

```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 válaszd eseményindítónak a **Page View - All Pages** elemet.

A kód minden oldalbetöltéskor minden űrlapnál **FormView** eseményt küld, sikeres beküldéskor pedig **FormSubmitted** eseményt.

### A GA4-címke

1. Hozz létre egy új címkét, és válaszd a **Google Tag** (Google Analytics: GA4 Configuration) típust.
2. Add meg a nevet és a mérési azonosítót:

| Mező | Érték |
| --- | --- |
| Title | FluentForms - GA4 |
| Tag Type | Google Analytics: GA4 Configuration |
| Measurement ID | G-XXXXXXXX (a saját azonosítód, lásd lejjebb) |

3. A beállítandó mezők:

| Mező | Érték |
| --- | --- |
| debug_mode | true (a DebugView-hoz) |
| EventType | változóként választandó |
| EventAction | változóként választandó |
| FormID | változóként választandó |
| FormName | változóként választandó (csak ha létrehoztad a nem kötelező változót) |

4. Eseményindítónak a **FluentFormActivitiesEvent** eseményindítót válaszd, nem az All Pages elemet.

### A GA4 mérési 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, vagy hozz létre újat, majd válaszd ki a tulajdont (Property), vagy hozz létre újat.
3. A tulajdon neve alatt nyisd meg a **Data Streams** részt.
4. Ha még nincs, hozz létre **Web** adatfolyamot: add meg az oldal webcímét protokoll nélkül és az adatfolyam nevét.
5. Nem kötelezően a fogaskerék ikonnal beállíthatod, hogy csak az oldalmegtekintések (Page Views) legyenek bekapcsolva. A többi adattípus csak zajt ad ehhez a méréshez.
6. Mentés után a **Measurement ID** értékét másold ki, és illeszd be a GTM GA4-címkéjébe.

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

1. A GTM **Preview** módjában próbáld ki a beállítást.
2. Ha működik, tedd közzé a munkaterületet (**Publish**), és adj értelmes verziónevet, hogy később azonosíthasd, és szükség esetén visszaállíthasd.
3. Nyiss meg egy űrlapot tartalmazó oldalt, küldd be tesztadattal, majd nézd meg a Google Analytics **Events** (Események) jelentését.

Az oldal betöltése után, minden beavatkozás nélkül megjelenik a **FormView** esemény. Beküldés után a **FormSubmitted** esemény is látszik. Az eseményadatokat kibonthatod a részletekért. Mivel a GA4-címkében a `debug_mode` be van kapcsolva, az élő eseményeket a GA4 **DebugView** nézetében is követheted. A szokásos jelentésekben az adatok 24-48 óra késéssel jelennek meg.

## Hibaelhárítás

Ha a **FormView** vagy a **FormSubmitted** esemény nem jelenik meg, nézd végig a következőket.

**Sem a GTM-ben, sem a GA4-ben nem látszik semmi**
- Mentés után tedd közzé a GTM-munkaterületet.
- Próbáld inkognitó ablakban, kikapcsolt reklámblokkolóval.
- Ellenőrizd, hogy a GTM-tároló kódja az oldalon van, és ürítsd az oldal gyorsítótárát.

**A FormView működik, a FormSubmitted nem**
- Küldd be sikeresen az űrlapot, és várd meg a visszaigazolást.
- A sikertelen érvényesítés vagy a spamvédelem megakadályozza a `fluentform_submission_success` eseményt.
- Először egy egyszerű űrlappal próbáld.

**Nincs FormView az oldal betöltésekor**
- A Custom HTML címke eseményindítója a **Page View - All Pages** legyen.
- Az oldalon be kell töltődnie a jQuery-nek.
- Az űrlapnak rendelkeznie kell a `frm-fluent-form` osztállyal.
- A felugró ablakok és az oldalépítők későn tölthetik be az űrlapot: előbb egy hagyományos oldalon próbáld.

**A GTM működik, a GA4 üres**
- Ellenőrizd a mérési azonosítót a **FluentForms - GA4** címkében.
- A GA4-címke eseményindítója a **FluentFormActivitiesEvent** legyen, ne az All Pages.
- Az adatréteg-változók nevei pontosan egyezzenek: `FluentFormID` és `eventAction`.
- Élő eredményhez használd a DebugView-t.

**A változók „undefined” értéket mutatnak**
- Javítsd a **FluentFormID** és a **FluentFormEventAction** változók nevét a GTM-ben.
- Távolítsd el a **FormName** mezőt a GA4-címkéből, ha a nem kötelező változót nem hoztad létre.

**Dupla események**
- Ne használj egyszerre GTM-et és külön GA4-kódrészletet ugyanazon az oldalon.
- Ellenőrizd, hogy nincs-e több GTM-tároló vagy ismétlődő Custom HTML kódrészlet.

**Még mindig nem megy**
A GTM Preview módjában töltsd be az űrlapos oldalt, és keresd a `FluentFormActivities` eseményt, majd küldd be az űrlapot, és keresd a **FormSubmitted** eseményt. Ha a Preview működik, de a GA4 nem, nézd át újra a mérési azonosítót és a GA4-címke eseményindítóját.

A beküldések arányát magában a WordPressben is követheted, lásd a [Jelentések és irányítópult](https://hub.hellowp.io/hu/plugins/fluentform-signature/bejegyzesek-jelentesek-iranyitopult/) fejezetet.