Google Optimize

Support
#1

I have installed Google Optimize by adding the code to the Google Analytics Addon- Google advise that the Optimize script is placed before Analytics.

The following is showing up above the navigation bar at the top of my site.
async-hide {opacity: 0 !important}.
Please see the image:

You can see the script in the Inspect of Chrome.

Google refers here on how to implement this piece of code:

/* Sets the opacity of any element with this class to 0 */ .async-hide { opacity: 0 !important }

Google advises that

"In some cases you need to customize the page-hiding snippet. The most common reasons are:

to support loading multiple Optimize containers
to extend the callback timeout
to change the name of the class added to the element

Changing the timeout

To change the default amount of time Optimize will wait before removing the .async-hide class from the 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:

.async-hide { opacity: 0 !important}

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 tag as well as the argument passed at the end of the snippet."

Please can you advise me what the problem is? is it the way the code is implemented- do I need to change the class?

Many thanks for your help,
Alexandra

#2

Hi Alexandra,

Please wrap the CSS code inside the style tag like this:

<style>
   /* Sets the opacity of any element with this class to 0 */
   .async-hide {
     opacity: 0 !important
   }
</style>

it currently shows as text because the browser will read is as a plain text as CSS codes should be wrapped inside the style tag if it is added in the page internally.

Hope this helps.

#3

Thanks Jade- when I wrap the css in the style tag and click ‘update’ - it removes the style tag, and it is no longer there, and I have the same problem.

Does this mean that I can’t add the CSS to the Google Analytics Addon - if so, where should I add it? It probably needs to come before the Google Optimize page hide code and GA snippet?

#4

Hi There,

You can place a custom CSS on Theme Options > CSS, or on Customizer > Additional CSS or on your child theme’s style.css file.

Cheers!

#5

Thank you- yes there are two places to add CSS in the customiser and they are both output below the Google Analytics and Google Optimize code- yet google advises that this snippet comes first-The Custom CSS seems to be below the ‘Additional CSS’. Will this work correctly if it is not at the head of the page?
Many thanks,
Alexandra

#6

Hi Alexandra,

That’s not true. Base on your screenshot above its clear that your Google Analytics code output inside the <body> tag.

The Custom > CSS and Additional CSS in the Customizer are both output inside the <head> tag.

A normal HTML markup looks like this:

<!DOCTYPE html>
<html>

<head>
	<title></title>
</head>

<body>
	<!-- some content -->
</body>

</html>

With that we know that your CSS code comes first before the Google Analytics code.

Hope this shed some lights,
Cheers!