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:
- zachytiť AJAX požiadavku,
- extrahovať hodnoty polí formulára (meno, email, telefón, vlastné polia...),
- overiť úspešné odoslanie,
- 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_idaform_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
- 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_submiteventy, - 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.
