Experience Fragment loading twice | Community
Skip to main content
JyotiSharmaV
New Participant
April 25, 2024
Solved

Experience Fragment loading twice

  • April 25, 2024
  • 3 replies
  • 1680 views

I have a promotion banner that we want to inject into the page. We have created an experience fragment of that and I am doing it via the option:

Insert After -> Experience Fragment 

 

I have checked the CSS and it has no padding at all. Our CSS is managed dynamically not manually.

The Experience I'm Target Activity QA link is loading the banner twice or sometimes there is a space and then at the end banner is coming. On page inspection I have noticed the banner's container is getting added twice. Any idea why this is happening?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by nnakirikanti

@jyotisharmav As per your implementation I envision you to look at two aspects to resolve your issue.

 

#1 Verify AEM Exported XF to Adobe Target contains only the banner div structure expected (exported fragment should not contains head,body and unnecessary div's) , if this is not the case please work with your team to customize XF template by a concept called sling overlay, for you to verify that only needed banner component block is exported, use the XF page path with these "nocloudconfigs.atoffer" and check the page view source to verify that only required markup generated by AEM for XF export to Adobe Target.

More Details: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/integration/experience-fragments-target

 

#2 Check the CSS selector VEC picked with in-context editing or by custom authoring in VEC should be unique, internally at.js uses querySelectorAll() method to replace all possible HTML elements selected.

 

If this site is publicly available do DM me for better help.  

 

~cheers,

NN.

3 replies

nnakirikanti
nnakirikantiAccepted solution
New Participant
April 29, 2024

@jyotisharmav As per your implementation I envision you to look at two aspects to resolve your issue.

 

#1 Verify AEM Exported XF to Adobe Target contains only the banner div structure expected (exported fragment should not contains head,body and unnecessary div's) , if this is not the case please work with your team to customize XF template by a concept called sling overlay, for you to verify that only needed banner component block is exported, use the XF page path with these "nocloudconfigs.atoffer" and check the page view source to verify that only required markup generated by AEM for XF export to Adobe Target.

More Details: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/integration/experience-fragments-target

 

#2 Check the CSS selector VEC picked with in-context editing or by custom authoring in VEC should be unique, internally at.js uses querySelectorAll() method to replace all possible HTML elements selected.

 

If this site is publicly available do DM me for better help.  

 

~cheers,

NN.

miahi
New Participant
April 29, 2024

Hello @jyotisharmav,

Are you using the Adobe Target VEC Helper Extension?

 

I'm facing the same issue as you whenever I have the extension turned on.

The solution was to test the QA URL in incognito mode, in another browser, or on mobile. In edge cases, I even push the activity live with a very specific audience that only applies to me.

JyotiSharmaV
New Participant
April 29, 2024

Yes, I always check everything in Incognito however problem is something with XF that is something looks like

Gokul_Agiwal
New Participant
April 26, 2024

Hi @jyotisharmav 

Did you check Experience Fragment separately in AEM environment itself before adding into Target?  Sometimes the issues at XF level only. 

JyotiSharmaV
New Participant
April 29, 2024

@gokul_agiwal Yes, I did check our XF with my IT and it looks good to us. Even though we had a background container that was adding additional space we removed it and made the banner two ways:

1) full content width as well as 2) full bleed however the XF is not coming up as required. Either the banner is bleeding end to end on the page or coming still twice.

 

I am concerned, about how I can best fit the XF on the page in the center with margins on both ends. I am not replacing any existing banner with XF fragment banner of the same size. However, I am trying to insert an XF banner on a page that I am not sure if is interfering with the surrounding DIVs on the page. What could be the best approach?

Gokul_Agiwal
New Participant
May 2, 2024

Hi @jyotisharmav - Is this issues resolved? if no, do you have a URL to check, if its DM me and will have a look.