Google Analytics 跨站点 Cookie 问题

Google Analytics Cross-Site Cookie Issues

由于“问题”选项卡中的错误,我们网站上的 Google 分析使 LightHouse 最佳实践分数下降了 7%。查看“问题”选项卡显示 Google Analytics 发送了 6 个 cookie,但没有设置必要的 SameSite 值。有什么办法可以fix/address这个吗?

在此处的 Google 开发人员文档中找到了深埋的解决方案: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id

通过我自己的一些调整,我想出了这个解决方案:

const gacode = 'UA-XXXXX-Y';
const rootdomain = 'example.com';
const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
const GA_COOKIE_KEY = 'gaCookie';
if (window.localStorage) {
    ga('create', gacode, {
        storage: 'none',
        clientId: window.localStorage.getItem(GA_LOCAL_STORAGE_KEY),
    });
    ga(function (tracker) {
        window.localStorage.setItem(
            GA_LOCAL_STORAGE_KEY,
            tracker.get('clientId')
        );
    });
} else {
    ga('create', gacode, {
        cookieName: GA_COOKIE_KEY,
        cookieDomain: rootdomain,
        cookieExpires: 60 * 60 * 24 * 28,
        cookieUpdate: 'false',
        cookieFlags: 'SameSite=None; Secure',
    });
};

如果可用,这将通过本地存储以无 cookie 模式使用分析,如果不可用,则将 SameSite 标志添加到 cookie。这可能不是默认设置,因为它限制了跨站点跟踪。

即使使用了预取 dns 和预加载分析脚本等所有技巧,它仍然会使性能下降一点,因为它们的脚本在第二个脚本中动态标记,但要好得多。至少在“问题”选项卡中不再显示“不良做法”。

<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link
    rel="preload"
    href="https://www.google-analytics.com/analytics.js"
    as="script"
/>

并包括异步脚本

<script async src="https://www.google-analytics.com/analytics.js"></script>

这让我们大部分时间回来了。

希望这个回答对其他人和对我一样有帮助。