Khi website tích hợp các dịch vụ bên thứ ba như Google Analytics, Facebook Pixel hoặc TikTok Pixel, các script này thường có thể tạo cookie, nhận diện trình duyệt hoặc gửi dữ liệu hành vi người dùng về nền tảng bên ngoài. Vì vậy, thay vì nạp các script tracking ngay khi trang mở, website nên chỉ kích hoạt chúng sau khi người dùng đã đồng ý với cookie tùy chọn.

Kiến Trúc Tổng Quát

Cơ chế cookie consent nên tách thành ba phần:
  • Phần cấu hình: cho phép bật/tắt cookie consent và chọn file JavaScript xử lý consent.
  • Phần hiển thị: tự động nhúng script cookie consent vào website khi tính năng được bật.
  • Phần runtime trên trình duyệt: hiển thị banner, lưu lựa chọn của người dùng, và chỉ kích hoạt các script bên thứ ba sau khi được đồng ý.
Luồng tổng quát: 
flowchart TD
    A[Người dùng mở website] --> B{Đã có lựa chọn consent?}
    B -->|Chưa có| C[Hiển thị banner cookie consent]
    C --> D{Người dùng chọn}
    D -->|Đồng ý| E[Lưu trạng thái accepted]
    E --> F[Kích hoạt script bên thứ ba]
    D -->|Từ chối| G[Lưu trạng thái rejected]
    G --> H[Không nạp script tracking]
    B -->|Đã đồng ý| F
    B -->|Đã từ chối| H

Cách Hoạt Động

Khi cookie consent được bật, website sẽ nhúng file JavaScript consent vào trang. File này kiểm tra trạng thái đã lưu trong localStorage hoặc cookie.
Nếu người dùng chưa chọn, banner sẽ xuất hiện với hai hành động: đồng ý hoặc từ chối. Khi người dùng đồng ý, hệ thống lưu trạng thái accepted, ẩn banner và kích hoạt các script tracking đã bị chặn trước đó. Khi người dùng từ chối, hệ thống lưu trạng thái rejected và không nạp các script đó.
Điểm quan trọng là các script bên thứ ba không nên dùng type="text/javascript" ngay từ đầu. Thay vào đó, đặt chúng ở dạng bị chặn:
<script
  type="text/plain"
  data-cookie-consent
  data-src="https://example.com/third-party.js">
</script>
Sau khi người dùng đồng ý, consent runtime sẽ tạo một thẻ <script> thật từ thẻ bị chặn này và chèn lại vào DOM.

Tích Hợp Google Analytics

Với Google Analytics, không nạp trực tiếp script gtag.js. Hãy đổi script ngoài sang type="text/plain" và dùng data-src:
<script
  type="text/plain"
  data-cookie-consent
  async
  data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX">
</script>

<script type="text/plain" data-cookie-consent>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>
Như vậy, Google Analytics chỉ bắt đầu chạy sau khi người dùng bấm đồng ý.

Tích Hợp Facebook Pixel

Facebook Pixel cũng nên được đặt trong script bị chặn:
<script type="text/plain" data-cookie-consent>
  !function(f,b,e,v,n,t,s){
    if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)
  }(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', 'FACEBOOK_PIXEL_ID');
  fbq('track', 'PageView');
</script>
Không nên thêm fallback <noscript> tracking image nếu mục tiêu là tôn trọng lựa chọn consent, vì phần đó có thể gửi request tracking ngay cả khi JavaScript consent chưa chạy.

Tích Hợp TikTok Pixel

TikTok Pixel cũng đi theo cùng nguyên tắc:
<script type="text/plain" data-cookie-consent>
  !function (w, d, t) {
    w.TiktokAnalyticsObject=t;
    var ttq=w[t]=w[t]||[];
    ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"];
    ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
    for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
    ttq.load=function(e){var n=d.createElement("script");n.async=!0;n.src="https://analytics.tiktok.com/i18n/pixel/events.js?sdkid="+e+"&lib="+t;var a=d.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a)};
    ttq.load('TIKTOK_PIXEL_ID');
    ttq.page();
  }(window, document, 'ttq');
</script>

Gọi Code Sau Khi Người Dùng Đồng Ý

Ngoài cách đánh dấu script bằng data-cookie-consent, có thể đăng ký callback để chạy logic tùy chỉnh sau khi consent được chấp nhận:
<script>
  window.onCookieConsentAccepted(function () {
    console.log('Người dùng đã đồng ý cookie tùy chọn');
  });
</script>
Nếu người dùng đã đồng ý từ trước, callback sẽ chạy ngay. Nếu chưa, callback sẽ được xếp hàng và chỉ chạy sau khi người dùng bấm đồng ý.

Những Lưu Ý Quan Trọng

Cookie consent không tự phân loại script theo từng nhóm như analytics, marketing hay personalization; cơ chế cơ bản là “đồng ý thì nạp, từ chối thì không nạp”. Nếu cần nhiều mức lựa chọn chi tiết hơn, có thể mở rộng thêm category bằng các thuộc tính như data-consent-category.
Không đặt tracking script trực tiếp trong HTML với type="text/javascript" nếu script đó cần consent. Nếu làm vậy, trình duyệt sẽ chạy script trước khi banner có cơ hội hỏi người dùng.
Cookie policy nên có một trang riêng để giải thích website dùng loại cookie nào, dùng để làm gì, dữ liệu có thể được chia sẻ với bên thứ ba nào, và người dùng có thể thay đổi lựa chọn bằng cách nào.

Kết Luận

Cách tích hợp an toàn là để cookie consent runtime được nạp trước, còn các dịch vụ như Google Analytics, Facebook Pixel và TikTok Pixel được giữ ở trạng thái không thực thi bằng type="text/plain". Khi người dùng đồng ý, hệ thống mới chuyển các script đó thành script thật và kích hoạt tracking.
Thiết kế này giúp website vẫn dễ tích hợp dịch vụ marketing/analytics, nhưng tránh việc gửi dữ liệu cho bên thứ ba trước khi người dùng đưa ra lựa chọn.