Testing Dynamic Pages
We're a holiday provider, ClickandGo.com.
We're having trouble using the URL targeting to test the dynamic pages of our website.
We have to load a dynamic page into Optimizely, in order to creat a variant. For instance:
We then use Simple Match URL targeting to apply the changes to all details pages - i.e.
How can we ensure the A/B test retains dynamically loaded elements, such as the price and images, but edit the template of the page?For instance, by removing the naviagtion from the payment page, without affecting the final price.
At the moment, the page loads a variant of whatever page we used to create the template, without editing the dynamic elements of the page - this obviously is not suitable as it takes to a completely different holiday from the one they were looking at.
Maybe I'm just being dumb, but any help on this would be much appreciated! If I could do this without developer support (I can do simple front end) that would be ideal.
Firstly, you'll want to use Substring Match instead of Simple Match. With the former, you'll match any URL that contains www.clickandgo.com/design-your-own-holiday/details.
Then even though you have to load a specific page into the editor (eg, www.clickandgo.com/design-your-own-holiday/details
Now onto the editing part... It helps to understand how Optimizely experiments work. Here's a simplified version:
- Every change you make in the Optimizely editor is translated into code. You can see (and edit) this code by clicking "Edit Code." For example, when you remove an element, this line gets added to the experiment code:
- When a visitor loads a page with the experiment, everything loads as usual, including all the dynamic elements... BUT
- The Optimizely script runs the experiment code. Whatever elements (#element, in this example) are affected by the code get changed at this moment.
So if something was not edited in the experiment, then it should not be affected by Optimizely. All your dynamic content should still work.
Now with all that said, using the visual editor to make changes can some times result in issues, because when it gets translated into code it may not be exactly the way you'd want. This is why you should always preview and test the experiments before launching them.
@greg totally hit the nail on the head here. Optimizely loads the page into the editor in it's current session based state. This is why you see one specific price. However, when the experiment runs live on the page, it will only change the elements you specifically updated.
So in your example, the nav will be removed, but all other elements will work as they normally do.
When testing on pages with dynamic elements, just be careful not to use large "Edit HTML" changes. This could cause you to run into issues where you overwrite the dynamic functionality. You can find details on this here. Feel free to make styling changes using the visual editor. Styling will not change the logic for dynamic elements. Feel free to reach out to us here if you want to do something more complex than that.
Also, you should check out this QA checklist too.