如何在Svelte中合规实现Google Analytics GTAG的GDPR适配

核心思路 #

GDPR要求必须获得用户主动同意后，才能加载GTAG脚本并设置分析类Cookie。核心逻辑是：先展示Cookie同意弹窗，根据用户选择动态处理GTAG的加载与Cookie授权。

1. 实现Cookie同意弹窗 #

创建Svelte组件CookieConsent.svelte，收集用户的Cookie授权选择（默认不勾选同意，符合GDPR主动同意要求）：

<script>
	let consentGiven = localStorage.getItem('cookieConsent') === 'true';

	function handleConsent(allow) {
		localStorage.setItem('cookieConsent', allow.toString());
		consentGiven = allow;
		// 触发全局事件通知其他组件处理GTAG加载
		window.dispatchEvent(new CustomEvent('cookie-consent-updated', { detail: allow }));
	}
</script>

{#if !consentGiven}
	<div class="cookie-consent">
		<p>我们使用Cookie分析网站访问数据以优化体验，请确认是否允许使用此类Cookie。</p>
		<button on:click={() => handleConsent(true)}>同意</button>
		<button on:click={() => handleConsent(false)}>拒绝</button>
	</div>
{/if}

<style>
	.cookie-consent {
		position: fixed;
		bottom: 20px;
		left: 20px;
		background: white;
		padding: 1rem;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		z-index: 9999;
	}
</style>

2. 动态加载GTAG脚本 #

在根布局组件（如+layout.svelte）中，监听用户同意状态，仅当用户同意时加载GTAG：

<script>
	import CookieConsent from '$lib/CookieConsent.svelte';
	import { onMount } from 'svelte';

	let gtagLoaded = false;

	function loadGTAG() {
		if (gtagLoaded) return;
		gtagLoaded = true;

		// 注入GTAG脚本
		const script = document.createElement('script');
		script.src = 'https://www.googletagmanager.com/gtag/js?id=G-YOUR_TRACKING_ID';
		script.async = true;
		document.head.appendChild(script);

		// 初始化GTAG并设置合规参数
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'G-YOUR_TRACKING_ID', {
			anonymize_ip: true, // 匿名化IP，符合GDPR要求
			storage: 'denied' // 默认禁用存储，用户同意后再更新
		});

		// 更新授权状态
		gtag('consent', 'update', {
			analytics_storage: 'granted'
		});
	}

	// 页面加载时检查已有同意状态
	onMount(() => {
		const hasConsent = localStorage.getItem('cookieConsent') === 'true';
		if (hasConsent) loadGTAG();

		// 监听同意状态变化事件
		window.addEventListener('cookie-consent-updated', (e) => {
			if (e.detail) loadGTAG();
		});
	});
</script>

<CookieConsent />
<slot />

3. 处理用户修改授权的情况 #

若用户后续要修改Cookie授权，可在设置页或弹窗中添加修改功能，调用GTAG授权更新API：

// 用户拒绝时更新GTAG授权并清除相关Cookie
function revokeConsent() {
	localStorage.setItem('cookieConsent', 'false');
	gtag('consent', 'update', {
		analytics_storage: 'denied'
	});
	// 清除GA相关Cookie
	document.cookie.split(";").forEach(function(c) {
		document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
	});
}

关键合规要点 #

• 主动同意：不能默认勾选同意选项，必须让用户主动做出选择
• 匿名化IP：GTAG初始化时设置anonymize_ip: true，避免收集用户精确IP
• 延迟加载：仅在用户同意后加载GTAG脚本，避免提前设置Cookie
• 可修改授权：提供用户修改Cookie授权的入口，满足GDPR撤回同意的要求

内容的提问来源于stack exchange，提问作者CondorW