I have a question regarding Use Cases. With "Use Cases" I mean elements that appear on a page e.g. on a productdetailpage, but this element is sometimes different. For example it happens that productdetailpages have different sizes, or collors for the articels or sometimes a product description is very long and sometimes it's short. So It's the same element on the page, but nevertheless it differs. I hope you understand what I mean.
So, I would like to make an test on my productdetailpage, but in editor mode it loads only the version, when I haven't selected a size or collor. When I do QA, I see that my variant works only when I haven't choosen a size or collor in the dropdown menue, but when I choose it, then the default appears again, but the URL doesn't change when I choose it, so the Variant should be there if I have selected something and also when I haven't. So how can I include Use Cases and how can I edit them in Optimizely, it only loads the normal productdetailpage without any selections.
Thank you for your help.
@AG - The "problem" with using a WYSIWYG editor is that even though it works really well with static content, it does not handle dynamic pages or pages that are similar but have different content.
In yor cose, you are dealing with both issues:
1- the page is dynamic - when you click a swatch or select a size, the page changes and you need to make changes to the updated content.
This dynamic content could be the result of an AJAX request that manipulates the DOM, it may be the result of the page doing hide/show, or it could be the page using a template that exists on the page and populating it with the appropriate values.
2- the content you wish to modify is not consistent across each product-specific page that you wish to modify. Depending on what you are trying to do, you will need to make your code as dynamic as your pages.
In both cases, you will find that using the editor is probably not going to be able to give you the results you desire. If you want to make changes to the dynamic content on the page, you will need your developers to fire a "trigger" to let you know that the HTML is updated and then you can write your code to manipulate the new HTML.
It sounds like the thing that you are modifying is beign "re-set" when you do a size selection. In this case, you will need your devloperes to let you know (by adding a trigger) when the page is done re-setting the image so you can re-modify it back to what it should be based on the experiment. OR they need to let you know how to make it not re-set at all.
Here is an example of how to modify the page when it first loads and then to repeat the same modification whenever a trigger fires. In this example, we create a function that modifies the swatch by adding the class "bold" to it. Then we run that function so that we update the page when it first loads. Then we add the code that listens for a trigger so we can run that same modification again whenever the trigger fires.:
//the code that you want to run when the page loads
//the code that you want to run whenever you need to re-apply your experiment to the page
makeTheSwatchBold(); //call the function so that the initial page is altered
//call the function whenever the trigger "sizeUpdateComplete" runs
Analytics and Testing Guru
thank you very much for your quick reply.
So do you mean that the developers should include this trigger you mentioned in the code of the page (although the default "re-sets" correctly) or do you mean we should include this trigger only in our variant (by editing it in the variant code in the corner)?
Thank you and kind regards