Pokročilé měření formulářů na webu

Měření odeslaného formuláře patří mezi základy události na obsahových webech a e-shopech. Na obsahových webech přitom zastupují způsob, jakým uživatelé poptávají služby. V rámci e-shopů se jedná především o registrace zákazníka nebo kladení dotazů a vyřizování reklamací. V neposlední řadě lze měřit formuláře pro získání krátkodobého přístupu zdarma do webových aplikací. 

Všechno tyto typy formulářů lze měřit základním a snadným způsobem, ale lze je doměřit také velmi detailně. Vše záleží na tom, jakou má konkrétní formulář přidanou hodnotu pro byznys a jak bude následně s daty nakládáno. Pakliže jde pouze o to, kolikrát byl formulář vyplněn, není potřeba zabíhat do detailů. Dále ale nastávají situace, kdy jsou data z formulářů stěžejní pro následné marketingové a byznysové aktivity.

Jednoduché měření odeslaného formuláře

Jak již bylo zmíněno, v případě, že je potřeba znát pouze počet odeslaných formulářů, nabízí se jednoduché řešení. 

Formulář má vlastní potvrzovací zprávu, například: “Vaše žádost byla úspěšně odeslána”. 

  1. V takovém případě je potřeba nastavit odeslání na tzv. Element visibility v GTM, který se spustí poté, co se objeví právě tato zpráva.
  2. Nelze nastavit pouze na kliknutí na tlačítko: “odeslat”, protože by se událost poslala pokaždé bez ohledu na to, zda byl formulář správně vyplněn a odeslán či nebyl.

V takovém případě vypadá trigger následovně:

Formulář nemá potvrzovací zprávu po odeslání

I v tomto případě lze odeslání celkem jednoduše měřit. Závisí to pouze na tom, kdo web tvořil a kdo zde může provádět úpravy. Postup je následující:

  1. Vytvořit novou stránku, která se bude jmenovat například: “Potvrzení o odeslání formuláře”
  2. Na novou stránku přidat nadpis s potvrzením odeslání + rozcestník “kam dál”.
  3. Na nově vytvořenou stránku přesměrovat formulář po jeho úspěšném odeslání
  4. Na stránku, která bude mít adresu například: “/potvrzeni-formulare_xy” napojit trigger v GTM.
  5. V GTM následně vytvoříme nový trigger, který bude spouštět událost form_submit ve chvíli, kdy se uživatel dostane na stránku: “/potvrzeni-formulare_xy” – a to pouze pomocí page_view triggeru
  6. Nově vytvořené stránka by neměla být nikde zaindexována a ani jiným způsobem dosažitelná pro uživatele – tím eliminujete možnost, že se na stránku dostane někdo bez toho, že by před tím vyplnil a odeslal formulář.

Pokročilé měření vyplněných dat

Pakliže dojdete k závěru, že samotná data z formulářů pro vás mají byznysový a marketingový význam (jedná se třeba o Trial přístupy, poptávky, apod…) narazíte na problém, že prosté měření počtu odeslání nestačí. 

V takovém případě vám nezbyde nic jiného než zasáhnout do kódu, ať už skrze GTM nebo datovou vrstvu.

Zásah do datové vrstvy

Tato varianta může být jednodušší v závislosti na tom, jak šikovného a zda vůbec máte vývojáře. Pokud totiž chceme měřit a odesílat samotná data z formuláře, jako například, jména, adresy, emaily, telefony, vybrané služby, případně další parametry je jednou z možností vytvoření nového dataLayer pushe.

Tato varianta počítá se znalostí javascriptu na straně vývojáře webu / e-shopu, který jej dokáže implementovat a následně na člověku, který dokáže pro vývojáře vytvořit konkrétní zadání.

Zadání může vypadat například takto:

dataLayer.push({
      'event':'form_submit',
           'step': 1
           'options':'create_free_account',
           'item_name':'free_trial_subscription',
           'form_id':'abc123',
           'tier':'2',
        'user': { 
           'id': '123abc',
           'hash': 'dd55d56w6erwr2ew32r6', // sha256 from lowercase trimmed email
           'email': '[email protected]', // naked lowercased trimmed email
           'name':'John Doe',
           'address':'Street X, Alabama',
           'phone':'+3355512548'     
}
_clear: true; // the parameter that precedes the recursive merge of individual objects, i.e. the products object is always overwritten by an object from push

});

Jakmile je takto zadaný dataLayer push implementován do webu, otestován a funkční, zbývá nastavit sběr dat v samotném GTM.

Nezapomeňte, že všechny použité parametry je potřeba přidat ručně také do GA4 – admin – property – custom definition jako “custom dimensions”. Event parameters jsou následně event-scoped dimenze a User properties jsou user-scoped dimenze

Zásah do kodu skrze GTM

Tento případ nastane ve chvíli, kdy nemáte vývojáře, který by pomocí javascriptu implementoval dataLayer push, viz výše.

Data z formulářů lze sbírat rovnou při vyplňování formuláře, ale chce to trochu cviku a notnou dávku nervů při samotném testování a zkoušení CSS selectorů.

Nicméně, pokud jste zdatní ve vývojářských nástrojích v prohlížeči a umíte si najít příslušné CSS ID konkrétního pole ve formuláři, může výsledný kód vypadat následovně (pouze ukázka):

Tento kód vložte do GTM proměnných, jako “custom javascript”

function() {
  'use strict';
  try {
const form = document.querySelector('form');
const data = new FormData(form);
const value1 = data.get('input1');
 return value1;
    }    catch (e) {
      return undefined;    }}

Následný postup bude stejný jako v předchozím případě. Do tagu s událostí přidejte parametry dle dat, která sbíráte pomocí javascript proměnných a jako hodnotu zvolte nově vytvořené proměnné.

Bude následovat mnoho testování jak na straně GTM, tak na straně samotných GA4, abyste si mohli být jisti, že data se měří tak, jak jste si představovali.

V GA4 následně uvidíte data pod události “form_submit”:

Přejít nahoru