Jak změřit jakýkoliv kontaktní formulář přes Google Tag Manager

Líbí se vám příspěvek? Sdílejte jej!

Ne vždy je po ruce vývojář, který by nasadil měření odeslání formuláře. Pak to tedy musí vzít marketér do vlastních rukou. A ne vždy to dopadne úplně ideálně.

Samozřejmě, ve chvíli, kdy formulář přesměruje na děkovací stránku, je to snadné. Ale co když se formulář odešle a jenom zobrazí zprávu o odeslání.

Nejčastější přehmat, který vidíme je, že marketér nasadí měření na kliknutí na tlačítko „Odeslat formulář“ pomocí triggeru Click.

Ale podobně snadno je možno sledovat samotné odeslání kontaktního formuláře, a to dvěma způsoby:

1. Koukněte se do dokumentace řešení nebo na Stack Overflow

Například asi nejpopulárnější plugin pro kontaktní formuláře na WordPressu – Contact Form 7, vždy po odeslání formuláře stránku upozorní. A je velmi snadné toto upozornění odposlechnout. Do Google Tag Manager tedy vytvoříme HTML tag s posluchačem, který může vypadat například takto:

<script>
  document.addEventListener( 'wpcf7submit', function( event ) {
    var inputs = event.detail.inputs;
    var formid = event.detail.contactFormId;
    dataLayer.push({ "formid": formid, "event": "cfsubmitted" });
}, false );
</script>

Po odeslání formuláře se v dataLayeru objeví událost cfsubmitted a v proměnné datové vrstvy formid bude ID odeslaného formuláře. Chcete-li být precizní, můžete si vytvořit vyhledávací tabulku (lookup table) a formid si změnit na název formuláře.

Vyhledávací tabulka Google Tag Manager

Následně vytvoříte událost, kde si pošlete do Google Analytics (nebo kamkoliv jinam) informaci o odeslání formuláře a triggerem bude událost cfsubmitted.

Odeslání formuláře v Google Analytics

Máte-li na stránce pouze jeden formulář, je možné kód zestručnit na:

<script>
  document.addEventListener( 'wpcf7submit', function( event ) {
    dataLayer.push({ "event": "cfsubmitted" });
}, false );
</script>

Téměř každý plugin pro WordPress má podobné řešení. Např. toto je řešení pro Gravity Forms.

2. Měření formuláře, který je psaný na míru a není možné najít JavaScript hook

V tomto případě velmi dobře opět funguje Google Tag Manager a to trigger Element Visibility.

1. Najděte pomocí průzkumníku v nástrojích pro vývojáře, jakou třídu/ID má děkovací zpráva formuláře

V mém případě ukazuji, jak měřit formulář v page builderu Elementor ve WordPressu, ale dá se aplikovat na jakýkoliv form. Najdeme tedy, jaký selektor se váže k děkovací zprávě po odeslání formuláře.

Průzkumník HTML ve vývojářských nástrojích

2. Vytvoříme v Google Tag Manager trigger Element Visiblity pro zobrazení děkovací zprávy

Trigger může vypadat například takto. Různá nastavení jsou k diskusi, například kolik procent děkovací zprávy musí být vidět na obrazovce, aby se trigger pustil nebo jak dlouho by měla být zpráva vidět. Podmínku, kdy se má trigger spustit nastavujeme zpravidla na „Once per element“ pro případ, že by na stránce bylo více formulářů, ale opět k diskusi.

Trigger pro zobrazení elementu

3. Nastavíme tag pro Google Analytics, Google Ads/Facebook

Nastavení tagu je stejné jako v předchozím případě. Jenom trigger se bude lišit.

4. Otestujeme, zda se formulář měří

Po odeslání formuláře by se mělo v Preview módu Google Tag Manager zobrazit podobná scéna jako zde:

Google Tag Manager Preview mód - úspěšná konverze Google Ads

A nyní již stačí vypublikovat řešení a těšit se z dat.

Jaká je přesnost těchto řešení?

V prvním případě, vývojář by udělal úplně to samé, jen ne v Google Tag Manageru ale přímo na webu. Diskuse je často nad tím, zda konverzi spouštět v době odeslání z webu (událost wpcf7submit) nebo až odeslání mailu (wpcf7mailsent). Já jsem příznivcem první možnosti. Jelikož se nám již pomocí měření konverzí tímto způsobem povedlo odhalit, že maily se kvůli chybám na serveru správně neodešlou. Jinak zde rozdíl nevidím.

V druhém případě může toto řešení být problematické, hlavně při aktualizacích pluginů nebo úpravách vývojářem, kdy se může změnit třída zprávy o úspěchu a tím přestane fungovat i měření. Také je nutné vždy řešení více otestovat na různých zařízeních a při poklesu formulářů ihned otestovat, zda měření stále funguje.

Ve výjimečných případech toto řešení prostě fungovat nebude, jelikož něco na stránce může blokovat předávání informací webové stránce (v JavaScriptu spojené s událostmi preventDefault(), stopPropagation() apod.). Zde je nutné obrátit se na vývojáře.

Celkově máme ale tato řešení velmi rádi. Jelikož nám umožňují flexibilně reagovat na požadavky klienta a snižují objem nutné komunikace kvůli měření.

Přihlaste se k našemu newsletteru
Posíláme jej maximálně 4x ročně. Přihlášením souhlasíte se zpracováním osobních údajů pro účely newsletteru.
Další příspěvky od našich specialistů
Google Analytics

Záloha dat ze starých Google Analytics

1.1.2023 měly skončit staré Google Analytics. Stále ale fungují (už ale máme první účty, které data nesbírají!), ale datům v nim bychom už stejně příliš