Expand my Community achievements bar.

Join us for an upcoming in-person Adobe Target Skill Builders event ~~> We're hosting these live learning opportunities to equip you with the knowledge and skills to leverage Target successfully. Learn more to see if we'll be coming to a city near you!
SOLVED

ReactJS and Chakra UI with Target

Avatar

Level 2

We have a web app built in ReactJS and Chakra UI.  Normally, we'd use Target to modify or manipulate elements in the DOM:

  • <div class="this-is-easy-to-target">Hello</div>

but Chakra classnames and styles are all generated on the fly, so they won't always be the same:

  • <div class="chakra-css-675Fhd9">Hello</div>

We could use other selectors, but it's quite complicated and would like a more robust way of running A/B tests on this platform.  I guess I'm asking for some advice on how we can use Target to run AB and MVT tests on a REACTJS platform I think using JSON format?!

Can anyone provide either some thoughts, links etc?

Thankyou!!

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @andywoodrow 

I have work with ReactJS integrating target but not used Chakra UI as of yet however I can see there are some ways you can try out and target the specific selector for AB / MVT test. Just like 

1) Override the chakra class name with custom name

2) used the react component name as class name 

3) Used babel plugin in your build process name as babel-plugin-react-remove -classname

Here are the links ( Seems long read - sorry) 

 

https://stackoverflow.com/questions/73073413/how-to-override-chakra-ui-or-emotion-css-in-js-styling-...

https://github.com/emotion-js/emotion/issues/2037

 

https://github.com/chakra-ui/chakra-ui/issues/682

https://github.com/chakra-ui/chakra-ui/issues/211

https://github.com/chakra-ui/chakra-ui/issues/2685

https://github.com/chakra-ui/chakra-ui/issues/2229

Hope this helps. 

 

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hello @andywoodrow 

I have work with ReactJS integrating target but not used Chakra UI as of yet however I can see there are some ways you can try out and target the specific selector for AB / MVT test. Just like 

1) Override the chakra class name with custom name

2) used the react component name as class name 

3) Used babel plugin in your build process name as babel-plugin-react-remove -classname

Here are the links ( Seems long read - sorry) 

 

https://stackoverflow.com/questions/73073413/how-to-override-chakra-ui-or-emotion-css-in-js-styling-...

https://github.com/emotion-js/emotion/issues/2037

 

https://github.com/chakra-ui/chakra-ui/issues/682

https://github.com/chakra-ui/chakra-ui/issues/211

https://github.com/chakra-ui/chakra-ui/issues/2685

https://github.com/chakra-ui/chakra-ui/issues/2229

Hope this helps.