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 single-page toepassingen (SPAs) uit te voeren.

Traditionele websites gebruikten navigatiemodellen 'Pagina-naar-pagina', ook wel 'Toepassingen met meerdere pagina's' genoemd. In deze websites zijn ontwerpen nauw gekoppeld aan URL's. Voor het schakelen tussen pagina's is een volledige pagina vereist.

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 worden teweeggebracht door klanteninteractie, zoals scrolls, kliks, en curseurbewegingen. 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 Experience Platform Web SDK voor SPA's

Hier volgen enkele voordelen van het gebruik van Adobe Experience Platform Web SDK voor toepassingen die uit één pagina bestaan:

XDM-weergaven en toepassingen van één pagina

Adobe Target VEC voor SPAs haalt voordeel uit een concept genoemd Views: een logische groep visuele elementen die samen een ervaring van het KUUROORD maken. Een toepassing van één pagina kan daarom worden beschouwd als een overgang door meningen, in plaats van URLs, die op gebruikersinteractie wordt gebaseerd. Een View kan doorgaans een hele site of gegroepeerde visuele elementen binnen een site vertegenwoordigen.

In het volgende voorbeeld wordt een hypothetische online e-commercesite gebruikt die in React is geïmplementeerd om voorbeelden Views te verkennen.

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 View worden gedefinieerd voor het gehele beginscherm. Deze View zou eenvoudig "thuis"kunnen 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 View . Deze View zou "producten-allen."kunnen worden genoemd

Omdat een View kan worden gedefinieerd als een hele site of een groep visuele elementen op een site. De vier producten die op de productsite worden weergegeven, kunnen worden gegroepeerd en als een View 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 in dit geval niet. Hier kan echter een View worden gemaakt die alleen de tweede rij producten vertegenwoordigt die wordt weergegeven. De naam van View 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 View kan elke groep visuele elementen op een site zijn. Een View kan dus worden gemaakt voor leveringsvoorkeuren en "Leveringsvoorkeuren" worden genoemd.

Het concept van Views kan veel verder worden uitgebreid dan dit scenario. Deze scenario's zijn slechts een paar voorbeelden van Views die op een site kunnen worden gedefinieerd.

Implementeren XDM Views

XDM Views kan in Target worden gebruikt om marketers in staat te stellen A/B- en XT-tests uit te voeren op SPA's via de 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 veranderend de kleur van de knoop van blauw aan rood wanneer Uitdrukkelijke Levering wordt geselecteerd. Het team denkt dat deze verandering omzettingen (in tegenstelling tot het houden van de knoopkleur blauw voor beide leveringsopties) kan verhogen.

Als u de inhoud van de site wilt aanpassen, afhankelijk van de geselecteerde leveringsvoorkeur, kunt u een View maken voor elke leveringsvoorkeur. Wanneer Normale Levering wordt geselecteerd, kan View "controle-normaal worden genoemd." Als Uitdrukkelijke Levering wordt geselecteerd, kan View "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 Views en sendEvent() hebt geïmplementeerd met de XDM Views doorgegeven Views , kan de VEC deze detecteren en kunnen gebruikers handelingen en wijzigingen maken voor A/B- of XT-activiteiten.

Modifications deelvenster

In het deelvenster Modifications worden de acties vastgelegd die voor een bepaalde View zijn gemaakt. Alle handelingen voor een View worden onder die View gegroepeerd.

Handelingen

Wanneer u op een handeling klikt, wordt het element op de site gemarkeerd waarop deze handeling wordt toegepast. Elke actie VEC die onder a View wordt gecreeerd heeft de volgende pictogrammen: Informatie, geeft uit, Kloon, Beweging, en schrapt. Deze pictogrammen worden nader toegelicht in de onderstaande tabel.

Het gebruiken van VEC voor voorbeelden SPAs

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

Voorbeeld 1: "home"-weergave bijwerken

Eerder in dit artikel is een View met de naam "home" gedefinieerd voor de gehele thuissite. Het marketingteam wil de weergave "home" nu 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 "producten-pagina-2"View, zou het marketing team het Prijs etiket 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

Views kan worden gedefinieerd op korrelniveau, zoals een status of een optie van een keuzerondje. Eerder in dit artikel werden Views 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: