时间戳

首页 > 解决方案 > 在 NextJS/ReactJS 上设置 Google Optimize 防闪烁脚本

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

问题描述

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

为此，我使用了谷歌建议的防闪烁脚本。现在，虽然这适用于初始加载，实际上“隐藏”整个页面一段时间以便优化应用更改，但这在客户端路由方面不适用于我的情况，因为页面的完全重新加载确实在那种情况下不会发生。

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

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

非常感谢您提前。

标签： javascriptreactjsroutesnext.jsgoogle-optimize

解决方案

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

  1. Activation event在您的实验设置中定义。
  2. 使用初始化实验useEffect
  3. eventCallback使用 React 或 Redux 状态来使用属性切换组件。

示例组件：

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

实验 ID

实验触发器

实验触发器

参考：

推荐阅读