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
WP REST API – Praktický průvodce od úplných začátků
JavaScript v GTM – Measure Camp Brno 2017