2K members online now
2K members online now
Learn how to create your first experiment and get tips on creating A/B, redirect, and multivariate tests.
Guide Me

How to Track a Banner Slider

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭


we have a Image Slider on our Start-Page, where we want to Test the different Images in the Slider.

Actually the Slider is like this:

Image 1 - Link 1

Image 2 - Link 2

Image 3 - Link 3

Image 4 - Link 4


We want to look, if the slider works better with other Images or other Sorting.

Like this:

Image 2 - Link 2 (Moved Element to another Position)

Image 5 - Link 5 (Complete new Image)

Image 1 - Link 1 (Maybe with a new Image but the Same Link)

Image 3 - Link 3 (Moved Element to another Position)


Is this possible with optimize?


If i edit the HTML Code the Slider breaks and is not working anymore.


Thank you for any help.

1 Expert replyverified_user

How to Track a Banner Slider

Google Employee
# 2
Google Employee

An idea could be to do smaller changes to the each individual image using the editor palette. That way you will not have side-effects with the js code that implements the slider (depending on the slider implementation).


Click on the first image and use the editor palette to change the image url.

Click on the related <a> link to change the target.

Use the editor "interactive mode" icon (top right) to switch to the next image and repeat.


If you want to reorder images try this:

- click one image and open the advanced selection dialog (top left before the hierarchy bar). Keep a note of the CSS selector

- Go to interactive mode and move to the other image.

- Go again to the "advanced selection dialog" and add a reorder change with the 2 CSS selectors.


Another very robust method to change image urls and link targets is with CSS selectors based on their current source and href.


For example:

Open the Advanced selection dialog and type a CSS selector like:

img[src='<original image url>']

Select an "attribute change" from the menu and change the src attribute to the new url.

Same for links but use "a" instead of "img" and "href" instead or "src".


How to Track a Banner Slider

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Thank you for your answer. That helped a little bit. In the preview it works like your desciped. I change a Image, go to interaktive mode, change the next and it works.


But if i save the changes and then start the test, go to my edited variant and select preview it still shows me the default view.


I asked in the software forums of the used software (Shopware). There it is, that the Emotion Elements like Sliders and so are loaded AFTER the page load. So is there anything i can to to get this working?

Marked as Best Answer.
Accepted by topic author Thomas S

How to Track a Banner Slider

Google Employee
# 4
Google Employee

You could possibly use activation events:




and trigger the experiment after the sliders have been loaded.


The simplest option is to check with the Shopware forum if its possible to run a little bit of javascript after the sliders have been loaded.


If its not possible you could perhaps use mutation observers to re-activate the experiment every time the page changes.




It may be simpler than what you think: just add an additional snippet that you can find on the article above and then enable activation in the experiment details page.


What will happen is that Optimize will retry to locate the elements every time the page changes.


But make sure you test things well.


How to Track a Banner Slider

Visitor ✭ ✭ ✭
# 5
Visitor ✭ ✭ ✭

That worked fine for me. The Event is now activated after the Slider is loaded.