Google Optimize A/B测试全局CSS仅首页生效 如何实现全站修改？

问题根因 #

• 最常见诱因是Google Optimize实验的激活规则仅配置了首页，未覆盖全站页面
• 若站点开启了PJAX无刷新加载，Optimize默认的单次加载逻辑不会在路由跳转后重新注入样式，导致非首页不生效
• 少部分情况是非页面对应按钮为异步动态渲染，Optimize注入样式时机早于DOM生成，导致样式未匹配

配置修复方案 #

• 调整实验激活规则：进入实验设置→激活条件，普通多页面站点直接选择「所有网页」，SPA/无刷新站点选择「页面更改（单页应用适用）」即可
• 开启Optimize的「持续激活」开关：开启后会自动监听DOM变化，动态应用匹配样式，适配动态渲染的按钮元素

全局JS注入实现方案 #

如果配置调整后仍存在兼容问题，可直接在Google Optimize实验的自定义代码区插入以下JS，实现全站样式永久生效，适配无刷新跳转、动态渲染场景：

// 注入自定义样式
const customBtnStyle = document.createElement('style');
customBtnStyle.textContent = `
.checkout-button button alt wc-forward .current .breadcrumb-step, [data-icon-label]::after, .button#place_order, .button.checkout, .checkout-button, .single_add_to_cart_button.button, .button.single_add_to_cart_button, .button.is-outline, input[type="submit"].is-outline, input[type="reset"].is-outline, input[type="button"].is-outline {
  border: 0.25px solid #000 !important;
  background-color: #d10a28 !important;
  color: #fff !important;
}
`;
document.head.appendChild(customBtnStyle);

// 适配PJAX无刷新跳转场景
document.addEventListener('pjax:complete', () => {
  if(!document.head.contains(customBtnStyle)) document.head.appendChild(customBtnStyle);
});

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