Tất tần tật về Conversion Tracking Google Ads, Google Analytics & Tagmanager
Cùng tìm hiểu những kiến thức hữu ích Nam sưu tầm được từ quá trình thực chiến nhé. Hy vọng những chia sẻ này sẽ giúp ích cho bạn trong việc Setup Conversion Tracking đối với kênh Google Ads, Google Analytics, Google Tag manager
CHọn conversion và setting 1 mẫu có sẵn
Phần tag settings sẽ kết nối trực tiếp với Google Tag manager để thu các thẻ chuyển đổi
Khi tạo chuyển đổi mới cần set phần thẻ tag trigger (Có 2 cách)
Ta sẽ lấy 2 chỉ số
Conversion ID 10775005722 Conversion label hfDrCK7i-_QCEJqU9pEo
Sau đó vào Tag manager và tạo 1 Tag mới
Lựa chọn trigger Page view có chứa Thank-you, thứ 2 là Referrer sẽ là trang landing page (Trước đấy cần set thank you page chuẩn – Flatsome → Contact form)
Nếu bạn chỉ muốn sử dụng Google Ads tracking mà không cần thông qua Tag manager hoặc Google Analytics thì ta sẽ sử dụng phương án như sau:
Để sử dụng tracking trực tiếp của Google Ads ta cần cài đặt thẻ gtag.js để ghi nhận các chuyển đổi về đúng tài khoản, thường ta sẽ cài vào khu vực của tất cả các trang trong Website, tiếp đó ngay bên dưới ta có thể gắn 1 script theo dõi lượt click vào nút bấm và gửi thông tin về cho Google Ads theo mã theo dõi được thiết lập
Trên đây là đoạn mã mà Google Ads cho sẵn, tuy vậy nó lại chưa gán vào các hành động chuyển đổi nào cả, ta sẽ cải tiến nó 1 chút để gửi thông số về cho Google Ads, giả sử nút bấm có đoạn html như sau:
<div class="hotline-bar"><a href="tel:hotline của bạn"> <span class="text-hotline">hotline của bạn</span> </a></div>Lúc này, đoạn mã theo dõi sẽ cần có bổ sung như sau:
function gtag_report_conversion(url) {
var callback = function () {
if (typeof(url) != 'undefined') {
window.location = url;
}
};
gtag('event', 'conversion', {
'send_to': '[AW-mã theo dõi Google Ads]',
'event_callback': callback
});
return false;
}
// Gắn sự kiện vào nút gọi
document.addEventListener('DOMContentLoaded', function () {
// Gom tất cả các nút cần track
const trackedLinks = document.querySelectorAll(
'.hotline-bar a[href^="tel:"], a.pps-btn-img'
);
trackedLinks.forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault(); // chặn hành động mặc định
const href = link.getAttribute('href');
gtag_report_conversion(href); // gửi sự kiện rồi mới chuyển tiếp
});
});
});
Hubspot Form đặc thù hơn bởi thực tế ta không thể set điều kiện:
Chính vì vậy ta cần sử dụng theo hướng dẫn sau:
<script type="text/javascript">
// Ensure dataLayer is available
window.dataLayer = window.dataLayer || [];
window.addEventListener("message", function (event) {
if (!event.data) return;
// For old legacy forms (v1)
if (event.data.type === 'HS_CTA_FORM_SUBMITTED') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id || event.data.formId
});
}
// For recent legacy forms (v3)
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var formContainer = document.querySelector('.hs-form-frame');
var formId = formContainer ? formContainer.getAttribute('data-form-id') : event.data.id;
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': formId,
'event-data' : event.data
});
}
});
// For the latest forms (v4 API)
if (document) {
document.addEventListener('hs-form-event:on-submission:success', function (event) {
var formContainer = document.querySelector('.hs-form-frame');
var formId = formContainer ? formContainer.getAttribute('data-form-id') :
(event.detail && event.detail.formId ? event.detail.formId : null);
if (formId) {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': formId,
'event-data' : event.data
});
}
});
}
</script> Theo cảm nhạn của Nam thì để ghi nhận chuyển đổi chuẩn nhất, ta nên lựa chọn cơ chế API V4
Tiếp đó ta sẽ ghi nhận được hành động Hubspot Form Success bất cứ khi nào có người thực hiện event Submit Form
Đây là một biến mới nhằm cho Google Tag manager biết là ta đang tạo 1 biến dữ liệu tự set (Custom tag)
Setup một trigger với thông số như sau: trong đó Data Layer với Event name là hubspot Form Success
Tiếp đó setup thêm một hành động Event Form Submit
Từ bước này, cả nhà có thể tham khảo tại Tại đây
Để làm được việc này thì bạn cần hiểu cơ chế sau
Khi cài đặt một thẻ Tag manager với Trigger mong muốn (Ví dụ: khách bấm vào 1 nút bấm có id bằng “chuyen-doi” chẳng hạn), ở phía đầu Google Analytics cũng cần cài đặt để ghi nhận chuyển đổi.
Ví dụ, mình muốn đo lường khách bấm vào nút nhận báo giá có id là “ux-builder-tracking-quotes”, tương tự như ở Inspection Tools dưới đây
Tốt nhất là bạn nên quy về id và chỉ giới hạn hành động của khách trên một trang là 1 – 3 mà thôi, vì nếu quá rối thì khách không biết nên bấm vào đâu để thực hiện hành động trên website của bạn.
Nam Digital
Bạn lưu ý tên sự kiện là tracking-uxbuilder-pricing
Gần đây khi triển khai quảng cáo, đặc biệt là P-Max (Google) - loại quảng cáo tiếp cận khách hàng ở mọi điểm chạm trong hệ sinh thái của Google, Nam phát hiện ra một điều là:
Mà dở 1 cái là cứ click ảo bấm vào nút gọi đó thì ta lại tính là 1 chuyển đổi, từ đó Google vẫn cho rằng quảng cáo hiệu quả
Về cách giải quyết thì có rất nhiều cách xịn xò hơn, nhưng Nam chia sẻ một cách mà mình phát hiện ra thôi nhé, đó là:
<!-- Bootstrap Icons (nếu chưa có) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<div class="contact-floating">
<a id="zalo-btn" class="btn-contact zalo-btn" role="button">
<i class="bi bi-chat-dots-fill"></i> <span class="label">Zalo</span>
</a>
<a id="call-btn" class="btn-contact call-btn" role="button">
<i class="bi bi-telephone-fill"></i> <span class="label">Gọi</span>
</a>
</div>
<style>
/* Container floating */
.contact-floating {
position: fixed;
left: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 9999;
}
/* Common style */
.btn-contact {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-radius: 50px;
font-weight: 600;
color: #fff;
text-decoration: none;
font-size: 14px;
box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
transition: transform .1s ease, box-shadow .1s ease;
cursor: pointer;
}
.btn-contact i {
font-size: 18px;
}
.btn-contact:hover {
transform: scale(1.05);
box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
/* Zalo */
.zalo-btn {
background: linear-gradient(90deg, #2ea0ff, #0078ff);
}
/* Call */
.call-btn {
background: #28a745;
}
/* Mobile style */
@media (max-width: 576px) {
.btn-contact {
padding: 14px 18px;
font-size: 16px;
}
.btn-contact i {
font-size: 20px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Ẩn số thật trong HTML, chỉ khai báo trong JS
const phone = "Số điện thoại của bạn";
const zaloId = "Số điện thoại của bạn"; // Số Zalo (không có +)
function safeRedirect(url) {
setTimeout(() => { window.location.href = url; }, 300); // delay nhỏ
}
// Nút Zalo
document.getElementById("zalo-btn").addEventListener("click", function (e) {
e.preventDefault();
// Bắn event vào GTM
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "click-mobile-zalo",
contact_type: "zalo"
});
safeRedirect("https://zalo.me/" + zaloId);
});
// Nút Gọi
document.getElementById("call-btn").addEventListener("click", function (e) {
e.preventDefault();
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "click-mobile",
contact_type: "call"
});
safeRedirect("tel:" + phone);
});
});
</script>Vậy là xong, như vậy bạn đã có 1 Floating button với số điện thoại, Zalo được giấu đi, từ đó hạn chế được bot click và ghi nhận chuyển đổi sai.