Rich-text Reply

Can I target /change elements using data attributes?

RitchP 02-01-17
Accepted Solution

Can I target /change elements using data attributes?



I'm trying to set up an experiment on the frontpage of one of our websites. The frontpage has a carousel transitioning through three images. There is a <H1> tag present on all three slides, which doesn't transition. There is also an <h2> sub heading which fires after each image has finished transitioning. 


The purpose of the experiment is to change the <h2> sub headings on each image. 


Here is the code snippet:


<h2 class="hero-banner__sub-title" data-slide-headings="{&quot;slide-0&quot;: &quot;Text for slide 0.&quot;, &quot;slide-1&quot;: &quot;Text for slide 1.&quot;, &quot;slide-2&quot;: &quot;Text for slide 2.&quot;}" style="opacity: 1;">Text for slide 0</h2>

I'm thinking that I should be able to target the data-slide-headings attribute, but I don't know the syntax for amending the text thereafter (being 'Text for slide 0', 'Text for slide 1' etc.). 


Does anyone have any insight?



Do, or do not. There is no try.
Level 2

Re: Can I target /change elements using data attributes?

[ Edited ]

As I understood you want to replace the <h2> text in the variation.
So, first, you need to create the variant in the settings tab, then just change the text with the code editor
(html, css or javascript or whatever)

Wich version of Optimizely are you using (Optimizely X or Classic)?

For Optimizely X

For Optimizely Classic

Remember If your variation code exceeds 200 lines, consider creating a redirect test or minifying your code instead

So for me redirect is always a best solution

SEM and CRO Specialist
RitchP 02-02-17

Re: Can I target /change elements using data attributes?

Hi Roman,

Thank you for taking the time to reply.

That's certainly the rational/ obvious approach. Unfortunately when I tried this, the altered text appeared on all three slides, not just the slide I was editing. And, once the carousel had completed one full rotation, the text reverted back to the original.

I think I need to be targeting the data attribute so that the text for each slide is amended as per the brief I've been given but am unsure of the syntax. I'll keep playing around with the console and will post any results here in case someone else has a similar issue down the line.
Do, or do not. There is no try.
Level 2
JasonDahlin 02-02-17

Re: Can I target /change elements using data attributes?

Hi @RitchP - it sounds like you have 2 issues.  If you can share the URL of the carousel in question, it'd be much easier to diagnose the issue and provide a path towards solving these issues.

1- The CSS path you are using is not stating *which* carousel item you want altered, so it is updating all of them

2- The carousel on your page is using something other than the items you are altering to create the slides and going "back to source" when it starts over


The first issue is usually addressed by doing like:

$('h2:eq(0)').html('your html for the first h2 here');
$('h2:eq(1)').html('your html for the second h2 here');

However, based on your second issue, rather than updating only the H2s in the carousel, you may need to update the "srouce material" also.  for example, if using a slider that uses a set of <li> that it turns into the items that become the carousel and when it reaches all the way through, it recreates them from the original <li>.

--Jason Dahlin
Analytics and Testing Guru Smiley Happy
Experimentation Hero
robertchan 02-03-17

Re: Can I target /change elements using data attributes?

I agree with @JasonDahlin and his approach. Another way you could go about this would be using jQuery's contains feature. Less stable, but more targeted. You could do something like the following:

$('h2:contains('Whatever Text a Particular H2 contains')').html('New Text');
Robert Chan

Experimentation Hero
RitchP 02-06-17

Re: Can I target /change elements using data attributes?

@robertchan & @JasonDahlin

Thank you both for taking the time to respond to my query - I'm gradually getting 'there' with it and your support has given me a real boost. Thankyou!


I'll post the solution as soon as I've ironed out a couple of bugs :-D

Do, or do not. There is no try.
Level 2