Hướng Dẫn Độ Lại Giao Diện Web Bằng GTM
[Chia sẻ] Bộ 6 Đoạn Code GTM "Trấn Phái" Tối Ưu Giao Diện & Tăng CR Cho Web con
Chào anh em cộng đồng web con
Việc kéo traffic về web đã khó, nhưng làm sao để giữ chân khách hàng và kích thích họ chốt đơn lại càng khó hơn. Để giải quyết bài toán này khi không thể can thiệp quá sâu vào mã nguồn, mình ưu tiên sử dụng Google Tag Manager (GTM) để "độ" thêm các tính năng front-end.
Hôm nay mình xin chia sẻ lại toàn bộ 6 đoạn code thực chiến đang được áp dụng trực tiếp tại hệ thống Sandoxin. Anh em chỉ cần bấm Copy, tạo thẻ Custom HTML trong GTM (chọn Trigger All Pages) là website sẽ lột xác hoàn toàn!
#1. Hiệu Ứng Gõ Chữ (Typing) Trên Thanh Tìm Kiếm
Tác dụng: Thay vì một dòng placeholder nhàm chán, đoạn code này tạo ra hiệu ứng gõ chữ tuần tự các thông điệp marketing (như "Mua lẻ giá sỉ", "Vốn 0đ"...). Giúp thu hút sự chú ý của khách hàng ngay khi họ vừa vào web, đồng thời truyền tải được nhiều USP (điểm bán hàng độc nhất) trên cùng một vị trí.
GTM - Custom HTML
<script type="text/javascript">
(function() {
var hotKeywords = [
"💎 Mua lẻ giá Sỉ - Chỉ từ 1 sản phẩm...",
"💰 Kinh doanh Vốn 0đ cùng Dropship & Affiliate...",
"🔑 Đăng nhập để xem Giá Sỉ gốc tại kho...",
"📈 Kiếm thêm thu nhập không cần nhập hàng...",
"✨ Sandoxin: Kết nối Tổng kho tới tận tay bạn..."
];
// CSS giữ nguyên phong cách sếp duyệt
var css = '.ant-input-search input::placeholder, input::placeholder { color: #1e3a8a !important; opacity: 1 !important; font-weight: 700 !important; }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); }
head.appendChild(style);
var keywordIndex = 0;
var charIndex = 0;
var isDeleting = false;
var typingSpeed = 100; // Tốc độ gõ (tăng lên chút cho dễ đọc)
var deletingSpeed = 50; // Tốc độ xóa
var pauseBetween = 2500;
var typeTimer = null; // Biến quản lý bộ đếm (Quan trọng nhất)
function getSearchInput() {
return document.querySelector('.ant-input-search input') ||
document.querySelector('input[type="search"]') ||
document.querySelector('input[name="search"]') ||
document.querySelector('#search');
}
function typeEffect() {
// Xóa bộ đếm cũ nếu có để tránh cộng dồn
if (typeTimer) clearTimeout(typeTimer);
var searchInput = getSearchInput();
if (!searchInput) {
typeTimer = setTimeout(typeEffect, 1000);
return;
}
// Nếu khách đang click vào ô tìm kiếm thì tạm dừng gõ
if (document.activeElement === searchInput) {
typeTimer = setTimeout(typeEffect, 1500);
return;
}
var currentKeyword = hotKeywords[keywordIndex];
if (isDeleting) {
searchInput.setAttribute('placeholder', currentKeyword.substring(0, charIndex));
charIndex--;
} else {
searchInput.setAttribute('placeholder', currentKeyword.substring(0, charIndex));
charIndex++;
}
// Điều phối trạng thái
if (!isDeleting && charIndex > currentKeyword.length) {
typeTimer = setTimeout(function() {
isDeleting = true;
typeEffect();
}, pauseBetween);
} else if (isDeleting && charIndex < 0) {
isDeleting = false;
keywordIndex = (keywordIndex + 1) % hotKeywords.length;
charIndex = 0;
typeTimer = setTimeout(typeEffect, 500);
} else {
typeTimer = setTimeout(typeEffect, isDeleting ? deletingSpeed : typingSpeed);
}
}
// Khởi tạo an toàn
if (document.readyState === 'complete') {
typeEffect();
} else {
window.addEventListener('load', typeEffect);
}
// Reset khi người dùng focus - Sửa lỗi placeholder bị treo
document.addEventListener('focusin', function(e) {
var searchInput = getSearchInput();
if (e.target === searchInput) {
if (typeTimer) clearTimeout(typeTimer);
searchInput.setAttribute('placeholder', 'Nhập sản phẩm cần tìm...');
charIndex = 0;
isDeleting = false;
}
});
// Resume lại khi người dùng rời khỏi ô tìm kiếm (focusout)
document.addEventListener('focusout', function(e) {
var searchInput = getSearchInput();
if (e.target === searchInput) {
typeEffect();
}
});
// Theo dõi URL - Chống nhân bản vô tính bộ gõ
var lastUrl = location.href;
var observer = new MutationObserver(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
if (typeTimer) clearTimeout(typeTimer); // Dừng bộ gõ cũ ngay lập tức
setTimeout(typeEffect, 800);
}
});
if (document.body) {
observer.observe(document.body, { childList: true, subtree: true });
}
})();
</script>#2. Popup Nổ Đơn Hàng Ảo (Tạo FOMO)
Tác dụng: Hiệu ứng "Chim mồi" cực kỳ lợi hại. Cứ ngẫu nhiên 15-45s sẽ nổ một thông báo có người vừa chốt đơn sỉ kèm tiếng "Ding" nhẹ. Chạy bằng Javascript thuần (ES5) siêu nhẹ, giúp tăng độ uy tín tuyệt đối cho website mà không cần cài plugin nặng nề làm giảm tốc độ web.
GTM - Custom HTML
<script type="text/javascript">
(function() {
console.log("🚀 [FOMO] Đang khởi động hệ thống Popup (ES5 Mode)...");
// 1. TỰ ĐỘNG TẠO GIAO DIỆN (Dùng nối chuỗi ES5 để tránh lỗi Template Literal)
if (document.getElementById('sd-popup')) {
console.log("⚠️ [FOMO] Popup đã tồn tại.");
} else {
// Tạo CSS
var style = document.createElement('style');
style.type = 'text/css';
var cssText = "#sd-popup { display: none; position: fixed; bottom: 20px; left: 20px; width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 999999; padding: 10px; border-left: 5px solid #fb923c; font-family: Arial, sans-serif; align-items: center; gap: 10px; transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity: 0; transform: translateY(30px); } ";
cssText += "@media (max-width: 480px) { #sd-popup { width: 260px; bottom: 10px; left: 10px; padding: 8px; } }";
if (style.styleSheet) { style.styleSheet.cssText = cssText; }
else { style.appendChild(document.createTextNode(cssText)); }
document.head.appendChild(style);
// Tạo HTML
var popupDiv = document.createElement('div');
popupDiv.id = 'sd-popup';
var htmlContent = '<div style="width:55px; height:55px; border-radius:6px; overflow:hidden; flex-shrink:0; background:#f1f5f9;">';
htmlContent += '<img id="sd-img" src="" style="width:100%; height:100%; object-fit:cover;"></div>';
htmlContent += '<div style="flex-grow:1;">';
htmlContent += '<p style="margin:0; font-size:12px; font-weight:800; color:#1e3a8a;" id="sd-customer"></p>';
htmlContent += '<p style="margin:2px 0; font-size:11px; color:#475569; line-height:1.3;" id="sd-action"></p>';
htmlContent += '<p style="margin:0; font-size:10px; color:#94a3b8;">✅ <span id="sd-time"></span></p></div>';
popupDiv.innerHTML = htmlContent;
document.body.appendChild(popupDiv);
}
// 2. DỮ LIỆU
var customers = ["Anh Hoàng Quốc Việt", "Chị Minh Thư (Hà Nội)", "Đại lý Hùng Cường", "Chị Bích Phượng (Sỉ HCM)", "Anh Trần Tuấn Anh", "Khách sỉ Nam Định", "Chị Thu Trang", "Anh Nguyễn Hùng", "Shop Mẹ & Bé BiBo", "Anh Quang (Kho sỉ tổng)", "Chị Lê Lan (Đà Nẵng)", "Anh Bảo (Hải Phòng)", "Chị Ngọc Diệp", "Anh Minh (Gia Lai)", "Khách hàng ẩn danh", "Chị Hồng Hạnh", "Anh Sơn Tùng", "Shop Phụ Kiện Zin", "Chị Mai Phương (Cần Thơ)", "Anh Đức Trọng", "Chị Tuyết Mai", "Đại lý Sandoxin", "Anh Vũ (Bình Dương)", "Chị Thanh Huyền", "Anh Quốc Bảo", "Khách sỉ Thanh Hóa", "Chị Kim Oanh", "Anh Thái Hòa", "Shop Gia Dụng", "Chị Thùy Chi"];
var productList = [
{ text: "vừa chốt sỉ 100 Cáp sạc Anker bọc dù C to C", img: "https://r6i.pen.dropbuy.vn/md/s-10152/p-126516/1774319295249-img8561_128x128.jpeg" },
{ text: "vừa đặt 20 Củ sạc nhanh Toocki 33W GaN USB-C + USB-A", img: "https://r6i.pen.dropbuy.vn/md/s-1233/p-121287/1765781227854-toocki_128x128.jpeg" },
{ text: "đã thanh toán đơn Pin dự phòng 70.000mAh MOVESPEED Z70 Pro", img: "https://r6i.pen.dropbuy.vn/md/s-10392/p-127811/1775289810355-1767971104305-img4882_128x128.jpeg" },
{ text: "vừa nhập sỉ Loa Bluetooth Đa Năng WS-5390 – Sạc NLMT", img: "https://r6i.pen.dropbuy.vn/md/s-302/p-118698/1761201710044-img2904_128x128.jpeg" },
{ text: "đã chốt đơn 5 Bộ 2 chiếc Camera an ninh Xiaomi Yi 720p", img: "https://r6i.pen.dropbuy.vn/md/s-10152/p-127901/1775338595154-img0460_128x128.jpeg" },
{ text: "đã mua COMBO 2 Túi Nước Giặt Xả 3In1 Bomixtra", img: "https://r6i.pen.dropbuy.vn/md/s-1233/p-126944/1774579988096-z7662279779035c0805c1259343f7097f6c94015bf4c29_128x128.jpg" },
{ text: "đã săn thành công NỒI CHÁO CHẬM SEKA SK6132 CHO BÉ", img: "https://r6i.pen.dropbuy.vn/md/s-1233/p-127727/1775202152942-img3177_128x128.jpeg" },
{ text: "đã mua Đồ bơi xuất dư size nhí cho bé nhiều thương hiệu", img: "https://r6i.pen.dropbuy.vn/md/s-10205/p-127125/1774936002728-img5977_128x128.jpeg" },
{ text: "đã săn được Máy lau nhà + hút bụi thông minh INXNI Z3 NEO", img: "https://r6i.pen.dropbuy.vn/md/s-10152/p-127906/1775339454287-img0501_128x128.png" },
{ text: "đã đặt Xe đạp gấp Poseidon PS101 size 20inch", img: "https://r6i.pen.dropbuy.vn/md/s-10150/p-126746/1774433719281-1000509740_128x128.jpg" }
];
var isShowing = false;
function playDing() {
try {
var AudioContext = window.AudioContext || window.webkitAudioContext;
if (!AudioContext) return;
var ctx = new AudioContext();
var osc = ctx.createOscillator();
var gain = ctx.createGain();
osc.connect(gain); gain.connect(ctx.destination);
osc.type = "sine"; osc.frequency.value = 880;
gain.gain.setValueAtTime(0, ctx.currentTime);
gain.gain.linearRampToValueAtTime(0.2, ctx.currentTime + 0.05);
gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.5);
} catch(e) {}
}
function triggerPopup() {
var elPopup = document.getElementById('sd-popup');
if (!elPopup || isShowing) return;
isShowing = true;
var c = customers[Math.floor(Math.random() * customers.length)];
var p = productList[Math.floor(Math.random() * productList.length)];
var rMin = Math.floor(Math.random() * 12) + 1;
var t = rMin < 3 ? "Vừa xong" : rMin + " phút trước";
document.getElementById('sd-img').src = p.img;
document.getElementById('sd-customer').innerText = c;
document.getElementById('sd-action').innerText = p.text;
document.getElementById('sd-time').innerText = t;
elPopup.style.display = 'flex';
playDing();
setTimeout(function() {
elPopup.style.opacity = '1';
elPopup.style.transform = 'translateY(0)';
}, 50);
setTimeout(function() {
elPopup.style.opacity = '0';
elPopup.style.transform = 'translateY(30px)';
setTimeout(function() {
elPopup.style.display = 'none';
isShowing = false;
}, 600);
}, 5000);
}
function runRandomLoop() {
triggerPopup();
// Khoảng cách ngẫu nhiên từ 15s đến 45s cho nó thật
var randomDelay = Math.floor(Math.random() * (45000 - 15000 + 1)) + 15000;
setTimeout(runRandomLoop, randomDelay);
}
// Đợi 4 giây sau khi load trang rồi nổ đơn đầu tiên
setTimeout(runRandomLoop, 4000);
})();
</script>#3. Popup Khóa Giao Diện Yêu Cầu Đăng Nhập
Tác dụng: Tuyệt chiêu thu thập data khách hàng và bảo mật giá sỉ. Code sẽ quét xem khách đã login chưa, nếu chưa sẽ bật một Popup làm mờ trang web yêu cầu đăng nhập bằng Google. Kèm theo đó là hiệu ứng Radar nút bấm và con số "Đối tác đang online" nhảy liên tục tạo hiệu ứng đám đông.
GTM - Custom HTML
<style>
/* Overlay & Popup */
#sd-auth-overlay {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.8); z-index: 9999998; backdrop-filter: blur(4px);
}
#sd-auth-popup {
display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 95%; max-width: 420px; background: #ffffff; border-radius: 12px;
z-index: 9999999; font-family: "Segoe UI", Roboto, Arial, sans-serif;
overflow: hidden; border: 2px solid #fb923c;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.sd-header { background: #1e3a8a; padding: 15px 20px; color: #ffffff; display: flex; justify-content: space-between; align-items: center; }
.sd-header span { font-weight: 700; font-size: 14px; text-transform: uppercase; }
.sd-close { font-size: 28px; cursor: pointer; line-height: 1; }
.sd-content { padding: 30px; text-align: center; }
.sd-title { color: #1e3a8a; font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.sd-desc { color: #4b5563; font-size: 14px; margin-bottom: 20px; line-height: 1.6; text-align: justify; }
/* HIỆU ỨNG NHẤP NHÁY RADAR SỐ THÀNH VIÊN */
.sd-info-badge {
display: inline-flex; align-items: center; gap: 10px;
background: #fb923c; color: #ffffff; padding: 8px 18px;
border-radius: 6px; font-size: 13px; font-weight: 700; margin-bottom: 25px;
}
.sd-live-dot-box { position: relative; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; }
.sd-live-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; z-index: 2; }
.sd-live-pulse {
position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.8);
border-radius: 50%; animation: sd-pulse-small 2s infinite; z-index: 1;
}
@keyframes sd-pulse-small { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }
/* HIỆU ỨNG RADAR CHO NÚT ĐĂNG NHẬP */
.sd-btn-container { position: relative; display: inline-block; width: 100%; margin-top: 10px; }
.sd-btn-google {
position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
background: #1e3a8a; color: #ffffff !important; text-decoration: none !important;
padding: 16px; border-radius: 8px; font-weight: 700; font-size: 15px; z-index: 5;
}
.sd-btn-radar {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #1e3a8a;
border-radius: 8px; opacity: 0; animation: sd-radar-big 2.5s infinite; z-index: 1;
}
.sd-btn-radar:nth-child(2) { animation-delay: 1s; }
@keyframes sd-radar-big { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.15, 1.35); opacity: 0; } }
.sd-g-icon { background: #fff; width: 26px; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.sd-skip { display: block; margin-top: 20px; color: #1e3a8a; font-size: 13px; cursor: pointer; font-weight: 600; text-decoration: underline; }
</style>
<div id="sd-auth-overlay"></div>
<div id="sd-auth-popup">
<div class="sd-header">
<span>Xác thực đối tác Sandoxin</span>
<div id="sd-btn-close" class="sd-close">×</div>
</div>
<div class="sd-content">
<h2 class="sd-title">CHÍNH SÁCH GIÁ SỈ</h2>
<p class="sd-desc">Để bảo vệ quyền lợi kinh doanh của các đại lý, Sandoxin chỉ hiển thị <b>Bảng giá sỉ chi tiết</b> sau khi quý khách thực hiện xác thực tài khoản đối tác thành công.</p>
<div class="sd-info-badge">
<div class="sd-live-dot-box">
<div class="sd-live-dot"></div>
<div class="sd-live-pulse"></div>
</div>
<span>Đang có <b id="sd-random-count">342</b> đối tác đang xem giá sỉ</span>
</div>
<div class="sd-btn-container">
<div class="sd-btn-radar"></div>
<div class="sd-btn-radar"></div>
<a id="sd-google-link" href="#" class="sd-btn-google">
<div class="sd-g-icon"><img src="https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png" width="18" height="18"></div>
TIẾP TỤC ĐĂNG NHẬP VỚI GOOGLE
</a>
</div>
<span id="sd-btn-skip" class="sd-skip">Bỏ qua, tôi muốn xem dạo trang</span>
</div>
</div>
<script>
(function() {
var googleAuthUrl = "https://accounts.google.com/v3/signin/identifier?opparams=%253F&dsh=S621121444%3A1775535074417886&access_type=offline&client_id=802776934446-6lo39itc560c1khksfqqpp258oe5thu3.apps.googleusercontent.com&o2v=2&prompt=consent&redirect_uri=https%3A%2F%2Fauth.dangnhapgoogle.com%2Flogin%2Fcallback%2Fgoogle&response_type=code&scope=openid+email+profile&service=lso&state=eyJyZWRpcmVjdFVybCI6Imh0dHBzOi8vc2FuZG94aW4uY29tL2xvZ2luL2NhbGxiYWNrL2dvb2dsZSIsImNsaWVudElkIjoiODAyNzc2OTM0NDQ2LTZsbzM5aXRjNTYwYzFraGtzZnFxcHAyNThvZTV0aHUzLmFwcHMuZ29vZ2xldXNlcmNvbnRlbnQuY29tIn0%3D&flowName=GeneralOAuthFlow&continue=https%3A%2F%2Faccounts.google.com%2Fsignin%2Foauth%2Fconsent%3Fauthuser%3Dunknown%26part%3DAJi8hANg0UYRdlW-MMGEegi7OsgiodhalCsiuErm37x3UD1TjJYFsmX5hvDsNkZtTocoNtYxbpQHksDOoKg5xSOxiDDd0-0U52a_Phg0B3Td2VkdUdCtN7wh5ORpG3R1L2itAgwwB-QlHkUyyqs4waSZJ9j3gWQKKQgjOPEaa2dRNq_hsw-E102yD3qbbXd77mm6V02cBWsEPVYTq-21EwxpkT_KAcUMnsdz7jvD3O8SKxBBA2_8hiQjx3maj2hT6_RgYzRr-zH5r-m0t_Rc9lB_58uLfFWkWK71Rv9T9wXZljYQGqzGberC5X7b1qYVgufOnuYBr1nCqG6t5pi-1uXaKdQRx4785fb9pYaJbEWqOS0KO5oCa5X3iInQZOQsKAhfFk9Z5BpsqeJ6eYDqIaCyIBbFmxEWVog9iIuIb6K-NYD127i8SBynMNSvgGQb9Cfcu6PVYJLfNcWZfX8xLD11P366e6IPc8rjZA8GsHPKvvvvsDN-kDA%26flowName%3DGeneralOAuthFlow%26as%3DS621121444%253A1775535074417886%26client_id%3D802776934446-6lo39itc560c1khksfqqpp258oe5thu3.apps.googleusercontent.com%26requestPath%3D%252Fsignin%252Foauth%252Fconsent%23&app_domain=https%3A%2F%2Fauth.dangnhapgoogle.com&rart=ANgoxcfg5MdBEOa65oqf8jI_zT1RgPgb1gCcCvIbFXJhvHC95F_juYDuZXxeL-A_hSZ75a71Yzn8zciILg7jM50U6X53ja_-wBGovwv5hfGV-Cm0KR2JH5w";
// Dò tìm trạng thái login (Sử dụng cú pháp function cũ để tránh lỗi ES6)
function isUserLoggedIn() {
var links = document.querySelectorAll("header a, .header a, #header a, nav a");
var keywords = ["logout", "dang-xuat", "thoat", "tai-khoan", "account", "order", "don-hang", "profile"];
for (var i = 0; i < links.length; i++) {
var href = (links[i].getAttribute("href") || "").toLowerCase();
var text = links[i].innerText.toLowerCase();
// Dò qua mảng keywords bằng for loop truyền thống
for (var j = 0; j < keywords.length; j++) {
if (href.indexOf(keywords[j]) !== -1 || text.indexOf("đăng xuất") !== -1 || text.indexOf("tài khoản") !== -1) {
return true;
}
}
}
return false;
}
function hidePopup() {
var overlay = document.getElementById("sd-auth-overlay");
var popup = document.getElementById("sd-auth-popup");
if (overlay) overlay.style.display = "none";
if (popup) popup.style.display = "none";
}
function showPopup() {
if (isUserLoggedIn()) return;
var overlay = document.getElementById("sd-auth-overlay");
var popup = document.getElementById("sd-auth-popup");
if (overlay && popup) {
document.getElementById("sd-btn-close").onclick = hidePopup;
document.getElementById("sd-btn-skip").onclick = hidePopup;
overlay.onclick = hidePopup;
document.getElementById("sd-google-link").href = googleAuthUrl;
var countBox = document.getElementById("sd-random-count");
if (countBox) countBox.innerText = (Math.floor(Math.random() * (485 - 215 + 1)) + 215).toString();
setTimeout(function() {
overlay.style.display = "block";
popup.style.display = "block";
}, 3000);
}
}
// Khởi chạy khi tải trang
window.addEventListener('load', showPopup);
// Xử lý khi nhấn nút BACK/FORWARD
window.addEventListener('pageshow', function(event) {
hidePopup();
showPopup();
});
// Cập nhật số nhảy Live mỗi 4 giây
setInterval(function() {
var countBox = document.getElementById("sd-random-count");
if (countBox && countBox.offsetParent !== null) { // Chỉ nhảy khi popup đang hiện
var current = parseInt(countBox.innerText.replace(/,/g, ''));
var change = Math.floor(Math.random() * 2) + 1;
if (Math.random() > 0.45) current += change; else current -= change;
if (current > 485) current = 480;
if (current < 215) current = 220;
countBox.innerText = current.toString();
}
}, 4000);
})();
</script>#4. Thiết Kế Footer Xanh/Cam Sandoxin Siêu Đẹp
Tác dụng: Biến đổi hoàn toàn Footer gốc nhàm chán thành cấu trúc 4 cột chuyên nghiệp chuẩn thương mại điện tử. Code ép màu nền Xanh lam, viền cam, ép trắng các nội dung cũ để không bị chìm, đồng thời bổ sung các block tín nhiệm (Hotline nổi bật, Logo Đối tác Vận chuyển/Thanh toán) làm điểm tựa niềm tin cho khách hàng.
GTM - Custom HTML
<script type="text/javascript">
(function() {
// 1. CSS CHUẨN: BLUE & CAM SANDOXIN (4 CỘT) + ÉP TRẮNG CHỮ NỘI DUNG CŨ
var css = '#custom-footer-wrap { ' +
'background: #1e40af; ' +
'color: #ffffff; padding: 45px 20px; font-family: "Segoe UI", Roboto, sans-serif; ' +
'border-top: 5px solid #fb923c; position: relative; } ' +
/* LỆNH ÉP MÀU TRẮNG CHO TOÀN BỘ NỘI DUNG CŨ BÊN TRONG FOOTER */
'.original-content-wrap, .original-content-wrap * { color: #ffffff !important; } ' +
'.original-content-wrap a:hover { color: #fb923c !important; } ' + /* Thêm hiệu ứng hover cam cho link cũ */
'.footer-top-trust { max-width: 1200px; margin: 0 auto 35px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 15px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 30px; } ' +
'.trust-card { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 12px; border: 1.5px solid rgba(251,146,60,0.4); transition: 0.3s; display: flex; flex-direction: column; justify-content: center; } ' +
'.trust-card:hover { border-color: #fb923c; background: rgba(255,255,255,0.15); transform: translateY(-3px); } ' +
'.trust-card strong { color: #fb923c; display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; } ' +
'.trust-card p, .trust-card a { color: #ffffff; font-size: 13px; text-decoration: none; line-height: 1.4; } ' +
/* HOTLINE TINH TẾ - KHÔNG KHOE MẼ */
'.hotline-highlight { font-size: 20px !important; font-weight: 900 !important; color: #fb923c !important; display: block; margin-top: 4px; } ' +
'.fb-link { font-weight: 700; color: #fb923c !important; text-decoration: underline !important; } ' +
'.footer-partners { max-width: 1200px; margin: 20px auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); } ' +
'.partner-group { display: flex; align-items: center; gap: 12px; } ' +
'.partner-group span { font-size: 11px; color: rgba(255,255,255,0.6); text-transform: uppercase; font-weight: bold; } ' +
'.partner-icons-text { color: #fb923c; font-weight: 800; font-size: 12px; display: flex; gap: 10px; } ' +
'.footer-company-info { max-width: 1200px; margin: 20px auto; font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.8; } ' +
'.footer-company-info b { color: #fb923c; } ' +
'.footer-slogan { text-align: center; margin-top: 40px; color: #fb923c; font-style: italic; font-size: 16px; font-weight: 700; } ' +
'@media (max-width: 1024px) { .footer-top-trust { grid-template-columns: 1fr 1fr; } } ' +
'@media (max-width: 600px) { .footer-top-trust { grid-template-columns: 1fr; } .footer-partners { flex-direction: column; } }';
var style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
function decorateFooter() {
var oldFooter = document.querySelector('footer') || document.querySelector('.footer');
if (!oldFooter || oldFooter.getAttribute('data-decorated') === 'true') return;
var wrapper = document.createElement('div');
wrapper.id = 'custom-footer-wrap';
// CHIA 4 Ô ĐÃ ĐỔI TÊN HOTLINE CHO TINH TẾ
var trustHtml = '<div class="footer-top-trust">' +
'<div class="trust-card"><strong>🚀 DROPSHIP</strong><p>Hợp tác cùng Sandoxin.</p><a href="/dang-ky" style="color:#fb923c; font-weight:bold;">👉 Đăng ký ngay</a></div>' +
'<div class="trust-card"><strong>📞 TỔNG ĐÀI HỖ TRỢ</strong><p>Hotline 24/7:</p><a href="tel:0793974444" class="hotline-highlight">079.397.4444</a></div>' +
'<div class="trust-card"><strong>👤 QUẢN TRỊ VIÊN</strong><p>Ms. Vân Anh (Giải đáp KH)</p><a href="https://www.facebook.com/anhhoang2890" target="_blank" class="fb-link">🔗 Facebook Cá Nhân</a></div>' +
'<div class="trust-card"><strong>🤝 KẾT NỐI KHO SỈ</strong><p>Hợp tác cung ứng hàng:</p><a href="mailto:contact@sandoxin.com" style="color:#fff; border-bottom: 1px dashed #fb923c;">contact@sandoxin.com</a></div>' +
'</div>';
var partnerHtml = '<div class="footer-partners">' +
'<div class="partner-group"><span>Vận chuyển chiến lược</span><div class="partner-icons-text">VIETTEL POST | SPX EXPRESS</div></div>' +
'<div class="partner-group"><span>Thanh toán bảo mật</span><div class="partner-icons-text">NAPAS | MOMO | QR-PAY</div></div>' +
'</div>';
var companyHtml = '<div class="footer-company-info">' +
'<b>SANDOXIN - NỀN TẢNG KẾT NỐI KHO SỈ & KINH DOANH ONLINE TOÀN QUỐC</b><br>' +
'Bản quyền vận hành: <b>Sandoxin Digital Team</b> © 2026<br>' +
'Trụ sở vận hành: Tây Mỗ, Nam Từ Liêm, Hà Nội | Hệ thống kho hàng: Mạng lưới kho sỉ liên kết toàn quốc<br>' +
'Hotline quản lý: 079.397.4444 | Mô hình: Sàn thương mại điện tử trung gian' +
'</div>';
var contentWrap = document.createElement('div');
contentWrap.className = 'original-content-wrap';
while (oldFooter.firstChild) { contentWrap.appendChild(oldFooter.firstChild); }
wrapper.innerHTML = trustHtml + partnerHtml;
wrapper.appendChild(contentWrap);
wrapper.insertAdjacentHTML('beforeend', companyHtml);
var slogan = document.createElement('div');
slogan.className = 'footer-slogan';
slogan.innerText = '"Săn đồ xịn - Giá cực mịn | Vận hành từ tâm - Giá trị thực cho người mua"';
wrapper.appendChild(slogan);
oldFooter.appendChild(wrapper);
oldFooter.setAttribute('data-decorated', 'true');
oldFooter.style.background = 'transparent';
oldFooter.style.padding = '0';
}
setInterval(decorateFooter, 1500);
})();
</script>#5. Tối Ưu Menu Danh Mục Sản Phẩm Tự Động
Tác dụng: Code này sẽ can thiệp vào Menu dọc. Thay vì các icon mặc định trống rỗng, nó sẽ dùng JS để tự cắt chữ cái đầu tiên của danh mục làm Avatar nhiều màu sắc (giống style của Google). Kèm theo đó là hiệu ứng Hover (chuột lướt qua) trượt ngang, đổi màu viền sang tông Sandoxin siêu xịn.
GTM - Custom HTML
<style>
/* =========================================================
1. MENU SỔ XUỐNG TRÊN PC (GIỮ NGUYÊN BẢN CHUẨN)
========================================================= */
.ant-dropdown-menu, ul[role="menu"], .category-dropdown-menu {
border-radius: 16px !important;
box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.15), 0 0 1px rgba(0,0,0,0.1) !important;
padding: 12px 8px !important;
border: none !important;
background-color: #ffffff !important;
}
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title, li[role="menuitem"] {
padding: 12px 18px !important;
border-radius: 10px !important;
transition: all 0.3s ease !important;
margin-bottom: 4px !important;
font-weight: 500 !important;
border-left: 3px solid transparent !important;
}
.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover, li[role="menuitem"]:hover {
background: linear-gradient(90deg, #fffaf5 0%, #ffffff 100%) !important;
color: #fb923c !important;
transform: translateX(6px) !important;
border-left: 3px solid #fb923c !important;
}
/* =========================================================
2. GIAO DIỆN DANH MỤC TRÁI (MOBILE - XANH & CAM)
========================================================= */
h6.bg-black.text-white, .bg-black.text-white {
background-color: #ffffff !important;
color: #1e3a8a !important; /* Đã đổi thành Xanh Lam Sandoxin */
border-left: 4px solid #fb923c !important; /* Viền Cam Sandoxin */
font-weight: 900 !important;
font-size: 13px !important;
letter-spacing: 0.2px !important;
box-shadow: inset 0 0 10px rgba(251, 146, 60, 0.05) !important;
}
h6.bg-gray-100, h6.bg-gray-50, h6.bg-gray-200, .bg-gray-100 {
background-color: #f8fafc !important;
border-bottom: 1px solid #f1f5f9 !important;
color: #475569 !important;
font-weight: 600 !important;
}
</style>
<script>
(function() {
// =========================================================
// AVATAR CHỮ (ĐÃ GỘP CẢ NÚT XEM TẤT CẢ) - Y NGUYÊN BẢN GỐC
// =========================================================
var sdxAutoAvatar = function() {
if (window.location.pathname.indexOf('/danh-muc') === -1) return;
var placeholders = document.querySelectorAll('svg.lucide-image, svg.lucide-layout-grid');
placeholders.forEach(function(svgElement) {
var wrapper = svgElement.parentElement;
if (wrapper.getAttribute('data-sdx-avatar')) return;
var container = wrapper.parentElement;
var maxDepth = 3;
var catName = "";
while(container && maxDepth > 0) {
var clone = container.cloneNode(true);
var innerIcons = clone.querySelectorAll('svg, img');
innerIcons.forEach(function(i) { i.remove(); });
catName = clone.innerText.trim().replace(/\n/g, "");
if (catName.length > 0 && catName.length < 35) break;
container = container.parentElement;
maxDepth--;
}
if (!catName) return;
var isViewAll = catName.toLowerCase().indexOf('xem tất cả') !== -1;
var firstLetter = isViewAll ? '❖' : catName.charAt(0).toUpperCase();
var colors = ['#f87171', '#fb923c', '#fbbf24', '#34d399', '#38bdf8', '#818cf8', '#c084fc', '#f472b6'];
var colorIndex = catName.charCodeAt(0) % colors.length;
var bgColor = isViewAll ? '#1e3a8a' : colors[colorIndex];
svgElement.style.display = 'none';
var avatar = document.createElement('div');
avatar.innerHTML = firstLetter;
avatar.style.cssText = 'display:flex; align-items:center; justify-content:center; width: 64px; height: 64px; border-radius:50%; background:' + bgColor + '15; color:' + bgColor + '; font-size:24px; font-weight:800; border:1px solid ' + bgColor + '30; margin: 0 auto; flex-shrink: 0;';
wrapper.appendChild(avatar);
wrapper.setAttribute('data-sdx-avatar', 'true');
});
};
// Khởi động module bằng đúng MutationObserver siêu mượt của bạn
var observer = new MutationObserver(function() {
sdxAutoAvatar();
});
observer.observe(document.body, { childList: true, subtree: true });
window.addEventListener('load', function() {
sdxAutoAvatar();
});
setTimeout(function() { sdxAutoAvatar(); }, 500);
})();
</script>#6. Banner Flash Sale Có Đồng Hồ Đếm Ngược
Tác dụng: Dò tìm tự động vị trí của link Flash Sale cũ trên web và tiêm (inject) đè một khối Banner Động cực xịn vào đó. Có hiệu ứng tỏa sáng gradient (Glow) hút mắt, nút bấm nhịp đập và đồng hồ đếm ngược tự động lùi về cuối ngày để ép khách phải mua ngay.
GTM - Custom HTML
<script type="text/javascript">
(function() {
// 1. GIỮ NGUYÊN CSS GỐC + HIỆU ỨNG GLOW AN TOÀN TUYỆT ĐỐI (Không dùng transform)
var css = '#big-flash-sale-banner { ' +
'width: 100%; min-height: 115px; ' +
'background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #1e40af 100%); ' +
'display: flex; flex-direction: column; align-items: center; justify-content: center; ' +
'border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; ' +
'box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); margin: 15px 0; ' +
'padding: 12px 20px; box-sizing: border-box; z-index: 99; border: 1px solid rgba(251, 146, 60, 0.5); } ' +
'#big-flash-sale-banner::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent); transform: skewX(-25deg); animation: shine 4s infinite; } ' +
'@keyframes shine { 100% { left: 200%; } } ' +
'.fs-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } ' +
'.fs-badge { background: #fb923c; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 50px; font-weight: bold; text-transform: uppercase; } ' +
'.fs-title-gold { font-size: 22px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: -0.5px; } ' +
'.fs-super-discount { font-size: 48px; font-weight: 900; color: #fb923c; ' +
'text-shadow: 0 0 20px rgba(251, 146, 60, 0.9), 2px 2px 4px rgba(0,0,0,0.3); ' +
'animation: discount-pulse 1s ease-in-out infinite alternate; margin: 0 12px; } ' +
'@keyframes discount-pulse { from { transform: scale(1); } to { transform: scale(1.06); } } ' +
'.fs-description { color: #ffffff; font-size: 13px; text-align: center; margin-bottom: 12px; max-width: 85%; line-height: 1.4; } ' +
'.fs-member-call { color: #facc15; font-weight: 600; text-decoration: underline; } ' +
'.fs-footer { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; width: 100%; } ' +
'.fs-timer-wrapper { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 500; } ' +
'.fs-timer { display: flex; gap: 5px; align-items: center; } ' +
'.fs-box { background: rgba(255,255,255,0.2); color: #fb923c; border: 1px solid #fb923c; padding: 6px 9px; border-radius: 8px; font-size: 20px; font-weight: 700; min-width: 38px; text-align: center; backdrop-filter: blur(5px); } ' +
'.fs-dot { color: #fff; font-size: 18px; font-weight: bold; opacity: 0.8; } ' +
/* HIỆU ỨNG TỎA SÁNG AN TOÀN (Bỏ lệnh transform gây lỗi Popup) */
'.fs-cta-button { background: #fb923c; color: #fff; padding: 10px 25px; border-radius: 10px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; ' +
'animation: cta-pulse-safe 1.5s infinite; transition: background 0.3s ease; } ' +
'.fs-cta-button:hover { background: #f97316; } ' +
'@keyframes cta-pulse-safe { ' +
' 0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.8); } ' +
' 70% { box-shadow: 0 0 0 12px rgba(251, 146, 60, 0); } ' +
' 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); } ' +
'} ' +
'@media (max-width: 480px) { ' +
' #big-flash-sale-banner { min-height: 125px; padding: 12px 10px; margin: 10px auto; width: 94vw; } ' +
' .fs-title-gold { font-size: 17px; } ' +
' .fs-super-discount { font-size: 34px; margin: 4px 0; } ' +
' .fs-description { font-size: 11px; margin-bottom: 10px; max-width: 100%; } ' +
' .fs-box { font-size: 16px; min-width: 30px; padding: 4px; } ' +
' .fs-cta-button { padding: 8px 20px; font-size: 13px; width: 80%; } ' +
' .fs-footer { gap: 10px; flex-direction: column; } ' +
'}';
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); }
document.head.appendChild(style);
function injectPremiumBanner() {
var existing = document.getElementById('big-flash-sale-banner');
if (existing && document.body.contains(existing)) return;
var allLinks = document.getElementsByTagName('a');
var targetElement = null;
for (var i = 0; i < allLinks.length; i++) {
if (allLinks[i].innerText.indexOf("Flash Sale") !== -1 || allLinks[i].href.indexOf("/flash-sale") !== -1) {
targetElement = allLinks[i];
break;
}
}
if (targetElement) {
var container = targetElement.closest('.elementor-widget-container') || targetElement.parentElement.parentElement.parentElement;
if (container) {
var banner = document.createElement('div');
banner.id = 'big-flash-sale-banner';
banner.onclick = function() { window.location.href = 'https://sandoxin.com/flash-sale'; };
banner.innerHTML = '<div class="fs-header">' +
'<span class="fs-badge">Limited</span>' +
'<span class="fs-title-gold">Flash Sale Đặc Quyền</span>' +
'<span class="fs-super-discount">70%</span>' +
'</div>' +
'<div class="fs-description">' +
'Ưu đãi chính hãng dành riêng cho <span class="fs-member-call">Thành viên Sandoxin</span>. ' +
'Số lượng giới hạn, kết thúc vào 24h hôm nay.' +
'</div>' +
'<div class="fs-footer">' +
'<div class="fs-timer-wrapper">' +
'<span>KẾT THÚC SAU:</span>' +
'<div class="fs-timer">' +
'<span class="fs-box" id="fs-h">00</span><span class="fs-dot">:</span>' +
'<span class="fs-box" id="fs-m">00</span><span class="fs-dot">:</span>' +
'<span class="fs-box" id="fs-s">00</span>' +
'</div></div>' +
'<button class="fs-cta-button">SĂN NGAY ❯</button>' +
'</div>';
// MÃ BẢO VỆ POPUP ĐÃ ĐƯỢC GIỮ NGUYÊN HOÀN TOÀN
for (var j = 0; j < container.children.length; j++) {
var child = container.children[j];
if (child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE' && child.id !== 'big-flash-sale-banner') {
child.style.display = 'none';
}
}
container.appendChild(banner);
if (!window.fsTimerRunning) {
startTimer();
}
}
}
}
function startTimer() {
window.fsTimerRunning = true;
setInterval(function() {
var now = new Date();
var end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
var diff = Math.floor((end - now) / 1000);
var hEl = document.getElementById('fs-h');
if (!hEl) return;
if (diff <= 0) diff = 0;
var h = Math.floor(diff / 3600);
var m = Math.floor((diff % 3600) / 60);
var s = diff % 60;
hEl.innerText = h < 10 ? '0' + h : h;
document.getElementById('fs-m').innerText = m < 10 ? '0' + m : m;
document.getElementById('fs-s').innerText = s < 10 ? '0' + s : s;
}, 1000);
}
setInterval(injectPremiumBanner, 500);
injectPremiumBanner();
})();
</script>Lưu ý quan trọng cho anh em:
Cách chia Trigger chuẩn chỉ nhất cho bộ 6 Code Sandoxin
Để hệ thống mượt mà và đúng ý đồ marketing, bạn hãy chia các đoạn code ra làm 2 nhóm Trigger trong GTM như sau:
Nhóm 1: Trigger "Trang Chủ" (Dành cho Code 3 và Code 6)
Bạn cần tạo một Trigger mới hoàn toàn trong GTM chỉ dành riêng cho Trang chủ:
-
Vào GTM -> Chọn Triggers -> New.
-
Chọn loại Trigger: Page View (Lượt xem trang).
-
Chọn: Some Page Views (Một số lượt xem trang).
-
Cài đặt điều kiện:
Page Path+equals+/(HoặcPage URL+equals+https://sandoxin.com/). -
Lưu lại với tên: Trigger - Trang Chủ.
👉 Sau đó, bạn gắn Trigger này cho thẻ HTML chứa Code #3 (Popup Đăng nhập) và Code #6 (Banner Flash Sale).
Nhóm 2: Trigger "All Pages" (Dành cho Code 1, 2, 4, 5)
Các đoạn code này có tính năng phục vụ cho toàn cục website, nên bạn cứ giữ nguyên Trigger mặc định là All Pages:
-
-
Code #1 (Hiệu ứng gõ chữ Tìm kiếm): Thanh tìm kiếm nằm trên Header nên trang nào cũng có -> Cần All Pages.
-
Code #2 (Nổ đơn ảo FOMO): Khách lướt đến đâu cũng thấy thông báo chốt đơn liên tục để tăng độ trust -> Cần All Pages.
-
Code #4 (Trang trí Footer): Footer hiển thị ở mọi trang -> Cần All Pages.
-
Code #5 (Avatar Danh mục): Menu danh mục dọc theo khách hàng khắp website -> Cần All Pages.
-
Chúc anh em áp dụng thành công và tối ưu được dàn web con xịn xò.
Sandoxin - Săn đồ xịn - Giá cực mịn