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

Best way to set up a responsive AB Test

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭


Does anyone knows the best way to set up a responsive AB Test?
I tried to create a responsive test by editing HTML, but when I change the size of the screen, class change too, and I need to make the modification I already made on the different screen size (desktop, tablet and mobile).

Is there a way to create the same test without doing 3 times the same changes for each device?


Container ID : GTM-5FP8CZX


1 Expert replyverified_user

Best way to set up a responsive AB Test

Google Employee
# 2
Google Employee



There will certainly be better support for responsive tests in the near future. At the moment you can use the CSS dialog and type CSS code that can implement what you want to do.

You could still use the editor UI and its palette to modify your page, and then use the CSS dialog to enclose the generated CSS into a @media block.


Saying that, the work that you may need to do will depend on your page. If your page reveals completely different content on different screen sizes, you will need to repeat your edits (which I guess would be different) for each window size.


Keep in mind that all the above will work for CSS style changes (i.e no text or HTML changes).


Finally, if your problem has to do purely with the generated selectors (i.e. the content is the same but classes somehow change), you may use the "advance selection" dialog (rectangle next to hierarchy bar) to toggle the use of "class" and "id" attributes for CSS selector generation by the editor. You will end up with CSS selectors like body>div>div etc. which will not use the class attributes.


Hope that something from the above will help.

Re: Best way to set up a responsive AB Test

[ Edited ]
Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Hi Dimitri,

Thank you for your quick reply.

However, I do want to change the text with the html of the page.

Yes, when you change the screen size, the page reveals the same content but
at different location. Thus, the css selectors like body>div>div won't work.

Should I do the html changes for the 3 different size of screen (desktop,
tablet and mobile)?

How can I do it without violating the HTML structure of the site?

Thank you for your help on this topic.

Marked as Best Answer.
Accepted by topic author Sylvain J

Best way to set up a responsive AB Test

Google Employee
# 4
Google Employee

This depends a lot on how your page it done. It may be possible that the same content is changing position and order to show at at different place (in which case you need to change its text once), and its also possible that there are 2 copies of the content in the page that are shown based on conditions (in which case you need to change both).


Just change one of them and see what happens when you resize the window. If the original content seems to show up in a different place, then you will need to change it again. As I said there will be certainly something a lot better in Optimize for responsive sites in the near future.


On the subject of class changing based on width: CSS selectors provide many powerful options to target elements, and all of them will work fine with optimize. You need to identify something in the page that will not be affected by the window size change and use that as a starting point. Maybe there is a class that doesn't change for the element or one of its elements above or around. Or if you have a link you could perhaps use a CSS selector like a[href="<link target>"].


You may use the advanced selection dialog or modify existing changes in the change list to pick an alternative stable CSS selector. Unfortunately it may need a bit more work in your case.


About "violating HTML structure": If you just want to change text, use this menu option and not the "change HTML". This wouldn't ever cause any other problems with your page elements. Otherwise you may need to do more work to fix things. You can certainly add inline <style> elements on your HTML to fix things, but as I said it all depends on your page and what you want to do.