Expand my Community achievements bar.

SOLVED

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

Avatar

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!

YuSheng910_5-1678878573637.png

 

Here are the things I've done.

1. Set XF cloud service property

YuSheng910_2-1678877937402.png

2. Export them onto AT Offers

YuSheng910_3-1678878080689.png

3. Replace content with XF

YuSheng910_4-1678878327322.png

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

 

 

Topics

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

View solution in original post

7 Replies

Avatar

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...

YuSheng910_0-1678884502760.png

Avatar

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.

Avatar

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. 

YuSheng910_0-1678960018528.png

 

Avatar

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.

Avatar

Correct answer by
Community Advisor

@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

Avatar

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.

 

Avatar

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?

 

Thanks!