Form Based Activities not rendering with "Apply Propositions"

Question

A form based activity was created which was available in the network response call but not on my website when I was using apply propositions . My apply propositions was implemented in the following manner : -

To make that available on the website , I have to explicitly add the following custom code

var prop = event.propositions.find(
p => p.scope === "appinstall-popup-mbox"
);
document.querySelector(
"#abc-membership > section > div > div"
).innerHTML =
prop.items[0].data. Content;

Is there any optimal way to do it or the reason why a seperate custom code is required.

Gokul_Agiwal · Accepted Answer

Hi​@AvaniJaIf I read your question again then you’re looking or asking forthe reason why a separate custom code is required in a form based activities.As per my understanding -Form-Based activities require explicit rendering logic when using custom scopes ( in your case it’s appinstall-popup-mbox) . so the behavior you're seeing is expected.The fact that the proposition is visible in the Edge Network response means Adobe Target has successfully qualified the visitor and returned the personalized content. The missing piece is the rendering step.With Web SDK, there is an important distinction between:Requesting propositions (sendEvent)Rendering propositions (applyPropositions or custom rendering)For propositions returned through a custom scope/mbox (for example, appinstall-popup-mbox), Web SDK does not automatically know where in the DOM the content should be placed. Therefore, even though the proposition is returned successfully, you must either:Map the content to a specific DOM element yourself (as you're doing now), orBuild custom rendering logic that processes the returned proposition and injects it into the appropriate component.So the custom code is not a workaround—it's typically required for Form-Based activities delivered through custom scopes.Let us know if you still have further questions.Hope this helpsThank you

Gokul_Agiwal · Answer

Hi ​@AvaniJaA key points from the documentation that explain your behavior:applyPropositions() is primarily used to render or re-render propositions and is especially useful in SPAs where content gets re-rendered. https://experienceleague.adobe.com/en/docs/experience-platform/collection/js/commands/applypropositionsPropositions explicitly requested through scopes/surfaces are not automatically rendered. You need to provide metadata (selector, actionType) or custom rendering logic to tell Web SDK where the content should be applied.https://experienceleague.adobe.com/en/docs/experience-platform/tags/extensions/client/web-sdk/actions/apply-propositionsThe metadata parameter supports:selectoractionType (setHtml, replaceHtml, appendHtml)allowing Web SDK to render HTML offers without manually manipulating the DOM.So in your case, the proposition was successfully returned in the network response, but because it was a form-based activity tied to a custom scope (appinstall-popup-mbox), Web SDK did not know where to place the content on the page.Your custom code effectively served as the renderer.You may be able to avoid custom DOM code by supplying proposition metadata when calling applyPropositions(), for example:alloy("applyPropositions", {  propositions: event.propositions,  metadata: {    "appinstall-popup-mbox": {      selector: "#abc-membership > section > div > div",      actionType: "setHtml"    }  }});Hope this helps.Thank you.

Sign up

Login with SSO

Login to the community

Login with SSO