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 geinteresseerd wordt die de zaken verkopen, besluiten zij om de verbinding van Producten te klikken. 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 om de Lading Meer knoop te klikken om meer producten op de plaats te onderzoeken, verandert website URL niet in dit geval, maar een Mening kan hier worden gecreeerd om slechts de tweede rij van producten te vertegenwoordigen die worden getoond. 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 de sendEvent() functie in React voor een hypothetische e-commerce SPA aan te halen.

Voorbeeld 1: Introductiepagina A/B-test

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

Als u A/B-tests wilt uitvoeren op de hele thuissite, moet sendEvent() worden aangeroepen met de XDM viewName ingesteld 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 marketing team wil de tweede rij van producten personaliseren door de kleur van het prijsetiket in rood te veranderen nadat een gebruiker Lading meer klikt.

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 marketing team wil een test A/B in werking stellen om te zien of het veranderen van de kleur van de knoop van blauw in rood wanneer Uitdrukkelijke Levering wordt geselecteerd omzettingen (in tegenstelling tot het houden van de knoopkleur blauw voor beide leveringsopties) kan verhogen.

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 wordt geselecteerd, kan de Mening "controle-normaal"worden genoemd. Als Uitdrukkelijke Levering wordt 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

Wanneer u klaar bent met het definiëren van uw XDM-weergaven en sendEvent() hebt geïmplementeerd met deze XDM Views die zijn doorgegeven, kan de VEC deze weergaven detecteren en kunnen gebruikers handelingen en wijzigingen maken voor A/B- of XT-activiteiten.

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 actie VEC die onder een Mening wordt gecreeerd heeft de volgende pictogrammen: Informatie, geeft uit, Kloon, Beweging, en Schrapping. 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:

Om deze updates in VEC te maken, selecteer stel samen en pas die veranderingen op de "huis"mening toe.

Voorbeeld 2: productlabels wijzigen

Voor de "producten-pagina-2"Mening, zou het marketing team het etiket van de Prijs aan de Prijs van de Verkoop willen veranderen en de etiketkleur in rood veranderen.

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: