Cara menyiapkan analitik pelacakan formulir dengan Google Pengelola Tag dan Google Analytics

Diterbitkan: 2022-04-12

Tingkat konversi adalah salah satu ukuran efisiensi pemasaran yang paling sederhana dan sekaligus paling penting. Ini menunjukkan berapa banyak pengguna yang telah menyelesaikan tindakan target: melakukan pembelian, mendaftar untuk email, meminta panggilan, dll. Untuk merekam dan menganalisis penjualan e-niaga, kami memiliki Google Analytics, yang relatif mudah dikonfigurasi. Namun, lebih banyak upaya diperlukan untuk melacak formulir yang dikirimkan di situs.

Itu karena formulir memiliki tipe yang berbeda dan menggunakan teknologi yang berbeda untuk mengirim data ke server. Setelah data berhasil dikirim, beberapa bidang formulir diperbarui. Lainnya menampilkan jendela pop-up. Jenis ketiga mengarahkan pengguna ke halaman terima kasih. Metode pelacakan formulir tergantung pada teknologi yang digunakan.

Dalam artikel ini, kami memberi tahu Anda cara mengumpulkan data formulir dengan berbagai cara dan mentransfernya ke Google Analytics.

Daftar Isi

Metode 1. Pisahkan halaman terima kasih
Metode 2. Kirim pemicu formulir di Google Pengelola Tag
- Langkah 1. Aktifkan variabel formulir
- Langkah 2. Sesuaikan pemicunya
- Langkah 3. Periksa apakah pemicunya berfungsi
- Langkah 4. Buat tag
- Langkah 5. Siapkan target Anda di Google Analytics
Metode 3. Pemicu ketersediaan elemen di Google Pengelola Tag
Metode 4. Lacak formulir yang menggunakan AJAX
- Langkah 1. Buat tag untuk memeriksa cara kerja formulir Anda
- Langkah 2. Buat variabel lapisan data
- Langkah 3. Buat pemicunya
Metode 5. Peristiwa DataLayer sebagai pemicu
Berapa banyak waktu yang dihabiskan pengguna untuk mengisi formulir Anda

Metode 1. Pisahkan halaman terima kasih

Jika pengguna diarahkan ke halaman terpisah dengan URL yang berbeda setelah mengisi formulir, melacak kunjungan ke URL ini adalah metode termudah untuk melacak pengiriman formulir. Anda cukup membuat target dengan jenis “Landing Page” di Google Analytics.

Katakanlah Anda ingin melacak pendaftaran webinar. Halaman terima kasih setelah berhasil mendaftar terlihat seperti ini: https://www.site.com/registration/thankyou

Di panel Admin, di Pengaturan Tampilan , di bawah Target, klik Target, lalu klik Khusus . Tentukan nama target, pilih jenis target, dan masukkan alamat halaman terima kasih:

Yang penting untuk dipertimbangkan: URL halaman terima kasih Anda harus unik – yaitu, hanya boleh ada satu halaman di situs dengan alamat seperti itu, dan pengguna tidak boleh membuka halaman ini tanpa mengisi formulir. Jika tidak, Google Analytics dapat mencatat data yang tidak akurat tentang pencapaian tujuan Anda.

bonus untuk pembaca

Kasus Pemasaran OWOX BI Terbaik

Unduh sekarang

Metode 2. Kirim pemicu formulir di Google Pengelola Tag

Jika pemrogram Anda mengonfigurasi transmisi data dengan benar dari formulir melalui tombol kirim, maka untuk pengiriman pelacakan formulir, Anda dapat menggunakan pemicu Google Pengelola Tag bawaan. Dilihat dari komentar di Internet, situasi ini jarang ditemui, tetapi patut dicoba.

Dengan menggunakan metode ini, saat pengguna mengisi dan mengirim formulir, pemicu mengirimkan peristiwa gtm.formSubmit ke larik dataLayer.

Catatan: Sebelum Anda membuka setelan, pastikan tag Tampilan Halaman diaktifkan di Google Pengelola Tag untuk semua halaman di situs.

Langkah 1. Aktifkan variabel formulir

Untuk tujuan ini, buka menu Variables di GTM, klik Configure , dan pilih semua variabel di bagian Forms:

Langkah 2. Sesuaikan pemicunya

Anda memerlukan id formulir atau atribut kelas formulir untuk membuat pemicu. Anda dapat melihatnya dalam kode HTML dengan mengklik kanan formulir Anda dan mengklik Jelajahi Item di Firefox atau Lihat Kode di Chrome:

Dalam contoh kami, id formulir adalah formulir kirim-permintaan, yang akan kami gunakan saat mengonfigurasi pemicu.

Masuk ke menu Triggers , klik New , buka Trigger Settings , dan pilih Submit Form :

Memilih jenis pemicu di Google Pengelola Tag

Di jendela yang terbuka, Anda akan melihat dua kotak centang:

Tunggu tag – Jika Anda mengaktifkan opsi ini, formulir tidak akan dikirim sampai semua tag yang terkait dengannya diaktifkan atau waktu yang Anda tentukan berakhir.
Periksa validasi – Sebaiknya aktifkan opsi ini. Jika tidak, pemicu akan aktif meskipun pengguna belum mengisi kolom yang diperlukan.

Setelah Anda mengaktifkan pemeriksaan kesalahan, pengaturan tambahan akan muncul. Jika Anda mengaktifkan pemicu, tentukan URL halaman yang berisi formulir Anda. Dan jika Anda mengaktifkan pemicu, tentukan ID formulir yang kami sebutkan di atas:

Munculkan nama pemicu yang nyaman dan mudah dipahami, seperti Kirim Permintaan, dan simpan.

Langkah 3. Periksa apakah pemicunya berfungsi

Sebelum memublikasikan perubahan dalam penampung, gunakan mode pratinjau di Google Pengelola Tag. Buka halaman dengan formulir, isi, dan tekan kirim. Di konsol debug, acara gtm.formSubmit akan muncul.

Jika peristiwa ini tidak muncul, maka metode pelacakan ini tidak akan bekerja untuk Anda. Dalam hal ini, coba salah satu metode lain yang dijelaskan dalam artikel ini.

Jika peristiwa itu muncul, masih perlu melakukan satu tes lagi untuk memeriksa apakah pemicunya berfungsi dengan benar. Buka formulir, biarkan beberapa bidang wajib kosong, dan kirimkan formulir. Jika peristiwa gtm.formSubmit muncul di konsol debug lagi, maka pemicu bawaan tidak berfungsi dengan benar dan tidak akan membantu Anda. Jika acara tidak ditransfer, itu bagus! Pindah ke langkah berikutnya.

Langkah 4. Buat tag

Sekarang Anda perlu membuat tag yang akan mengirimkan informasi ke Google Analytics bahwa formulir telah dikirim. Untuk melakukannya, buka menu Tag , klik Baru, buka Konfigurasi Tag , dan pilih Google Analytics – Universal Analytics.

Untuk kejelasan, Anda dapat memberi nama tag yang sama dengan pemicunya. Selanjutnya, isi kolom berikut:

Jenis Tag – pilih {{Setelan Google Analytics}}
Jenis Lagu – pilih “Acara”
Kategori – sama dengan tag dan pemicu untuk kenyamanan
Tindakan – Mengirim
Label – misalnya, {{Form ID}})
Non-Interaksi – biarkan “False”

Jika Anda ingin mengaktifkan tag, pilih pemicu yang Anda buat di Langkah 3 dan klik Simpan :

Formulir konfigurasi tag di Google Pengelola Tag

Sudah siap! Anda dapat memeriksa cara kerja tag yang dihasilkan saat mengirimkan formulir menggunakan mode pratinjau Google Pengelola Tag atau menggunakan laporan Peristiwa waktu nyata di Google Analytics.

Langkah 5. Siapkan target Anda di Google Analytics

Setelah Anda memublikasikan penampung dengan perubahan, Anda perlu menyiapkan target di Google Analytics untuk mempertimbangkan mengirimkan formulir sebagai konversi. Untuk melakukannya, tambahkan sasaran baru Anda sendiri di setelan tampilan Google Analytics. Pilih jenis Peristiwa dan isi bidang Kategori, Tindakan, dan Pintasan seperti yang Anda lakukan saat mengonfigurasi tag di Google Pengelola Tag:

Simpan targetnya. Selesai. Anda telah menyiapkan pelacakan formulir tanpa mengubah kode apa pun di situs Anda!

Metode 3. Pemicu ketersediaan elemen di Google Pengelola Tag

Jika sebuah jendela muncul di situs dengan ucapan terima kasih atau pesan tentang pengiriman yang berhasil setelah mengirim formulir, Anda dapat mencoba pemicu GTM bawaan lainnya. Ini diaktifkan ketika item tertentu muncul di layar (dalam kasus kami, jendela pop-up) dan mengirimkan peristiwa gtm.elementVisibility ke dataLayer.

Untuk mengonfigurasi pemicu ini, Anda harus mengetahui pemilih CSS dari item yang dipantau. Untuk menemukan pemilih ini, klik kanan jendela dan pilih Lihat Kode . Anda sedang mencari baris berikut:

Untuk menyalin pemilih CSS, klik kanan baris dan pilih Salin – Salin pemilih:

Dalam contoh kita, pemilih terlihat seperti ini: #webinar_marketing_automation > div.

Kemudian buat pemicu baru dengan memilih jenis Visibilitas Elemen :

Isi kolom berikut:

Nama pemicu – misalnya, “Dapatkan rekaman webinar”
Metode Seleksi – Pemilih CSS
Element Selector – Masukkan nilai yang Anda salin dari kode HTML jendela pop-up.
Aturan pemicu – Jika Anda memiliki satu formulir di halaman, biarkan opsi “Sekali per halaman.” Jika ada beberapa formulir dan satu pesan muncul, Anda dapat memilih "Sekali per elemen."

Pemilih elemen di menu Google Pengelola Tag

Kemudian centang kotak "Daftar perubahan DOM".
Kondisi Aktivasi Pemicu – Dengan memilih “Beberapa Peristiwa Visibilitas”, Anda dapat menentukan halaman tempat pesan atau teks pop-up muncul.
Simpan pemicunya.

opsi lanjutan di menu Google Pengelola Tag

Setelah Anda membuat pemicu Ketersediaan Elemen, Anda harus menyesuaikan pengaturan yang sama seperti yang dijelaskan secara mendetail di Metode 2:

Tambahkan tag baru ke GTM yang akan mengirimkan data pengiriman formulir ke Google Analytics dan melampirkan pemicu yang dibuat ke dalamnya.
Pratinjau cara kerja tag saat formulir dikirimkan.
Di Google Analytics, tetapkan target Peristiwa untuk melacak konversi.

Metode 4. Lacak formulir yang menggunakan AJAX

Jika formulir di situs web Anda menggunakan teknologi AJAX, maka data ditransfer dari browser ke server di latar belakang dan halaman tidak dimuat ulang. Untuk mengonfigurasi pelacakan pengiriman formulir AJAX, Anda dapat menggunakan skrip ini dari 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>

Kode ini memeriksa apakah formulir Anda benar-benar menggunakan AJAX, lalu membuat variabel dan pemicu di Google Pengelola Tag.

Langkah 1. Buat tag untuk memeriksa cara kerja formulir Anda

Di Google Pengelola Tag, buka Tag , klik Baru , klik Konfigurasi Tag , lalu pilih HTML Khusus . Salin kode di atas dan rekatkan ke dalam kotak teks. Tentukan semua halaman sebagai pemicu:

Kemudian nyalakan pratinjau GTM, buka halaman formulir, lengkapi formulir, dan kirimkan.

Jika di konsol debug acara ajaxComplete muncul (seperti pada tangkapan layar di atas), maka formulir Anda menggunakan AJAX dan metode pelacakan ini cocok untuk Anda. Dalam hal ini, baca lebih lanjut.

Langkah 2. Buat variabel lapisan data

Jika Anda mengklik acara ajaxComplete di konsol pratinjau lalu membuka tab Lapisan Data, Anda akan melihat informasi apa yang diteruskan ke larik tingkat data setelah formulir dikirimkan.

Kami tertarik pada baris respons dalam kode ini; itu berisi teks yang mengatakan bahwa formulir berhasil dikirim:

Baris ini dapat digunakan untuk membuat variabel dan pemicu di Google Pengelola Tag. Buka bagian Variables di GTM, klik Create , dan pada layar Variable Configuration, pilih Data Layer Variable. Di bidang Nama Variabel Lapisan Data, tulis atribut. respons (bisa saja menamai dua variabel dengan nama yang sama) dan simpan pengaturannya.

Mengapa memasukkan atribut . respons alih-alih respons ? Karena atribut adalah objek yang berisi kunci respon dan nilainya. Dengan melakukan itu, kami mengarahkan GTM ke jalur yang tepat ke data yang kami minati.

Setelah membuat variabel, perlu untuk memeriksanya. Untuk tujuan ini, kirimkan formulir dalam mode pratinjau. Klik pada acara ajaxComplete dan buka tab Variabel di Google Pengelola Tag. Jika Anda melihat atribut. variabel respons dan teks tentang berhasil mengirim formulir, itu berarti Anda telah mengonfigurasi semuanya dengan benar.

Langkah 3. Buat pemicunya

Di bagian Konfigurasi Pemicu, klik Buat, lalu Konfigurasi pemicu dan pilih jenis peristiwa Pengguna . Tentukan ajaxComplete di bidang Nama Acara. Kemudian sebagai ketentuan untuk mengaktifkan pemicu, pilih Beberapa Peristiwa Khusus dan daftarkan ketentuan: variabel atribut.respons berisi {masukkan teks khusus Anda tentang berhasil mengirim formulir}.

Setelah itu, yang tersisa adalah:

Menambahkan tag pelacakan Peristiwa baru ke GTM yang akan mengirimkan informasi pengiriman formulir ke Google Analytics dan melampirkan pemicu yang dibuat ke dalamnya.
Menggunakan mode Pratinjau untuk memeriksa cara kerja tag saat mengirimkan formulir.
Menetapkan target Peristiwa untuk melacak konversi di Google Analytics.

Kami telah menjelaskan setelan ini secara mendetail di atas di bagian Metode 2. Kirim pemicu formulir di Google Pengelola Tag.

Metode 5. Peristiwa DataLayer sebagai pemicu

Melacak formulir menggunakan metode .push dataLayer, menurut kami, adalah solusi yang paling andal dan serbaguna. Satu-satunya kelemahan adalah jika Anda tidak memahami kodenya, Anda memerlukan bantuan pengembang.

Siapkan spesifikasi teknis untuk pengembang
Buat daftar pengaturan yang ingin Anda transfer di dataLayer setelah formulir berhasil dikirim. Minta pengembang Anda untuk menambahkan kode ini ke semua halaman dengan formulir yang ingin Anda pantau:

dataLayer.push({
'acara':'Formulir',
'variabel': 'nilai'
})

Di mana:

Event adalah nama dari sebuah event. Anda dapat menggantinya dengan acara apa pun yang nyaman bagi Anda.
Variabel adalah kumpulan semua variabel yang ingin Anda transfer bersama dengan suatu peristiwa.

Setelah pemrogram Anda mengonfigurasi metode dataLayer.push untuk semua formulir, Anda dapat memeriksa cara kerjanya. Untuk tujuan ini, sertakan pratinjau di Google Pengelola Tag dan isi formulir di situs web Anda. Di konsol debugging, harus ada acara baru (dalam contoh kami, ini disebut OWOX). Saat mengklik acara dan membuka tab dataLayer, Anda akan melihat semua parameter yang ditransfer ke larik data:

Dalam contoh acara kami di tangkapan layar di atas (mengunduh file PDF dari blog), kami mempertimbangkan cara mengonfigurasi pelacakan dengan GTM.

Pertama, buat semua variabel pengguna yang diperlukan: eventCategory, eventAction, eventLabel, dll. Kemudian pilih bagian Variable Type in User-Defined Variables dan masukkan nama variabel dalam kurung kurawal: {{eventCategory}}:

Selanjutnya, buat pemicu jenis Custom Event. Di pengaturan, tentukan nama peristiwa dan setel pemicu untuk diaktifkan di Semua Peristiwa Khusus:

Menu Konfigurasi Pemicu di Google Pengelola Tag

Kemudian buat tag yang akan meneruskan peristiwa ke Google Analytics. Tetapkan jenis tag sebagai Google Analytics – Universal Analytics, dan tetapkan jenis pelacakan sebagai Peristiwa.

Selanjutnya, isi kolom ini:

Kategori – {{eventCategory}}
Tindakan – {{eventAction}}
Label – {{eventLabel}}

Selanjutnya, pilih variabel {{Google Analytics settings}} dan pemicu yang Anda buat di langkah sebelumnya:

Semuanya sudah siap. Yang tersisa hanyalah memeriksa apakah tag berfungsi dalam mode pratinjau GTM dan dalam laporan Google Analytics waktu nyata.

Berapa banyak waktu yang dihabiskan pengguna untuk mengisi formulir Anda

Sekarang Anda dapat mengetahui berapa banyak pengguna yang telah berhasil menyelesaikan formulir, akan sangat membantu untuk mengetahui masalah apa yang telah dihadapi oleh mereka yang belum menyelesaikannya.

Pengembang Anda perlu menambahkan ke dataLayer nama dan nilai semua parameter yang diperlukan untuk analitik formulir. Ini akan membantu Anda melacak:

Waktu dari pembukaan halaman hingga aktivasi lapangan
Waktu dari aktivasi lapangan ke penonaktifan lapangan
Waktu dari aktivasi bidang pertama hingga pengiriman formulir pertama
Waktu dari aktivasi bidang pertama hingga pengiriman formulir yang berhasil
Waktu dari aktivasi bidang pertama hingga pengiriman formulir yang gagal
Saatnya mendapatkan tanggapan dari server tentang berhasil mengirimkan formulir
Saatnya mendapatkan tanggapan dari server tentang kegagalan mengirimkan formulir
Waktu dari aktivasi formulir hingga saat pengguna meninggalkan formulir (tanpa berhasil mengirimkannya)

Setelah menyiapkan pengumpulan data ini di Google Analytics, Anda dapat mengimpor data tersebut ke Google BigQuery – misalnya, menggunakan OWOX BI. Kemudian Anda dapat membuat laporan analisis formulir apa pun di Google Spreadsheet menggunakan Add-on Laporan BigQuery OWOX BI gratis.

Laporan ini akan membantu Anda menemukan dan memperbaiki masalah dalam kegunaan formulir Anda dan dengan demikian meningkatkan tingkat konversi Anda.

Berikut adalah beberapa contoh laporan tersebut dan pertanyaan yang dapat mereka jawab:

1. Saat berinteraksi dengan bidang formulir mana yang paling sering terjadi kesalahan oleh pengguna?

2. Berapa lama waktu yang dihabiskan pengguna untuk mengisi formulir?

3. Berapa lama waktu yang dihabiskan pengguna untuk mengisi formulir dan bergantung pada apa?

PS Jika Anda memerlukan bantuan untuk menyiapkan analitik formulir dan membuat sistem metrik khusus untuk bisnis Anda, kirimkan email kepada kami di [email protected] atau isi formulir kontak di situs web OWOX.