Měření konverzí formuláře Contact Form 7 pomocí Google Tag Manager

Plugin Contact Form 7 je nejpopulárnějším pluginem ve WordPress, díky kterému můžeme na web snadno přidat kontaktní a jiné formuláře. Jestliže chceme nastavit měření konverzí, abychom mohli v Google Analytics sledovat výkon jednotlivých formulářů, máme dvě možnosti.

1. Nastavit měření konverzí v rámci kódu webu.
2. Nastavit měření konverzí přes Google Tag Manager.

V prvním případě potřebujeme samozřejmě přístup do zdrojového kódu stránek, ale může se jednat o přívětivější metodu pro kodéry a programátory, kteří chtějí mít vše pod kontrolou.

Ve druhém případě zvládneme udělat vše bez jakéhokoliv zásahu do zdrojového kódu a bez pomoci vývojářů. Jediné, co k tomu potřebujeme, je mít implementovaný Google Tag Manager a ověřit, že se skutečně jedná o formulář vytvořený pomocí pluginu Contact Form 7.

1. Sledování události odeslání Contact Form 7 formuláře

Contact Form 7 používá pro zpracování formuláře metodu Ajax (odeslání formuláře bez přesměrování na jinou stránku), z toho důvodu nemůžeme nastavit měření konverzí na URL stránky s poděkování za odeslání formuláře.

Někteří markeťáci dělají chybu, že nastaví měření konverzí formuláře jako počet kliknutí na tlačítko Odeslat. Tento přístup je však z několika důvodů špatný. Jednak takto měříte i odeslání formuláře, které skončí chybou, ale hlavně takto nezměříte odeslání formuláře, který uživatel potvrdit například pomocí klávesnice apod.

Z těchto důvodů musíme použit sledování javascriptových událostí, které nám plugin Contact Form 7 nabízí.

Javascriptové události Contact Form 7

• wpcf7invalid – Volá se v případě, že uživatel odeslal formulář, ale email nebyl odeslán z důvodu chybně vyplněných polí (např. špatný formát emailu).
• wpcf7spam – Volá se v případě, že byl odeslán formulář, ale zpráva byla detekována jako potencionální spam a nebyla tedy odeslána.
• wpcf7mailfailed – Volá se v případě, že uživatel odeslal formulář, ale např. kvůli technickým problémům nebyla zpráva odeslána.
• wpcf7submit – Volá se při každém pokusu o odeslání formuláře bez ohledu na další události.
• wpcf7mailsent – Volá se v případě, že uživatel odeslal formulář a zpráva byla úspěšně odeslána bez jakýchkoliv chyb.

Poslední zmíněná událost wpcf7mailsent je ta, kterou potřebujeme a použijeme ji pro předání dat do Google Tag Manageru.

2. Vytvoření značky pro předání dat do Google Tag Manageru

Přesuneme se do služby pro náš web v rámci účtu Google Tag Manager. Jako první zde vytvoříme novou značku, která bude sledovat volání události wpcf7mailsent.

1. Vytvoříme novou značku (Značky > Nová) a pojmenujeme ji například listener – wpcf7mailsent (aby bylo jasné, že se jedná o značku odposlouchávající událost wpcf7mailsent).
2. Jako Typ značky zvolíme Vlastní HTML a do kódu vložíme HTML kód uvedený níže.
3. Spouštěcí pravidlo vybereme All Pages, zobrazení stránky. Díky tomu se bude značka spouštět na všech stránkách webu.
   Pokud chcete řešit lepší optimalizaci, můžete zvolit konkrétní stránky, kde se značka spustí. Jen je do budoucna na to potřeba myslet. Kdyby se přidal formulář na jiné stránky, měření zde fungovat nebude.

<script>
document.addEventListener('wpcf7mailsent', function (event) {
    window.dataLayer.push({
        'event':    'cf7mailsent',
        'formId':   event.detail.contactFormId,
        'response': event.detail.inputs
    });
});
</script>

Díky této značce se nám budou předávat z webu data při odeslání formuláře do našeho GTM, kde s nimi můžeme dále pracovat. Konkrétně předáváme ID odeslaného formuláře v rámci proměnné formId a v proměnné response máme všechna vyplněná data od uživatele. V tomto případě sice hodnoty z polí ve formuláři nevyužijeme, ale někdy se můžou hodit.

Důležité je zde také nastavení eventu cf7mailsent, na který budeme v rámci GTM dále reagovat.

3. Spouštěcí pravidlo odeslání formuláře

Abychom mohli v rámci našeho GTM kontejneru na událost odeslání formuláře dále reagovat, musíme vytvořit nové spouštěcí pravidlo.

1. Vytvoříme nové spouštěcí pravidlo – Pravidla > Nové. Pravidlo pojmenujeme například CF7 MailSent.
2. Typ pravidla zvolíme Vlastní událost.
3. Název události nastavíme na cf7mailsent, což odpovídá názvu události, který máme nastavený v rámci předchozí značky listener – wpcf7mailsent.

4. Definice proměnných pro ID a název formuláře

Abychom mohli převzít data odeslána do GTM a dále s nimi pracovat, musíme nadefinovat nové proměnné kontejneru, především pro ID formuláře, které budeme následně odesílat do Google Analytics a počítat dle něj počet odeslání našeho formuláře.

1. V GTM kontejneru přejdeme do Proměnné > Nová. Proměnnou pojmenujeme cf7 – formId.
2. Jako typ proměnné zvolíme Proměnná datové vrstvy.
3. Název proměnné datové vrstvy nastavíme na formId a uložíme.

Nyní můžeme vytvořenou proměnnou cf7 – formId rovnou použit a odesílat její hodnotu do Google Analytics.

Vyhledávací tabulka pro název formuláře

Někdy můžeme chtít místo ID formuláře odesílat do GA jeho název. Toho můžeme docílit vytvořením nové proměnné pro definici názvu formuláře.

1. Proměnnou pojmenujeme cf7 – formName.
2. Jako typ proměnné zvolíme Vyhledávací tabulka.
3. Vstupní proměnnou vybereme cf7 – formId, kterou jsme si nadefinovali v předchozím kroku.
4. Vyhledávací tabulku nadefinujeme podle ID našich formulářů, potřebujeme tedy zjistit ID pro všechny naše formuláře.
5. Nastavíme výchozí hodnotu na proměnnou cf7 – formId. Díky tomu se bude do GA odesílat místo názvu formuláře jeho ID, pokud v tabulce nebyl nalezen (např. nově vytvořený formulář).

Proměnná pro ID měření Google Analytics

Pokud ještě nemáte vytvořenou proměnnou, která obsahuje ID měřícího kódu Google Analytics, doporučuji ji nadefinovat. Tuto proměnnou můžete využívat v rámci GTM i pro jiné účely a nemusíte pokaždé uvádět ID měřícího kódu. Díky proměnné máme vše na jednom místě.

5. Předání události odeslání formuláře do Google Analytics

Poslední věc, kterou v rámci Google Tag Manageru potřebujeme nastavit, je odeslání události do Google Analytics.

1. Vytvoříme novou značku, kterou pojmenujeme například Contact Form 7 Submit.
2. Typ značky zvolíme Google Analytics: Universal Analytics.
3. Typ měření zvolíme Událost.
4. Parametry měření událostí, které se pošlou do Google Analytics, můžeme nastavit podle svých potřeb, v mém případě to je:
   • Kategorie – form
   • Akce – send
   • Štítek – proměnná cf7 – formId nebo cf7 – formName, které jsme si vytvořili v předchozím kroku. Doporučuji však použit cf7 – formId a název nastavit až v rámci nastavení konverze Google Analytics.
5. Do Nastavení Google Analytics zvolíme naši proměnnou s ID měření Google Analytics.
6. Jako spouštěcí pravidlo vybereme CF7 MailSent.

Nyní můžeme vše uložit, v rámci Google Tag Manageru publikovat novou verzi nastavení kontejneru, měření začne probíhat a do Google Analytics se nám bude posílat naše událost odeslání formuláře Contact Form 7.

6. Nastavení měření konverze v Google Analytics

Nyní se nám do Google Analytics odesílá nová událost při každém odeslání Contact Form 7 formuláře, z čehož už můžeme počty odeslání vyčíst, nicméně je dobré ještě nastavit měření konverzí, které pak můžeme lépe navázat na marketingové kampaně apod.

1. Ve službě Google Analytics se přesuneme do Správce > Cíle.
2. Zde klikneme na Nový cíl pro jeho vytvoření.
3. Nastavení cíle zvolíme Vlastní.
4. Popis cíle:
   • Název můžeme zvolit dle libosti, např. Odeslání formuláře.
   • Typ zvolíme Událost.
5. V Podrobnosti cíle nastavíme podmínky události, které odpovídají tomu, co jsme nastavili v předchozím kroku:
   • Kategorie – Je rovno – form
   • Akce – Je rovno – send
   • Štítek – Je rovno – Jestliže chceme měřit událost odeslání konkrétního formuláře, vyplníme zde ID formuláře nebo jeho název (podle toho, co jsme v předchozím kroku nastavili jako štítek). Pokud chceme v rámci konverze měřit odeslání jakéhokoliv formuláře, můžeme ponechat prázdné.
6. Vše uložíme a máme hotovo.

Nyní můžeme v Konverze > Cíle > Přehled sledovat počty odeslání formuláře za určité období.