Khi tìm hiểu về Google Analytics, tôi biết rằng ta có thể track được các sự kiện mà người dùng click vào banner hoặc item nào trong một danh sách chứa những thành phần tương tự thông qua custom event. Việc tracking này được gọi là Onsite Performance Marketing (OPM).
Tuy nhiên, việc setup khá phiền phức và làm khó những người không rành về công nghệ (ví dụ như nhân viên marketing). Nhờ anh CTO mà tôi biết rằng, ta có thể làm được điều tương tự và gần như tự động chỉ với một đoạn mã JavaScript đơn giản.
function addOPM() {
const opmIdMeta = document.querySelector('meta[name="opm-id"]');
const pageId = opmIdMeta ? opmIdMeta.getAttribute('content') : null;
const elementsWithDataOPM = document.querySelectorAll('[data-opm]');
elementsWithDataOPM.forEach((element, index) => {
const compId = element.getAttribute('data-opm');
const links = element.querySelectorAll('a[href]');
const numLinks = links.length;
links.forEach((link, linkIndex) => {
const href = link.getAttribute('href');
const opmParam = `opm=${pageId}.${compId}${numLinks === 1 ? '' : '.' + linkIndex}`;
const newHref = href.includes('?') ? `${href}&${opmParam}` : `${href}?${opmParam}`;
link.setAttribute('href', newHref);
});
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="opm-id" content="home">
</head>
<body>
<div data-opm="menu">
<a href="/link1">Link 1</a>
<a href="/link2">Link 2</a>
<a href="/link3">Link 3</a>
</div>
</body>
</html>
Phương thức hoạt động của nó là:
- Với mỗi trang, ta sẽ có một tag meta để khai báo pageId của trang.
- Ở những nơi muốn track, ta thêm attribute data-opm để khai báo component Id.
- Các link trong component sẽ lần lượt được đánh số để đánh giá hiệu quả hoạt động của chúng.
- Link sinh ra sẽ có dạng: https://example.com/?opm={pageId}.{compId}.{index}
- Nếu component chỉ có duy nhất một link thì không cần thêm index.
Khi cần phân tích hiệu quả hoạt động của các link, chỉ cần query URL, lấy giá trị của param opm và đếm chúng.