How to a/b test between pages that open in an iframe within a lightbox
We want to compare some changes between our product detail pages on our ecommerce site.
The thing is, our product detail pages open up in an iframe inside a lightbox and the URL in the address bar doesn't change to the product detail page URL when this happens. The URL is present in the html in the src element within the iframe tag though.
So it doesn't look like a standard experiment URL comparison will work.
Is there anyway we can achieve a/b testing like this when the URL we want to test isn't present in the address bar but is present inside the html itself?
Any help would be appreciated.
There are a few options, depending on what parts of the page you want to change.
If you're just changing the content of the iframe, the easiest solution is to add the Optimizely snippet to the pages in the iFrame and then put the URL of the iFrame into the editor. You can then run the test on the iFrame area only.
Alternatively, the best approach would be to change the code which triggers the lightbox to direct it to a different iFrame. This would be done through <Edit Code> rather than the editor.
I think I just about grasp what you are looking to do.
If you know the URL that is used in the iFrame then this is the URL that you need to put into the Optimizely experiment as the test URL. You will need to make sure that Optimizely code is present on both the original URL and the URL used in the iFrame so that Optimizely can fire when the content is called by the iFrame.
Hopefully that answers your query if I understand it correctly. Alternatively feel free to message me with your URL and I can take a look at your options.
I've got this working now by adding the snippet to the template that contains the iframe code for the prod detail page and added the URL to the experiment as suggested.