JavaScript/PHP Webová analytika WordPress

Sledování odeslání formulářů v Contact Form 7 pomocí GTM

Plugin CF 7 je velmi populární WordPress plugin, vždy aktualizovaný, lehce použitelný a skvěle měřitelný.

Měřit plugin CF 7 je možné několika postupy:

1) Využít další nastavení v pluginu

Bohužel tato varianta je v současné verzi CF 7 deprecated, ale bylo to fakt snadné:
Vložení kódu do CF 7

2) Využití DOM events CF 7

Zjednodušeně řečeno, plugin CF 7 informuje stránku o tom, co se zrovna děje: zde je seznam události: Přejít na web CF7

Je možné například využití události pro wpcf7invalid (chyba při odeslání), wpcf7submit (úspěšné odeslání).

Následně při odeslání je možné pracovat s různými vlastnostmi, z nichž nejdůležitější je ID formuláře (detail.contactFormId).

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '979' == event.detail.contactFormId ) {
        dataLayer.push({"event": "cfsent", "cftype": event.detail.contactFormId });
     }
}, false );
</script>

Takže stačí, když posloucháte, co se děje na stránce a dle toho posíláte dataLayer. Tento kód je možné vložit to patičky webu, pomocí pluginu nebo funguje i tehdy, když jej spustíte přes GTM. Poslední varianta je obzvlášť výhodná, jelikož nepotřebujete vývojáře.

Pokud chcete tracovat Sklik, nejspolehlivější se mi zatím zdá využití jQuery.append a přidat na konec stránky Sklik iframe. Argumentovat je možné tím, že využívám knihovnu jQuery. Ale ta už stejně na většině webů je. Na Stackoverflow najdete i možnost, jak to udělat v čistém JavaScriptu.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '979' == event.detail.contactFormId ) {
        jQuery("body").append('');       
    }
}, false );
</script>

Důležité je vždy využít escape speciálních znaků u iframu. Jsou na to zase webové stránky, např. Free Formatter.

Pokud náhodou nemáte na webu GTM a chtěli byste odesílat pouze do GA, můžete použít tento kód. Do štítku události přidávám cestu současné stránky. V GTM je flexibilnější toto udělat u tagu. Ještě zde testuji, jestli vůbec GA na stránce je. Podobné testování je dobré dělat i u GTM, u jQuery apod.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '979' == event.detail.contactFormId ) {
        if(ga) {var adresa = window.location.pathname; ga('send','event','Formular','odeslan', adresa); }
    }
}, false );
</script>

3) Využití integrace s CF 7 před DuracellTomi

Plugin DuracellTomi GTM umí nejenom sledovat odeslání CF 7, ale i sledovat průchod uživatele kontaktním formulářem. Zbytečně ale trackuje všechny formuláře a jeho DL události jsou zbytečně podrobné. Spíš to tedy řeším cestou vlastních posluchačů.

Demo a ukázkový kontejner

Demo řešení, které jsem ukazoval při přednášce najdete na adrese webova-analytika.cz/demoshop (klidně si něco objednejte, ale dodávku nečekejte :)), ukázkový kontejner s Enhanced Ecommerce a CF 7 si stáhněte zde.

Poznámka: Tento článek je shrnutí mé přednášky z Measure Camp Prague 2017. V přednášce jsem se zabýval hlavně nasazením Enhanced Ecommerce na WordPress.

Komentáře, dotazy, problémy, nápady samozřejmě pište do komentářů nebo mi napište.

Komentáře

Mohlo by se vám také líbit
Ultimate guide – how to use custom JavaScript in Microsoft Sharepoint Online
Jak dlouho trvá datům a tržbám než se objeví v Google Analytics? [KB]