AdWords is now Google Ads. Our new name reflects the full range of advertising options we offer across Search, Display, YouTube, and more. Learn more

Optimize
5.4K members online now
5.4K members online now
Everything you need to know about setting up Optimize including creating your account and container, linking to Google Analytics and how to tag your site.
Guide Me
star_border
Reply

Post experiment execution DOM event

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Hey everyone. We are doing some PoC's with some non-standard experiments. One of the experiments we are trying to accomplish has to do with an html replacement inside an element that does not already exist when the page loads. Optimize seems to have no problem detecting this via the mutation observer, and does properly replace the html.

 

The problem we are trying to solve is the 'delay' in page load (or rather the apparent page load), caused by the no-flicker snippet. This thing adds a full 4 seconds to the visual feedback of the user. We want to get rid of that. One method we are trying is to detect when the content has been replaced, and then show the part of the page that has the content change (since it is not already shown on page load).

 

To that end, here is the question:
Is there a DOM event that fires after the experiment has completed rendering? Or maybe a special function name or parameter I can set somewhere that allows me to execute code after the experiment has either 'left the content alone' or 'replaced the content'. 

Right now, I can detect when the content is replaced, simply by adding an interval to the page that checks every 10 for the new content (or rather a marker on the content). However the same trick does not work when the content is NOT replaced. I have no way of knowing that Optimize has looked at the page, and determined that no replacement needs to happen (or am I missing that).

 

Any insight would be helpful.

 

P.S. - remember the goal is to get rid of the 4 second delay caused by the setTimeout function in the no-flicker snippet, by detecting or responding to a notification of when the experiment is completely rendered.

1 Expert replyverified_user

Post experiment execution DOM event

Visitor ✭ ✭ ✭
# 2
Visitor ✭ ✭ ✭

Hi Chris,

 

Why don't you run a script as part of the experiment which sets a window-scope variable like window.ranExperiment=true?

 

Although you could be looking at this the wrong way - why don't you send a dataLayer event when the target HTML element is on the page, and then trigger the Optimize test to evaluate on that custom event?

Post experiment execution DOM event

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

This is a good suggestion, and I had thought this might be a solution early on... however, i don't think the script runs if the 'original' version of the page is used. It only runs if one of the variations are replaced into the page. The solution I am looking for runs after the decision to _either_ not change the page OR to use one of the variations. Regardless of whether a variation is selected, or the original is used, I would like an event to fire (or similar) indicating that a decision was made.

Post experiment execution DOM event

Google Employee
# 4
Google Employee

Hi

 

You seem to have an advanced setup so I wanted to clarify a few things:

 

1) You do use activation events right? Google Optimize doesn't use mutation observers automatically - I suppose that you mean that you use mutation observers yourself to send activation events. See https://support.google.com/360suite/optimize/answer/7008840?hl=en

 

2) The page hiding snippet shouldn't cause a 4 second delay, except in cases of very slow networks or very bad positioning of the optimize snippet code. The delay should be only until the time that the Optimize container loads. So I am wondering if there is a mistake in your configuration.

 

3) You don't need to use the page hiding snippet necessarily. For heavy client-side dynamic pages and single page apps, it often doesn't make much sense, since the initial page (where flickering is prevented) is empty.

 

4) You can customize the behavior of page hiding by changing the hiding style element. For example you may hide only the area of the page where you are making experiments.

See: https://developers.google.com/optimize/

 

5) One callback that you can use for detecting when Optimize is done (or timed out) is the hide end callback of the page hiding snippet. Perhaps you can override that if you need to, i.e. add something

var origHideEnd = dataLayer.hide.end;

dataLayer.hide.end = function() {

  origHideEnd();

  <your code>

}

 

See again: https://developers.google.com/optimize/