Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

The 1st edition of the Target Community Lens newsletter is out now! Click to the right to find all the latest updates

Experience Fragment (contains React component) exported to target lost its initial html


Level 2

Dear community,


I'd like to use AT A/B test on my SPA page by replacing experience fragment. But after replacing content with experience fragment exported to AT Offer. The block goes blank since the html of XF offer has become the <head> content instead of its original html. Does anyone know how to deal with this issue?

Thanks in advance!



Here are the things I've done.

1. Set XF cloud service property


2. Export them onto AT Offers


3. Replace content with XF


Then I got a blank block since the html is not the content I put in XF.




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

7 Replies


Level 2

Issue update:

I've check if I put pure core component (text) into XF, it works fine, but if I put react component (generated in ui.frontend) the issue come up again.

I've tried imported @adobe/target-react-component in my react component and enclosed the html with <Target> , the issue remains...



Community Advisor

Hi @YuSheng910,
you could create a form based activity in the Target UI - and select the XF in the content accordingly. That will show you a preview of the code here. Here it would be interesting to know if the corresponding code part is still in there or already missing.


Level 2

Thanks for the input,

I checked it and the html is already missing in the content, it should have been enclosed by the div in line24. 




Community Advisor

If you go to your XF under Offers and open the link of the View Offer Content path? Is the code still in there in the source code? In the link, you may need to replace http://localhost:4503 with the corresponding domain.


Level 3

@Perrin_Ennen  @YuSheng910 here you need to understand server side rendering vs client side rendering.

Server side traditional AEM with Sightly/JSP : while exporting the fragment server side rendered code is exported to target (think like a view source of Experience Fragment page aka html delivered from server).

React based AEM implementation: while exporting the fragment in this case would export server side render code which will html, head, body, wrapper containers (to confirm check view source of Experience Fragment page and you will find the same markup).

I fear that this will not work: thinking .....  becoz AEM SPA loads components( markup using page json) on client side based on AEM Page model json structure and Adobe target load/replace this as a html markup to be rendered on client side. React framework no way to know the URL , load json and  trigger render.


This may be feature to be enhanced, reach Adobe


Community Advisor

Yes I assumed the classic client side rendering.

It depends strongly on how the component is built. What the component can do to handle changes.
I know approaches that we read configurations of a component from the XF - and overwrite them on the page and force the component to update - and thereby e.g. shows other products or displays differently.

But of course there are many more approaches / possibilities.



Level 2

Hello @Perrin_Ennen


You've mentioned that there are approaches to read configurations of a component from the XF - and overwrite them on the page and force the component to update. I'd like to ask if you can share more details regarding these approaches?


Since the original content alreay lost in offer content, should these approaches be applied as the XF exported to target on AEM server?



The ultimate experience is back.

Join us in Vegas to build skills, learn from the world's top brands, and be inspired.

Register Now