GTM pro sledování cílů v Contact Form 7

Hodně lidí používá redakční systém WordPress a určitě chce měřit cíle – minimálně sledovat jestli se někdo přihlásil k newsletteru nebo odeslal kontaktní formulář.
Což je i případ mě, kde jsem potřeboval rozchodit cíle na webové prezentaci akademiecz.cz sledování odeslaných objednávek, kontaktního formuláře nebo přihlášení do newsletteru.

Ve wordpressu je na to dobrý plugin Contact Form 7, kde si nadefinujete jak mají dané formuláře vypadat. Pro sledování nadefinovaných cílů v GA pak stačilo dodat magickou formulku – on_sent_ok: „_gaq.push([‚_trackEvent‘, ‚Kontakt‘, ‚Odeslat‘]);“ – pro staré analytics a pro nové to nemělo být o moc složitější – on_sent_ok: „ga(‚send‘, ‚event‘, ‚Kontakt‘, ‚Odeslat‘);“…nemělo.

contact-form-7-nastaveni-cile

Nevím, prostě mi to nefungovalo a absolutně to ignorovalo tento požadavek (asi někde chyba mezi počítačem a židlí).

Začal jsem teda vymýšlet jak to obejít a šáhl jsem hned po GTM a to po Naslouchači odeslání formuláře.

Easy – potřebujete 2 značky a 1 pravidlo.

  • Naslouchač odeslání formuláře
  • Google Analytics nastavený na event
  • Pravidlo pro spouštění

Naslouchač odeslání formuláře

Tam nemáte moc co nastavovat, vytvoříte si značku, kterou necháte spouštět na všechny stránky. Ano, můžete to omezit pouze na stránky, kde máte nějaký formulář, ale co když ho pak někde přidáte a zapomenete aktualizovat GTM?
Jenom si zaškrtněte – Zkontrolovat ověření – aby se cíl neodesílal i při chybných hláškách, ale odeslal se opravdu až dojde k úspěšnému odeslání formuláře.

gtm-naslouchac-odeslani-formulare

Google Analytics nastavený na event

U této značky musíte mít nastavené typ měření na (Event) událost a buď si parametry měření vyplníte (máte 1 formulář) nebo si v nich nadefinujete makra, aby se automaticky doplňovala podle daného formuláře. Parametry musí být stejné jak je máte nastavené v cílech GA.
Tento event musíte nastavit na spouštění podle pravidla, které si nastavíme níže.

gtm-google-analytics-event

Pravidlo pro spouštění eventu

Důležité u tohoto pravidla je nastavit event obsahuje gtm.formSubmit a následně ID nebo Class formuláře, který máte na stránkách.

gtm-pravidlo-spusteni-eventu

V mém případě je to mc-embedded-subscribe-form.

gtm-event-element-id-form

Easy, ne?

Jenže to by nebyla s wordpressem taková sranda, kdyby to fungovalo tak jednoduše. Contact Form 7 toto nastavení opět ignoruje, respektive nespouští po kliknutí na tlačítko odeslat událost. Skvělé.

Začalo mé 2 denní hledání, jak to obejít, jak to upravit a co s tím. Našel jsem:) Proto taky píšu tento příspěvek, abych pomohl těm, kteří mají podobný problém.

Do Contact Form 7 do dalšího nastavení stačí dát podobný kousek kódu jako pro GA, jenom se pošle datová vrstva s eventem, který si nějak pojmenujete – on_sent_ok: "dataLayer.push({'event': 'contact-form-submitted'});"
Následně v GTM si upravíte pravidlo pro spouštění značek pouze na event obsahuje obsah dataLayeru, v našem případě contact-form-submitted.

gtm-pravidlo-spusteni-eventu2

Jestli máte lepší řešení budu rád, když se o něj se mnou podělíte, protože jsem na to opravdu nepřišel, jak to udělat jinak. Podotýkám, že neumím programovat a ani JS 🙂

Tomáš Bzirský

Přes 14+ let dělám online marketingu, Business development v e-commerce. Baví mě crypto a nové technologie.

You may also like...

2 Responses

  1. JAW napsal:

    Podobné řešení hledám už dlouho…

    Ty uvozovky mi dělaly paseku. Prošlo mi až:
    on_sent_ok: dataLayer.push({„event“: „contact-form-submitted“});

  2. Díky za upozornění, protože jsem si nevšiml, že mi wordpress hodil spodní uvozovky, takže v tom může být problém. Normálně mi funguje zápis.

    on_sent_ok: "dataLayer.push({'event': 'contact-form-submitted'});"