Để đo được chuyển đổi từ nguồn nào về chúng ta cài đặt chuyển đổi theo dõi khách tương tác với chúng ta từ kênh nào.

Vậy bài viết này Hiếu sẽ hướng dẫn bạn cách theo dõi chuyển đổi Tawk.to bằng Google Tag Manager, đảm bảo xem hết làm theo là được. 

Bước 1: Chèn mã của Tawk.to bằng Tag Manager với HTML đặc biệt.

• Để làm được bước này chúng ta đăng nhập vào tài khoản Tawk.to để lấy mã code sau đó vào quản trị tiếp theo vào Chat Widget xuất hiện đoạn mã code như này. 

<!–Start of Tawk.to Script–>
<script type=”text/javascript”>
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement(“script”),s0=document.getElementsByTagName(“script”)[0];
s1.async=true;
s1.src=’https://embed.tawk.to/xxxxxxxxxxxxxxxxxxxxxxxx/1f7qipspo’;
s1.charset=’UTF-8′;
s1.setAttribute(‘crossorigin’,’*’);
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!–End of Tawk.to Script–>

• Các bạn chú ý là phần mình bôi đỏ  xx đó là mã của mỗi tài khoản có mã khác nhau nha
• Sau khi lấy được mã của tawk.to rồi chúng ta phải thêm một đoãn mã nữa là 

var dataLayerPush = function(event){
dataLayer.push({
‘event’: ‘tawk.to’,
‘eventAction’: event
});
console.log({
‘event’: ‘tawk.to’,
‘eventAction’: event
});
}
Tawk_API.onChatStarted = function(){
dataLayerPush(“Chat Started”);
};
Tawk_API.onPrechatSubmit = function(data){
dataLayerPush(“Prechat form submitted”);
};
Tawk_API.onOfflineSubmit = function(data){
dataLayerPush(“Offline Chat submit”);
};
</script>

• Đoạn mã này giúp chúng ta đo lường chuyển đổi. Sau khi chúng ta có 2 đoạn mã rồi chúng ta ghép 2 đoạn mã màu xanh và màu vàng vào một, và được đoạn mã như sau. 

<!–Start of Tawk.to Script–>
<script type=”text/javascript”>
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement(“script”),s0=document.getElementsByTagName(“script”)[0];
s1.async=true;
s1.src=’https://embed.tawk.to/60c1d64165b7290ac6352e38/1f7qipspo’;
s1.charset=’UTF-8′;
s1.setAttribute(‘crossorigin’,’*’);
s0.parentNode.insertBefore(s1,s0);
})();

 

// Do chuyen doi Tawk.to
var dataLayerPush = function(event){
dataLayer.push({
‘event’: ‘tawk.to’,
‘eventAction’: event
});
console.log({
‘event’: ‘tawk.to’,
‘eventAction’: event
});
}
Tawk_API.onChatStarted = function(){
dataLayerPush(“Chat Started”);
};
Tawk_API.onPrechatSubmit = function(data){
dataLayerPush(“Prechat form submitted”);
};
Tawk_API.onOfflineSubmit = function(data){
dataLayerPush(“Offline Chat submit”);
};
</script>

 

• Sau khi chúng ta có 1 đoạn mã hoàn chỉnh này rồi thì chúng ta bắt tay vào cài đặt ở trên tài khoản: https://tagmanager.google.com/
• Tạo thẻ mới với tên thẻ là: tawk.to widget chọn tiếp HTML tùy chỉnh  sau đó copy đoạn mã màu tím ở trên vào, chú ý là thay mã theo từng tài khoản nha tiếp theo phần Kích hoạt thì chọn All Pages tiếp ấn lưu là xong  bước 1 cài đặt mã, ah mà các bạn nhớ ra trang web xem cửa sổ chát của tawk.to đã hiện thị chưa nha, nếu hiện thị là ok rồi.

Bưới 2: Cài đặt biến lớp

• Vào Biến tiếp tục chọn Biến lớp dữ liệu với Tên biến lớp dữ liệu eventAction. Sau đó ấn lưu với tên biến là eventAction
• Các bạn chú ý phần này là Tên biến lớp dữ liệu là phải đúng như mình 

Bước 3: Cài đặt trình kích hoạt

• Vào trình kích hoạt – chọn Mới chọn cầu hình trình kích hoạt là sự kiện tùy chỉnh 
• Đặt tên sự kiện là: tawk.to
• Sau đó ấn lưu và đặt tên trình kích hoạt là: tawk.to-chat

Bước 4: cài đặt chuyển đổi google ads chúng ta lại quay trở lại với https://tagmanager.google.com

• Chọn thẻ, chọn Mới, chọn theo dõi chuyển đổi trên google ads nhập ID và Nhãn của chuyển đổi google ads vào https://tagmanager.google.com 
• Phần Kích hoạt chọn tawk.to-chat vừa tạo ở bước 3

Sau đó các bạn lưu vào và gửi và tét xem đã hoạt động chưa nha. Ở dưới mình làm video hướng dẫn chi tiết hơn. Chúc các bạn thành công.