[Beta]{class="badge informative" title="Deze functie bevindt zich momenteel in een beperkte bètaversie"}

Toepassingen met één pagina

Toepassingen van één pagina (SPAs) stellen unieke uitdagingen voor Webverpersoonlijking voor omdat zij dynamisch paginainhoud zonder volledige paginaherladingen bijwerken. Journey Optimizer B2B edition biedt speciale gereedschappen om SPA-personalisatie effectief af te handelen.

SPA's begrijpen

In tegenstelling tot traditionele websites van meerdere pagina's waar elke navigatie een volledige paginading teweegbrengt, gebruiken SPAs JavaScript om inhoud dynamisch bij te werken terwijl het handhaven van één enkele pagina van HTML. Deze benadering leidt tot verscheidene overwegingen voor Webervaringen:

SPA-ondersteuning configureren

Om SPAs effectief te personaliseren, moet u mening het volgen vormen zodat Journey Optimizer B2B edition kan identificeren wanneer de gebruikers tussen virtuele meningen navigeren.

Weergavedeclaraties instellen

Werk met uw ontwikkelingsteam om meningsverklaringen uit te voeren gebruikend het Web SDK van Adobe. Het gebruiken van deze meningsverklaringen impliceert het roepen van het sendEvent bevel met meningsinformatie wanneer SPA aan een nieuwe mening navigeert.

de implementatie van het Voorbeeld:

// When a new view is rendered in your SPA
alloy("sendEvent", {
  "xdm": {
    "web": {
      "webPageDetails": {
        "viewName": "product-detail",
        "URL": window.location.href
      }
    }
  },
  "data": {
    "__adobe": {
      "target": {
        "viewName": "product-detail"
      }
    }
  }
});

Naamgevingsconventies weergeven

Gebruik consistente, beschrijvende weergavenamen die overeenkomen met de logische structuur van uw toepassing:

Webervaringen voor SPA's maken

Wanneer het creëren van Webervaringen voor SPAs, overweeg de volgende beste praktijken:

Doelspecifieke weergaven

Dynamische inhoud afhandelen

SPAs laadt vaak dynamisch inhoud nadat de aanvankelijke pagina teruggeeft. Gebruik de volgende technieken om ervoor te zorgen dat de wijzigingen correct worden toegepast:

Afwachten op elementen

Vorm wijzigingen om op de doelelementen te wachten alvorens toe te passen:

Waarnemers voor mutaties gebruiken

Voor zeer dynamische inhoud, omvat het Web SDK ingebouwde veranderingswaarnemers die ontdekken wanneer de nieuwe elementen aan de pagina worden toegevoegd. Deze waarnemers zorgen ervoor dat de wijzigingen worden toegepast zelfs wanneer de elementen asynchroon worden geladen.

SPA-frameworks

Journey Optimizer B2B edition webervaringen werken met populaire SPA-frameworks:

Beste praktijken voor de verpersoonlijking van het KUUROORD

Stabiele kiezers gebruiken

SPAs produceert vaak dynamische klassennamen of IDs (vooral met CSS-in-JS oplossingen). U kunt ook het volgende gebruiken:

Voorbeeld:

<!-- Instead of targeting dynamic class names -->
<button class="css-1a2b3c4d">Sign Up</button>

<!-- Add a stable data attribute -->
<button class="css-1a2b3c4d" data-action="signup">Sign Up</button>

CSS selecteur: [data-action="signup"]

Weergaven testen

Bij het testen van SPA-webervaringen:

Weergaveovergangen voor handgrepen

Sommige SPAs gebruiken animaties of overgangen tussen meningen. Overweeg:

Problemen oplossen

Aangezien u de het ontwerpveranderingen van het SPA herzien, gebruik de volgende aanbevelingen om sommige gemeenschappelijke kwesties op te lossen:

Verwante onderwerpen