Hi! I’m having problems setting up Google Optimize with Bubble to run some A/B test. I go to the index page and go to the Header section and put this code of Optimize in 2 different places:
Inside my Google Analytics script (just a line of code): ga(‘require’, ‘MY_TRACKING_CODE’);
Before the updated Google Analytics script:
(function(a,s,y,n,c,h,i,d,e){s.className+=’ ‘+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(’ ?’+y),’’)};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,‘async-hide’,‘dataLayer’,4000,
{‘MY_TRACKING_CODE’:true});
Then I set a variation of the main web I have published in Bubble and make changes in it through the Google Optimizer console (e.g. changing a title in the webpage) and I set it to send to this variation the 99% of the traffic. However, when I test it, the new version is shown but immediately after the normal version is shown (in microseconds). Also, I’m seeing a message in the Optimize environment like this: “Page modified after initial load The content of this page has been modified after the page was initially loaded. Make sure your changes are rendering correctly by using preview mode”
I’m afraid this is some problem related to the interaction of JS. However, I’ve got rid of all the JS code (except for the GA and Google Optimize code) and the same happens all the time… Has someone had this issue when working with Google Optimize through Bubble?
I haven’t tried to use Optimize with Bubble yet, but I’ve used both Google Optimize and Optimizely elsewhere. Sounds like you’re using the feature in GO where you are modifying elements on a page (as opposed to setting up a separate page and splitting traffic to the two unique pages). As far as I know, there isn’t any way around the “flicker” problem you’ve cited because the JS is waiting for the css selector to load before initiating the swap. It goes as quickly as it can (you said microseconds, in my experience it is 50-500 milliseconds), but it’s got to load that original element first.
If you use GO’s split page option, you won’t see the flicker because it uses a page redirect (e.g., your traffic will hit site.com/page but then 99% will be immediately redirected to site.com/page-variant). That’s an okay option except then you need to build/maintain two separate pages in Bubble instead of just using Optimize’s built-in editor.
I can’t speak to the error you’re seeing about “page modified after initial load” …
@edd thank you so much for your help! You’re right, so it’s probably better to have different websites instead of one website with different texts. However, I have 2 questions:
What should happen in my website to avoid this problem (in other words, what do other websites to not have this problem)? I’d like to know if this will be a problem for any project I run or if it’s because of any specific thing in my current project.
With this redirection (instead of changing elements), people will see the same URL without anything after “/”, right? So they arrive the same webpage in the URL, but they see different versions (stored in /ver1 and /ver2 e.g.)
Since people is first arriving to the control version, is GA going to count that as a visitor, or it only takes into account the very final redirected webpage?
Optimizely tries to use multi-region AWS infrastructure to minimize time to overwrite, but it’s still there. Other options are to hide element until overwrite is complete, but then you either have blank section of page or if you collapse element while hidden then user experiences page “jump” when it is injected. There is no perfect answer to the flicker problem.
Unfortunately no, they’ll see the alternate URL, at least last time I checked.
I do think GA is smart enough to count all analytics toward the original page and not double count anything due to GO traffic splits and redirects. The analytics associated with your experiment will be in your GO dashboard.
Hi @edd, thanks a lot again! I’m trying to add a time delay to load things after a while, but it’s not working properly… Sometimes I even see this error message on GO: “The Google Optimize snippet for the container with ID GTM-P7VZ6LZ is not correctly installed on this page. To preview variants for this experiment, make sure the Google Optimize snippet is installed on any pages you want to test.”
How would you add the necessary pause before loading the GO to make sure there is no flicker? Don’t worry about any jump or blank sections
I first used texts in blank (actually, a couple empty spaces), and then I changed those blank spaces by the new versions of the text in GO. The problem is that I don’t want people going to the blank version (control version), and at least 1% of the people has to go to the control version. This is why I ended up using as control version my first version, that will change to the first variant in less than 0.5 seconds. It kind of work!
