Experience Fragment loading twice

[JyotiSharmaV]

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?

[Gokul_Agiwal]

Hi @JyotiSharmaV 

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

[JyotiSharmaV]

@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]

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

[JyotiSharmaV]

@Gokul_Agiwal 

I have figured out AEM is sending a lot of Jqueries libraries. Normally we see an <img> tag and then some divs. I am working with my IT team to check on XF expected structure & re-import the file in AEM as an HTML offer. I will post a solution asap we get to fix. 

[miahi]

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]

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

[nnakirikanti · Accepted solution]

@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/integra...

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