Toepassing van één pagina

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. Moderne webtoepassingen, zoals Single Page Applications (SPA), maken in plaats daarvan gebruik van een model dat snel gebruik van de rendering van de gebruikersinterface van de browser aanmoedigt. Deze is vaak niet afhankelijk van het opnieuw laden van pagina's. Deze ervaringen worden vaak veroorzaakt 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 page-load, om personalisatie en experimenten te implementeren, niet meer.

at.js 2.x verstrekt rijke eigenschappen die uw zaken uitrusten om verpersoonlijking op volgende-generatie, cliënt-zijtechnologieën uit te voeren. Deze versie is gericht op het verbeteren van at.js om harmonieuze interactie met SPA te hebben.

Hier volgen enkele voordelen van het gebruik van at.js 2.x die niet beschikbaar zijn in eerdere versies:

Adobe Target Weergaven en toepassingen voor één pagina

De Adobe Target VEC voor SPA maakt gebruik van een nieuw concept genaamd Views: een logische groep visuele elementen die samen een SPA ervaring vormen. Een SPA kan daarom worden beschouwd als een overgang door weergaven in plaats van URL's, op basis van gebruikersinteracties. Een weergave kan doorgaans een hele site of gegroepeerde visuele elementen binnen een site vertegenwoordigen.

Als u meer wilt weten over de weergaven, navigeert u naar deze hypothetische online e-commercesite die u in Reageren hebt geïmplementeerd en verkent u enkele voorbeeldweergaven. Klik op de onderstaande koppelingen om deze site te openen in een nieuw browsertabblad.

Koppeling: Home Site

Wanneer we naar de thuissite gaan, zien we meteen een hoofdafbeelding die een paasverkoop bevordert en de nieuwste producten die op de site worden verkocht. In dit geval, kan een Mening als volledige homesite worden gedefinieerd. Dit is handig om op te merken, aangezien we dit in de uitvoeringsfase verder zullen uitbreiden Adobe Target Sectie Weergaven verderop.

Koppeling: Productsite

Aangezien wij meer in de producten worden geinteresseerd die de zaken verkopen, besluiten wij om de verbinding van Producten te klikken. Net als op de thuissite kan de hele productsite worden gedefinieerd als een weergave. Deze weergave kan net als de padnaam in https://target.enablementadobe.com/react/demo/#/products).

In het begin van deze sectie definieerden we Weergaven als de gehele site of zelfs als een groep visuele elementen op de site. Zoals hierboven wordt getoond, kunnen de vier producten die op de plaats worden getoond ook als Mening worden gegroepeerd en worden beschouwd. Als we deze weergave een naam willen geven, kunnen we het een product noemen.

Klik op de knop Meer laden om meer producten op de site te verkennen. De URL van de website verandert in dit geval niet. Maar een weergave hier kan alleen de tweede rij producten weergeven die hierboven wordt weergegeven. De weergavenaam kan 'PRODUCTS-PAGE-2' worden genoemd.

Koppeling: Afhandeling

Omdat we bepaalde producten op de site leuk vonden, besloten we een paar te kopen. Nu krijgen we op de uitchecksite enkele opties om normale levering of expreslevering te kiezen. Omdat een weergave elke groep visuele elementen op een site kan zijn, kunnen we deze "Voorkeuren voor levering weergeven" noemen.

Bovendien kan het concept van de standpunten veel verder worden uitgebreid. Als marketers de inhoud op de site willen aanpassen, afhankelijk van de geselecteerde leveringsvoorkeur, kan een Weergave worden gemaakt voor elke leveringsvoorkeur. In dit geval, wanneer wij Normale Levering selecteren, kan de Mening "Normale Levering worden genoemd." Als Express Delivery is geselecteerd, kan de weergave de naam "Express Delivery" hebben.

Marktdeelnemers kunnen nu een A/B-test uitvoeren om te zien of het wijzigen van de kleur van blauw in rood wanneer Express Delivery is geselecteerd, conversies kan stimuleren in plaats van de knopkleur blauw te houden voor beide leveringsopties.

Implementatie Adobe Target Weergaven

Nu hebben we het over Adobe Target Weergaven zijn: we kunnen dit concept benutten in Target om marketers in staat te stellen A/B- en XT-tests uit te voeren op SPA via de VEC. Hiervoor is een eenmalige ontwikkelaarsinstelling vereist. Laten we de stappen doorlopen om dit in te stellen.

 function targetView() {
   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);
   }

   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(viewName);
   }
 }

 // react router v4
 const history = syncHistoryWithStore(createBrowserHistory(), store);
 history.listen(targetView);

 // react router v3
 <Router history={hashHistory} onUpdate={targetView} >

Koppeling: Productsite

Laten we nu eens kijken naar een voorbeeld dat wat gecompliceerder is. Laten we bijvoorbeeld als marketers de tweede rij van de producten personaliseren door de labelkleur "Prijs" in rood te wijzigen nadat een gebruiker op de knop Meer laden heeft geklikt.

 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(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});
     targetView('PRODUCTS-PAGE-' + page);
   }
 }

Koppeling: Afhandeling

Als marketers de inhoud op de site willen aanpassen, afhankelijk van de geselecteerde leveringsvoorkeur, kan een Weergave worden gemaakt voor elke leveringsvoorkeur. In dit geval, wanneer wij Normale Levering selecteren, kan de Mening "Normale Levering worden genoemd." Als Express Delivery is geselecteerd, kan de weergave de naam "Express Delivery" hebben.

Marketers willen nu een A/B-test uitvoeren om te zien of het wijzigen van de kleur van blauw in rood wanneer de optie Uitdrukkelijke levering is ingeschakeld, conversies kan stimuleren in plaats van de knopkleur blauw te houden voor beide leveringsopties.

 function targetView(viewName) {
   // Validate if the Target Libraries are available on your website
   if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
     adobe.target.triggerView(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;
     targetView(selectedPreferenceValue);
   }
 }

at.js 2.x systeemdiagrammen

Met de volgende diagrammen krijgt u inzicht in de workflow van at.js 2.x met weergaven en in de manier waarop dit de integratie van SPA verbetert. Voor een betere inleiding van de concepten die in at.js 2.x worden gebruikt, zie Toepassing van één pagina.

Nu, overal triggerView() wordt geïmplementeerd op uw SPA, worden de weergaven en acties opgehaald uit het cachegeheugen en aan de gebruiker getoond zonder een serveraanroep. triggerView() verzoekt de Commissie tevens Target achterkant om het aantal beeldingen te verhogen en op te nemen.

Single Page App Visual Experience Composer

Nadat u klaar bent met het installeren van at.js 2.x en het toevoegen triggerView() aan uw plaats, gebruik VEC om A/B en XT activiteiten in werking te stellen. Zie voor meer informatie Single Page App (SPA) Visual Experience Composer.

Gebruik TriggerView om ervoor te zorgen dat A4T correct met at.js 2.x en SPA werkt

Om ervoor te zorgen dat Analyses voor doel (A4T) werkt correct met at.js 2.x, ben zeker om het zelfde SDID in te verzenden Target en in de Analytics verzoek.

Als beste praktijken met betrekking tot SPA:

at.js 2.x heeft een nieuwe API toegevoegd triggerView() functie. U moet triggerView() om at.js te laten weten dat een weergave begint met renderen.

Een voorbeeld bekijken om te zien hoe u aangepaste gebeurtenissen, in.js 2.x en Analytics kunt combineren. In dit voorbeeld wordt ervan uitgegaan dat de pagina HTML de API voor bezoekers bevat, gevolgd door at.js 2.x, gevolgd door AppMeasurement.

Laten we aannemen dat de volgende aangepaste gebeurtenissen bestaan:

Om ervoor te zorgen dat A4T met at.js 2.x werkt,

De manager van het meningsbegin zou iets als dit moeten kijken:

document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");

  visitor.resetState();
  adobe.target.triggerView("<view name>");
});

De manager van het meningseind zou iets als dit moeten kijken:

document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});

Hoewel in deze voorbeelden JavaScript-code wordt gebruikt, kan dit alles worden vereenvoudigd als u een tagbeheer gebruikt, zoals tags in Adobe Experience Platform.

Als de voorafgaande stappen worden gevolgd zou u een robuuste oplossing A4T voor SPA moeten hebben.

Best practices implementeren

at.js 2.x APIs laat u uw aanpassen Target de uitvoering is op vele manieren , maar het is belangrijk de juiste volgorde van de werkzaamheden tijdens dit proces te volgen .

De volgende informatie beschrijft de volgorde van bewerkingen die u moet uitvoeren wanneer u voor het eerst een toepassing voor één pagina in een browser laadt en voor elke weergavewijziging die daarna plaatsvindt.

Volgorde van bewerkingen voor het laden van de eerste pagina order

Volgorde van bewerkingen voor SPA wijziging van weergave (geen volledige pagina opnieuw laden)

Trainingsvideo's

De volgende video's bevatten meer informatie:

Begrijpen hoe at.js 2.x werkt

Zie Begrijpen hoe at.js 2.x werkt voor meer informatie .

Implementeren bij .js 2.x in een SPA

Zie Adobe Target- in.js 2.x implementeren in een toepassing voor één pagina (SPA) voor meer informatie .

VEC gebruiken voor SPA in Adobe Target

Zie De Visual Experience Composer gebruiken voor de Toepassing van de Enige Pagina (SPA VEC) in Adobe Target voor meer informatie .