Rich-text Reply

My variation changes are not showing up in preview

OliverK 09-10-15

My variation changes are not showing up in preview

Hi,

 

I just set up my first experiment with two variants. However, preview does not show the changes made for variant 2.

 

Why is that? Thanks!

 

Oliver

 

PS: Let me know, if you need anything to look at the test directly.

Level 2

Re: My variation changes are not showing up in preview

Hey there!

Did you remember to hit save before previewing and wait a couple minutes? Sometimes it takes a minute to reflect the changes. I know this might be obvious, but not sure of your experience level, so thought I would double check!

If you have that covered, would you mind providing the variation code so we can see what type of changes you made?

There could be a number of reasons, so it would be very helpful if we can all see what specifically was changed.

-Dan
-----

Daniel


Digital Marketing Manager - mindbodygreen
Optiverse User Group Leader - NYC
OliverK 09-10-15
 

Re: My variation changes are not showing up in preview

Sure, quick fixes first Smiley Wink I did click preview after saving and even waited quite some time, tried it several times over a longer time frame today. result was that switching between variations showed the same variant.

 

Just as I am writing:

 

I just got preview to work from the project page once, currently trying it again but it is loading way too long and did not resolve for minutes now. see attached.

 

Preview from the editor: no chance to get the 2 variations to work, tough. Also now, loading and loading ...

 

ID: https://app.optimizely.com/edit?experiment_id=3465280263

 

screenshot loading preview

Level 2
OliverK 09-10-15
 

Re: My variation changes are not showing up in preview

... still loading ...
Level 2

Re: My variation changes are not showing up in preview

Hey Oliver,

So that link won't work because I don't have access to your account. What would be helpful is to copy and paste the code that is in the "Edit Code" part of the editor for the variation. If you are in the editor, just look at the bottom right and there is a button with that name. Click it and copy all the code inside the box that pops up from the bottom.

If we can see that, we can start to help you.

Thanks!
-----

Daniel


Digital Marketing Manager - mindbodygreen
Optiverse User Group Leader - NYC
OliverK 09-10-15
 

Re: My variation changes are not showing up in preview

$(".navbar-brand > img").css({"position":"relative", "left":0, "top":0});
$(".navbar-brand > img").css({"left":-208, "top":12});
$(".test-now").css({"position":"relative", "left":195, "top":11});
$(".login-link").css({"position":"relative", "left":175, "top":10});
$(".test-now").html("Jetzt Anmelden !");
$(".landingpage-intro").append("<div id=\"optimizely_528571427\">...</div>");
$("#optimizely_528571427").css({"color":"#ffffff"});
$("#optimizely_528571427").css({"font-family":"Roboto", "font-weight":"100", "font-size":"12px"});
$("#optimizely_528571427").css({"position":"relative", "left":0, "top":0, "width":173, "height":17});
$("#optimizely_528571427").css({"left":1416, "top":-115});
$("#optimizely_528571427").html("Ihre Anmeldung ist kostenlos!");
$(".test-now").css({"left":196, "top":84});
$("#optimizely_528571427").css({"left":1414, "top":-162});
$(".test-now").css({"left":195, "top":38});
$(".login-link").css({"left":357, "top":175});
$(".navbar-brand > img").css({"left":-209, "top":46});
$(".landingpage-intro").append("<div id=\"optimizely_473151588\">...</div>");
$("#optimizely_473151588").css({"position":"relative", "left":1379, "top":-51, "width":225, "height":21});
$("#optimizely_473151588").css({"font-family":"Roboto", "font-size":"12px", "font-weight":"100", "color":"#ffffff"});
$("#optimizely_473151588").css({"left":1407, "top":-79, "width":180, "height":23});
$(".login-link").css({"width":43, "height":20, "left":358, "top":125});
$(".landingpage-intro-claim").html("IFRS strukturiert erklärt");
$(".landingpage-intro-claim-sub").html("Internationale Rechnungslegung leicht gemacht – mit Hilfe interaktiver Flowcharts!");
$("#optimizely_473151588").css({"left":1407, "top":-91});
$(".login-link").css({"left":472, "top":88});
$("#optimizely_473151588").css({"left":1376, "top":-90});
$(".login-link").css({"left":440, "top":89});
$(".navbar-brand > img").css({"left":-219, "top":29});
$("#optimizely_473151588").css({"left":1381, "top":-90});
$(".login-link").css({"left":445, "top":89});
$(".login-link").css({"left":442, "top":89});
$("#optimizely_473151588").html("Du hast bereits einen Account?");
$("#optimizely_473151588").css({"width":165, "height":16});
$("#optimizely_473151588").css({"left":1386, "top":-89});
$(".login-link").css({"left":436, "top":90});
$(".landingpage-testimonial-imgcontainer > img").css({"position":"relative", "left":-519, "top":-6});
$(".landingpage-testimonial-quote p").css({"position":"relative", "left":15, "top":-120});
$(".landingpage-testimonial-quote cite").css({"position":"relative", "left":3, "top":-114});
$(".landingpage-testimonial-quote em").css({"position":"relative", "left":6, "top":-110});
$(".landingpage-testimonial").css({"position":"relative", "left":0, "top":0, "width":1667, "height":252});
$(".landingpage-test-now-footer").html("Kostenlos Anmelden!");
$(".landingpage-testimonial-quote p").html("IFRSCharts.com ist eine große Hilfe, Problemstellungen strukturiert zu<br>lösen, ohne dass man sich durch Berge von Literatur wühlen muss.");
$(".landingpage-testimonial").css({"width":1669, "height":234});
$(".login-link").css({"left":436, "top":89});
$(".imac-background h3").html("Schritt für Schritt <br>von der&nbsp;Fachfrage zur Lösung&nbsp;");
$(".imac-background > .landingpage-section-content > p:eq(0)").html("Sich immer wieder selbständig durch textüberladene <br>IFRS-Standards zu arbeiten, kostet viel Zeit und Nerven!");
$(".ppl h3").html("Nutze unser Expertennetzwerk");
$(".landingpage > section:eq(0)").css({"position":"relative", "left":0, "top":0, "width":1667, "height":596});
$(".ppl p").html("Du suchst einen erfahrenen Kollegen, der Dir bei der Lösung einer Fachfrage hilft?<br><br>Kein Problem! <br>Zu jedem Flowchart kannst Du Fragen und Praxisfälle einstellen. Innerhalb kurzer Zeit unterstützen Dich die passenden Kollegen. &nbsp;");
$(".media-object").css({"position":"relative", "left":1, "top":21});
$(".landingpage-testimonial-quote-small").css({"position":"relative", "left":4, "top":31});
$(".media-object").css({"left":34, "top":35});
$(".landingpage-testimonial-quote-small").css({"left":23, "top":35});
$(".ppl").css({"position":"relative", "left":0, "top":-44});
$(".landingpage-section-blue").css({"position":"relative", "left":0, "top":0, "width":1667, "height":721});
$(".crowd > .landingpage-section-content").css({"position":"relative", "left":2, "top":-32});
$(".crowd > .landingpage-section-content > p:eq(0)").html("Erstelle selbst Lösungspfade. Teile Deine Erfahrung <br>und steigere Deine Reputation im Netzwerk!");
$(".crowd > .landingpage-section-content > p:eq(1)").html("Du möchtest als Autor starten? Wir freuen uns auf Dich:<br><a href=\"mailto:autor@ifrscharts.com?subject=Autor werden&amp;body=Hallo Autoren-Team, %0D%0A%0D%0Aich interessiere mich für eine Autorenschaft auf IFRSCharts.com. Bitte meldet Euch bei mir, um die nächsten Schritte abzustimmen! %0D%0A%0D%0AViele Grüße, [Vorname, Nachname]\">autor@ifrscharts.com</a>");
$(".crowd h3").html("Mache Dein Fachwissen sichtbar!");
$(".imac-background > .landingpage-section-content > p:eq(1)").html("Unsere Lösung? <br>Visuell vorstrukturierte Flowcharts mit direktem Zugriff auf relevante IFRS-Paragraphen: voll verlinkt, automatisch <br>&amp; schnell&nbsp;--- ohne den Überblick zu verlieren!");
$(".landingpage-testimonial-quote-small").css({"left":24, "top":13});
$(".media-object").css({"left":34, "top":12});
$(".landingpage > section:eq(0)").css({"width":1669, "height":688});
$(".landingpage > section:eq(0)").append("<div id=\"optimizely_583086322\">...</div>");
$("#optimizely_583086322").html("Demnächst ebenfalls direkt verfügbar: relevante Fachinhalte renommierter Verlage wie z.B.");
$("#optimizely_583086322").css({"font-size":"20px", "font-weight":"300"});
$("#optimizely_583086322").css({"position":"relative", "left":257, "top":47, "width":799, "height":30});
$(".landingpage > section:eq(0)").append("<div id=\"optimizely_813952801\">...</div>");
$("#optimizely_813952801").css({"font-weight":"300", "font-size":"20px"});
$("#optimizely_813952801").css({"position":"relative", "left":770, "top":53, "width":466, "height":30});
$("#optimizely_583086322").html("Demnächst");
$("#optimizely_583086322").css({"font-weight":"700"});
$("#optimizely_813952801").html("ebenfalls direkt eingebunden: relevante Fachinhalte renommierter Verlage wie z.B.");
$("#optimizely_813952801").css({"width":725, "height":30, "left":365, "top":17});
$("#optimizely_583086322").css({"width":111, "height":32, "left":263, "top":49});
$("#optimizely_813952801").css({"left":369, "top":17});
$(".landingpage > section:eq(0)").prepend("<img id=\"optimizely_846613639\" src=\"//cdn.optimizely.com/img/3210060410/1123963968ce43eea6893405acc12624.png\" />");
$("#optimizely_846613639").css({"position":"relative", "left":1177, "top":3});
$(".landingpage > section:eq(0)").prepend("<img id=\"optimizely_457819392\" src=\"//cdn.optimizely.com/img/3210060410/fb15c66c028a48d1b8959cb16ea50d1f.png\" />");
$("#optimizely_457819392").css({"position":"relative", "left":1094, "top":11});
$(".landingpage > section:eq(0)").prepend("<img id=\"optimizely_708999520\" src=\"//cdn.optimizely.com/img/3210060410/f378134b20a744d69ff351d7be2a6dbf.png\" />");
$("#optimizely_846613639").css({"left":282, "top":5});
$("#optimizely_457819392").css({"left":884, "top":26});
$("#optimizely_708999520").css({"position":"relative", "left":331, "top":2});
$(".landingpage > section:eq(0)").prepend("<img id=\"optimizely_811160561\" src=\"//cdn.optimizely.com/img/3210060410/21b152ba1d17480ea72398d2cf5e8134.png\" />");
$(".imac-animation").css({"position":"relative", "left":5, "top":-70});
$("#optimizely_811160561").css({"position":"relative", "left":1055, "top":475});
$("#optimizely_583086322").css({"left":266, "top":-51});
$("#optimizely_813952801").css({"left":374, "top":-83});
$("#optimizely_811160561").css({"left":266, "top":534});
$("#optimizely_708999520").css({"left":281, "top":532});
$("#optimizely_846613639").css({"left":-5, "top":532});
$("#optimizely_457819392").css({"left":570, "top":536});
$(".imac-animation").css({"left":9, "top":-138});
$("#optimizely_813952801").html("direkt eingebunden: relevante Fachinhalte renommierter Verlage wie z.B.");
$("#optimizely_583086322").css({"left":268, "top":-96});
$("#optimizely_813952801").css({"left":376, "top":-128});
$("#optimizely_811160561").css({"left":267, "top":489});
$("#optimizely_708999520").css({"left":281, "top":487});
$("#optimizely_846613639").css({"left":7, "top":487});
$("#optimizely_457819392").css({"left":622, "top":494});
$("#optimizely_811160561").css({"left":222, "top":489});
$("#optimizely_457819392").css({"left":544, "top":492});
$("#optimizely_708999520").css({"left":197, "top":489});
$("#optimizely_846613639").css({"left":-68, "top":489});
$("#optimizely_708999520").css({"left":218, "top":490});
$(".landingpage-testimonial-quote p").html("\"IFRSCharts.com ist eine große Hilfe, Problemstellungen strukturiert zu<br>lösen, ohne dass man sich durch Berge von Literatur wühlen muss.\"");
$(".landingpage-testimonial-quote-small").html("\"Gut aufbereitete Lerninhalte und Know-How unter Nutzung digitaler Technologien für den Wissensarbeiter von heute.\"\n<div class=\"landingpage-testimonial-quote-footer\"><cite title=\"Quelle\">Matthias Hornberger</cite> <a ng-href=\"http://www.kizoo.com\" target=\"_blank\" href=\"http://www.kizoo.com\"><em>Kizoo Technology Capital GmbH</em></a></div>\n");
$(".ppl p").html("Du suchst einen erfahrenen Kollegen, der Dir bei der Lösung einer Fachfrage hilft?<br><br>Kein Problem! <br>Zu jedem Flowchart kannst Du Fragen und Praxisfälle einstellen. Innerhalb kurzer Zeit unterstützen Dich erfahrene Kollegen. &nbsp;");
$(".landingpage").css({"position":"relative", "left":0, "top":0, "width":1671, "height":3258});
$(".landingpage-legal").css({"position":"relative", "left":5, "top":51});
$(".landingpages-accolades").css({"position":"relative", "left":-4, "top":34});
$(".test-now").html("Jetzt starten !");
$("#optimizely_528571427").css({"left":1428, "top":-162});
$("#optimizely_473151588").css({"left":1400, "top":-89});
$(".login-link").css({"left":431, "top":89});
$(".login-link").css({"left":431, "top":90});
$(".landingpage-test-now-footer").html("Kostenlos starten!");
Level 2

Re: My variation changes are not showing up in preview

Hey Oliver,

Looking at your code, there isn't one particular thing that stands out as an issue. However, There is a lot of redundant lines of code. It looks like a lot of CSS changes could be condensed, as you may edit an element once and then do it again later, for example here:
$(".login-link").css({"left":431, "top":89});
$(".login-link").css({"left":431, "top":90});

You just need the second line.

Granted you don't have a ton of code, this may or may not be the problem, as many people can still have their variation load with all those unnecessary changes. If you also want to send the preview link, I can see if it loads on my end.
-----

Daniel


Digital Marketing Manager - mindbodygreen
Optiverse User Group Leader - NYC

Re: My variation changes are not showing up in preview

Hi @OliverK,

 

I was able to take a look at your experiment and I do notice a couple of things.  It appears your site strips unknown or unexpected query parameters from the URL.  Since Preview Mode requires these to render each variation appropriately, if they are stripped, Preview Mode cannot render the desired variation.

 

I also noticed that as part of trying to render Preview, your site redirected me to a different page, /signup.  This may be due to the fact that we render preview via a proxy server, optimizelypreview.com.  If you haven't whitelisted this server to access your site, Preview is not likely to work.  If I simply try to append Preview's query parameters to your URL directly, they are stripped and Preview Mode hangs, as you saw.

 

Lastly, I noticed you have the Optimizely snippet installed in the body of your code.  We do recommend having the snippet installed as high as possible in the head tag to reduce page flashing and ensure features like the Visual Editor and Preview Mode work as expected.

 

It may be most beneficial to you to discuss some of these findings in detail 1-on-1 with one of our Technical Support Representatives.  You can reach them here.

 

Do these details help?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com