Toepassingen van één pagina implementeren (SPA) web-spa-implementation

Adobe Experience Platform Web SDK verstrekt rijke eigenschappen die uw zaken uitrusten om verpersoonlijking op volgende-generatie, cliënt-zijtechnologieën, zoals single-page toepassingen (SPA) uit te voeren.

Traditionele websites werken met navigatiemodellen "van pagina tot pagina", ook wel bekend als toepassingen met meerdere pagina's, waarbij websiteontwerpen nauw aan URL's zijn gekoppeld en voor overgangen van de ene webpagina naar de andere een pagina moet worden geladen.

De moderne Webtoepassingen, zoals enig-paginatoepassingen (SPA), hebben in plaats daarvan een model aangenomen dat snel gebruik van browser UI teruggeeft, die vaak van paginaatherladingen onafhankelijk is. Deze ervaringen kunnen door klanteninteractie, zoals rollen, klikken, en curseurbewegingen worden teweeggebracht. Naarmate de paradigma's van het moderne web zijn geëvolueerd, werkt de relevantie van traditionele generieke gebeurtenissen, zoals het laden van een pagina, voor het implementeren van personalisatie en experimenten niet meer.

Voordelen van het gebruik van Web SDK voor SPA web-spa-benefits

Hier zijn sommige voordelen om SDK van het Web voor uw enig-paginatoepassingen te gebruiken:

XDM-weergaven en toepassingen van één pagina web-spa-xdm

De Journey Optimizer-webeditor maakt gebruik van een concept dat views.

Weergaven zijn een logische groep visuele elementen die samen een SPA ervaring vormen. Een toepassing van één pagina kan daarom worden beschouwd als een overgang door meningen, in plaats van URLs, die op gebruikersinteractie wordt gebaseerd. Een weergave kan doorgaans een hele site, een enkele pagina of gegroepeerde visuele elementen op een pagina vertegenwoordigen.

In het volgende voorbeeld wordt een hypothetische online e-commercesite gebruikt om nader uit te leggen welke weergaven er zijn.

Het concept van de standpunten kan veel verder worden uitgebreid. Dit zijn slechts een paar voorbeelden van weergaven die op een site kunnen worden gedefinieerd.

XDM-weergaven implementeren implement-xdm-views

XDM-weergaven kunnen in Adobe Journey Optimizer worden gebruikt om marketers in staat te stellen via de visuele editor van Journey Optimizer webpersonalisatie- en experimentatiecampagnes uit te voeren op SPA.

Hiervoor moeten de volgende stappen worden uitgevoerd om een eenmalige ontwikkelaarsinstelling te voltooien:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});

sendEvent() functievoorbeelden

Deze sectie schetst twee voorbeelden die tonen hoe te om te roepen sendEvent() in React voor een hypothetische e-commerce SPA.

Voorbeeld 1: Introductiepagina A/B-test web-spa-sample-1

Het marketing team wil tests A/B op de volledige homepage in werking stellen.

A/B-tests uitvoeren op de hele thuislocatie, sendEvent() moet worden aangeroepen met de XDM viewName instellen op home:

function onViewChange() {

  var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

  viewName = viewName || 'home'; // view name cannot be empty

  // Sanitize viewName to get rid of any trailing symbols derived from URL

  if (viewName.startsWith('#') || viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }

  alloy("sendEvent", {
    "renderDecisions": true,

    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Voorbeeld 2: Persoonlijke producten web-spa-sample-2

Het marketingteam wil de tweede rij producten aanpassen door de kleur van het prijsetiket in rood te veranderen nadat een gebruiker klikt om alle producten van Men te zien.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</button>
        );
    }

    handleLoadMoreClicked() {
        var page = this.state.page + 1; // assuming page number is derived from component's state
        this.setState({
            page: page
        });
        onViewChange('PRODUCTS-PAGE-' + page);
    }
}