Zakaj uporabljati Google Tag Manager in kako slediti dogodkom na strani smo že predstavili v preteklih zapisih. Večkrat pa se zaplete pri sledenju obrazcev, kjer je potrebnih več dodatnih korakov za uspešno implementacijo. Preverili bomo, kako vzpostaviti sledenje preprostih obrazcev in form oblikovanih z WordPress vtičnikom Contact Form 7.
Nastavitve v Google Tag Managerju
Preden se lotimo postavljanja značke, ki bo v Google Analytics poslala informacije o dogodku na strani (izpolnitev forme), bomo morali omogočiti že vgrajene spremenljivke za obrazce ter prednastavljen sprožilec za beleženje interakcij z obrazci v Tag Managerju. Gre za t. i. auto-event listener, ki “posluša” oziroma spremlja vse uspešno oddane obrazce (gre za standardne submit dogodke znotraj brskalnikov. Obstajajo tudi drugačni načini pošiljanja podatkov ob izpolnitvi form, npr. z jQuery, Ajax). Več o tem v nadaljevanju.
Postavitev prožilcev in spremenljivk v Google Tag Managerju
Prvi korak implementacije sledenja obrazcem je vključitev spremenljivk vgrajenih v Tag Managerju. V zavihku Variables moramo obkljukati okenca v razdelku Forms, kjer se nahajajo spremenljivke, kot so Form ID, Form URL in ostale. Te vam bodo pomagale pri določanju lastnosti prožilcev, filtiranju in pravilnem proženju dogodkov ob izpolnitvi obrazcev:
Naslednji korak je oblikovanje splošnega sprožilca, ki spremlja interakcije z obrazci (gre za že vgrajen sprožilec znotraj Tag Managerja). Odpremo zavihek Triggers in kliknemo na gumb New za postavitev novega sprožilca in izberemo tip z imenom Form Submission. V tej točki moramo urediti posamezne nastavitve. Obkljukati moramo okence “Check Validation” in vnesti URL, kjer se forma nahaja (glej spodnjo sliko). Validacija je pomembna, saj želimo, da se dogodek sproži, le ko je forma pravilno izpolnjena, z URL-jem pa definiramo, kje se forma nahaja.
Testiranje obrazcev na strani
Sledi preverjanje ali se sproži splošen dogodek prek Google Tag Managerja, ki smo ga ustvarili v prejšnji točki (dogodek je poimenovan gtm.formSubmit in se mora pri testiranju pojaviti v naši konzoli za predogled). Omogočite “Preview in Debug” konzolo in izpolnite obrazec na strani. Pojaviti se vam mora omenjeni event gtm.formSubmit (glej spodnjo sliko). Poskusite ponovno izpolniti obrazec, a tokrat namenoma pustite katero izmed obveznih polj prazno. Če se proži gtm.formSubmit event ob vsakem kliku na potrditveni gumb, bo potrebno izbrati drugačen pristop k sledenju obrazca. Vaš cilj je namreč, da se podatek o izpolnjeni formi pošlje le takrat, ko je ta pravilno oddana.
Preden oblikujemo še značko za Google Analytics dogodek, moramo poskrbeti, da se sprožilec proži za izbran obrazec (če imate na strani le en obrazec, ta korak ni potreben). Ob kliku na gtm.formSubmit, bomo v Preview & Debug konzoli izbrali zavihek Variables.
Praviloma imajo obrazci svoj ID ali edinstveno vrednost kake druge spremenljivke, ki jih razlikuje od ostalih obrazcev. Izberemo eno od spremenljivk in skopiramo njeno vrednost (v zgornjem primeru npr. Form Classes z vrednostjo wpcf7-form-control wpcf7-submit). Ponovno odpremo sprožilec, ki smo ga oblikovali na začetku in izberemo možnost proženja na nekaterih formah (Some forms), ter vnesemo ustrezno vrednost v polje Form Classes (glej sliko spodaj).
Zadnji korak je oblikovanje značke, prek katere se bo v Google Analytics zabeležil dogodek. Pri tem izberemo zgornji sprožilec in delovanje preizkusimo v Preview & Debug konzoli. Ne pozabite objaviti značke. Za pomoč, kako postaviti značko v Tag Managerju, si lahko preberete zapis za event tracking z Google Tag Managerjem.
Kaj pa pri Ajax/jQuery obrazcih?
Osnovna konfiguracija auto-event listenerja v Google Tag Managerjev nima obširne podpore. V praksi to pomeni, da veliko obrazcem, ki so oblikovani s pomočjo vtičnikov ali orodij (npr. Contact Form 7 obrazci v WordPressu) z zgornjim pristopom ne bo mogoče slediti (pogosto gre za obrazce, kjer niste preusmerjeni na zahvalno stran, ampak se samo izpiše tekst o uspešno oddanem povpraševanju ali kontaktu). V tem primeru lahko oblikujete svoj auto-event listener, kjer gre za JavaScript funkcije, ki spremljajo interakcije uporabnikov na vaši strani. Pri tem lahko sprožite Data Layer dogodke, ki jih lahko v Google Tag Managerju uporabite kot filtre. Da ne bo preveč zapleteno, si poglejmo posamezne korake na praktičnem primeru.
Kaj pravi dokumentacija za razvijalce?
Vzemimo za primer Contact Form 7 obrazce, ki se jih pogosto uporablja na WordPress spletnih straneh. V dokumentaciji so opisani posamezni DOM dogodki, ki se lahko sprožijo ob interakciji z obrazci. Eden od teh je wpcf7mailsent, ki se sproži, ko je forma pravilno izpolnjena. To lahko uporabimo za oblikovanje značke v Google Tag Managerju.
Oblikovanje auto-event listenerja
Ker ne moremo uporabiti že vgrajenega auto-event listenerja v Tag Managerju, bomo morali postaviti svojega. Z njim bomo spremljali interakcije s Contact Form 7 obrazcem (v našem primeru je to pravilno izpolnjen in uspešno oddan obrazec). Najprej moramo oblikovati novo HTML značko (v GTM-ju v zavihku Tags izberemo Custom HTML značko) in dodati spodnjo kodo na vse podstrani spletnega mesta. Ta bo “poslušala” kdaj se sproži wpcf7mailsent dogodek in pri tem poslala želene informacije v data layer.
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
dataLayer.push({
‘event’ : ‘wpcf7successfulsubmit’,
‘CF7formID’ : event.detail.contactFormId
});
}, false );
</script>
V vrstici kode s parametrom ‘event’ smo dodali ‘wpcf7successfulsubmit’, a to poimenovanje je lahko poljubno. Dodano kodo objavimo in/ali testiramo s Preview & Debug konzolo. Izpolnimo obrazec na strani in spremljamo, če se prikaže dogodek ‘wpcf7successfulsubmit‘.
Oblikovanje Custom event sprožilca
Preden postavimo značko moramo oblikovati še sprožilec, ki bo določal, kdaj se značka sproži in informacija o konverziji pošlje v Google Analytics. V zavihku Triggers izberemo tip sprožilca “Custom Event”. V polje “Event name” vstavimo ‘wpcf7successfulsubmit‘ oziroma ime eventa, ki ste ga sami določili v prejšnjem koraku. V primeru, da imamo na strani več obrazcev, lahko tu dodatno določimo ob kateri formi naj se ta sprožilec proži (npr. na podlagi Form ID spremenljivke).
Postavitev značke oziroma Taga
Ostane še sklepno dejanje, kjer postavimo značko za zbiranje podatkov v Google Analytics. V meniju Tags izberemo tip značke za Google Analytics, pod Track Type izberemo možnost Event in izpolnimo tri gradnike dogodka – Event Category, Action, Label. Več o tem si lahko preberete v tem zapisu. Kot sprožilec boste izbrali Custom event, ki smo ga oblikovali v predhodnem koraku. Sprožilec poskrbi, da se informacija o izpolnjeni formi pošlje v Google Analytics, ko je ta pravilno izpolnjena.
Poleg omenjenih načinov sledenja interakcij z obrazci obstajajo še drugi pristopi, ki so specifični za različne tipe form. Velikokrat brez pomoči razvijalca ni mogoče vzpostaviti pravilnega sledenja, a na spletu obstaja veliko že oblikovanih rešitev, ki jih lahko uporabite na svojih obrazcih. Če imate kakšna vprašanja pa nam pišite na zivijo@madwise.si
Dodatni viri:
