Rich-text Reply

How to set Click Tracking Goal and change image for image carousel

Eddardstark87 05-25-16
Accepted Solution

How to set Click Tracking Goal and change image for image carousel

Hi,

 

I am trying to test the effectiveness of different banner styles on our home page carousel. I experience 2 issues:

 

1) Unable to change image through visual editor

I click on the image and upload a new one sucessfully but the new image won't show. I assume I am not uploading the image to the right container. Is it possible to do this via Visual Editor or I need to edit the code directly? If the latter, how can this be done?

 

2) Unable to set click goal through visual editor

When clicking on the carousel and trying to set the click goal, the carousel itself disappears when the window opens for me to select the different click target, so I am unable to click on the right object. Is it possible to do this via Visual Editor or I need to edit the code directly? If the latter, how can this be done?

 

Thank you!

 

robertchan 05-25-16
 

Re: How to set Click Tracking Goal and change image for image carousel

1) Assuming the Visual Editor is not working as expected, you can edit the code directly doing something like this:

$("#your-original-image-id").attr('src', 'path/to/your-new-image.jpg');

2) Likewise, if you're unable to track using the Visual Editor, find the selector for your carousel and add a custom click event goal by clicking on goals then going to advanced and putting in your carousel selector (e.g. #my-image).

Robert Chan

Experimentation Hero

Re: How to set Click Tracking Goal and change image for image carousel

Thank you for swift reply Robertchan.

I have tried the suggested solution in Javascript but don't ge the desired result. I am pasting below the HTML code for the carousel. The image to be substituted appears 3 times (not only in connection with src=).

I have also tried to substitute the image url directly in the 3 parts of the HTML code. The image loads correctly on the Editor but doesn't change in Preview Mode.

The url of the target image is 

//cdn.optimizely.com/img/5829860657/4e163e52bbb042b4ad03b27088e41ea7.jpg

Any additional suggestion?

 

Thanks a lot for your help.

 

Lorenzo

 

 

<div class="billboards" data-loop="" data-per-page="1" id="carousel">
<div class="billboards_carousel">
<div class="container">
<div class="carousel_viewport">
<ul style="left: 0px;">
<li class="carousel_item">
<a data-image="http://s1.lximg.com/images/billboards/3New_Private_Sale_May_29_BB_STARTNOW_AU_61f9b8ac504ea7ad905862... href="/categories/makeup?aaidi=2239&amp;acidi=534"><img alt_text="Take 20% Off Everything: Sephora Private Sale Starts now through May 29. Black Card Members Exclusive, use code SECRETBC at checkout. " data-image-url="http://s0.lximg.com/images/billboards/3New_Private_Sale_May_29_BB_STARTNOW_AU_61f9b8ac504ea7ad905862... src="http://s0.lximg.com/images/billboards/3New_Private_Sale_May_29_BB_STARTNOW_AU_61f9b8ac504ea7ad905862...>
</a><button name="button" type="button" class="billboard_terms_and_conditions_button" data-billboard-type="primary_billboard_3" data-top="360" data-left="510" style="top: -40px; left: 510px; display: inline-block;">Terms &amp; Conditions</button>
<div class="billboard_terms_and_conditions hidden" id="primary_billboard_3">
<h2 class="bold">Terms &amp; Conditions</h2>
<div class="thin_horizontal_line"></div>

<p class="bold">Terms and Conditions:</p>
<div class="markdown">
<p>*For Black Card members only. Sale offer is valid from May 26, 2016 to May 29, 2016 on the total amount of your purchase (excluding possible costs of delivery) made on www.sephora.com.au (12am AEST - 11:59pm AEST) and at Sephora Australia stores (during store opening hours). For online purchase, you must be signed into your account and enter the promotional code SECRETBC. For in-store purchase, present this email or your Black Card at cashier. Offer is not valid with other discounts and promotions. Offer is not valid on gift cards, services, charitable items or any other exclusions mentioned in-store and/or on www.sephora.com.au.</p>

</div>
<div class="clear_float"></div>
<a class="continue_shopping" href="/categories/makeup?aaidi=2239&amp;acidi=534">Continue Shopping</a>
</div>

</li>
</ul>
</div>
</div>
</div>
</div>

robertchan 05-26-16
 

Re: How to set Click Tracking Goal and change image for image carousel

It is hard to determine what the issue is based on what you pasted and mentioned - have you tried using data-image-url instead of src in the code I provided?
Robert Chan

Experimentation Hero

Re: How to set Click Tracking Goal and change image for image carousel

Hi Robertchan,

 

I managed to obtain the desired result by replacing the new image URL directly. I think I had done the same before but I might have made some mistake.

 

On the goal setting, your suggestion worked.

 

Thanks!