{"id":23461,"date":"2019-07-31T00:00:00","date_gmt":"2019-07-31T12:39:41","guid":{"rendered":"https:\/\/madwise.si\/blog\/?p=23461"},"modified":"2023-04-28T09:07:57","modified_gmt":"2023-04-28T07:07:57","slug":"sledenje-obrazcem-z-google-tag-managerjem","status":"publish","type":"post","link":"https:\/\/madwise.si\/blog\/sledenje-obrazcem-z-google-tag-managerjem\/","title":{"rendered":"Sledenje obrazcem z Google Tag Managerjem"},"content":{"rendered":"\r\n

Zakaj uporabljati Google Tag Manager in kako slediti dogodkom na strani smo \u017ee predstavili v preteklih zapisih<\/a>. Ve\u010dkrat pa se zaplete pri sledenju obrazcev<\/strong>, kjer je potrebnih ve\u010d dodatnih korakov za uspe\u0161no implementacijo. Preverili bomo, kako vzpostaviti sledenje preprostih obrazcev<\/strong> in form oblikovanih z WordPress vti\u010dnikom Contact Form 7.<\/strong><\/p>\r\n\r\n\r\n\r\n\r\n\r\n

Nastavitve v Google Tag Managerju<\/h2>\r\n\r\n\r\n\r\n

Preden se lotimo postavljanja zna\u010dke, ki bo v Google Analytics poslala informacije o dogodku na strani (izpolnitev forme), bomo morali omogo\u010diti \u017ee vgrajene spremenljivke za obrazce ter prednastavljen spro\u017eilec za bele\u017eenje interakcij z obrazci v Tag Managerju<\/strong>. Gre za t. i. auto-event listener,<\/strong> ki \u201cposlu\u0161a\u201d oziroma spremlja vse uspe\u0161no oddane obrazce (gre za standardne submit dogodke znotraj brskalnikov. Obstajajo tudi druga\u010dni na\u010dini po\u0161iljanja podatkov ob izpolnitvi form, npr. z jQuery, Ajax). Ve\u010d o tem v nadaljevanju.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

Postavitev pro\u017eilcev in spremenljivk v Google Tag Managerju<\/h2>\r\n\r\n\r\n\r\n

Prvi korak implementacije sledenja obrazcem je vklju\u010ditev spremenljivk vgrajenih v Tag Managerju<\/strong>. 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\u010danju lastnosti pro\u017eilcev, filtiranju in pravilnem pro\u017eenju dogodkov<\/strong> ob izpolnitvi obrazcev:<\/p>\r\n\r\n\r\n\r\n

\"Google<\/figure>\r\n\r\n\r\n\r\n

Naslednji korak je oblikovanje splo\u0161nega spro\u017eilca, ki spremlja interakcije z obrazci<\/strong> (gre za \u017ee vgrajen spro\u017eilec znotraj Tag Managerja). Odpremo zavihek Triggers in kliknemo na gumb New za postavitev novega spro\u017eilca in izberemo tip z imenom Form Submission<\/strong>. V tej to\u010dki moramo urediti posamezne nastavitve. Obkljukati moramo okence \u201cCheck Validation<\/strong>\u201d in vnesti URL, kjer se forma nahaja (glej spodnjo sliko). Validacija je pomembna, saj \u017eelimo, da se dogodek spro\u017ei, le ko je forma pravilno izpolnjena, z URL-jem pa definiramo, kje se forma nahaja.<\/p>\r\n\r\n\r\n\r\n

\"Google\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Testiranje obrazcev na strani<\/h2>\r\n\r\n\r\n\r\n

Sledi preverjanje ali se spro\u017ei splo\u0161en dogodek prek Google Tag Managerja, ki smo ga ustvarili v prej\u0161nji to\u010dki (dogodek je poimenovan gtm.formSubmit<\/em> <\/strong>in se mora pri testiranju pojaviti v na\u0161i konzoli za predogled). Omogo\u010dite \u201cPreview in Debug\u201d konzolo<\/strong> in izpolnite obrazec na strani. Pojaviti se vam mora omenjeni event gtm.formSubmit <\/em>(glej spodnjo sliko). Poskusite ponovno izpolniti obrazec, a tokrat namenoma pustite katero izmed obveznih polj prazno. \u010ce se pro\u017ei gtm.formSubmit <\/em>event ob vsakem kliku na potrditveni gumb, bo potrebno izbrati druga\u010den pristop k sledenju obrazca. Va\u0161 cilj je namre\u010d, da se podatek o izpolnjeni formi po\u0161lje le takrat, ko je ta pravilno oddana.<\/strong><\/p>\r\n\r\n\r\n\r\n

\"gtm.formSubmit\"\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Preden oblikujemo \u0161e zna\u010dko za Google Analytics dogodek, moramo poskrbeti, da se spro\u017eilec pro\u017ei za izbran obrazec<\/strong> (\u010de imate na strani le en obrazec, ta korak ni potreben). Ob kliku na gtm.formSubmit<\/em>, bomo v Preview & Debug konzoli izbrali zavihek Variables.<\/p>\r\n\r\n\r\n\r\n

\"GTM\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Praviloma imajo obrazci svoj ID ali edinstveno vrednost kake druge spremenljivke<\/strong>, 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<\/em>). Ponovno odpremo spro\u017eilec, ki smo ga oblikovali na za\u010detku in izberemo mo\u017enost pro\u017eenja na nekaterih formah (Some forms), ter vnesemo ustrezno vrednost v polje Form Classes (glej sliko spodaj).<\/p>\r\n\r\n\r\n\r\n

\"Nastavitev\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Zadnji korak je oblikovanje zna\u010dke, prek katere se bo v Google Analytics zabele\u017eil dogodek. Pri tem izberemo zgornji spro\u017eilec in delovanje preizkusimo v Preview & Debug konzoli. Ne pozabite objaviti zna\u010dke<\/strong>. Za pomo\u010d, kako postaviti zna\u010dko v Tag Managerju, si lahko preberete zapis za event tracking z Google Tag Managerjem<\/a>.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

Kaj pa pri Ajax\/jQuery obrazcih?<\/h2>\r\n\r\n\r\n\r\n

Osnovna konfiguracija auto-event listenerja v Google Tag Managerjev nima ob\u0161irne podpore<\/strong>. V praksi to pomeni, da veliko obrazcem, ki so oblikovani s pomo\u010djo vti\u010dnikov ali orodij (npr. Contact Form 7 obrazci v WordPressu) z zgornjim pristopom ne bo mogo\u010de slediti <\/strong>(pogosto gre za obrazce, kjer niste preusmerjeni na zahvalno stran, ampak se samo izpi\u0161e tekst o uspe\u0161no oddanem povpra\u0161evanju ali kontaktu). V tem primeru lahko oblikujete svoj auto-event listener<\/strong>, kjer gre za JavaScript funkcije<\/strong>, ki spremljajo interakcije uporabnikov na va\u0161i strani. Pri tem lahko spro\u017eite Data Layer dogodke, ki jih lahko v Google Tag Managerju uporabite kot filtre. Da ne bo preve\u010d zapleteno, si poglejmo posamezne korake na prakti\u010dnem primeru.\u00a0<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

Kaj pravi dokumentacija za razvijalce?<\/h2>\r\n\r\n\r\n\r\n

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\u017eijo ob interakciji z obrazci. Eden od teh je wpcf7mailsent<\/strong>, ki se spro\u017ei, ko je forma pravilno izpolnjena. To lahko uporabimo za oblikovanje zna\u010dke v Google Tag Managerju.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n

Oblikovanje auto-event listenerja<\/h2>\r\n\r\n\r\n\r\n

Ker ne moremo uporabiti \u017ee vgrajenega auto-event listenerja v Tag Managerju, bomo morali postaviti svojega. Z njim bomo spremljali interakcije s Contact Form 7 obrazcem<\/strong> (v na\u0161em primeru je to pravilno izpolnjen in uspe\u0161no oddan obrazec). Najprej moramo oblikovati novo HTML zna\u010dko<\/strong> (v GTM-ju v zavihku Tags izberemo Custom HTML zna\u010dko) in dodati spodnjo kodo na vse podstrani spletnega mesta. Ta bo \u201cposlu\u0161ala\u201d kdaj se spro\u017ei wpcf7mailsent<\/strong> dogodek in pri tem poslala \u017eelene informacije v data layer.<\/p>\r\n\r\n\r\n\r\n

\r\n

<script>
<\/em>document.addEventListener( ‘wpcf7mailsent’, function( event ) {
<\/em>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataLayer.push({
<\/em>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘event’ : ‘wpcf7successfulsubmit’,
<\/em>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0‘CF7formID’ : event.detail.contactFormId
<\/em>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});
<\/em>\u00a0\u00a0\u00a0\u00a0 }, false );
<\/em><\/script>
<\/em><\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

V vrstici kode s parametrom \u2018event\u2019 <\/strong>smo dodali \u2018wpcf7successfulsubmit<\/em>\u2019, a to poimenovanje je lahko poljubno. Dodano kodo objavimo in\/ali testiramo s Preview & Debug konzolo. Izpolnimo obrazec na strani in spremljamo, \u010de se prika\u017ee dogodek ‘wpcf7successfulsubmit<\/em>‘.<\/p>\r\n\r\n\r\n\r\n

\"wpcf7successfulsubmit\"\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Oblikovanje Custom event spro\u017eilca<\/h2>\r\n\r\n\r\n\r\n

Preden postavimo zna\u010dko moramo oblikovati \u0161e spro\u017eilec, ki bo dolo\u010dal, kdaj se zna\u010dka spro\u017ei in informacija o konverziji po\u0161lje v Google Analytics. <\/strong>V zavihku Triggers izberemo tip spro\u017eilca \u201cCustom Event<\/strong>\u201d. V polje \u201cEvent name<\/strong>\u201d vstavimo ‘wpcf7successfulsubmit<\/em>‘ oziroma ime eventa, ki ste ga sami dolo\u010dili v prej\u0161njem koraku. V primeru, da imamo na strani ve\u010d obrazcev, lahko tu dodatno dolo\u010dimo ob kateri formi naj se ta spro\u017eilec pro\u017ei (npr. na podlagi Form ID spremenljivke).<\/p>\r\n\r\n\r\n\r\n

\"Google\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Postavitev zna\u010dke oziroma Taga<\/h2>\r\n\r\n\r\n\r\n

Ostane \u0161e sklepno dejanje, kjer postavimo zna\u010dko za zbiranje podatkov v Google Analytics<\/strong>. V meniju Tags izberemo tip zna\u010dke za Google Analytics, pod Track Type izberemo mo\u017enost Event in izpolnimo tri gradnike dogodka – Event Category, Action, Label<\/em>. Ve\u010d o tem si lahko preberete v tem zapisu. Kot spro\u017eilec boste izbrali Custom event, ki smo ga oblikovali v predhodnem koraku<\/strong>. Spro\u017eilec poskrbi, da se informacija o izpolnjeni formi po\u0161lje v Google Analytics, ko je ta pravilno izpolnjena.<\/p>\r\n\r\n\r\n\r\n

\"Google\r\n\r\n<\/figure>\r\n\r\n\r\n\r\n

Poleg omenjenih na\u010dinov sledenja interakcij z obrazci obstajajo \u0161e drugi pristopi, ki so specifi\u010dni za razli\u010dne tipe form. Velikokrat brez pomo\u010di razvijalca ni mogo\u010de vzpostaviti pravilnega sledenja, a na spletu obstaja veliko \u017ee oblikovanih re\u0161itev, ki jih lahko uporabite na svojih obrazcih. \u010ce imate kak\u0161na vpra\u0161anja pa nam pi\u0161ite na zivijo@madwise.si<\/a><\/p>\r\n\r\n\r\n\r\n

Dodatni viri:<\/p>\r\n\r\n\r\n\r\n