Adobe Target + AEM Cloud: Best Approach for Scalable Homepage Personalisation

Hey there, let me know if you got any leads on that as I’m also curious to solve page rules based targeting for customers.

Hi ​@Prince_Shivhare 

Quick question -

• Is your site is SPA or Multi page site? and
• are you using below integration is that correct? https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/personalization/setup/integrate-adobe-target 
• Which client side approach you’ve implemented? I mean are you using at.js or websdk? 

If you could let me know so happy to share the approach I’ve implemented. 

Thanks

Hi ​@Prince_Shivhare 

1. Recommended overall pattern (SPA + AEM CS + Target)

From an Adobe best‑practice point of view, for a scalable homepage setup I'd avoid "DOM surgery" with custom JS and instead:

• Restructure the homepage into a few fixed "personalization slots" in AEM
• e.g. Hero, Primary promo band, Secondary tiles, Utility banner.
• Practically, this means: stop treating the homepage as a single mega layout container and introduce a few top‑level containers / components that map to those bands.
• Give each slot a stable hook (id, class, or data-at-slot="home-hero" etc.) so Target can reliably address it.

2. Model each slot's content as Experience Fragments (XFs)

• For each slot, create XF variations:
  • hero-default, hero-userTypeA, hero-userTypeB, hero-userTypeC, etc.
• Export these XFs from AEM to Target as offers and use them directly in Target activities.

3. Let Target choose which XF to show per audience

• In Target, create an Experience Targeting (XT) (or later Auto‑Target) activity per slot:
  • Audience "UserTypeA" >hero-userTypeA XF
  • Audience "UserTypeB" > hero-userTypeB XF
  • Audience "UserTypeC" > hero-userTypeC XF
  • Everyone else > hero-default XF
• This keeps layout & authoring in AEM, and decisioning & testing in Target, which scales much better than pushing everything into front‑end JS hacks.

2. Your four options – what to actually use

• mBox container for injection\
  • Yes, but not one mBox for the entire page.
  • Use at.js with one location per slot (hero, band, tiles) and target those via stable selectors.
  • This works well with XF offers exported from AEM.
• Custom JS to reorder components
  • I'd treat this as a last resort only.
  • On SPA, DOM‑reordering via JS is brittle, harder to maintain, and can cause flicker.
  • OK for one‑off experiments, but not as a general personalization strategy.
• Nested layout containers (split page into sections)
  • Yes to splitting into logical sections, no to deep nesting.
  • Use a small number of top‑level containers to represent your bands/slots.
  • Keep nesting shallow and avoid a single "god container" that holds the entire homepage.
• Converting sections/components into Experience Fragments
  • This is the recommended and supported pattern for AEM Sites + Target.
  • XFs + Target activities give you:
    • Clean authoring in AEM,
    • Reuse across pages/campaigns,
    • Easy A/B/XT/Auto‑Target on each slot.

3. SPA + at.js specifics (so VEC and page rules work)

Because this is an SPA with at.js:

• Make sure you're on at.js 2.x and implement adobe.target.triggerView('<viewName>'):
  • Call triggerView('home') on initial load of the homepage view.
  • Call triggerView('<otherView>') when routes change or major SPA views change.
• Then:
  • You can use SPA VEC with view‑based targeting rather than raw URL changes.
  • For "page rules‑based targeting", use:
    • View name (from triggerView) or
    • SPA‑friendly conditions (URL fragment, route, or data layer attributes) in your Target audiences/rules.

If you don't want to rely on VEC for SPA, another safe option is:

• Use Form‑Based Experience Composer in Target,
• Define locations by CSS selector for each slot,
• Attach the XF offers there. This is very stable for SPAs.

4. Three user types – content modelling

Your initial idea is exactly what I'd recommend:

• In AEM:
  • Create user‑type‑specific homepage content as XF variations per slot.
  • Place simple "Target containers" (or just standard components with stable selectors) in those slots.
• In Target:
  • Create audiences for the three user types (rules, profile attributes, or AEP segments if available).
  • For each slot, create one XT/Auto‑Target activity mapping:
    • UserTypeA > XF A
    • UserTypeB > XF B
    • UserTypeC > XF C
    • Fallback > default XF

This gives you a clean, maintainable setup and makes it easy to extend later (more segments, additional slots, etc.).

Do: Split the page into a few stable slots, use Experience Fragments exported to Target, one Target activity per slot, and triggerView for SPA views.

Avoid: Relying on heavy custom JS reordering as your main personalization mechanism.