Implementatie van één pagina

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

Traditionele websites werkten aan navigatiemodellen "van pagina tot pagina", ook wel bekend als Toepassingen van meerdere pagina's, waarbij websiteontwerpen nauw gekoppeld waren aan URL's en overgangen van de ene webpagina naar de andere een pagina moesten laden.

De moderne Webtoepassingen, zoals enig-paginatoepassingen, hebben in plaats daarvan een model aangenomen dat snel gebruik van browser UI teruggeeft, die vaak onafhankelijk van paginaherladingen 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 Platform Web SDK voor SPA

Hier volgen enkele voordelen van Adobe Experience Platform Web SDK voor uw single-page toepassingen:

XDM-weergaven en toepassingen van één pagina

Adobe Target VEC for SPA maakt gebruik van een concept genaamd Views: een logische groep visuele elementen die samen een SPA ervaring vormen. Een toepassing van één pagina kan daarom worden beschouwd als het overgaan door Meningen, in plaats van URLs, die op gebruikersinteractie wordt gebaseerd. Een weergave kan doorgaans een hele site of gegroepeerde visuele elementen binnen een site vertegenwoordigen.

Om verder uit te leggen welke Weergaven zijn, gebruikt het volgende voorbeeld een hypothetische online e-commercesite die in React wordt uitgevoerd om voorbeeldweergaven te onderzoeken.

Na het navigeren naar de thuissite bevordert een hoofdafbeelding een paasverkoop en de nieuwste producten die op de site beschikbaar zijn. In dit geval kan een weergave worden gedefinieerd voor het gehele beginscherm. Deze weergave kan gewoon 'thuis' worden genoemd.

Aangezien de klant meer in de producten wordt geinteresseerd die de zaken verkopen, besluiten zij om te klikken Producten koppeling. Net als op de thuissite kan de hele productsite worden gedefinieerd als een weergave. Deze weergave kan de naam "products-all" hebben.

Aangezien een Mening als volledige plaats of een groep visuele elementen op een plaats kan worden bepaald, zouden de vier producten die op de productplaats worden getoond als Mening kunnen worden gegroepeerd en worden beschouwd. Deze weergave kan 'producten' worden genoemd.

Wanneer de klant besluit op de knop Meer laden als u meer producten op de site wilt verkennen, verandert de URL van de website in dit geval niet, maar u kunt hier een weergave maken die alleen de tweede rij producten vertegenwoordigt die wordt weergegeven. De weergavenaam kan 'products-page-2' zijn.

De klant besluit een paar producten van de site te kopen en gaat verder naar het uitcheckscherm. Op de uitchecksite krijgt de klant opties om normale levering of expreslevering te kiezen. Een weergave kan uit elke groep visuele elementen op een site bestaan. Een weergave kan dus worden gemaakt voor leveringsvoorkeuren en "Leveringsvoorkeuren" worden genoemd.

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

XDM-weergaven implementeren

XDM-weergaven kunnen in Adobe Target worden gebruikt om marketers in staat te stellen A/B- en XT-tests uit te voeren op SPA via Visual Experience Composer. Hiervoor moeten de volgende stappen worden uitgevoerd om een eenmalige ontwikkelaarsinstelling te voltooien:

sendEvent() functievoorbeelden

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

Voorbeeld 1: Introductiepagina A/B-test

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

Het marketingteam wil de tweede rij producten personaliseren door de kleur van het prijslabel in rood te wijzigen nadat de gebruiker heeft geklikt Meer laden.

function onViewChange(viewName) {

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

class Products extends Component {

  render() {
    return (
      <button type="button" onClick={this.handleLoadMoreClicked}>Load more</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);
  }

}

Voorbeeld 3: Voorkeuren voor de aflevering van een A/B-test

Het marketingteam wil een A/B-test uitvoeren om te zien of de kleur van de knop verandert van blauw in rood wanneer Expreslevering is geselecteerd, kan conversies stimuleren (in tegenstelling tot het blauw houden van de knopkleur voor beide leveringsopties).

Als u de inhoud op de site wilt aanpassen, afhankelijk van de gekozen leveringsvoorkeur, kunt u een weergave maken voor elke leveringsvoorkeur. Wanneer Normale levering is geselecteerd, kan de Mening "controle-normaal"worden genoemd. Indien Expreslevering is geselecteerd, kan de Mening "checkout-express"worden genoemd.

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

class Checkout extends Component {

  render() {
    return (
      <div onChange={this.onDeliveryPreferenceChanged}>
        <label>
          <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
          <span> Normal Delivery (7-10 business days)</span>
        </label>
        <label>
          <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
          <span> Express Delivery* (2-3 business days)</span>
        </label>
      </div>
    );
  }

  onDeliveryPreferenceChanged(evt) {
    var selectedPreferenceValue = evt.target.value;
    onViewChange(selectedPreferenceValue);
  }

}

Het gebruiken van Visual Experience Composer voor een SPA

Als u klaar bent met het definiëren van uw XDM-weergaven en deze hebt geïmplementeerd sendEvent() met die Meningen XDM binnen worden overgegaan, zal VEC deze Meningen kunnen ontdekken en gebruikers toestaan om acties en wijzigingen voor A/B of XT activiteiten tot stand te brengen.

Deelvenster Wijzigingen

In het deelvenster Wijzigingen worden de acties vastgelegd die voor een bepaalde weergave zijn gemaakt. Alle acties voor een weergave worden gegroepeerd onder die weergave.

Acties

Wanneer u op een handeling klikt, wordt het element op de site gemarkeerd waarop deze handeling wordt toegepast. Elke VEC-actie die onder een Weergave wordt gemaakt, heeft de volgende pictogrammen: Informatie, Bewerken, Klonen, Verplaatsen, en Verwijderen. Deze pictogrammen worden nader toegelicht in de onderstaande tabel.

VEC gebruiken voor SPA voorbeelden

Deze sectie schetst drie voorbeelden om de Visuele Composer van de Ervaring te gebruiken om acties en wijzigingen voor A/B of XT activiteiten tot stand te brengen.

Voorbeeld 1: "home"-weergave bijwerken

Eerder in dit document is een weergave met de naam "home" gedefinieerd voor de gehele thuissite. Nu wil het marketingteam de weergave "home" op de volgende manieren bijwerken:

Selecteer Samenstellen en pas deze wijzigingen toe op de weergave "home".

Voorbeeld 2: productlabels wijzigen

Voor de weergave "products-page-2" wil het marketingteam de Prijs label aan Verkoopprijs en wijzigt u de labelkleur in rood.

Om deze updates in VEC te maken, zijn de volgende stappen vereist:

Voorbeeld 3: Opmaak van leveringsvoorkeuren aanpassen

Weergaven kunnen worden gedefinieerd op korrelig niveau, zoals een status of een optie van een keuzerondje. Eerder in dit document zijn weergaven gedefinieerd voor leveringsvoorkeuren, "uitchecken-normaal" en "uitchecken-express". Het marketingteam wil de kleur van de knop wijzigen in rood voor de weergave "uitchecken-uitdrukken".

Om deze updates in VEC te maken, zijn de volgende stappen vereist: