Tìm kiếm trang web

typescript - Thêm Google Analytics với trình quản lý quyền đồng ý vào một website SvelteKit


Tôi cần thêm Google Analytics vào một trang web SvelteKit. Hướng dẫn từ Google là đoạn script dưới đây nên được thêm vào thẻ <head>, vì vậy tôi nghĩ rằng tôi có thể chỉ cần thêm nó vào app.html. Vấn đề là tôi cần sử dụng Chế độ Đồng ý (Consent Mode) để tuân theo quy định GDPR. Để làm điều đó, tôi cần có khả năng đọc và ghi vào một loại biến nào đó để kích hoạt và vô hiệu hóa analytics.

Theo những gì tôi có thể thấy, tôi không thể truy cập bất kỳ biến nào từ bên trong thẻ <head>. Tôi cũng đã thử thêm cùng mã đó vào thẻ <svelte:head> trong __layout.svelte, nhưng có vẻ như tôi cũng không thể truy cập các biến ở đó.

Tôi dự định theo dõi việc đồng ý cookie bằng cách sử dụng một cửa hàng, và lưu giá trị đó vào bộ nhớ cục bộ, nhưng tôi cũng sẵn sàng với các giải pháp khác.

Đây là mã cần được thêm vào thẻ <head>:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H5XGB0JC8S"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-H5XGB0JC8S');
</script>

Đây là đoạn mã cần được thêm vào để vô hiệu hóa phân tích:

gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied'
});

Và đây là mã để gọi cập nhật một giá trị:

gtag('consent', 'update', {
  'ad_storage': 'granted'
});

Tôi giả định rằng đoạn mã cuối cùng nên được gọi khi nút chấp nhận được nhấn, nhưng nếu tôi gọi gtag từ bất kỳ nơi nào khác ngoài cùng vị trí với đoạn mã đầu tiên, tôi nhận được cảnh báo nói rằng hàm này chưa được định nghĩa.

Tôi có nên thêm mã vào chỗ khác không, hay nên làm theo cách khác?

Có lẽ tôi nên đề cập rằng tôi cũng đang sử dụng TypeScript.