{"id":2389,"date":"2019-03-12T15:20:16","date_gmt":"2019-03-12T13:20:16","guid":{"rendered":"https:\/\/webanalyst.ro\/?p=2389"},"modified":"2019-03-13T09:08:00","modified_gmt":"2019-03-13T07:08:00","slug":"gtm-formulare","status":"publish","type":"post","link":"https:\/\/webanalyst.ro\/blog\/2019\/gtm-formulare\/","title":{"rendered":"M\u0103surarea formularelor cu GTM"},"content":{"rendered":"\n

Exist\u0103 site-uri pentru care completarea unui formular de c\u0103tre vizitatori este principalul obiectiv. Pot fi formulare de rezervare sau de comand\u0103, formulare de contact sau formulare de abonare. \u00cen urm\u0103 cu aproximativ 4 ani am scris un articol<\/a> despre acest gen de site-uri \u0219i obiectivele lor, astfel c\u0103 \u00een articolul curent voi aborda partea tehnic\u0103. <\/p>\n\n\n\n

M\u0103surarea interac\u021biunilor cu formularele de pe site este suportat\u0103 de Google Analytics \u0219i de Google Tag Manager. Iar la acestea se pricepe toat\u0103 lumea, nu? \ud83d\ude42 <\/p>\n\n\n\n\n\n\n\n

Problemele…<\/h2>\n\n\n\n

Oricine poate c\u0103uta informa\u021bii pe internet. Cine a f\u0103cut asta \u00een leg\u0103tur\u0103 cu setarea GTM, a v\u0103zut c\u0103 de cele mai multe ori va g\u0103si solu\u021bii total diferite \u00eentre ele…<\/p>\n\n\n\n

Prima problem\u0103 ar fi c\u0103, de obicei, dup\u0103 completarea \u0219i trimiterea unui formular, utilizatorul nu este trimis \u00eentr-o pagin\u0103 de tip thank you<\/em>. Solu\u021bia de aici este simpl\u0103 \u0219i intuitiv\u0103 pentru cei care urm\u0103resc articolele de pe acest site de mai mult timp: trimiterea formularelor o putem m\u0103sura \u00een Google Analytics cu ajutorul evenimentelor<\/strong>, dar \u0219i acestea pot fi trimise \u00een mai multe feluri.<\/p>\n\n\n\n

\u00cen ziua de ast\u0103zi, majoritatea CMS-urilor sau plugin-urilor de formulare pentru CMS-uri ofer\u0103 op\u021biunea automat\u0103 de a trimite eveniment spre Google Analytics. A\u0219adar, solu\u021bia foarte simpl\u0103<\/strong> nu necesit\u0103 nici lucrul cu GTM, nici la codul site-ului.<\/p>\n\n\n\n

Pe de alt\u0103 parte, folosirea GTM are \u0219i alte beneficii. Pentru aceea\u0219i ac\u021biune, din GTM putem trimite nu doar eveniment spre GA, dar \u0219i conversie spre Google Ads, Facebook Ads etc.<\/p>\n\n\n\n

<\/elevatr-form><\/p>\n\n\n\n

A\u0219a cum scriam mai sus, \u0219i pentru lucrul cu tag manager, exist\u0103 de cele mai multe ori solu\u021bii diferite. O solu\u021bie care mi-a atras aten\u021bia a fost cea de a folosi un event listener<\/em>. Practic, formularul trimite \u00een consola JavaScript ni\u0219te evenimente atunci c\u00e2nd se folose\u0219te formularul, iar noi trimitem aceste evenimente, \u00eempreun\u0103 cu informa\u021biile pe care le con\u021bin, spre data layer. Urmeaz\u0103 s\u0103 cre\u0103m un trigger<\/em> pentru evenimentul nostru, apoi c\u00e2te o variabil\u0103 de tip data layer pentru fiecare infroma\u021bie de acolo pe care vrem s\u0103 o folosim (c\u0103 nu degeaba le-am trimis \u00een data layer…) \u0219i \u00een final tag-ul pentru eveniment Google Analytics, eventual \u0219i alte tag-uri pe care le vrem declan\u0219ate la acela\u0219i trigger (d\u0103deam mai sus exemple de tag-uri de conversii).<\/p>\n\n\n\n

Aceasta pare solu\u021bia ideal\u0103, mai ales c\u0103 avem la dispozi\u021bie multe informa\u021bii pe care le putem folosi ulterior. Totu\u0219i, multe dintre aceste informa\u021bii nu le putem folosi. De exemplu, informa\u021biile completate de utilizatori \u00een formular sunt informa\u021bii personale, iar GDPR, GA \u0219i GTM interzic utilizarea acestora.<\/p>\n\n\n\n

\u00cen acela\u0219i timp, este o solu\u021bie prea complicat\u0103<\/strong> pentru ce au nevoie cei mai mul\u021bi dintre cei care vor s\u0103 m\u0103soare de c\u00e2te ori se trimite un formular din site. Unii dintre pa\u0219ii descri\u0219i mai sus, precum event listener<\/em>-ul, pot \u00eent\u00e2mpina diverse probleme din cauza c\u0103rora s\u0103 nu func\u021bioneze pe unele site-uri, a\u0219a c\u0103 am decis s\u0103 aleg o alt\u0103 solu\u021bie.<\/p>\n\n\n\n

Solu\u021bia eficient\u0103 – Form Submission<\/h2>\n\n\n\n

Google Tag Manager ofer\u0103 o variant\u0103 mai simpl\u0103 pentru m\u0103surarea trimiterilor de formulare. Este un tip special de trigger<\/em> care se nume\u0219te Form Submission<\/strong>. Folosirea acestui trigger va face ca \u00een spatele cortinei s\u0103 se \u00eent\u00e2mple cam acelea\u0219i lucruri pe care le-am descris la solu\u021bia anterioar\u0103, doar c\u0103 \u00een mult mai pu\u021bini pa\u0219i pentru utilizator, deci o configurare mai rapid\u0103 \u00een GTM \u0219i mai pu\u021bin expus\u0103 la erori.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nici solu\u021bia aceasta nu func\u021bioneaz\u0103 \u00een toate cazurile, pentru c\u0103 site-urile de pe internet sunt complexe \u0219i variate. Atunci c\u00e2nd formularul nu trimite un eveniment JS pentru ac\u021biunea de submit<\/em>, nu va func\u021biona nici solu\u021bia pe care o descriu acum, nici cea anterioar\u0103. A\u0219adar, situa\u021bia este mai complex\u0103 \u0219i acest articol nu \u00ee\u0219i propune s\u0103 epuizeze subiectul. Totu\u0219i, de re\u021binut c\u0103 sunt \u0219anse mari ca solu\u021bia descris\u0103 aici s\u0103 func\u021bioneze.<\/p>\n\n\n\n

A\u0219adar, primul pas este crearea acestui trigger<\/em>. C\u00e2nd este declan\u0219at, va popula \u0219i ni\u0219te variabile speciale, a\u0219a c\u0103 ave\u021bi grij\u0103 ca acestea s\u0103 fie activate \u00een lista cu variabile din GTM! De notat c\u0103 nu toate formularele trimit date c\u0103tre toate aceste variabile, dar ne va fi util \u0219i dac\u0103 avem informa\u021bii doar \u00een c\u00e2teva dintre ele. \u00cen modul Preview<\/em> din GTM putem vedea variabilele evenimentului \u0219i \u00een acest fel afl\u0103m \u0219i care dintre ele sunt populate cu date \u00een cazul nostru.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Variabilele populate de trigger<\/em>-ul de tip Form Submission sunt:<\/p>\n\n\n\n

  • Form Element<\/strong> – elementul din formular pe care s-a dat click<\/li>
  • Form Classes<\/strong> – valorile g\u0103site \u00een atributul class al formularului<\/li>
  • Ford ID<\/strong> – atributul ID al elementului din formular<\/li>
  • Form Target<\/strong> – atributul target al elementului din formular<\/li>
  • Form URL<\/strong> – URL-ul spre care e\u0219ti trimis la click, \u00een cazul \u00een care exist\u0103<\/li>
  • Form Text<\/strong> – textul vizibil din formular, \u00een \u00eentregime; de precizat c\u0103 nu este vorba de textul completat de utlizator, ci textul care exist\u0103 deja pe site, \u00een formular<\/li><\/ul>\n\n\n\n

    Dac\u0103 avem trigger<\/em>-ul \u0219i variabilele, nu ne mai r\u0103m\u00e2ne dec\u00e2t s\u0103 set\u0103m tag-urile care s\u0103 \u00eel foloseasc\u0103, adic\u0103 un tag care trimite evenimentul spre Google Analytics \u0219i tag-uri care s\u0103 trimit\u0103 conversia spre sistemele de online advertising! <\/p>\n\n\n\n

    Exemplul meu de tag pentru GA event poate fi v\u0103zut \u00een imaginea de deasupra acestui articol, cu men\u021biunea c\u0103 am folosit pentru el trigger<\/em>-ul creat anterior. De asemenea, am folosit \u00een el \u0219i c\u00e2teva dintre variabilele men\u021bionate anterior, astfel \u00eenc\u00e2t s\u0103 pot identifica formularul, \u00een cazul \u00een care pe aceea\u0219i pagin\u0103 a\u0219 avea mai multe formulare ce pot fi trimise de c\u0103tre utilizatori. A\u0219a se vede \u00een analytics c\u00e2mpul \u00een care am trimis variabila form text<\/em>, pentru cei care au dubii c\u0103 nu sunt trimise informa\u021bii personale:<\/p>\n\n\n\n

    \"\"<\/figure><\/div>\n\n\n\n

    Urm\u0103torii pa\u0219i \u00een Form Tracking cu GTM<\/h2>\n\n\n\n

    A\u0219a cum scriam mai sus, nu mi-am propus s\u0103 fac un ghid complet, ci s\u0103 descriu cea mai simpl\u0103 \u0219i eficient\u0103 metod\u0103 de m\u0103surare a trimiterilor de formulare prin Google Tag Manager. Cine dore\u0219te mai multe, se poate uita \u00een continuare dac\u0103 evenimentul transmis de formular c\u0103tre JS se declan\u0219eaz\u0103 numai \u00een cazul \u00een care formularul este trimis cu succes, iar dac\u0103 r\u0103spunsul \u00eel nemul\u021bume\u0219te poate studia dac\u0103 exist\u0103 exist\u0103 un eveniment AJAX sau dac\u0103 poate condi\u021bona trigger<\/em>-ul de altceva, cum ar fi textul ap\u0103rut dup\u0103 trimiterea formularului sau un eventual JS API de la formular. Ca de obicei, \u00een cazul \u00een care v\u0103d c\u0103 exist\u0103 interes pentru subiect, voi detalia aceste metode \u00een articole viitoare.<\/p>\n\n\n\n<\/elevatr-form>\n","protected":false},"excerpt":{"rendered":"

    Exist\u0103 site-uri pentru care completarea unui formular de c\u0103tre vizitatori este principalul obiectiv. Pot fi formulare de rezervare sau de comand\u0103, formulare de contact sau formulare de abonare. \u00cen urm\u0103 cu aproximativ 4 ani am scris un articol despre acest gen de site-uri \u0219i obiectivele lor, astfel c\u0103 \u00een articolul curent voi aborda partea tehnic\u0103. […]<\/p>\n","protected":false},"author":1,"featured_media":2397,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[730,12],"tags":[731,871,854,719,485],"class_list":["post-2389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-tag-manager-2","category-technical","tag-event-listener","tag-form-tracking","tag-gdpr","tag-tag-management","tag-tag-manager"],"_links":{"self":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/comments?post=2389"}],"version-history":[{"count":8,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2389\/revisions"}],"predecessor-version":[{"id":2403,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/posts\/2389\/revisions\/2403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media\/2397"}],"wp:attachment":[{"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/media?parent=2389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/categories?post=2389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webanalyst.ro\/blog\/wp-json\/wp\/v2\/tags?post=2389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}