Single Page App (SPA) Visual Experience Composer

Last update: Mon Aug 18 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:

In Adobe Target biedt Visual Experience Composer (VEC) marketers de mogelijkheid om zelf activiteiten te maken en ervaringen aan te passen die dynamisch kunnen worden aangeboden in traditionele toepassingen voor meerdere pagina's via Adobe Target global mbox. Nochtans, baseert dit zich op het terugwinnen van aanbiedingen op pagina-lading of verdere servervraag, die latentie, zoals aangetoond in het hieronder diagram introduceert. Deze benadering werkt niet goed met de Toepassingen van de Enige Pagina (SPAs) omdat het de gebruikerservaring en toepassingsprestaties degradeert.

Traditionele levenscyclus vs. Levenscyclus van het KUUROORD

Met de recentste versie, introduceren wij nu VEC voor SPAs. VEC voor SPAs laat marketers toe om tests tot stand te brengen en inhoud op SPAs op een doe-het-zelfmanier zonder ononderbroken ontwikkelingsgebiedsdelen te personaliseren. VEC kan worden gebruikt om te creëren A/B Testen Ervaring richtend(XT) activiteiten op populaire kaders, zoals Reageren en Angular.

Adobe Target Weergaven en toepassingen voor één pagina

Adobe Target VEC voor SPAs haalt voordeel uit een nieuw concept genoemd Bekijken: een logische groep visuele elementen die samen omhoog een ervaring van het KUUROORD maken. Een KUUROORD kan daarom als transitioning door meningen, in plaats van URLs worden beschouwd, die op gebruikersinteractie wordt gebaseerd. 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.

Verbinding: Plaats van het Huis

homesite

Wanneer we naar de thuissite navigeren, kunnen we meteen een hoofdafbeelding zien 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 hier meer over zullen doen in de sectie Adobe Target-weergaven implementeren hieronder.

Verbinding: Plaats van het Product

productplaats

Aangezien wij meer in de producten geïnteresseerd raken, 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://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/products 'producten' worden genoemd.

productplaats 2

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 deze "producten" noemen.

productplaats 3

We besluiten op de knop Meer laden te klikken 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.

Verbinding: Controle

controle-uit pagina

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.

Adobe Target -weergaven implementeren

Nu wij hebben behandeld wat de Weergaven van Adobe Target zijn, kunnen wij hefboomwerking dit concept in Doel om marktleiders in staat te stellen om tests A/B en XT op SPAs via VEC in werking te stellen. Hiervoor is een eenmalige ontwikkelaarsinstelling vereist. Laten we de stappen doorlopen om dit in te stellen.

Installeer om 2.js.

Eerst moeten we installeren op .js 2.x. Deze versie van at.js werd ontwikkeld met SPAs in mening. Eerdere versies van at.js en bieden geen ondersteuning voor Adobe Target Views en VEC for SPA.

Download het bestand at.js 2.x via de gebruikersinterface van Adobe Target in Administration > Implementation . at.js 2.x kan ook via markeringen in Adobe Experience Platformworden opgesteld. De Adobe Target-extensies zijn momenteel echter niet up-to-date en worden wel ondersteund.

Implementeer de nieuwste functie van at.js 2.x: triggerView ()op uw plaatsen.

Na het bepalen van de Weergaven van uw SPA waar u een A/B of XT test wilt in werking stellen, voer de functie van at.js 2.x triggerView() met de Bekijken uit die binnen als parameter worden overgegaan. Dit staat marketers toe om VEC te gebruiken om de tests A/B en XT voor die Gedefinieerde Kijken te ontwerpen en in werking te stellen. Als de triggerView() functie niet voor die Kijken wordt bepaald, zal VEC niet de Kijken ontdekken en zo kunnen de verkopers VEC niet gebruiken om A/B en XT tests te ontwerpen en in werking te stellen.

adobe.target.triggerView(viewName, options)

table 0-row-5 1-row-5 2-row-5 3-row-5
Parameter	Type	Vereist?	Validatie	Beschrijving
viewName	String	Ja	1. Geen navolgende spaties. 2. Kan niet leeg zijn. 3. De weergavenaam moet uniek zijn voor alle pagina's. 4. Waarschuwing: De naam van de mening zou niet met "`/`"moeten beginnen of eindigen. De reden hiervoor is dat de klant doorgaans de weergavenaam uit het URL-pad haalt. Voor ons zijn 'home' en '`/home`' anders. 5. Waarschuwing: De zelfde mening zou niet opeenvolgend veelvoudige tijden met de `{page: true}` optie moeten worden teweeggebracht.	Geef een willekeurige naam door als een type tekenreeks dat u de weergave wilt vertegenwoordigen. Deze weergavenaam wordt in het deelvenster Modifications van de VEC weergegeven, zodat marketers handelingen kunnen maken en hun A/B- en XT-activiteiten kunnen uitvoeren.
opties	Object	Nee
opties > pagina	Boolean	Nee		WAAR: De standaardwaarde van pagina is waar. Wanneer `page=true` , zullen de berichten naar de servers van Edge voor het verhogen van immentatietelling worden verzonden. VALS: Wanneer `page=false`, zullen de berichten niet voor het verhogen van beeldtelling worden verzonden. Dit zou moeten worden gebruikt wanneer u een component op een pagina met een aanbieding slechts opnieuw wilt teruggeven.

Nu ga door één of ander voorbeeld gebruiksgevallen op hoe te om de triggerView() functie in React voor onze hypothetische e-commerce SPA aan te halen:

Verbinding: Plaats van het Huis

huis-reactie-1

Als marketers, als wij A/B tests op de volledige homesite willen in werking stellen, dan zouden wij de mening "huis"kunnen noemen die uit URL kan worden gehaald:

code language-javascript

code language-javascript
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} >

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} >

Verbinding: Plaats van Producten

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 kleur van het prijslabel te wijzigen in rood nadat een gebruiker op de knop Meer laden heeft geklikt.

reacties producten

code language-javascript

code language-javascript
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); } }

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);
  }
}

Verbinding: Controle

reactie controle

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.

code language-javascript

code language-javascript
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); } }

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);
  }
}

Start A/B- of XT-activiteiten via de VEC.

Wanneer adobe.target.triggerView() op uw SPA met de namen van de Mening wordt uitgevoerd die als parameters worden overgegaan, zal VEC deze meningen kunnen ontdekken en gebruikers toestaan om acties en wijzigingen voor hun A/B of XT activiteiten tot stand te brengen.

note note
NOTE
VEC voor SPAs is werkelijk het zelfde VEC dat u op regelmatige Web-pagina's gebruikt, maar sommige extra mogelijkheden zijn beschikbaar wanneer u één enkele paginaapp opent met `triggerView()` uitgevoerd.

Er zijn twee belangrijke verbeteringen aan het paneel van Veranderingenen Acties voor VEC die VEC toestaan om goed met SPAs te werken.

het Comité van Wijzigingen

In het deelvenster Modifications worden, zoals hieronder wordt weergegeven, 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, zoals hieronder wordt weergegeven: Informatie, Bewerken, Klonen, Verplaatsen en Verwijderen.

Wijzigingen

In de volgende tabel wordt elke actie beschreven:

Pagina

Beschrijving

Informatie

Geeft de details van de handeling weer.

Bewerken

Hiermee kunt u de eigenschappen van de handeling rechtstreeks bewerken.

Klonen

Kloont de actie aan één of meerdere Weergaven die op het Modifications paneel of aan één of meerdere Weergaven bestaan die u hebt doorzocht en aan in VEC genavigeerd. De handeling hoeft niet noodzakelijkerwijs in het deelvenster Modifications te staan.
Nota: Nadat een kloonverrichting wordt gemaakt, moet u aan de Mening in VEC via Browse navigeren om te zien of de gekloonde actie een geldige verrichting was. Als de actie niet op de Mening kan worden toegepast, zult u een fout zien.

Verplaatsen

Hiermee wordt de handeling verplaatst naar een gebeurtenis Pagina laden of een andere weergave die al bestaat in het deelvenster Wijzigingen.
Page Load Event - alle handelingen die overeenkomen met de gebeurtenis load van de pagina worden toegepast op het eerste laden van de pagina van de webtoepassing.
Nota nadat een bewegingsverrichting wordt gemaakt, moet u aan de Mening in VEC via doorbladeren navigeren om te zien of de beweging een geldige verrichting was. Als de handeling niet kan worden toegepast op de weergave, wordt een fout weergegeven

Verwijderen

Hiermee verwijdert u de handeling.

NOTE

U kunt vele acties uitvoeren alvorens de pagina in VEC laadt, of zelfs als de pagina niet volledig kan laden. Handelingen die niet kunnen worden bewerkt voordat de site wordt geladen, worden uitgeschakeld in de gebruikersinterface.

Voorbeeld 1

Laten we het bovenstaande voorbeeld gebruiken waarin we een weergave Home hebben gemaakt. Ons doel is tweeledig voor deze visie:

Wijzig de knoppen Toevoegen aan winkelwagentje en Soortgelijk in een lichtblauwe kleur. Dit moet in de modus "Pagina laden" staan, omdat de componenten van de koptekst veranderen.
Wijzig het label "Nieuwste producten voor 2019" in "Hottest Products for 2019" met de tekstkleur gewijzigd in paars.

Om deze doelstellingen uit te voeren, in VEC, klik Compose en pas die veranderingen op de mening van het Huis toe.

Voorbeeld 1

Voorbeeld 2

Laten we het voorbeeld hierboven gebruiken waarin we een PRODUCTS-PAGE-2-weergave hebben gemaakt. Ons doel is om het label Prijs te wijzigen in Verkoopprijs met de labelkleur rood.

Klik op Browse en klik vervolgens op de koppeling Products in de koptekst.
Klik één keer op Load More om naar de tweede rij producten te gaan.
Klik op Compose.
Pas handelingen toe om het tekstlabel te wijzigen in Verkoopprijs en de kleur in rood.

Voorbeeld 2

Voorbeeld 3

Tot slot kunnen, zoals eerder vermeld, weergaven in korreligheid worden gedefinieerd. Weergaven kunnen een status of zelfs een optie via een keuzerondje zijn. Eerder hebben we weergaven gemaakt als CHECKOUT-EXPRESS en CHECKOUT-NORMAL. Ons doel is de knopkleur te wijzigen in rood voor de CHECKOUT-EXPRESS-weergave.

Klik op Browse.
Voeg een paar producten toe aan het winkelwagentje.
Klik op het winkelwagentje in de rechterbovenhoek.
Klik op Uitchecken van uw bestelling.
Klik op het keuzerondje Expreslevering.
Klik op Compose.
Klik op de knop Betalen om de knop Volgorde voltooien te lezen en de kleur rood te wijzigen.

Voorbeeld 3

NOTE

De weergave UITCHECKUNNEN-EXPRESS wordt pas weergegeven in het deelvenster Wijzigen als u op het keuzerondje Uitdrukkelijke levering klikt. De reden hiervoor is dat de functie triggerView() wordt geactiveerd wanneer het keuzerondje Expreslevering is geselecteerd. Dit is alleen mogelijk wanneer VEC weet dat er een Weergave moet worden weergegeven in het deelvenster Wijzigen.

Diep duiken in at.js en SPAs

Hoe kan ik meningen voor de recentste publieksgegevens terugwinnen die door acties na de aanvankelijke paginalading op mijn KUUROORD worden gehydrateerd?

De typische workflow van at.js 2.x is wanneer uw site wordt geladen, worden al uw weergaven en handelingen in het cachegeheugen opgeslagen, zodat volgende gebruikersacties op uw site geen serveraanroepen activeren om aanbiedingen op te halen. Als u de weergaven wilt ophalen op basis van de meest recente profielgegevens die mogelijk zijn bijgewerkt, afhankelijk van volgende gebruikershandelingen, kunt u getOffers() en applyOffers() aanroepen met de meest recente gebruikers- of profielgegevens die zijn doorgegeven.

Bijvoorbeeld, ben u een telecombedrijf en u hebt een KUUROORD die at.js 2.x gebruikt. Als bedrijf, wilt u de volgende doelstellingen bereiken:

Voor een aangemelde of anonieme gebruiker geeft u de meest recente bevordering van het bedrijf weer, zoals een "First month free" hoofdaanbieding op http://www.telecom.com/home .
Voor een aangemelde gebruiker, toon een verbeteringsbevorderingsaanbieding voor gebruikers van wie contracten omhoog komen, zoals "u verkiest voor een vrije telefoon!" op http://www.telecom.com/loggedIn/home .

De ontwikkelaars noemen nu weergaven en roepen triggerView() op de volgende manier aan:

Voor http://www.telecom.com/home is de weergavenaam "Startpagina afgemeld"
- triggerView("Logged Out Home") wordt aangeroepen.
Voor http://www.telecom.com/loggedIn/home is de weergavenaam "Aangemeld bij homepage"
- triggerView("Logged In Home") wordt aangeroepen bij routewijziging.

Uw marketers voeren dan de volgende A/B-activiteiten door VEC uit:

A/B activiteit met de "Eerste Maand Vrije"aanbieding voor publiek met de parameter "loggedIn= false"dat in http://www.telecom.com/home moet worden getoond, waar de meningsnaam Startpagina Logged uit is.
A/B activiteit met "u komt voor een vrije telefoon in aanmerking!" biedt aan publiek met de parameter "loggedIn=true" aan om in http://www.telecom.com/loggedIn/home te worden getoond, waar de meningsnaam in Heropaanbod wordt geregistreerd.

Nu, laten wij deze gebruikersstroom overwegen:

Een anonieme aangemelde gebruiker landt op uw pagina.
Omdat u at.js 2.x gebruikt, gaat u in de parameter "loggedIn = false"op pagina-lading over om alle meningen terug te winnen huidig in actieve activiteiten die voor kwalificeren wanneer het publiek parameter " loggedIn = false"heeft.
at.js 2.x wint dan de Logged Out mening en de actie van het Huis terug om de "Eerste Maand Vrije"aanbieding te tonen en het op te slaan in geheim voorgeheugen.
Wanneer triggerView("Logged Out Home") wordt aangehaald, wordt de "Eerste Maand Vrije"aanbieding teruggewonnen van geheim voorgeheugen en de aanbieding wordt getoond zonder een servervraag.
De gebruiker klikt nu op Aanmelden en geeft zijn of haar referenties.
Omdat uw website een SPA is, laadt u geen volledige pagina en leidt u in plaats daarvan uw gebruiker naar http://www.telecom.com/loggedIn/home.

Hier is het probleem. De gebruiker meldt zich aan en wij ontmoeten triggerView("Logged In Home") omdat wij deze code op routeverandering plaatsten. Dit vertelt at.js 2.x om de mening en de acties van geheim voorgeheugen terug te winnen, maar de enige mening die in geheim voorgeheugen bestaat is Logged Out Huis.

Dus hoe kunnen we dan onze aanmeldingsgegevens ophalen en de "You are acceptable for a free phone" weergeven? aanbieden? En aangezien alle verdere acties op uw plaats van een het programma geopend-in gebruikersperspectief zullen zijn, hoe kunt u ervoor zorgen alle verdere acties in gepersonaliseerde aanbiedingen voor het programma geopende gebruikers resulteren?

U kunt de nieuwe getOffers() - en applyOffers() -functies gebruiken die worden ondersteund in at.js 2.x:

adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

Geef het antwoord van getOffers() aan applyOffers() door en nu werken alle weergaven en acties die zijn gekoppeld aan "logIn = true" de cache at.js bij.

Met andere woorden, 2.x in.js steunt een manier om meningen, acties, en aanbiedingen met de meest bijgewerkte publieksgegevens op een wijze op bestelling terug te winnen.

steunt at.js 2.x A4T voor Enige Toepassingen van de Pagina?

Ja, in.js 2.x wordt A4T voor SPA ondersteund via de functie triggerView() , aangezien u Adobe Analytics en de Experience Cloud Visitor ID Service hebt geïmplementeerd. Zie het onderstaande diagram met stapsgewijze beschrijvingen.

Stroom van het Doel

Stap

Beschrijving

triggerView() wordt geroepen in het KUUROORD om een mening terug te geven en acties toe te passen om visuele elementen verbonden aan de mening te wijzigen.

De gerichte inhoud voor de mening wordt gelezen van het geheime voorgeheugen.

Gerichte inhoud wordt zo snel mogelijk zichtbaar zonder flikkering van de standaardinhoud.

Het verzoek om een melding wordt verzonden naar de Target Profile Store om de bezoeker te tellen in de activiteit en de verhogingsmetriek.

Analytische gegevens die naar de Servers van de Inzameling van Gegevens worden verzonden.

De doelgegevens worden via de SDID aangepast aan de analysegegevens en worden verwerkt in de analytische rapportageopslag. De analysegegevens kunnen dan in zowel Analytics als Doel via A4T- rapporten worden bekeken.

NOTE

Als u geen berichten naar Adobe Analytics wilt verzenden voor het tellen van de indruk telkens wanneer een mening wordt teweeggebracht, ga {page: false} aan de triggerView() functie in zodat de indruk tellend niet wordt opgeblazen wanneer een mening veelvoudige tijden voor een component wordt teweeggebracht die constant opnieuw teruggeeft. Bijvoorbeeld:

adobe.target.triggerView("PRODUCTS-PAGE-2", {page:false})

Ondersteunde activiteiten

Type activiteit

Ondersteund?

Test A/B

Aanbevelingen als aanbieding
in de Test van A/B en Ervaring die (XT) activiteiten richten

Nee

Nee

Automated Personalization

Nee

Aanbevelingen

Nee

als wij bij.js 2.x installeerden en triggerView() op onze plaatsen ten uitvoer legden, hoe wij auto-Doel A/B activiteiten in werking stellen omdat het KUUROORD VEC auto-Doel niet steunt?

Als u Auto-Doel A/B activiteiten wilt gebruiken, kunt u al uw acties bewegen die op de Gebeurtenis van de Lading van de Pagina in VEC moeten worden uitgevoerd. Houd de cursor boven elke handeling en klik op de knop Move to Page Load Event . Nadat dit, in de volgende stap wordt gedaan, kunt u auto-Doel voor de methode van de verkeerstoewijzing selecteren.

Ondersteunde integratie

Integratie

Ondersteund?

Analytics voor Doel (A4T)

publiek van Experience Cloud

Attributen van de Klant

de Fragmenten van de Ervaring van AEM

Ondersteunde functies supported-features

Functie

Ondersteund?

Werkruimten en Eigenschappen

Verbindingen QA

Op vorm-gebaseerde Composer van de Ervaring

Nee

de Code van de Douane

opties VEC

Alles

klik-volgt

multi-activity levering

De montages van de Levering van de pagina voor SPA VEC page-delivery-settings

Met instellingen van Page Delivery kunt u regels configureren om te bepalen wanneer een doelactiviteit moet worden gekwalificeerd en uitgevoerd voor een publiek.

Als u vanuit de Page Delivery stap toegang wilt tot de Experiences -opties vanuit de workflow voor het maken van activiteiten met instructies in drie delen van de VEC, klikt u op Configure (het tandwielpictogram) > Page Delivery .

de optiesdialoogdoos van de Levering van de Pagina

Bijvoorbeeld, zoals die door de Page Delivery hierboven getoonde montages wordt bepaald, kwalificeert een activiteit van het Doel en voert uit wanneer een bezoeker direct op https://www.adobe.com of wanneer een bezoeker op om het even welke URL landt die https://www.adobe.com/products bevat. Dit werkt perfect voor elke toepassing met meerdere pagina's waarin elke interactie met de pagina een pagina opnieuw laadt, waarvoor at.js de activiteiten ophaalt die in aanmerking komen voor de URL waarnaar de gebruiker navigeert.

Nochtans, omdat SPAs verschillend werkt, moeten de Page Delivery montages op een manier worden gevormd die alle acties toestaat om op de Weergaven worden toegepast zoals die in de activiteit van het KUUROORD VEC worden bepaald.

Voorbeeld van gebruik

Overweeg dit voorbeeld use-case:

het paneel van Wijzigingen van SPA VEC

De volgende wijzigingen zijn aangebracht:

Veranderde achtergrondkleur in de mening van het Huis, die onder URL wordt gevestigd: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/.
Veranderde knoopkleur in de mening van Producten, die onder URL wordt gevestigd: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/products.

Met het voorbeeld hierboven in mening, wat zou gebeuren wanneer wij Page Delivery montages vormen om slechts te omvatten: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/in een KUUROORD met at.js 2.x?

de dialoogdoos van de Levering van de Pagina

In de volgende afbeelding ziet u de aanvraag voor het laden van de doelstroom - pagina in at.js 2.x:

Stroom van het Doel - bij.js 2.0 het Verzoek van de Lading van de Pagina

Reis van de Gebruiker #1

Een gebruiker navigeert direct aan https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/.
te.js 2.x maakt een vraag aan Edge om te zien of moet om het even welke activiteit voor URL uitvoeren: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/.
In stap 6, keert het Doel Edge de acties voor de mening van het Huis en van Producten terug zodat zij binnen browser in het voorgeheugen ondergebracht zijn.

Resultaat: De gebruiker ziet de groene achtergrondkleur in de mening van het Huis. Wanneer de gebruiker dan aan https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/productsnavigeert, wordt de blauwe achtergrondkleur van de knoop gezien omdat de actie in browser onder de mening van Producten in het voorgeheugen onder wordt gebracht.

Nota: De gebruiker die aan https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/productsnavigeert bracht geen paginading teweeg.

Reis van de Gebruiker #2

Een gebruiker navigeert direct aan https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/products.
te.js 2.x maakt een vraag aan Edge om te zien of moet om het even welke activiteit voor URL uitvoeren: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/products.
Er zijn geen activiteiten die voor https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/productsworden gekwalificeerd.
Omdat er geen activiteiten gekwalificeerd zijn, zijn er geen acties en meningen om voor at.js 2 worden in het voorgeheugen onder te brengen.x aan trekker van.

Resultaat: Zelfs als u triggerView() voor de Mening van Producten hebt bepaald en een actie aan de Mening van Producten door het KUUROORD VEC gemaakt, zult u niet de verwachte actie zien aangezien u geen regel creeerde die https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=nl-NL#/productsin de montages van de Levering van de Pagina omvatte.

Beste praktijken

U kunt zien dat het beheren van de gebruikersreis vrij moeilijk kan zijn aangezien de gebruikers op om het even welke URL van uw KUUROORD kunnen landen en aan een andere pagina navigeren. Daarom is het best om een regel van de Levering van de Pagina te specificeren die basis URL omvat zodat het uw volledige KUUROORD omvat. Op deze manier, te hoeven u niet om over alle verschillende reizen en wegen te denken die een gebruiker zou kunnen nemen om aan een pagina te krijgen waarop u een A/B Test of een Gerichte (XT) activiteit van de Ervaring wilt tonen.

Als u bijvoorbeeld het bovenstaande probleem wilt verhelpen, kunnen we de basis-URL opgeven in de instellingen voor het leveren van pagina's als zodanig:

de dialoogdoos van de Levering van de Pagina

Dit zorgt ervoor dat wanneer een bezoeker op het KUUROORD landt en naar of het Huis of de Mening van de Pagina navigeert de toegepaste acties zullen zien.

Nu, wanneer u een actie aan een Mening in het KUUROORD VEC toevoegt, zullen wij u het volgende pop-up bericht tonen om u eraan te herinneren om over de Page Delivery regels te denken.

het bericht van de Montages van de Levering van de Pagina

Dit bericht wordt weergegeven wanneer u de eerste actie toevoegt aan een Weergave voor elke nieuwe activiteit die u maakt. Dit bericht helpt ervoor te zorgen dat iedereen in uw organisatie leert hoe te om deze Page Delivery regels correct toe te passen.

Trainingsvideo: VEC gebruiken voor SPA's in Adobe Target

https://video.tv.adobe.com/v/26249

Zie Gebruikend de Visuele Composer van de Ervaring voor Enige Toepassing van de Pagina (SPA VEC) in Adobe Targetvoor meer informatie.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654