Using the Optimize Page-Hiding Snippet

This guide explains how to use the Optimize page-hiding snippet, which supports loading your Optimize container asynchronously while hiding the page until the container is ready, ensuring that users don't see the initial page content prior to it being modified by an experiment.

The page-hiding snippet code

To add the page-hiding snippet to your site, insert the following code in the <head> section of every page that loads your Optimize container, prior to any other code on the page. You must also replace the string GTM-XXXXXX with your Optimize container ID:

Changing the timeout

To change the default amount of time Optimize will wait before removing the .async-hide class from the <html> element (in the event Optimize takes too long to load), update the number passed at the end of the snippet.

The following code will wait 5000 milliseconds before showing the page:

Changing the async-hide class name

If the async-hide class name is already defined in your CSS, you can choose a different name. To change the name, update the class in both the <style> tag as well as the argument passed at the end of the snippet.

The following code will use the class optimize-loading instead of async-hide: