Optimize
2K members online now
2K members online now
Learn how to create your first experiment and get tips on creating A/B, redirect, and multivariate tests.
Guide Me
star_border
Reply
Highlighted

Responsive image problems in Optimize

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

I've been trying to run an A/B test in Optimize where we replaced the main image on our homepage. We added script that our site uses to resize the images at certain breakpoints but have found that when a user resizes the browser, the main image then replaces all images on the page with the same image.

 

I tried adding the image without the script for resizing and it just doesn't resize. Has anyone had any problems with images not being responsive and has anyone experienced issues when resizing the browser which breaks image placement?

1 Expert replyverified_user

Responsive image problems in Optimize

Google Employee
# 2
Google Employee

Hi,

 

Would you mind sharing your Optimize Container ID so that we can investigate further? You can either post the ID in this forum or submit via the "Send Feedback" link (in the overflow menu on the top-right corner of the screen).

Responsive image problems in Optimize

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭
Hi
 
Thanks for getting back to me. Our Optimize Container ID is GTM-WKV36S8.

Responsive image problems in Optimize

Google Employee
# 4
Google Employee

Hi,

 

I can't reproduce the issue in the editor. Since all your experiments have ended, I can't reproduce the issue in a preview. From the code in the page, it looks like that whenever you resize the window, it is going to replace the images with some pre-sized versions of those images. I would expect any changes applied by the Optimize to be reverted back when the window resizes. It looked like that you were seeing ALL images in the page got replaced by the main image changed by Optimize. If you want us to investigate further, can you create a copy of your ended experiment that has the issue and generate a share preview link for the variation that shows the issue?

 

Thank you!

Responsive image problems in Optimize

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

I've copied the experiment that had the issue and have created a preview link: https://optimize.google.com/optimize/sharepreview/?id=GTM-WKV36S8&gtm_experiment=GTM-WKV36S8_OPT-PZG...

Re: Responsive image problems in Optimize

Google Employee
# 6
Google Employee

Hi,

 

I do see that when you resize the window, the image goes back to the original image because your JavaScript window resize handler resets the main image with a pre-sized image. I do not see the issue where it replaces all images in your page with the main image. If you plan to experiment the main image on the page, it is best to not include the main image as one of the images that are resized on window resize. The other option is to use Custom Activation Event to trigger the experiment to run after the window has resized. However there can be other issues with this approach because Optimize may not reapply the change because it thinks that the change has been already applied. 

Responsive image problems in Optimize

Visitor ✭ ✭ ✭
# 7
Visitor ✭ ✭ ✭

I'm not sure I understand what you mean by "it is best to not include the main image as one of the images that are resized on window resize". Are you saying if we want to run an experiment with a responsive image, it needs to be a fixed size? Does that mean that we can't run experiments with repsonsive images?

 

I will try the Custom Activation Event you've linked to.

Re: Responsive image problems in Optimize

Google Employee
# 8
Google Employee

Since your window resize handler replaces the images that you have replaced in the experiment with those pre-sized image using the HTML node below:

 

 

<noscript class="adaptive-image adaptive-image-processed" data-adaptive-image-breakpoints="600 800 1200"...></noscript> 

You will need to find the "noscript" element used to generate the main image and remove the "adaptive-image-processed" class of this node so that it is no longer handled by your resize handler after you have replaced the image.