Thứ Bảy, Tháng Năm 21, 2022
HomeKinh doanh & MarketingDigital MarketingTheo dõi thời gian dành cho các trường form đăng ký qua...

Theo dõi thời gian dành cho các trường form đăng ký qua Google tag manager

Trong hướng dẫn ngắn này, tôi sẽ chỉ cho bạn cách theo dõi thời gian người dùng dành cho các trường mẫu của bạn. Chúng tôi sẽ sử dụng  lần truy cập theo Thời gian của người dùng và chúng tôi sẽ gửi dữ liệu theo tương tác người dùng với từng trường trong biểu mẫu. Với những sửa đổi nhỏ, bạn có thể mở rộng tập lệnh để bao gồm nhiều biểu mẫu trên một trang.

Giải pháp đơn giản này theo dõi thời gian người dùng dành cho từng trường trong biểu mẫu bằng cách đo khoảng cách giữa các focussự kiện và blurhoặc changesự kiện. Cái đầu tiên xảy ra khi một trường biểu mẫu được nhập và trường thứ hai phụ thuộc vào việc giá trị thay đổi ( change) hay không có thay đổi nào được đăng ký ( blur).

Đối tượng thời gian được gửi tới GA trông như thế này:
Danh mục thời gian – Trường biểu mẫu Nhận xét
Biến thời gian thời gian – nameGiá trị thuộc tính trường biểu mẫu
Nhãn thời gian – ‘mờ’ hoặc ‘thay đổi’ tùy thuộc vào cách thoát trường
Giá trị thời gian – Thời gian dành cho trường tính bằng mili giây

Chú thích! Thời gian được tính theo giới hạn 500 lần truy cập / phiên trong Google Analytics. Đó là lý do tại sao bạn phải cẩn thận khi thực hiện điều này. Tôi khuyên bạn chỉ nên thực hiện nó trên một hình thức và trong một thời gian ngắn, sau đó xem liệu các phiên của người dùng có bị tính toán sai hay không nhờ họ vượt quá giới hạn 500 lần. Có một số hạn chế bổ sung trên mỗi thuộc tính là tốt, nhưng họ chỉ được tính vào hit thời gian và không phải tất cả lượt truy cập trong phiên.

Các Thẻ HTML tùy chỉnh

Thẻ HTML tùy chỉnh trông như thế này:

<script>

(function() {

var form = document.querySelector(‘#commentform’);

var fields = {};

 

var enterField = function(name) {

fields[name] = new Date().getTime();

}

 

var leaveField = function(e) {

var timeSpent;

var fieldName = e.target.name;

var leaveType = e.type;

if (fields.hasOwnProperty(fieldName)) {

timeSpent = new Date().getTime() – fields[fieldName];

if (timeSpent > 0 && timeSpent < 1800000) {

window.dataLayer.push({

‘event’ : ‘fieldTiming’,

‘timingCategory’ : ‘Comment Form Field Timing’,

‘timingVariable’ : fieldName,

‘timingLabel’ : leaveType,

‘timingValue’ : timeSpent

});

}

delete fields[fieldName];

}

}

 

if (form) {

form.addEventListener(‘focus’, function(e) { enterField(e.target.name); }, true);

form.addEventListener(‘blur’, function(e) { leaveField(e); }, true);

form.addEventListener(‘change’, function(e) { leaveField(e); }, true);

}

})();

</script>

Để kích hoạt thẻ này, tôi đề nghị bạn tạo một trang Xem trình kích hoạt mà chỉ bắn Tag này trên các trang nơi hình thức của bạn tồn tại.

Tiếp theo, thay đổi biến đầu tiên var form = document.querySelector(‘#commentform’);để chọn biểu mẫu bạn muốn theo dõi. Trên trang web của tôi, đây là một biểu mẫu với ID #commentform.

Bất cứ khi nào một focussự kiện được phát hiện, một bảng băm được cập nhật với tên trường biểu mẫu và thời gian khi trường được nhập.

Sau đó, khi trường được thoát và một blurhoặc changeđược ghi lại, thời gian dành cho trường được tính và sau đó tên trường sẽ bị xóa khỏi bảng băm. Nếu bạn không xóa trường, một changesự kiện sẽ gửi thời gian hai lần, bởi vì khi người dùng chỉnh sửa giá trị của một trường và rời khỏi nó, thì một sự kiện changesẽ được gửi trước, sau đó a blur.

Dù sao, hãy thoải mái thay đổi giá trị của biến ‘timeC Category’ trong dataLayer.push(). Tôi sử dụng ‘Thời gian biểu mẫu nhận xét’, vì đó là những gì tôi đang làm ở đây.

Cuối cùng, nếu bộ chọn biểu mẫu bạn sử dụng trong khai báo biến đầu tiên của tập lệnh hoạt động, ba trình nghe được gắn vào biểu mẫu với các cuộc gọi lại tương ứng của chúng.

Đây là kịch bản chính nó. Chúng tôi sẽ kết thúc việc thiết lập trong chương tiếp theo.

Thẻ thời gian, Kích hoạt và Biến lớp dữ liệu

Để thiết lập hoạt động, chúng tôi cần Thẻ thời gian, Trình kích hoạt sự kiện tùy chỉnh và bốn biến số lớp dữ liệu.

Biến lớp dữ liệu

Tạo các biến dữ liệu lớp đầu tiên. Bạn cần bốn biến với các cài đặt sau:

Tên: {{DLV – timeC Category}}
Tên biến của lớp dữ liệu: timeC Category

Tên: {{DLV – timeVariable}}
Tên biến của lớp dữ liệu: timeVariable

Tên: {{DLV – timeLabel}}
Tên biến của lớp dữ liệu: timeLabel

Tên: {{DLV – timeValue}}
Tên biến của lớp dữ liệu: timeValue

Kích hoạt sự kiện tùy chỉnh

Trình kích hoạt là Trình kích hoạt sự kiện tùy chỉnh với các cài đặt sau:

Tên: Sự kiện – fieldTiming
Fire On / Tên sự kiện: fieldTiming

Thẻ thời gian

Cuối cùng, bạn cần tạo Thẻ thời gian. Tạo Thẻ mới loại Google Analytics và đặt các cài đặt sau:

Tên: UA – Thời gian – Form Field Timing
Tracking ID: UA-XXXXXX-Y (thay thế với ID thuộc tính của bạn)
Loại theo dõi: Thời gian
Var: {{DLV – timingVariable}}
Thể loại: {{DLV – timingCategory}}
Value: {{ DLV – timingValue}}
Label: {{DLV – timingLabel}}

Đính kèm Trình kích hoạt bạn đã tạo trong phần trước vào Thẻ này.

Và bây giờ bạn đã sẵn sàng để đi! Mỗi tương tác với các trường trong biểu mẫu của bạn bây giờ sẽ gửi lần truy cập thời gian. Bạn có thể tìm thấy kết quả trong Google Analytics, bằng cách đi tới Hành vi -> Tốc độ trang web -> Thời gian của người dùng .

Tóm lược

Giống như tôi đã đề cập, đây là một giải pháp rất đơn giản. Nó chỉ đo thời gian dành cho từng trường biểu mẫu và báo cáo đây là lần truy cập Thời gian của người dùng cho Google Analytics. Bạn có thể muốn điều chỉnh nó một chút để mạnh mẽ hơn và bạn phải chú ý đến giới hạn 500 lần truy cập / phiên mà GA áp đặt trong các phiên.