Cum să configurați analiza de urmărire a formularelor cu Google Tag Manager și Google Analytics

Publicat: 2022-04-12

Rata de conversie este una dintre cele mai simple și în același timp cele mai importante măsuri ale eficienței marketingului. Arată câți utilizatori au finalizat o acțiune țintă: au făcut o achiziție, s-au înscris pentru e-mailuri, au solicitat un apel etc. Pentru înregistrarea și analiza vânzărilor de comerț electronic, avem Google Analytics, care este relativ ușor de configurat. Cu toate acestea, este nevoie de mai mult efort pentru a urmări formularele trimise pe un site.

Acest lucru se datorează faptului că formularele se întâmplă să fie de diferite tipuri și să folosească tehnologii diferite pentru a trimite date către server. După ce datele sunt trimise cu succes, unele câmpuri de formular sunt actualizate. Altele afișează o fereastră pop-up. Un al treilea tip redirecționează utilizatorul către o pagină de mulțumire. Metoda de urmărire a formularelor depinde de tehnologia utilizată.

În acest articol, vă spunem cum să colectați datele din formular în diferite moduri și să le transferați în Google Analytics.

Cuprins

Metoda 1. Pagina de mulțumire separată
Metoda 2. Trimiteți declanșatorul formularului în Google Tag Manager
- Pasul 1. Activați variabilele de formular
- Pasul 2. Reglați declanșatorul
- Pasul 3. Verificați dacă declanșatorul funcționează
- Pasul 4. Creați eticheta
- Pasul 5. Configurați-vă ținta în Google Analytics
Metoda 3. Declanșatorul disponibilității elementului în Managerul de etichete Google
Metoda 4. Urmăriți formularele care folosesc AJAX
- Pasul 1. Creați o etichetă pentru a verifica cum funcționează formularul
- Pasul 2. Creați o variabilă de strat de date
- Pasul 3. Creați declanșatorul
Metoda 5. Evenimente DataLayer ca declanșator
Cât timp petrec utilizatorii completând formularele dvs

Metoda 1. Pagina de mulțumire separată

Dacă utilizatorul este redirecționat către o pagină separată cu o adresă URL diferită după completarea formularului, urmărirea vizitelor la această adresă URL este cea mai simplă metodă de urmărire a trimiterii formularului. Este suficient să creezi o țintă cu tipul „Pagină de destinație” în Google Analytics.

Să presupunem că doriți să urmăriți înregistrările pentru un webinar. Pagina de mulțumire după înregistrarea cu succes arată astfel: https://www.site.com/registration/thankyou

În panoul de administrare, în Setări de vizualizare , sub Ținte, faceți clic pe Țintă, apoi faceți clic pe Personalizat . Specificați numele țintei, selectați tipul țintei și introduceți adresa paginii de mulțumire:

Ce este important de luat în considerare: URL-ul paginii dvs. de mulțumire ar trebui să fie unic – adică ar trebui să existe o singură pagină pe site cu o astfel de adresă, iar utilizatorii nu ar trebui să poată ajunge la această pagină fără a completa formularul. În caz contrar, Google Analytics poate înregistra date inexacte despre atingerea obiectivului dvs.

bonus pentru cititori

Cele mai bune cazuri de marketing OWOX BI

Descărcați acum

Metoda 2. Trimiteți declanșatorul formularului în Google Tag Manager

Dacă programatorii dvs. au configurat corect transmisia de date dintr-un formular prin intermediul butonului de trimitere, atunci pentru trimiterile de urmărire a formularelor puteți utiliza declanșatorul Google Tag Manager încorporat. Judecând după comentariile de pe internet, această situație este întâlnită rar, dar merită încercată.

Folosind această metodă, atunci când un utilizator completează și trimite un formular, declanșatorul trimite un eveniment gtm.formSubmit la matricea dataLayer.

Notă: înainte de a accesa setări, asigurați-vă că eticheta Vizualizare pagină este activată în Managerul de etichete Google pentru toate paginile de pe site.

Pasul 1. Activați variabilele de formular

În acest scop, deschideți meniul Variabile din GTM, faceți clic pe Configurare și selectați toate variabilele din secțiunea Formulare:

Pasul 2. Reglați declanșatorul

Aveți nevoie de un ID de formular sau de un atribut de clasă de formular pentru a crea un declanșator. Le puteți vedea în codul HTML făcând clic dreapta pe formular și făcând clic pe Explorați elementul în Firefox sau Vizualizați codul în Chrome:

În exemplul nostru, id-ul formularului este send-request-form, pe care îl vom folosi atunci când configurăm declanșatorul.

Accesați meniul Declanșatoare , faceți clic pe Nou , deschideți Setări de declanșare și selectați Trimiteți formularul :

Alegerea tipului de declanșare în Google Manager de etichete

În fereastra care se deschide, veți vedea două casete de selectare:

Așteptați etichete – Dacă activați această opțiune, formularul nu va fi trimis până când toate etichetele asociate cu acesta nu sunt activate sau expiră timpul pe care îl specificați.
Verificați validarea – Cel mai bine este să activați această opțiune. În caz contrar, declanșatorul se va declanșa chiar și atunci când utilizatorul nu a completat câmpurile necesare.

După ce activați verificarea erorilor, apar setări suplimentare. Dacă activați declanșatorul, specificați adresa URL a paginii care conține formularul dvs. Și dacă activați declanșatorul, specificați ID-ul formularului pe care l-am menționat mai sus:

Creați un nume convenabil și ușor de înțeles pentru declanșator, cum ar fi Trimiteți o solicitare și salvați-l.

Pasul 3. Verificați dacă declanșatorul funcționează

Înainte de a publica modificările într-un container, utilizați modul de previzualizare din Managerul de etichete Google. Deschideți pagina cu formularul, completați-l și apăsați trimite. În consola de depanare, ar trebui să apară un eveniment gtm.formSubmit.

Dacă acest eveniment nu apare, atunci această metodă de urmărire nu va funcționa pentru dvs. În acest caz, încercați una dintre celelalte metode descrise în acest articol.

Dacă evenimentul apare, este totuși necesar să efectuați încă un test pentru a verifica dacă declanșatorul funcționează corect. Deschideți un formular, lăsați un câmp obligatoriu necompletat și trimiteți formularul. Dacă un eveniment gtm.formSubmit apare din nou în consola de depanare, atunci declanșatorul încorporat funcționează incorect și nu vă va ajuta. Dacă evenimentul nu a fost transferat, este grozav! Treceți la pașii următori.

Pasul 4. Creați eticheta

Acum trebuie să creați o etichetă care va trimite la Google Analytics informații despre faptul că formularul a fost trimis. Pentru a face acest lucru, accesați meniul Etichete , faceți clic pe Nou, deschideți Configurare etichetă și selectați Google Analytics – Universal Analytics.

Pentru claritate, puteți denumi eticheta la fel ca declanșatorul. Apoi, completați următoarele câmpuri:

Tip de etichetă – selectați {{Setări Google Analytics}}
Tipul piesei – selectați „Eveniment”
Categorie – la fel ca eticheta și declanșatorul pentru comoditate
Acțiune – Trimitere
Etichetă – de exemplu, {{Form ID}})
Non-interacțiune – lăsați „False”

Dacă doriți să activați eticheta, selectați declanșatorul creat la Pasul 3 și faceți clic pe Salvare :

Formularul de configurare a etichetelor în Google Tag Manager

E gata! Puteți verifica cum funcționează eticheta generată atunci când trimiteți un formular utilizând modul de previzualizare Google Tag Manager sau utilizând raportul Evenimente în timp real din Google Analytics.

Pasul 5. Configurați-vă ținta în Google Analytics

După ce publicați containerul cu modificări, trebuie să configurați ținta în Google Analytics pentru a lua în considerare trimiterea formularelor ca conversii. Pentru a face acest lucru, adăugați un nou obiectiv propriu în setările de vizualizare Google Analytics. Selectați tipul de eveniment și completați câmpurile Categorie, Acțiune și Comandă rapidă așa cum ați făcut când ați configurat eticheta în Managerul de etichete Google:

panoul de administrare în Google Analytics

Salvați ținta. Terminat. Ați configurat urmărirea formularelor fără a modifica niciun cod de pe site-ul dvs.!

Metoda 3. Declanșatorul disponibilității elementului în Managerul de etichete Google

Dacă pe site apare o fereastră cu un mesaj de mulțumire sau un mesaj despre trimiterea cu succes după trimiterea unui formular, puteți încerca un alt declanșator GTM încorporat. Se declanșează atunci când un anumit element apare pe ecran (în cazul nostru, o fereastră pop-up) și trimite un eveniment gtm.elementVisibility către dataLayer.

Pentru a configura acest declanșator, trebuie să cunoașteți selectorul CSS al elementului monitorizat. Pentru a găsi acest selector, faceți clic dreapta pe fereastră și selectați Vizualizare cod . Cauți următoarea linie:

Pentru a copia selectorul CSS, faceți clic dreapta pe linie și selectați Copiere – Copiere selector:

În exemplul nostru, selectorul arată astfel: #webinar_marketing_automation > div.

Apoi creați un nou declanșator selectând tipul Element Visibility :

Completați următoarele câmpuri:

Numele declanșatorului – de exemplu, „Obțineți înregistrarea webinarului”
Metoda de selecție – Selector CSS
Element Selector – Introduceți valoarea pe care ați copiat-o din codul HTML al ferestrei pop-up.
Regula de declanșare – Dacă aveți un formular pe pagină, lăsați opțiunea „O dată pe pagină”. Dacă există mai multe formulare și apare un mesaj, puteți selecta „O dată pe element”.

Selector de elemente din meniul Google Manager de etichete

Apoi bifați caseta „Înregistrați modificările DOM”.
Declanșează condițiile de activare – selectând „Unele evenimente de vizibilitate”, puteți specifica pagina în care apare mesajul sau textul pop-up.
Salvați declanșatorul.

opțiuni avansate din meniul Google Manager de etichete

După ce creați declanșatorul Disponibilitatea elementului, trebuie să ajustați aceleași setări așa cum sunt descrise în detaliu în Metoda 2:

Adăugați o nouă etichetă la GTM care va trimite datele de trimitere a formularelor la Google Analytics și îi va atașa declanșatorul creat.
Previzualizați cum funcționează eticheta atunci când este trimis formularul.
În Google Analytics, setați ținta evenimentului pentru a urmări conversiile.

Metoda 4. Urmăriți formularele care folosesc AJAX

Dacă formularele de pe site-ul dvs. utilizează tehnologia AJAX, atunci datele sunt transferate din browser pe server în fundal și pagina nu se reîncarcă. Pentru a configura urmărirea trimiterii formularelor AJAX, puteți utiliza acest script de la Lunametrics:

    <script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

Acest cod verifică dacă formularul dvs. folosește cu adevărat AJAX, apoi creează variabila și declanșează în Google Tag Manager.

Pasul 1. Creați o etichetă pentru a verifica cum funcționează formularul

În Google Tag Manager, deschideți Etichete , faceți clic pe Nou , faceți clic pe Configurare etichetă , apoi selectați HTML personalizat . Copiați codul de mai sus și inserați-l în caseta de text. Specificați toate paginile ca declanșatori:

Apoi activați previzualizarea GTM, deschideți pagina formularului, completați formularul și trimiteți-l.

Stratul de date în Google Manager de etichete

Dacă în consola de depanare apare un eveniment ajaxComplete (ca în captura de ecran de mai sus), atunci formularul dvs. folosește AJAX și această metodă de urmărire vi se potrivește. În acest caz, citiți mai departe.

Pasul 2. Creați o variabilă de strat de date

Dacă faceți clic pe evenimentul ajaxComplete din consola de previzualizare și apoi deschideți fila Strat de date, veți vedea ce informații sunt transmise matricei de nivel de date după ce formularul este trimis.

Suntem interesați de linia de răspuns din acest cod; conține text care spune că formularul a fost trimis cu succes:

Această linie poate fi folosită pentru crearea variabilei și a declanșatorului în Google Tag Manager. Deschideți secțiunea Variabile din GTM, faceți clic pe Creare și, în ecranul Configurare variabilă, selectați Variabila stratului de date. În câmpul Data Layer Variable Name, scrieți attributes.response (este posibil să numiți două variabile la fel) și salvați setările.

De ce să introduceți attributes.response în loc de răspuns ? Deoarece atributele este un obiect care conține cheia de răspuns și valoarea acesteia. Procedând astfel, îndreptăm GTM către calea exactă către datele care ne interesează.

După crearea unei variabile, este necesar să o verificați. În acest scop, trimiteți un formular în modul de previzualizare. Faceți clic pe evenimentul ajaxComplete și deschideți fila Variabile din Managerul de etichete Google. Dacă vedeți variabila attributes.response și textul despre trimiterea cu succes a formularului, înseamnă că ați configurat totul corect.

Pasul 3. Creați declanșatorul

În secțiunea Configurare declanșare, faceți clic pe Creare, apoi Configurare declanșare și selectați tipul evenimentului utilizator . Specificați ajaxComplete în câmpul Nume eveniment. Apoi, ca condiție pentru activarea declanșatorului, selectați Câteva evenimente personalizate și înregistrați o condiție: variabila attributes.response conține {introduceți textul personalizat despre trimiterea cu succes a formularului}.

După aceea, ce rămâne este:

Adăugarea unei noi etichete de urmărire a evenimentelor la GTM, care va trimite informații despre trimiterea formularelor la Google Analytics și va atașa acestuia declanșatorul creat.
Folosind modul Previzualizare pentru a verifica cum funcționează eticheta atunci când trimiteți un formular.
Setarea țintei evenimentului pentru a urmări conversiile în Google Analytics.

Am descris aceste setări în detaliu mai sus în secțiunea Metoda 2. Trimiteți declanșatorul formularului în Google Tag Manager.

Metoda 5. Evenimente DataLayer ca declanșator

Urmărirea formularelor folosind metoda dataLayer .push este, în opinia noastră, cea mai fiabilă și versatilă soluție. Singurul dezavantaj este că, dacă nu înțelegeți codul, veți avea nevoie de ajutorul dezvoltatorilor.

Pregătiți specificațiile tehnice pentru dezvoltatori
Faceți o listă cu setările pe care doriți să le transferați în dataLayer după ce formularul este trimis cu succes. Cereți dezvoltatorilor să adauge acest cod la toate paginile cu formulare pe care doriți să le monitorizați:

dataLayer.push({
„eveniment”: „Formulare”,
„variabilă”: „valoare”
})

Unde:

Eveniment este numele unui eveniment. Îl poți înlocui cu orice eveniment care ți se potrivește.
Variabila este un set de toate variabilele pe care doriți să le transferați împreună cu un eveniment.

După ce programatorii dvs. configurează metoda dataLayer.push pentru toate formularele, puteți verifica cum funcționează. În acest scop, includeți o previzualizare în Google Tag Manager și completați formularul de pe site-ul dvs. În consola de depanare, ar trebui să existe un nou eveniment (în exemplul nostru, se numește OWOX). Când faceți clic pe un eveniment și accesați fila DataLayer, veți vedea toți parametrii care sunt transferați în matricea de date:

În exemplul evenimentului nostru din captura de ecran de mai sus (descărcarea unui fișier PDF de pe blog), luăm în considerare modul de configurare a urmăririi cu GTM.

Mai întâi, creați toate variabilele de utilizator necesare: eventCategory, eventAction, eventLabel etc. Apoi selectați tipul de variabilă din secțiunea Variabile definite de utilizator și introduceți un nume de variabilă între acolade: {{eventCategory}}:

Apoi, creați un declanșator de tipul Eveniment personalizat. În setări, specificați numele evenimentului și setați declanșatorul să declanșeze toate evenimentele personalizate:

Meniul Configurare declanșare în Google Tag Manager

Apoi creați o etichetă care va redirecționa evenimentele către Google Analytics. Setați tipul de etichetă ca Google Analytics – Universal Analytics și setați tipul de urmărire ca Eveniment.

În plus, completați aceste câmpuri:

Categorie – {{eventCategory}}
Acțiune – {{eventAction}}
Etichetă – {{eventLabel}}

Apoi, selectați o variabilă {{Setări Google Analytics}} și declanșatorul pe care l-ați creat la pasul anterior:

Totul este gata. Tot ce rămâne este să verificați dacă eticheta funcționează în modul de previzualizare GTM și în rapoartele Google Analytics în timp real.

Cât timp petrec utilizatorii completând formularele dvs

Acum că puteți afla câți utilizatori au completat cu succes formularul, vă va fi de ajutor să aflați ce probleme au întâmpinat cei care nu l-au completat.

Dezvoltatorii dvs. trebuie să adauge la dataLayer numele și valorile tuturor parametrilor necesari pentru analiza formularelor. Acest lucru vă va ajuta să urmăriți:

Timp de la deschiderea paginii până la activarea câmpului
Timp de la activarea câmpului până la dezactivarea câmpului
Timp de la activarea primului câmp până la prima trimitere a formularului
Timp de la activarea primului câmp până la transmiterea cu succes a formularului
Timp de la activarea primului câmp până la trimiterea eșuată a formularului
Este timpul să primiți un răspuns de la server despre trimiterea cu succes a unui formular
Este timpul să primiți un răspuns de la server despre trimiterea fără succes a unui formular
Timpul de la activarea formularului până la momentul în care un utilizator părăsește formularul (fără a-l trimite cu succes)

După ce ați configurat colectarea acestor date în Google Analytics, veți putea importa acele date în Google BigQuery – de exemplu, folosind OWOX BI. Apoi, puteți crea orice rapoarte de analiză a formularelor în Foi de calcul Google folosind suplimentul gratuit pentru rapoarte BigQuery OWOX BI.

Aceste rapoarte vă vor ajuta să găsiți și să remediați problemele de utilizare a formularelor și, astfel, să vă creșteți rata de conversie.

Iată câteva exemple de astfel de rapoarte și întrebările la care pot răspunde:

1. Când interacționează cu ce câmpuri de formular, utilizatorii întâmpină cel mai des o eroare?

2. Cât timp petrec utilizatorii completând formularul?

3. Cât timp petrec utilizatorii completând formularul și de ce depinde acesta?

PS Dacă aveți nevoie de ajutor pentru configurarea analizei formularelor și crearea unui sistem de valori personalizate pentru afacerea dvs., trimiteți-ne un e-mail la [email protected] sau completați formularul de contact de pe site-ul web OWOX.