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

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:

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