Custom component that works in QA but not in Live

[KaterineRiera]

Hello everybody,

I have customised a space that appears in the submenu when you mouse over the main menu. Everything seems to be working fine, in the QA this customisation is perfectly visible. But when I activate this activity, the customisation is not visible.

I've tried with simple components like text or moving the submenu content itself but no change seems to apply. I work in production environment so these changes should be visible quickly.

I attach some screenshots of the QA version and the production version.

Has anyone had this happen with a component, could it be related to it being a non-fixed component?

Live 

QA

Thanks in advance,

Best regards,

[Perrin_Ennen]

Hi @KaterineRiera,
first of all I would check if Target on Prod is implemented or loaded at all.

For this you can e.g. look in the browser dev tools under the network tab - and filter for "delivery" (at.js 2.x) or "mbox" (at.js 1.x) and reload the page. There should be at least one request here. Alternatively, simply enter adobe.target in the console - this should exist.

If this is the case, have a look in the console to see if there are errors that belong to the activity - and only appear when the activity is live.

If all this is correct. There is probably something wrong with the activity. E.g. timing, or selectors that do not yet exist when the activity is executed.

Maybe you can give feedback where it already doesn't work?

[KaterineRiera]

Hi @perrin_ennen 

Thank you very much for your help,
I have debugged the page and I can see that Target on Prod is implemented or loaded at all, but I have more than one activity activated, namely recommendations.
But I have more than one activated activity, specifically recommendations. How can I identify what is the error in my last personalisation that is not appearing?

I don't see the name of any of my activities in the Console.

Could you explain me how to identify the Adobe Target activities in the debugger?

Thanks in advance,

Regards,

[Perrin_Ennen]

Hi @KaterineRiera,

In the network tab you currently have a delivery request. Here you can switch to Preview instead of Payload, for example. Then open execute > payLoad > options. Several objects can appear here. You can expand these objects individually and in each case also the ResponseTokes - here you see e.g. activity.name - and so you can see which activity does what here in the respective request.

This way you can find out what activity is on the page.

You can also click in the Target UI in the respective activity not on Edit Activity - but select the tab Collisions at the top Here you can also see which activities could possibly collide.

This can help you to understand which activities are currently displayed on the respective pages.

[KaterineRiera]

Hi @Perrin_Ennen,

Thank you very much for your help,

I found the experience that is not displayed. But I can't identify what the problem is, could you give me a hand with this?

Thanks in advance,

Best regards,

[Perrin_Ennen]

Hi @KaterineRiera,
it is probably your selector. On the page https://madrid.shopdutyfree.com/es/ - I find only the id brand-boutique-menu-635a91ce3e3b5 in the source code. But your ID ends on ..97d1c - this will probably be a problem.

[KaterineRiera]

Hi @Perrin_Ennen,

Thank you for your response,

So, the component is not displayed because these IDs do not match? I don't understand the reason because this component "boutique menu" comes from one of our websites so it is not an unknown component.

If you have any other comments that can help us, I would appreciate it very much.

Thanks again

Best regards,

[Perrin_Ennen · Accepted solution]

Yes exactly, the ID of the component seems to change more often. Currently the ID looks like this: brand-boutique-menu-635da8321f33d - meaning the number at the end - changes often. Therefore this selector is less suitable.
I don't know how the code of the activity is structured. If e.g. the VEC was used as composer or form based.

Is e.g. Ffrm based used and the selector retrieved via JS. This can be queried e.g. with document.querySelector('[id^="brand-boutique-menu-"]');. Here we only check if the selector starts with brand-boutique-menu-.