javascript - 在 NextJS/ReactJS 上设置 Google Optimize 防闪烁脚本

Question

在 NextJS/ReactJS项目，我尝试为一些实验设置谷歌优化。
我想避免的是它在优化时改变每个实验的视觉元素时的闪烁效果。

为此，我使用了 anti-flicker script谷歌推荐的。
现在，虽然这适用于初始加载，但实际上“隐藏”整个页面一段时间以便优化应用更改，但就 而言，这不适用于我的情况。客户端路由 ，因为在这种情况下不会发生页面的完全重新加载。

因此，我“避免”在初始页面加载时闪烁，但我没有设法使其在客户端路由方面工作，因为初始脚本不会再次执行 - 即使它执行了，结果也不会是理想的.

请注意，隐藏和重新显示页面不是一种选择(例如通过历史更改事件重新启动脚本)，因为这会破坏客户端路由提供的连续性。
此外，暂时隐藏闪烁的组件并不容易，因为我不确定应该在路由过程的哪个步骤隐藏它，而且我没有设法使其以有效的方式显示。想法？

非常感谢您提前。

Answer 1

此解决方案可能适用于您的用例，也可能不适用于您的用例，但我在大多数 Google Optimize 实验中都使用此解决方案，并且能够使用它创建复杂的 AB 测试。

定义 Activation event在您的实验设置中。

使用 useEffect 初始化实验

使用 React 或 Redux 状态通过 eventCallback 切换组件属性(property)。

示例组件:

const ExperimentalComponent = () => {
    // 0 - Original
    const [experimentType, setExperimentType] = useState("0");
    useEffect(() => {
        if(window && window.dataLayer && !isLoadingExperiment) {
            window.dataLayer.push({
                event: "my_experiment_name",
                eventCallback: () => {
                    const experimentType = window.google_optimize && window.google_optimize.get("experimentId");
                    // undefined - when experiment isn't running
                    // 1,2,3 - when ant variant is running
                    if(experimentType) {
                        setExperimentType(experimentType);
                    }

                }
            });
        }
    }, []);

    return (
        <React.Fragment>
            {/* Yes! google_optimize.get return string instead of number */}
            { experimentType === "0" && <div>Original</div> }
            { experimentType === "1" && <div>Variant 1</div> }
            { experimentType === "2" && <div>Variant 2</div> }
        </React.Fragment>
    );
};

实验 ID



实验触发器



引用:

https://support.google.com/optimize/answer/9059383?hl=en

https://developers.google.com/tag-manager/enhanced-ecommerce