Rich-text Reply

Experiment Looks fine in Editor but when reviewing live shows image twice?

adamlcasey 07-30-15
Accepted Solution

Experiment Looks fine in Editor but when reviewing live shows image twice?

Hi I'm trying to setup our first test and i have it how I want it to look in the Editor, but when i view it on our live site, there is a graphic that is showing twice? (see attachment)

 

Test URL is:

http://galt.limebuild.net/onestepcheckout/?test=1234

NOTE: this is a dynamic shopping basket so when you load the page you will need to take the following steps.

Open another browser and paste the link again. Then add a product to you cart, click check and checkout again. Then refresh the link in the first tab to see the changes.

 

 

I have researched the community and found this post:

https://community.optimizely.com/t5/Using-Optimizely/Banner-image-appearing-twice/td-p/10150

 

Which states it's normally either one of these three:

 

  1. You accidentally have the snippet on the page 2x. I've seen where it's added via a tag manager and in the HTML before. You should confirm the snippet is only loaded once.
    NOTE: We use Magento and are using the Magento plugin by BlueAcorn to implement the Optimizely code snippet. 

  2. Open the edit code in the variation and make sure you don't see the banner image URL in there 2x. You could be duplicating code. 
    NOTE: I've checked and we don't have the image URL twice

    // Removes Banner and replaces with white text and live chat button.
    $(".osc-header > img").css({"display":"", "visibility":"hidden", "position":"relative", "left":0, "top":0, "width":71, "height":69});
    $(".header").append("<div id=\"optimizely_637734409\"></div>");
    $("#optimizely_637734409").html("Having Trouble Checking Out? &nbsp; Call us on - (0) 161 428 9111 &nbsp; or &nbsp;").css({"position":"relative", "left":250, "top":55, "width":"655px", "height":"24", "font-family":"vagroundedregular","font-size":"22px", "color":"#ffffff",});
    $(".header").append("<div id=\"optimizely_283284652\"></div>");
    $("#optimizely_283284652").replaceWith("<div id=\"optimizely_283284652\"><div data-id=\"VTqiXjREtmK\" class=\"livechat_button\"><a href=\"http://www.livechatinc.com/?partner=lc_6142461&amp;utm_source=chat_button\">live chat software</a></div></div>");
    $(".livechat_button").css({"width":270, "height":116, "position":"relative"});    
    $("#optimizely_283284652").css({"position":"relative", "left":897, "top":-10, "width":270, "height":116}); 
          
    // Increases the Login Button size.
    $("#onestepcheckout-login-link > span").css({"font-size":"18px", "font-weight":"300"});
          
    // Increases font size of products in the Review Your Order section.     
    $(".name > p").css({"font-size":"18px"});
          
    // Hides the form field County / State / District.
    $("#billing_address_list .select234").css({"display":"none", "visibility":""});
          
    // Left aligns the terms and conditions and appends the verisign graphic and moves.     
    $(".onestepcheckout-enable-terms").css({"text-align":"left", "padding-left":"65px"});
    $(".onestepcheckout-enable-terms").append("<img id=\"optimizely_6222976\" src=\"//cdn.optimizely.com/img/2895700240/68141efe665242b7afa22211706df993.jpg\" />");
    $("#optimizely_6222976").css ({"position":"relative", "left":20, "top":15, "width":125, "height":71.875}); 
    $(".onestepcheckout-enable-terms").css({"position":"relative", "left":0, "top":0, "width":480, "height":55});
          
    // Left aligns the newsletter checkbox.
    $(".onestepcheckout-enable-newsletter").css({"position":"relative", "left":0, "top":0, "text-align":"left", "float":"right", "padding-left":"65px","width":480, "height":55});   
          
    // Change the Shipping method warning message.      
    $(".onestepcheckout-shipping-method-block").html("To see our delivery options, please enter your address details in the address fields above.").css({"color":"#b57c21"});
          
    // Increases the place My Order Button has media queries to correct issues on smaller devices.
    $("#onestepcheckout-place-order").css({"left":0,"width":"100%"});
    $("body").append("<style type='text/css'>@media (min-width: 1024px) { .onestepcheckout-place-order-wrapper { padding-left: 61px !important; }}</style>");
    $("body").append("<style type='text/css'>@media (max-width: 1024px) { .#optimizely_637734409 { left: 250px !important; }}</style>");
     

 

3. Finally, make sure you are not accidentally also adding the banner through another, separate

    experiment that could be overlapping on this page. 

    NOTE: I did have it in another experiment but i archived it. Should that have worked?

 

 

IsssueWithVeriSignButton.png
adamlcasey 07-30-15
 

Re: Experiment Looks fine in Editor but when reviewing live shows image twice?

That images was a little too small to see, here it is again close up.IsssueWithVeriSignButton_closeup.png

Amanda 07-31-15
 

Re: Experiment Looks fine in Editor but when reviewing live shows image twice?

@adamlcasey - Thanks for posting this. I'm looking at your page source and I can see the snippet on the page 2x. If you remove one, this should clear things up for you. 

 

I can see the code being executed twice when I view the log on http://galt.limebuild.net/onestepcheckout/?test=1234&optimizely_log=true. 

 

Can you try removing one and let us know if this does the trick? 

 

Screen Shot 2015-07-30 at 5.30.40 PM.png

 

Optimizely
adamlcasey 07-31-15
 

Re: Experiment Looks fine in Editor but when reviewing live shows image twice?

Thanks for coming back to me and looking into this, yes, I see it now.

 

I've asked our developers to look into removing the duplication, I'll post back to confirm if this fixes it.

adamlcasey 07-31-15
 

Re: Experiment Looks fine in Editor but when reviewing live shows image twice?

Thanks this did indeed fix the issue.