6

On a NextJS/ReactJS project, I attempt setting up Google Optimize for some experiments. What I want to avoid though is the flickering effect it has while Optimize is changing the visual elements on each experiment.

For this cause, I have used the anti-flicker script suggested by Google. Now, while this works on initial load, practically "hiding" the entire page for some time in order for Optimize to apply changes, this does not work on my case in terms of client-side routing, as the full reload of a page does not occur in that case.

Therefore, I "avoid" flickering on initial page load, but I have not managed to make it work in terms of client-side routing, as the initial script does not execute again - and even if it did, the result would not be ideal.

Please note that hiding and re-displaying the page is not an option (like re-initiating the script via a history change event), as this breaks the continuity client-side routing provides. Also, hiding temporarily the component that is flickered is not proven easy, as I am not sure at which step of the routing process should I hide it and I did not manage to make it be displayed in an effective way. Thoughts?

Thank you very much in advance.

Nick Louloudakis
  • 5,856
  • 4
  • 41
  • 54

1 Answers1

2

This solution may or may not work with your use-case but I use this solution for most of the Google Optimize experiments and have been able to create complex AB tests with it.

  1. Define Activation event in you experiment's settings.
  2. Initialize the experiment using useEffect
  3. Use React or Redux state to toggle components using eventCallback property.

Sample component:

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>
    );
};

Experiment ID

Experiment ID

Experiment trigger

Experiment trigger

References:

Rajender Joshi
  • 4,155
  • 1
  • 23
  • 39
  • 4
    thank you for your answer, but if I get this right, you are using the Optimize API in order to apply custom code per variant selection. In `Optimize` though, you can use a GUI-based interface to define changes of visual elements without using code. What I want is the display of those variants without flickering in `ReactJS`, without re-writing the changes of each variant in my code. In practice, I want to set the variant display changes dynamically, not just detect the `Optimize` variant and set extra custom code based on this – Nick Louloudakis May 18 '20 at 14:05