GA4无Cookie自定义事件追踪问题：嵌入组件的Cookie与事件冲突

我开发了一套允许用户创建自定义组件（widget）并嵌入自有网站的系统，现需为这些组件添加GA4自定义事件追踪以了解其使用情况。我无需用户特定数据，因此希望完全禁用GA Cookie，同时不能影响嵌入该组件的宿主站点自身的GA代码。

目前我的实现代码如下：

var myGACode = 'XYZ';

// initialize gtag if the host site does not already have it
if ( typeof gtag == 'undefined' ) {
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){dataLayer.push(arguments);}
}

// disable all consent
gtag( 'consent', myGACode, {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    functionality_storage: 'denied',
    personalization_storage: 'denied',
    security_storage: 'denied'
} );

// append the gtm tag to the document <head>
var scriptTag = document.createElement('script');
scriptTag.setAttribute( 'src', 'https://www.googletagmanager.com/gtag/js?id=' + myGACode );
scriptTag.setAttribute( 'async', 'async' );
document.getElementsByTagName('head')[0].appendChild( scriptTag );
gtag( 'js', new Date() );
gtag( 'config', myGACode );

但遇到问题：执行gtag( 'js', new Date() );语句总会生成Cookie，移除该行则不会生成Cookie，但GA也无法接收事件。请问这是否无法实现，还是我的操作有误？

要实现无Cookie的GA4事件追踪且不干扰宿主站点，你需要调整核心配置参数和代码执行逻辑，以下是可行的修改方案：

关键调整点 #

1. 在config调用中强制禁用存储：添加storage: 'none'参数，彻底阻止GA生成任何Cookie或本地存储。
2. 明确隔离跟踪器：所有gtag调用绑定你的GA ID，避免和宿主站点的GA配置冲突。
3. 关闭自动页面浏览发送：添加send_page_view: false，避免组件误发宿主页面的浏览事件。

修改后的完整代码 #

var myGACode = 'XYZ';

// 初始化gtag（避免污染宿主环境）
if (typeof gtag === 'undefined') {
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){dataLayer.push(arguments);}
}

// 提前设置同意状态（必须在加载GTAG脚本前执行）
gtag('consent', myGACode, {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    functionality_storage: 'denied',
    personalization_storage: 'denied',
    security_storage: 'denied'
});

// 加载GTAG脚本
var scriptTag = document.createElement('script');
scriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${myGACode}`;
scriptTag.async = true;
document.head.appendChild(scriptTag);

// 初始化GA4，核心配置禁用存储
gtag('js', new Date(), myGACode);
gtag('config', myGACode, {
    storage: 'none',
    send_page_view: false,
    // 可选：固定匿名client_id，完全避免用户识别
    client_id: 'widget_anonymous_user'
});

// 自定义事件发送函数（确保只发送到你的GA属性）
function sendWidgetEvent(eventName, eventParams = {}) {
    gtag('event', eventName, {
        ...eventParams,
        send_to: myGACode
    });
}

核心说明 #

• storage: 'none'：这是禁用Cookie的关键，GA4会跳过所有存储操作，不会生成_ga、_ga_XXX等Cookie。
• send_to参数：发送事件时必须带上，确保事件仅提交到你的GA4属性，完全隔离宿主站点的GA追踪。
• 绑定GA ID的调用：gtag('js', new Date(), myGACode)明确指定操作的跟踪器，避免影响宿主的gtag配置。
• 固定client_id：如果完全不需要区分用户行为，可以设置固定值，进一步强化匿名性，同时避免GA在内存中生成临时随机ID。

验证方式 #

1. 打开浏览器开发者工具的「Application」标签，检查Cookie列表，确认无GA相关Cookie生成。
2. 在GA4的「实时」报告中，验证自定义事件是否正常接收。
3. 测试宿主站点自身的GA追踪功能，确认未受组件代码影响。

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