Programimplementering på en sida

Adobe Experience Platform Web SDK innehåller omfattande funktioner som gör det möjligt för ditt företag att utföra personalisering på nästa generations klienttekniker, som SPA (Single-page applications).

Traditionella webbplatser använder navigeringsmodellerna "Page-to-Page", som också kallas för Multi-Page Applications. På dessa webbplatser är designen nära länkad till URL:er, och om du förflyttar dig mellan sidorna krävs en full sidladdning.

Moderna webbprogram, till exempel ensidiga program, har i stället antagit en modell som möjliggör snabb användning av webbläsargränssnittsåtergivning, som ofta är oberoende av sidomladdning. De här upplevelserna triggas av kundinteraktioner som rullningar, klick och markörrörelser. I takt med att de moderna webbens paradigmer har utvecklats fungerar inte längre de traditionella generiska eventernas relevans, till exempel en sidladdning, för personalisering och experimenterande.

Fördelar med Experience Platform Web SDK för SPA

Här är några fördelar med att använda Adobe Experience Platform Web SDK för dina enkelsidiga program:

XDM-vyer och enkelsidiga program

VEC Adobe Target för SPA utnyttjar konceptet Views: en logisk grupp visuella element som tillsammans utgör en SPA-upplevelse. Ett enkelsidigt program kan därför betraktas som en övergång genom vyer i stället för URL-adresser som baseras på användarinteraktioner. En View kan vanligtvis representera en hel plats eller grupperade visuella element inom en plats.

För att ytterligare förklara vad vyer är använder följande exempel en hypotetisk e-handelsplats online som implementerats i React för att utforska exempel Views.

När du har navigerat till hemsidan befordrar en hjältebild en påskaffär samt de senaste produkterna på webbplatsen. I det här fallet kan en View definieras för hela hemskärmen. View kan helt enkelt kallas "home".

När kunden blir mer intresserad av de produkter som företaget säljer bestämmer de sig för att klicka på länken Produkter. På samma sätt som hemsidan kan hela produktwebbplatsen definieras som View. View kan heta "products-all".

Eftersom View kan definieras som en hel webbplats eller som en grupp visuella element på en webbplats. De fyra produkterna som visas på produktwebbplatsen kan grupperas och betraktas som en View. Den här vyn kan heta "products".

När kunden bestämmer sig för att klicka på knappen Läs in mer för att utforska fler produkter på webbplatsen ändras inte webbplatsens URL i det här fallet. En View kan dock skapas här för att representera endast den andra produktraden som visas. Namnet View kan vara "products-page-2".

Kunden bestämmer sig för att köpa några produkter från sajten och går vidare till kassan. På kassan får kunden möjlighet att välja normal leverans eller expressleverans. En View kan vara vilken grupp som helst av visuella element på en webbplats, så en View kan skapas för leveransinställningar och kallas"Leveransinställningar".

Konceptet för Views kan utökas mycket mer än det här scenariot. Dessa scenarier är bara några exempel på Views som kan definieras på en plats.

Implementerar XDM Views

XDM Views kan utnyttjas i Target för att marknadsförarna ska kunna köra A/B- och XT-tester på SPA via Visual Experience Composer. För att göra detta måste du utföra följande steg för att slutföra en engångskonfiguration av utvecklare:

sendEvent() funktionsexempel

I det här avsnittet beskrivs tre exempel som visar hur du anropar funktionen sendEvent() i React för en hypotetisk SPA för e-handel.

Exempel 1: A/B-teststartsida

Marknadsföringsteamet vill köra A/B-tester på hela hemsidan.

Om du vill köra A/B-tester på hela hemplatsen måste sendEvent() anropas med XDM viewName inställd på 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} >

Exempel 2: Personaliserade produkter

Marknadsföringsteamet vill anpassa den andra produktraden genom att ändra prisetikettens färg till rött efter att en användare har klickat på Läs in mer.

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

}

Exempel 3: Inställningar för A/B-testleverans

Marknadsföringsteamet vill köra ett A/B-test för att se om färg på knappen ändras från blå till röd när Express Delivery väljs. Teamet tror att den här förändringen kan öka konverteringsgraden (till skillnad från att behålla knappfärgen blå för båda leveransalternativen).

Om du vill anpassa innehållet på webbplatsen beroende på vilken leveransinställning som har valts, kan du skapa en View för varje leveransinställning. När Normal leverans har valts kan View heta"checkout-normal". Om du väljer Express Delivery kan View heta"checkout-express".

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

}

Använda Visual Experience Composer för ett SPA

När du har definierat din XDM Views och implementerat sendEvent() med de XDM Views skickade, kan VEC identifiera dessa Views och tillåta användare att skapa åtgärder och ändringar för A/B- eller XT-aktiviteter.

Panelen Modifications

Panelen Modifications innehåller de åtgärder som har skapats för en viss View. Alla åtgärder för en View grupperas under den View.

Åtgärder

Om du klickar på en åtgärd markeras elementet på platsen där den här åtgärden används. Varje VEC-åtgärd som skapas under en View har följande ikoner: Information, Redigera, Klona, Flytta och Ta bort. Dessa ikoner förklaras närmare i följande tabell.

Använda VEC för SPA-exempel

I det här avsnittet beskrivs tre exempel på hur du använder Visual Experience Composer för att skapa åtgärder och ändringar för A/B- eller XT-aktiviteter.

Exempel 1: Uppdatera hemvyn

Tidigare i den här artikeln definierades en View med namnet"home" för hela hemsidan. Nu vill marknadsföringsteamet uppdatera vyn"home" på följande sätt:

Om du vill göra de här uppdateringarna i VEC-vyn väljer du Disponera och tillämpar ändringarna på hemvyn.

Exempel 2: Ändra produktetiketter

För"products-page-2" View vill marknadsföringsteamet ändra etiketten Price till Sale Price och ändra etikettfärgen till red.

Följande steg krävs för att göra uppdateringarna i VEC:

Exempel 3: Anpassa format för leveransinställningar

Views kan definieras på en detaljnivå, till exempel ett läge eller ett alternativ från en alternativknapp. Tidigare i den här artikeln definierades Views för leveransinställningar,"checkout-normal" och"checkout-express". Marknadsföringsteamet vill ändra knappfärgen till röd för vyn"checkout-express".

Följande steg krävs för att göra uppdateringarna i VEC: