Implementera single-page-applikationer (SPA) web-spa-implementation

Adobe Experience Platform Web SDK innehåller många funktioner som gör det möjligt för ditt företag att utföra personalisering på nästa generations klientteknik, som enkelsidiga program (SPA).

Traditionella webbplatser fungerar på"sida-till-sida"-navigeringsmodeller, som annars kallas flersidiga program, där webbplatsdesignen är nära kopplad till URL:er och övergångar mellan webbsidor kräver en sidladdning.

Moderna webbprogram, som appar för en sida (SPA), 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 kan 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 att använda Web SDK för SPA web-spa-benefits

Nedan följer några fördelar med att använda Web SDK för dina enkelsidiga program:

XDM-vyer och enkelsidiga program web-spa-xdm

Journey Optimizer webbredigerare använder ett koncept som kallas vyer.

Vyer är en logisk grupp av 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 vy kan vanligtvis representera en hel webbplats, en enstaka sida eller grupperade visuella element på en sida.

I följande exempel används en hypotetisk e-handelssajt online för att ytterligare förklara vad som är vyer.

Konceptet med vyer kan utvidgas mycket mer än så. Detta är bara några exempel på vyer som kan definieras på en webbplats.

Implementera XDM-vyer implement-xdm-views

XDM-vyer kan användas i Adobe Journey Optimizer för att marknadsförarna ska kunna köra webbpersonaliserings- och experimenteringskampanjer på SPA via Journey Optimizer webbredigerare.

Detta kräver att du utför följande steg för att slutföra en engångsinstallation av en utvecklare:

 alloy("sendEvent", {
  "renderDecisions": true,
  "xdm": {
   "web": {
    "webPageDetails": {
    "viewName":"home"
   }
  }
 }
});

sendEvent() funktionsexempel

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

Exempel 1: A/B-teststartsida web-spa-sample-1

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 web-spa-sample-2

Marknadsföringsteamet vill personalisera den andra produktraden genom att ändra prisetikettens färg till röd efter att användaren har klickat för att se alla Men-produkter.

function onViewChange(viewName) {

    alloy("sendEvent", {
        "renderDecisions": true,
        "xdm": {
            "web": {
                "webPageDetails": {
                    "viewName": viewName
                }
            }
        }
    });
}

class Products extends Component {

    render() {
        return (

            <
            button type = "button"
            onClick = {
                this.handleLoadMoreClicked
            } > All Men 's Products</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);
    }
}