Měření leadů pomocí Contact Form 7 a GTM

Začněme od základů. Budete potřebovat následující:

• stránky běžící na systému WordPress;
• GTM kontejner, kde máte publikační práva;
• plug-in Contact Form 7.

Nastavte Contact Form 7

Toto je jednoduchý formulář, který použijeme na kontaktní stránce.

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Vyzkoušejte to a zjistěte, zda odeslaný formulář dorazil do vašeho e-mailu. Pokud ano, přejděte k dalšímu kroku.

Vytvoření naslouchače událostí v GTM

Vytvořili jsme jednoduchý a funkční formulář. Když návštěvníci vašich webových stránek formulář úspěšně odešlou, musíme o tom dát vědět nástroji Google Tag Manager. Toho dosáhneme přidáním následujícího kódu (naslouchač událostí) do kontejneru jako vlastní značky HTML.

<script>
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function(event) {
    window.dataLayer.push({
        'event' : 'form-submit',
        'eventCategory' : 'form-contact',
        'eventAction' : 'submit',
        'eventLabel' : '{{Page Path}}',
        'eventNonInteraction' : false
    });
}, false );
</script>

Dovolil jsem si upravit standardní naslouchač CF7, který najdete v dokumentaci plug-inu.

Kód naslouchá změnám v DOMu. Když dojde k odeslání formuláře, DOM zaznamená změnu. Pak se spustí příkaz window.dataLayer.push. GTM nyní ví, že došlo k události s názvem form-submit. Ve struktuře dataLayer jsou také uloženy všechny důležité údaje o dané události, takže s nimi můžeme snadno pracovat.

Nastavte naslouchač událostí spouštět na všech stránkách. Pokud máte velký web a optimalizujete jeho výkon, omezte HTML tag, aby se spouštěl pouze na stránkách s viditelným kontaktním formulářem..

Přidejte proměnné dataLayer do GTM

Máte všechny klíče z výše uvedeného objektu dataLayer nastaveny jako proměnné v GTM? Pokud ne, nastavte je.

Vytvořte trigger

Ujistěte se, že jste událost ve formuláři pojmenovali form-submit, jinak nebude fungovat.

Má-li se trigger spustit pouze po úspěšném odeslání formuláře, můžete přidat další podmínky pro jeho aktivaci. V našem případě se tento spouštěč aktivuje pouze tehdy, když dojde k události, kdy se proměnná dl.eventCategory rovná form-contact a dl.eventAction se rovná submit.

Vytvořte tag pro události posílané do GA

Nakonec musíme vytvořit značku, která odešle údaje o odeslaném formuláři do služby Google Analytics. Všechny informace o události máme v objektu dataLayer připojeném k naslouchači události. Zároveň jsou všechny proměnné dataLayer z naslouchače událostí vloženy do GTM, takže je lze snadno přečíst.

Nyní vytvořte tag s následujícími parametry. Zajistěte, aby se značka spustila při aktivaci triggeru, který jste vytvořili v předchozím kroku.

Testujte

Už jsme skoro na konci. Zapněte režim náhledu a zkuste odeslat formulář s fiktivními daty. Pokud jste vše provedli správně, měl by se při načtení stránky spustit naslouchač událostí a při odeslání formuláře se spustí značka GA.

Další kroky

Contact Form 7 má mnoho různých funkcí pro rozšířené sledování a sběr dat. Můžete například extrahovat jméno nebo e-mail uživatele, který vyplnil formulář, a odeslat je do analytického softwaru (pokud to smluvní podmínky vašeho softwaru umožňují), nebo dokonce do vlastní databáze. K této myšlence se vrátíme někdy později.