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

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 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:

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