วิธีตั้งค่าการวิเคราะห์การติดตามแบบฟอร์มด้วย Google Tag Manager และ Google Analytics

เผยแพร่แล้ว: 2022-04-12

อัตราการแปลงเป็นหนึ่งในการวัดประสิทธิภาพการตลาดที่ง่ายที่สุดและในเวลาเดียวกันที่สำคัญที่สุด โดยแสดงจำนวนผู้ใช้ที่ดำเนินการตามเป้าหมายจนเสร็จสิ้น เช่น ซื้อสินค้า ลงชื่อสมัครใช้อีเมล ขอโทร ฯลฯ สำหรับการบันทึกและวิเคราะห์การขายอีคอมเมิร์ซ เรามี Google Analytics ซึ่งค่อนข้างง่ายในการกำหนดค่า อย่างไรก็ตาม ต้องใช้ความพยายามมากขึ้นในการติดตามแบบฟอร์มที่ส่งบนไซต์

นั่นเป็นเพราะรูปแบบที่เกิดขึ้นมีหลายประเภทและใช้เทคโนโลยีที่แตกต่างกันในการส่งข้อมูลไปยังเซิร์ฟเวอร์ หลังจากส่งข้อมูลสำเร็จแล้ว ฟิลด์บางฟอร์มจะได้รับการอัปเดต อื่นๆ แสดงหน้าต่างป๊อปอัป ประเภทที่สามเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าขอบคุณ วิธีการติดตามแบบฟอร์มขึ้นอยู่กับเทคโนโลยีที่ใช้

ในบทความนี้ เราจะบอกวิธีรวบรวมข้อมูลแบบฟอร์มด้วยวิธีต่างๆ และโอนไปยัง Google Analytics

สารบัญ

วิธีที่ 1. แยกหน้าขอบคุณ
วิธีที่ 2 ส่งทริกเกอร์แบบฟอร์มใน Google Tag Manager
- ขั้นตอนที่ 1 เปิดใช้งานตัวแปรแบบฟอร์ม
- ขั้นตอนที่ 2 ปรับทริกเกอร์
- ขั้นตอนที่ 3 ตรวจสอบว่าทริกเกอร์ทำงานหรือไม่
- ขั้นตอนที่ 4. สร้างแท็ก
- ขั้นตอนที่ 5. ตั้งค่าเป้าหมายของคุณใน Google Analytics
วิธีที่ 3 ความพร้อมใช้งานขององค์ประกอบใน Google Tag Manager
วิธีที่ 4 ติดตามแบบฟอร์มที่ใช้ AJAX
- ขั้นตอนที่ 1 สร้างแท็กเพื่อตรวจสอบว่าแบบฟอร์มของคุณทำงานอย่างไร
- ขั้นตอนที่ 2 สร้างตัวแปรชั้นข้อมูล
- ขั้นตอนที่ 3 สร้างทริกเกอร์
วิธีที่ 5. เหตุการณ์ DataLayer เป็น trigger
เวลาที่ผู้ใช้กรอกแบบฟอร์มของคุณ

วิธีที่ 1. แยกหน้าขอบคุณ

หากผู้ใช้ถูกเปลี่ยนเส้นทางไปยังหน้าอื่นที่มี URL อื่นหลังจากกรอกแบบฟอร์ม การติดตามการเยี่ยมชม URL นี้เป็นวิธีที่ง่ายที่สุดในการติดตามการส่งแบบฟอร์ม การสร้างเป้าหมายด้วยประเภท "Landing Page" ใน Google Analytics ก็เพียงพอแล้ว

สมมติว่าคุณต้องการติดตามการลงทะเบียนสำหรับการสัมมนาผ่านเว็บ หน้าขอบคุณหลังจากลงทะเบียนสำเร็จแล้วมีลักษณะดังนี้: https://www.site.com/registration/thankyou

ในแผงการดูแลระบบ ใน ดูการตั้งค่า ภายใต้เป้าหมาย ให้คลิก เป้าหมาย จากนั้นคลิก กำหนดเอง ระบุชื่อเป้าหมาย เลือกประเภทเป้าหมาย และป้อนที่อยู่ของหน้าขอบคุณ:

สิ่งสำคัญที่ต้องพิจารณา: URL ของหน้าขอบคุณควรไม่ซ้ำกัน กล่าวคือ ควรมีหน้าเดียวในไซต์ที่มีที่อยู่ดังกล่าว และผู้ใช้ไม่ควรเข้าสู่หน้านี้โดยไม่ได้กรอกแบบฟอร์ม มิฉะนั้น Google Analytics สามารถบันทึกข้อมูลที่ไม่ถูกต้องเกี่ยวกับการบรรลุเป้าหมายของคุณ

โบนัสสำหรับผู้อ่าน

สุดยอดเคสการตลาด OWOX BI

ดาวน์โหลด เลย

วิธีที่ 2 ส่งทริกเกอร์แบบฟอร์มใน Google Tag Manager

หากโปรแกรมเมอร์ของคุณกำหนดค่าการรับส่งข้อมูลจากแบบฟอร์มอย่างถูกต้องโดยใช้ปุ่มส่ง สำหรับการส่งการติดตามแบบฟอร์ม คุณสามารถใช้ทริกเกอร์ Google Tag Manager ในตัวได้ ตัดสินโดยความคิดเห็นบนอินเทอร์เน็ตสถานการณ์นี้พบไม่บ่อยนัก แต่ก็คุ้มค่าที่จะลอง

เมื่อใช้วิธีนี้ เมื่อผู้ใช้กรอกและส่งแบบฟอร์ม ทริกเกอร์จะส่งเหตุการณ์ gtm.formSubmit ไปยังอาร์เรย์ dataLayer

หมายเหตุ: ก่อนที่คุณจะไปที่การตั้งค่า ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานแท็กการดูหน้าเว็บใน Google Tag Manager สำหรับทุกหน้าในไซต์

ขั้นตอนที่ 1 เปิดใช้งานตัวแปรแบบฟอร์ม

เพื่อจุดประสงค์นี้ ให้เปิดเมนู ตัวแปร ใน GTM คลิก กำหนดค่า และเลือกตัวแปรทั้งหมดในส่วนแบบฟอร์ม:

ขั้นตอนที่ 2 ปรับทริกเกอร์

คุณต้องมีรหัสแบบฟอร์มหรือแอตทริบิวต์คลาสของแบบฟอร์มเพื่อสร้างทริกเกอร์ คุณสามารถดูได้ในโค้ด HTML โดยคลิกขวาที่แบบฟอร์มแล้วคลิกสำรวจรายการใน Firefox หรือดูโค้ดใน Chrome:

ในตัวอย่างของเรา id ของแบบฟอร์มคือ send-request-form ซึ่งเราจะใช้เมื่อกำหนดค่าทริกเกอร์

ไปที่เมนู ทริกเกอร์ คลิก ใหม่ เปิด การตั้งค่าทริกเกอร์ และเลือก ส่งแบบฟอร์ม :

การเลือกประเภททริกเกอร์ใน Google Tag Manager

ในหน้าต่างที่เปิดขึ้น คุณจะเห็นช่องทำเครื่องหมายสองช่อง:

รอแท็ก – หากคุณเปิดใช้งานตัวเลือกนี้ แบบฟอร์มจะไม่ถูกส่งจนกว่าจะเปิดใช้งานแท็กทั้งหมดที่เกี่ยวข้องหรือเวลาที่คุณระบุหมดอายุ
ตรวจสอบการตรวจสอบ – ทางที่ดีควรเปิดใช้งานตัวเลือกนี้ มิฉะนั้น ทริกเกอร์จะเริ่มทำงานแม้ว่าผู้ใช้จะไม่ได้กรอกข้อมูลในฟิลด์ที่จำเป็น

หลังจากที่คุณเปิดใช้งานการตรวจสอบข้อผิดพลาด การตั้งค่าเพิ่มเติมจะปรากฏขึ้น หากคุณเปิดใช้งานทริกเกอร์ ให้ระบุ URL ของเพจที่มีแบบฟอร์มของคุณ และหากคุณเปิดใช้งานทริกเกอร์ ให้ระบุ ID แบบฟอร์มที่เรากล่าวถึงข้างต้น:

คิดชื่อทริกเกอร์ที่สะดวกและเข้าใจได้ง่าย เช่น ส่งคำขอ และบันทึก

ขั้นตอนที่ 3 ตรวจสอบว่าทริกเกอร์ทำงานหรือไม่

ก่อนเผยแพร่การเปลี่ยนแปลงในคอนเทนเนอร์ ให้ใช้โหมดแสดงตัวอย่างใน Google Tag Manager เปิดหน้าที่มีแบบฟอร์ม กรอกแล้วกดส่ง ในคอนโซลการแก้ไขข้อบกพร่อง เหตุการณ์ gtm.formSubmit ควรปรากฏขึ้น

หากเหตุการณ์นี้ไม่ปรากฏขึ้น วิธีการติดตามนี้ก็ใช้ไม่ได้ผลสำหรับคุณ ในกรณีดังกล่าว ให้ลองใช้วิธีอื่นๆ ที่อธิบายไว้ในบทความนี้

หากเหตุการณ์ปรากฏขึ้น ยังจำเป็นต้องทำการทดสอบอีกครั้งหนึ่งเพื่อตรวจสอบว่าทริกเกอร์ทำงานอย่างถูกต้องหรือไม่ เปิดแบบฟอร์ม เว้นฟิลด์บังคับว่างไว้ แล้วส่งแบบฟอร์ม หากเหตุการณ์ gtm.formSubmit ปรากฏในคอนโซลการแก้ไขข้อบกพร่องอีกครั้ง ทริกเกอร์ในตัวจะทำงานอย่างไม่ถูกต้องและจะไม่ช่วยคุณ ถ้าไม่โอนกิจกรรมก็เยี่ยมมาก! ย้ายไปยังขั้นตอนต่อไป

ขั้นตอนที่ 4. สร้างแท็ก

ตอนนี้ คุณต้องสร้างแท็กที่จะส่งข้อมูลไปยัง Google Analytics ที่ส่งแบบฟอร์มไปแล้ว ในการดำเนินการนี้ ไปที่เมนู แท็ก คลิก ใหม่ เปิดการ กำหนดค่าแท็ก และเลือก Google Analytics – Universal Analytics

เพื่อความชัดเจน คุณสามารถตั้งชื่อแท็กให้เหมือนกับทริกเกอร์ได้ ถัดไป กรอกข้อมูลในฟิลด์ต่อไปนี้:

ประเภทแท็ก – เลือก {{การตั้งค่า Google Analytics}}
ประเภทแทร็ก – เลือก “กิจกรรม”
หมวดหมู่ – เช่นเดียวกับแท็กและทริกเกอร์เพื่อความสะดวก
การกระทำ – การส่ง
ป้ายกำกับ – ตัวอย่างเช่น {{Form ID}})
การไม่โต้ตอบ – ปล่อยให้เป็น "เท็จ"

หากคุณต้องการเปิดใช้งานแท็ก ให้เลือกทริกเกอร์ที่คุณสร้างในขั้นตอนที่ 3 แล้วคลิก บันทึก :

แบบฟอร์มการกำหนดค่าแท็กใน Google Tag Manager

พร้อมแล้ว! คุณสามารถตรวจสอบว่าแท็กที่สร้างขึ้นทำงานอย่างไรเมื่อส่งแบบฟอร์มโดยใช้โหมดแสดงตัวอย่าง Google Tag Manager หรือใช้รายงานเหตุการณ์แบบเรียลไทม์ใน Google Analytics

ขั้นตอนที่ 5. ตั้งค่าเป้าหมายของคุณใน Google Analytics

เมื่อคุณเผยแพร่คอนเทนเนอร์ที่มีการเปลี่ยนแปลง คุณต้องตั้งค่าเป้าหมายใน Google Analytics เพื่อพิจารณาส่งแบบฟอร์มเป็น Conversion ในการดำเนินการนี้ ให้เพิ่มเป้าหมายใหม่ของคุณเองในการตั้งค่าข้อมูลพร็อพเพอร์ตี้ Google Analytics เลือกประเภทเหตุการณ์และกรอกข้อมูลในช่องหมวดหมู่ การดำเนินการ และทางลัด เช่นเดียวกับที่คุณทำเมื่อคุณกำหนดค่าแท็กใน Google Tag Manager:

บันทึกเป้าหมาย เสร็จแล้ว. คุณได้ตั้งค่าการติดตามแบบฟอร์มโดยไม่ต้องเปลี่ยนโค้ดใดๆ บนไซต์ของคุณ!

วิธีที่ 3 ความพร้อมใช้งานขององค์ประกอบใน Google Tag Manager

หากหน้าต่างปรากฏขึ้นบนไซต์พร้อมกับขอบคุณหรือข้อความเกี่ยวกับการส่งที่สำเร็จหลังจากส่งแบบฟอร์ม คุณสามารถลองใช้ทริกเกอร์ GTM ในตัวอื่น โดยจะทำงานเมื่อรายการใดรายการหนึ่งปรากฏขึ้นบนหน้าจอ (ในกรณีของเราคือหน้าต่างป๊อปอัป) และส่งเหตุการณ์ gtm.elementVisibility ไปยัง dataLayer

ในการกำหนดค่าทริกเกอร์นี้ คุณต้องรู้จักตัวเลือก CSS ของรายการที่ตรวจสอบ หากต้องการค้นหาตัวเลือกนี้ ให้คลิกขวาที่หน้าต่างและเลือก ดูรหัส คุณกำลังมองหาบรรทัดต่อไปนี้:

ในการคัดลอกตัวเลือก CSS ให้คลิกขวาที่บรรทัดและเลือก คัดลอก – ตัวเลือกการคัดลอก:

ในตัวอย่างของเรา ตัวเลือกจะมีลักษณะดังนี้: #webinar_marketing_automation > div

จากนั้นสร้างทริกเกอร์ใหม่โดยเลือกประเภท การมองเห็นองค์ประกอบ :

กรอกข้อมูลในฟิลด์ต่อไปนี้:

ชื่อทริกเกอร์ – ตัวอย่างเช่น “รับการบันทึกการสัมมนาผ่านเว็บ”
วิธีการเลือก – ตัวเลือก CSS
ตัวเลือกองค์ประกอบ – แทรกค่าที่คุณคัดลอกจากโค้ด HTML ของหน้าต่างป๊อปอัป
กฎทริกเกอร์ – หากคุณมีแบบฟอร์มเดียวบนหน้า ปล่อยให้ตัวเลือก “หนึ่งครั้งต่อหน้า” หากมีหลายรูปแบบและมีข้อความปรากฏขึ้นหนึ่งข้อความ คุณสามารถเลือก "ครั้งเดียวต่อองค์ประกอบ"

ตัวเลือกองค์ประกอบในเมนู Google Tag Manager

จากนั้นเลือกช่อง "ลงทะเบียนการเปลี่ยนแปลง DOM"
เงื่อนไขการเปิดใช้งานทริกเกอร์ – โดยการเลือก “เหตุการณ์การมองเห็นบางอย่าง” คุณสามารถระบุหน้าที่จะแสดงข้อความหรือข้อความป๊อปอัป
บันทึกทริกเกอร์

ตัวเลือกขั้นสูงในเมนู Google Tag Manager

หลังจากที่คุณสร้างทริกเกอร์ความพร้อมใช้งานขององค์ประกอบแล้ว คุณต้องปรับการตั้งค่าเดียวกันตามที่อธิบายไว้ในรายละเอียดในวิธีที่ 2:

เพิ่มแท็กใหม่ใน GTM ซึ่งจะส่งข้อมูลการส่งแบบฟอร์มไปยัง Google Analytics และแนบทริกเกอร์ที่สร้างขึ้นไป
ดูตัวอย่างการทำงานของแท็กเมื่อส่งแบบฟอร์ม
ใน Google Analytics ตั้งเป้าหมายเหตุการณ์เพื่อติดตาม Conversion

วิธีที่ 4 ติดตามแบบฟอร์มที่ใช้ AJAX

หากแบบฟอร์มบนเว็บไซต์ของคุณใช้เทคโนโลยี AJAX ข้อมูลจะถูกโอนจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ในเบื้องหลังและหน้าเว็บจะไม่โหลดซ้ำ ในการกำหนดค่าการติดตามการส่งแบบฟอร์ม AJAX คุณสามารถใช้สคริปต์นี้จาก 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>

โค้ดนี้จะตรวจสอบว่าแบบฟอร์มของคุณใช้ AJAX จริงหรือไม่ จากนั้นจึงสร้างตัวแปรและทริกเกอร์ใน Google Tag Manager

ขั้นตอนที่ 1 สร้างแท็กเพื่อตรวจสอบว่าแบบฟอร์มของคุณทำงานอย่างไร

ใน Google Tag Manager เปิด แท็ก คลิก ใหม่ คลิกการ กำหนดค่าแท็ก จากนั้นเลือก HTML ที่กำหนดเอง คัดลอกโค้ดด้านบนแล้ววางลงในกล่องข้อความ ระบุหน้าทั้งหมดเป็นตัวกระตุ้น:

จากนั้นเปิดการแสดงตัวอย่าง GTM เปิดหน้าแบบฟอร์ม กรอกแบบฟอร์ม และส่ง

หากในคอนโซลการดีบัก เหตุการณ์ ajaxComplete ปรากฏขึ้น (ดังในภาพหน้าจอด้านบน) แสดงว่าแบบฟอร์มของคุณใช้ AJAX และวิธีการติดตามนี้เหมาะกับคุณ ในกรณีนั้น อ่านต่อ

ขั้นตอนที่ 2 สร้างตัวแปรชั้นข้อมูล

หากคุณคลิกเหตุการณ์ ajaxComplete ในคอนโซลแสดงตัวอย่าง จากนั้นเปิดแท็บชั้นข้อมูล คุณจะเห็นว่าข้อมูลใดบ้างที่ถูกส่งผ่านไปยังอาร์เรย์ชั้นข้อมูลหลังจากส่งแบบฟอร์ม

เราสนใจบรรทัดตอบกลับในรหัสนี้ มีข้อความแจ้งว่าส่งแบบฟอร์มสำเร็จแล้ว:

บรรทัดนี้ใช้สำหรับสร้างตัวแปรและทริกเกอร์ใน Google Tag Manager เปิดส่วนตัวแปรใน GTM คลิก สร้าง และบนหน้าจอการกำหนดค่าตัวแปร ให้เลือกตัวแปรชั้นข้อมูล ในฟิลด์ ชื่อตัวแปรชั้นข้อมูล ให้เขียน attributes.response (สามารถตั้งชื่อตัวแปรสองตัวให้เหมือนกันได้) และบันทึกการตั้งค่า

เหตุใดจึงป้อน attributes.response แทนการ ตอบกลับ เนื่องจากแอตทริบิวต์เป็นวัตถุที่มีคีย์การตอบกลับและค่าของมัน การทำเช่นนี้ทำให้เราชี้ GTM ไปยังเส้นทางที่แน่นอนไปยังข้อมูลที่เราสนใจ

หลังจากสร้างตัวแปรแล้ว จำเป็นต้องตรวจสอบ เพื่อจุดประสงค์นี้ ให้ส่งแบบฟอร์มในโหมดแสดงตัวอย่าง คลิกที่เหตุการณ์ ajaxComplete และเปิดแท็บตัวแปรใน Google Tag Manager หากคุณเห็นตัวแปร attributes.response และข้อความเกี่ยวกับการส่งแบบฟอร์มสำเร็จ แสดงว่าคุณได้กำหนดค่าทุกอย่างถูกต้องแล้ว

ขั้นตอนที่ 3 สร้างทริกเกอร์

ในส่วนการกำหนดค่าทริกเกอร์ คลิก สร้าง จากนั้น กำหนดค่าทริกเกอร์ และเลือกประเภท เหตุการณ์ผู้ใช้ ระบุ ajaxComplete ในฟิลด์ ชื่อเหตุการณ์ จากนั้นเป็นเงื่อนไขสำหรับการเปิดใช้งานทริกเกอร์ ให้เลือก บางเหตุการณ์ที่กำหนดเอง และลงทะเบียนเงื่อนไข: ตัวแปร attributes.response มี {ป้อนข้อความที่กำหนดเองของคุณเกี่ยวกับการส่งแบบฟอร์มสำเร็จ}

หลังจากนั้น สิ่งที่เหลือคือ

การเพิ่มแท็กติดตามเหตุการณ์ใหม่ใน GTM ซึ่งจะส่งข้อมูลการส่งแบบฟอร์มไปยัง Google Analytics และแนบทริกเกอร์ที่สร้างขึ้นไป
ใช้โหมดดูตัวอย่างเพื่อตรวจสอบว่าแท็กทำงานอย่างไรเมื่อส่งแบบฟอร์ม
การตั้งเป้าหมายเหตุการณ์เพื่อติดตาม Conversion ใน Google Analytics

เราได้อธิบายการตั้งค่าเหล่านี้โดยละเอียดแล้วข้างต้นในส่วนวิธีที่ 2 ส่งทริกเกอร์แบบฟอร์มใน Google Tag Manager

วิธีที่ 5. เหตุการณ์ DataLayer เป็น trigger

ในมุมมองของเรา การติดตามแบบฟอร์มโดยใช้วิธี dataLayer .push คือโซลูชันที่น่าเชื่อถือและใช้งานได้หลากหลายที่สุด ข้อเสียเพียงอย่างเดียวคือ หากคุณไม่เข้าใจโค้ด คุณจะต้องขอความช่วยเหลือจากนักพัฒนา

เตรียมข้อกำหนดทางเทคนิคสำหรับนักพัฒนา
ทำรายการการตั้งค่าที่คุณต้องการโอนใน dataLayer หลังจากที่ส่งแบบฟอร์มเรียบร้อยแล้ว ขอให้นักพัฒนาของคุณเพิ่มโค้ดนี้ในทุกหน้าที่มีแบบฟอร์มที่คุณต้องการตรวจสอบ:

dataLayer.push({
'เหตุการณ์':'แบบฟอร์ม',
'ตัวแปร': 'ค่า'
})

ที่ไหน:

เหตุการณ์คือชื่อของเหตุการณ์ คุณสามารถแทนที่ด้วยกิจกรรมใดก็ได้ที่คุณสะดวก
ตัวแปรคือชุดของตัวแปรทั้งหมดที่คุณต้องการโอนพร้อมกับเหตุการณ์

หลังจากที่โปรแกรมเมอร์ของคุณกำหนดค่าเมธอด dataLayer.push สำหรับทุกรูปแบบ คุณสามารถตรวจสอบวิธีการทำงาน เพื่อจุดประสงค์นี้ ให้รวมการแสดงตัวอย่างใน Google Tag Manager และกรอกแบบฟอร์มบนเว็บไซต์ของคุณ ในคอนโซลการดีบัก ควรมีเหตุการณ์ใหม่ (ในตัวอย่างของเรา เรียกว่า OWOX) เมื่อคลิกที่เหตุการณ์และไปที่แท็บ dataLayer คุณจะเห็นพารามิเตอร์ทั้งหมดที่โอนไปยังอาร์เรย์ข้อมูล:

ในตัวอย่างกิจกรรมของเราในภาพหน้าจอด้านบน (การดาวน์โหลดไฟล์ PDF จากบล็อก) เราจะพิจารณาวิธีกำหนดค่าการติดตามด้วย GTM

ขั้นแรก สร้างตัวแปรผู้ใช้ที่จำเป็นทั้งหมด: eventCategory, eventAction, eventLabel เป็นต้น จากนั้นเลือกประเภทตัวแปรในส่วนตัวแปรที่กำหนดโดยผู้ใช้ และป้อนชื่อตัวแปรในวงเล็บปีกกา: {{eventCategory}}:

ถัดไป สร้างทริกเกอร์ประเภทเหตุการณ์ที่กำหนดเอง ในการตั้งค่า ระบุชื่อเหตุการณ์และตั้งค่าทริกเกอร์ให้เริ่มทำงานกับเหตุการณ์ที่กำหนดเองทั้งหมด:

เมนูการกำหนดค่าทริกเกอร์ใน Google Tag Manager

จากนั้นสร้างแท็กที่จะส่งต่อเหตุการณ์ไปยัง Google Analytics ตั้งค่าประเภทแท็กเป็น Google Analytics – Universal Analytics และตั้งค่าประเภทการติดตามเป็นเหตุการณ์

เพิ่มเติม กรอกข้อมูลในฟิลด์เหล่านี้:

หมวดหมู่ – {{eventCategory}}
การกระทำ – {{eventAction}}
ป้ายกำกับ – {{eventLabel}}

ถัดไป เลือกตัวแปร {{การตั้งค่า Google Analytics}} และทริกเกอร์ที่คุณสร้างในขั้นตอนก่อนหน้า:

ทุกอย่างพร้อมแล้ว. สิ่งที่เหลืออยู่คือการตรวจสอบว่าแท็กทำงานในโหมดแสดงตัวอย่าง GTM และในรายงาน Google Analytics แบบเรียลไทม์หรือไม่

เวลาที่ผู้ใช้กรอกแบบฟอร์มของคุณ

เมื่อคุณทราบจำนวนผู้ใช้ที่กรอกแบบฟอร์มสำเร็จแล้ว จะเป็นประโยชน์ในการค้นหาว่าผู้ที่ยังไม่กรอกแบบฟอร์มพบปัญหาใดบ้าง

นักพัฒนาของคุณต้องเพิ่มชื่อและค่าของพารามิเตอร์ทั้งหมดที่จำเป็นสำหรับการวิเคราะห์แบบฟอร์มลงใน dataLayer ซึ่งจะช่วยให้คุณติดตาม:

เวลาตั้งแต่เปิดเพจจนถึงการเปิดใช้งานฟิลด์
เวลาตั้งแต่การเปิดใช้งานฟิลด์ไปจนถึงการปิดใช้งานฟิลด์
เวลาตั้งแต่เปิดใช้งานฟิลด์แรกจนถึงการส่งแบบฟอร์มครั้งแรก
เวลาตั้งแต่เปิดใช้งานฟิลด์แรกจนถึงการส่งแบบฟอร์มสำเร็จ
เวลาตั้งแต่เปิดใช้งานฟิลด์แรกจนถึงการส่งแบบฟอร์มล้มเหลว
ถึงเวลาได้รับการตอบกลับจากเซิร์ฟเวอร์เกี่ยวกับการส่งแบบฟอร์มสำเร็จ
ถึงเวลารับคำตอบจากเซิร์ฟเวอร์เกี่ยวกับการส่งแบบฟอร์มไม่สำเร็จ
เวลาตั้งแต่เปิดใช้งานแบบฟอร์มจนถึงเมื่อผู้ใช้ออกจากแบบฟอร์ม (โดยไม่ได้ส่งแบบฟอร์มให้สำเร็จ)

เมื่อคุณตั้งค่าการรวบรวมข้อมูลนี้ใน Google Analytics แล้ว คุณจะสามารถนำเข้าข้อมูลนั้นไปยัง Google BigQuery ได้ เช่น การใช้ OWOX BI จากนั้น คุณสามารถสร้างรายงานการวิเคราะห์แบบฟอร์มใดๆ ใน Google ชีตได้โดยใช้โปรแกรมเสริม OWOX BI BigQuery Reports ฟรี

รายงานเหล่านี้จะช่วยคุณค้นหาและแก้ไขปัญหาในการใช้งานแบบฟอร์มของคุณ ซึ่งจะทำให้อัตราการแปลงของคุณเพิ่มขึ้น

ต่อไปนี้คือตัวอย่างบางส่วนของรายงานดังกล่าวและคำถามที่พวกเขาสามารถตอบได้:

1. เมื่อโต้ตอบกับฟิลด์แบบฟอร์มใดที่ผู้ใช้มักพบข้อผิดพลาดบ่อยที่สุด?

2. ผู้ใช้ใช้เวลาในการกรอกแบบฟอร์มนานเท่าใด?

3. ผู้ใช้ใช้เวลาในการกรอกแบบฟอร์มนานเท่าใดและขึ้นอยู่กับอะไร?

PS หากคุณต้องการความช่วยเหลือในการตั้งค่าการวิเคราะห์แบบฟอร์มและสร้างระบบเมตริกที่กำหนดเองสำหรับธุรกิจของคุณ ส่งอีเมลถึงเราที่ [email protected] หรือกรอกแบบฟอร์มการติดต่อบนเว็บไซต์ OWOX