a/b test A/B test

[gabbodrummer18]

Hi everyone,

i have a problem with A/B test. I want to change color of "add to cart" button.

I created a javascript code (document.getElementsByClassName("add-to-cart")[0].style.background = "#5CB85C";), if i launch the code in the console the color of the button change, but when i put this code in google tag manager (or google optimize) and i set the tag for A/B test, the color of the button at the beginning of the page load it works, but when the page is fully loaded the button returns to the original color, as if other javascrit codece was loaded afterwards.

 

Do you know why this happens and how to fix it?

[joseantgv]

Check CSS. Maybe is applied another rule with more importance?

[Prestachamps]

Hi,

in this case you should try to add a custom class to the button in the A/B test in Google Optimize with Javascript, and add the corresponding rule for this class in CSS with !important.

Kind regards, Leo

[gabbodrummer18]

Thanks for the answers, I did as you told me, but it still doesn't work.

At this link you can see the problem:

https://www.oxystore.it/protezione-della-persona/1899-mascherine-ffp2-riutilizzabili-n95.html

 

EDIT: You have to set oxy-cookie to 1.1 to see the change

Edited February 11, 2021 by gabbodrummer18
I forgot something (see edit history)

[Prestachamps]

Hi,

you should add the class to the parent div, or let's say for the product-actions class div, just in case that on pageload the add to cart is being re-loaded or replaced by some theme JS, and add the css :

 

.ab-test .btn.add-to-cart{

background: rgb(92, 184, 92);

border-color: rgb(92, 184, 92);

}

Or you can fire your trigger which is adding the class to the dom loaded event inside Tagmanager.

Kind regards, Leo