ElementorGoogle Tag ManagerAnalytikaWordPressJavaScript

Ako sledovať odoslania Elementor formulárov a dáta formulárov v Google Tag Manager

Naučte sa zachytiť kompletné hodnoty polí Elementor formulárov v GTM bez pluginov. Získajte produkčný script, ktorý zachytáva AJAX požiadavky a odosiela čisté dáta formulárov do dataLayer pre GA4 tracking.

Milan PavlákMilan Pavlák
4 min čítania
Ako sledovať odoslania Elementor formulárov a dáta formulárov v Google Tag Manager

Elementor formuláre sú vizuálne silné a jednoduché na vytvorenie, no ich sledovanie s kompletnými dátami formulára v Google Tag Manager (GTM) nie je jednoduché.

GTM štandardne dokáže zistiť, že Elementor formulár bol odoslaný (napríklad pomocou vstavaných JS eventov Elementora alebo generického triggera odoslania formulára). Avšak nezíska skutočné hodnoty polí.

Elementor odosiela dáta formulára cez AJAX požiadavky na pozadí, takže:

  • viete, že "formulár bol odoslaný", ale...
  • nevidíte meno, email, telefón, službu atď.
  • žiadne hodnoty polí formulára nie sú prístupné v dataLayer
  • nemôžete vytvoriť spoľahlivé konverzie v GA4 alebo reklamách založené na hodnotách polí

Ak ste sa pokúšali sledovať Elementor formuláre pre GA4 alebo reklamy, pravdepodobne ste narazili na problémy ako:

  • chýbajúce alebo zduplikované konverzie,
  • žiadny prístup k odoslaným dátam formulára v GTM,
  • a pluginy, ktoré prestanú fungovať po aktualizáciách.

Tento návod to rieši.

Získate produkčný JavaScript snippet, ktorý sleduje odoslania Elementor formulárov, extrahuje odoslané hodnoty polí a odošle čistý GTM event do dataLayer bez úpravy formulára alebo inštalácie ďalších pluginov.


Prečo GTM nedokáže sledovať Elementor formuláre štandardne

Elementor odosiela formuláre cez požiadavky na pozadí:

POST /wp-admin/admin-ajax.php

Všetky hodnoty polí formulára sú odoslané v tele tejto AJAX požiadavky.

GTM dokáže reagovať na udalosť odoslania na vysokej úrovni, ale automaticky nevidí obsah formulára, pretože:

  • hodnoty polí sa nachádzajú iba v AJAX požiadavke, nie v DOM,
  • Elementor štandardne nezapisuje tieto hodnoty do dataLayer,
  • a GTM nemá natívny spôsob, ako čítať telá XHR požiadaviek.

So štandardným nastavením GTM teda získate:

  • "formulár bol odoslaný" ✅
  • "čo bolo vo formulári"

Na správne sledovanie Elementor formulárov potrebujeme:

  1. zachytiť AJAX požiadavku,
  2. extrahovať hodnoty polí formulára (meno, email, telefón, vlastné polia...),
  3. overiť úspešné odoslanie,
  4. odoslať štruktúrovaný GTM event.

Nižšie uvedený script robí presne toto.


Produkčný script na sledovanie dát Elementor formulárov v GTM

<script>
(function () {
  window.dataLayer = window.dataLayer || [];

  var originalOpen = XMLHttpRequest.prototype.open;
  var originalSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function (method, url) {
    this._trackAjaxForm = typeof url === "string" && url.indexOf("admin-ajax.php") !== -1;
    return originalOpen.apply(this, arguments);
  };

  XMLHttpRequest.prototype.send = function (body) {
    if (this._trackAjaxForm && body instanceof FormData) {
      this._formData = Object.fromEntries(body.entries());
    }

    if (this._trackAjaxForm && !this._gtmListenerAttached) {
      this.addEventListener("loadend", function () {
        if (!this._trackAjaxForm) return;

        var json;
        try {
          json = JSON.parse(this.responseText || this.response || "{}");
        } catch (e) {
          return;
        }

        if (!json || !json.success) return;

        var raw = this._formData || {};
        var prefixes = ["form_id", "form_fields"];
        var cleaned = {};

        Object.keys(raw).forEach(function (key) {
          var keep = prefixes.some(function (prefix) {
            return key.indexOf(prefix) === 0;
          });
          var value = raw[key];

          if (keep && value !== null && value !== "") {
            cleaned[key] = value;
          }
        });

        if (Object.keys(cleaned).length > 0) {
          window.dataLayer.push({
            event: "elementor_form_submit",
            form_data: cleaned,
          });
        }
      });

      this._gtmListenerAttached = true;
    }

    return originalSend.apply(this, arguments);
  };
})();
</script>

Ako script funguje (rozbor kódu)

1. Sleduje iba odoslania Elementor formulárov

Kontrolujeme, či URL AJAX požiadavky obsahuje admin-ajax.php.

2. Bezpečne extrahuje hodnoty polí formulára

Čítame telo FormData pomocou Object.fromEntries().

3. Čaká na odpoveď Elementora

Elementor vráti JSON:

{"success": true}

Sledujeme iba úspešné odoslania.

4. Odfiltruje nepotrebné dáta

Ponecháme iba kľúče začínajúce na:

  • form_id a
  • form_fields.

Tým sa odstránia systémové polia a interné parametre Elementora.

5. Odošle čisté dáta do dataLayer

dataLayer.push({
  event: "elementor_form_submit",
  form_data: { ... }
});

GTM teraz môže tento event použiť ako trigger.


Aké dáta z Elementor formulárov môžete zachytiť

Tento script vám umožňuje zachytiť:

  • Meno
  • Email
  • Telefón
  • Správu
  • Hodnoty z výberových polí (Select/Dropdown)
  • Hodnoty checkboxov a radio tlačidiel
  • Skryté polia
  • ID formulára
  • Vlastné polia Elementor Pro
  • Dáta z viacstupňových formulárov

Každé odoslanie sa stáva čistým GTM eventom.


Príklad dataLayer eventu

Váš GTM debugger zobrazí:

{
  "event": "elementor_form_submit",
  "form_data": {
    "form_id": "23",
    "form_fields[name]": "John Doe",
    "form_fields[email]": "john@example.com",
    "form_fields[service]": "Website Redesign"
  }
}

Ako použiť tento event v GTM (stručný návod)

1. V GTM vytvorte Trigger

  • Typ triggera: Custom Event
  • Názov eventu: elementor_form_submit
  • Spustiť pri: All Custom Events

2. Vytvorte GA4 Event Tag

Príklad:

  • Názov eventu: generate_lead
  • Parametre eventu:
    • form_id{{form_data.form_id}}
    • email{{form_data.form_fields[email]}}
    • name{{form_data.form_fields[name]}}

3. Publikujte

Teraz sledujete dáta Elementor formulárov s plnou viditeľnosťou polí.


Záver

Elementor vytvára krásne formuláre, ale skrýva ich odoslania v AJAX požiadavkách, čo robí sledovanie mimoriadne náročným.

Tento script tento problém kompletne rieši.

Teraz máte:

  • spoľahlivý spôsob detekcie odoslaní Elementor formulárov,
  • plný prístup k hodnotám polí formulára v GTM,
  • čisté elementor_form_submit eventy,
  • a systém, ktorý funguje bez pluginov alebo úprav formulárov.

Ak chcete tracking posunúť ešte ďalej, pozrite si moje služby webovej analytiky. Pre kompletné serverové sledovanie konverzií odporúčam aj návod na Meta Pixel a Conversions API pre WordPress.

Spojme sa

Chcete sa porozprávať o vašom projekte? Ozvite sa mi cez ktorýkoľvek z týchto kanálov.

Sídlo v Bratislave, Slovensko. K dispozícii pre projekty po celom svete.

Try me — I'm alive
Ako sledovať odoslania Elementor formulárov a dáta formulárov v Google Tag Manager