Vorm bovenkant en bodem van paginagebeurtenissen in SDK van het Web

Wanneer u persoonlijke ervaringen opdoet, is de laadtijd van een webpagina essentieel. Om de tijd te minimaliseren een gebruiker op gepersonaliseerde inhoud wacht, steunt SDK van het Web de configuratie van bovenkant en bodem van paginagebeurtenissen.

Boven en onder aan paginagebeurtenissen vindt u een methode voor het asynchroon laden van verschillende elementen op de pagina, terwijl de laadtijd van de pagina minimaal blijft:

  • De gebeurtenis boven aan de pagina vraagt om personalisatie zodra de pagina begint te laden.
  • De onderkant van de paginagebeurtenis neemt een paginaweergave op wanneer de pagina klaar is met laden.

Adobe Analytics negeert de bovenkant van paginagebeurtenissen, wat tot nauwkeurigere metriek opname leidt aangezien slechts één paginareactie wordt geregistreerd (de bodem van paginagebeurtenis).

U kunt boven- en onderzijde van paginagebeurtenissen op twee manieren configureren: door de SDK JavaScript-bibliotheek van het Web (alloy()) rechtstreeks aan te roepen of door de extensie van de SDK-tag Web te gebruiken in de UI Tags voor Adobe Experience Platform. De actie van de markeringsuitbreiding Send event omvat een "Use guided events"optie die pre-vormt gebiedswaarden voor (Request personalization' (bovenkant van pagina) en (Collect analytics' (bodem van pagina) scenario's. In elk van de onderstaande voorbeelden worden beide implementaties getoond.

De gebeurtenis Boven aan pagina top-of-page

Het voorbeeld hieronder vormt een bovenkant van paginagebeurtenis die om verpersoonlijking verzoekt maar ​ vertoningsgebeurtenissen ​ voor automatisch teruggegeven voorstellingen onderdrukt. Deze weergavegebeurtenissen worden verzonden met de onderzijde van de paginagebeurtenis.

de bibliotheek van JavaScript
code language-js
alloy("sendEvent", {
  type: "decisioning.propositionFetch",
  renderDecisions: true,
  personalization: {
    sendDisplayEvent: false
  }
});
table 0-row-3 1-row-3 2-row-3 3-row-3
Parameter Vereist/optioneel Beschrijving
type Vereist Stel deze parameter in op decisioning.propositionFetch . Dit speciale gebeurtenistype instrueert Adobe Analytics deze gebeurtenis te laten vallen. Wanneer u Customer Journey Analytics gebruikt, kunt u ook een filter instellen om deze gebeurtenissen te neerzetten. Zie ​ de gebeurtenistypen van Edge Network in Adobe Analytics ​ voor meer informatie.
renderDecisions Vereist Stel deze parameter in op true . Deze parameter vertelt Web SDK om besluiten terug te geven die door Edge Network zijn teruggekeerd.
personalization.sendDisplayEvent Vereist Stel deze parameter in op false . Met deze parameter wordt gestopt met het verzenden van weergavegebeurtenissen.
de markeringsuitbreiding van SDK van het Web

Configureer een Send event -actie in de regel die boven aan de pagina wordt geactiveerd. Schakel Use guided events in en selecteer vervolgens Request personalization . Deze optie sluit 'Type' aan 'Decisioning Proposition Fetch', 'Render visual personalization decisions' aan toegelaten, en 'Automatically send a display event' aan gehandicapten.

Als u deze velden handmatig wilt instellen, laat u Use guided events uitgeschakeld en configureert u elk veld zelf.

Voorbeelden van gebeurtenissen onder aan pagina bottom-of-page

Automatisch gerenderde voorstellingen bottom-auto-rendered

Het voorbeeld hieronder vormt een bodem van paginagebeurtenis die vertoningsgebeurtenissen voor voorstellen verzendt die automatisch op de pagina werden teruggegeven maar in de ​ bovenkant van pagina ​ gebeurtenis onderdrukt.

de bibliotheek van JavaScript
code language-js
alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});
table 0-row-3 1-row-3 2-row-3
Parameter Vereist/optioneel Beschrijving
personalization.includeRenderedPropositions Vereist Stel deze parameter in op true . Deze parameter laat het verzenden van vertoningsgebeurtenissen toe die in de bovenkant van paginagebeurtenis werden onderdrukt.
xdm Optioneel Gebruik dit object om alle gegevens op te nemen die u onder aan de paginagebeurtenis wilt weergeven.
de markeringsuitbreiding van SDK van het Web

Configureer een Send event -actie in de regel die onder aan de pagina wordt geactiveerd. Schakel Use guided events in en selecteer vervolgens Collect analytics . Deze optie sluit 'Include rendered propositions' aan toegelaten.

Als u dit veld handmatig wilt instellen, laat u Use guided events uitgeschakeld en schakelt u Include rendered propositions rechtstreeks in. Naar keuze, bevolk het XDM gebied met een ​ XDM voorwerp ​ gegevenselement dat uw paginagegevens draagt.

Handmatig gerenderde voorstellingen bottom-manually-rendered

In het onderstaande voorbeeld wordt een onderkant van een paginagebeurtenis geconfigureerd die weergavegebeurtenissen verzendt voor voorstellen die handmatig op de pagina zijn weergegeven (dat wil zeggen voor aangepaste beslissingsbereiken of oppervlakken).

NOTE
In dit scenario moet de onderkant van de paginagebeurtenis wachten tot de gebeurtenis top van de pagina is voltooid, zodat de voorstellen kunnen worden weergegeven en opgenomen.
de bibliotheek van JavaScript
code language-js
alloy("sendEvent", {
  xdm: {
    ... // Optional bottom of page event data
    _experience: {
      decisioning: {
        propositions: propositions.map(function(p) {
          return {
            id: p.id,
            scope: p.scope,
            scopeDetails: p.scopeDetails
          };
        }),
        propositionEventType: {
          display: 1
        }
      }
    }
  }
});
table 0-row-3 1-row-3 2-row-3 3-row-3
Parameter Vereist/optioneel Beschrijving
xdm._experience.decisioning.propositions Vereist Deze sectie bepaalt manueel teruggegeven voorstellingen. U moet de voorstelling id , scope en scopeDetails opnemen. Zie ​ vertoningsgebeurtenissen ​ voor meer informatie beheren. Handmatig gerenderde verpersoonlijkingsinhoud moet onder aan de paginagebeurtenis worden opgenomen.
xdm._experience.decisioning.propositionEventType Vereist Stel deze parameter in op display: 1 .
xdm Optioneel Gebruik dit object om alle gegevens op te nemen die u onder aan de paginagebeurtenis wilt weergeven.
de markeringsuitbreiding van SDK van het Web

De optie 'Use guided events' behandelt dit scenario niet, zodat vormt manueel de actie:

  1. Creeer een ​ voorwerp XDM ​ (of ​ Variabele ​) gegevenselement dat _experience.decisioning.propositions met elk teruggegeven voorstel id bevolkt, scope, en scopeDetails, en plaatst _experience.decisioning.propositionEventType.display aan 1. Zie ​ vertoningsgebeurtenissen ​ voor meer informatie beheren.

  2. Laat in de handeling Send event voor de onderzijde van de paginalijn Use guided events uitgeschakeld en verwijs naar het gegevenselement in het veld XDM .

Toepassing van één pagina met boven- en onderzijde van paginagebeurtenissen spa-example

In een toepassing van één pagina, moet u de meningsnaam op elke meningsverandering specificeren zodat het Web SDK de correcte verpersoonlijking bij de bovenkant van de pagina teruggeeft en de correcte mening bij de bodem van de pagina registreert.

Weergave eerste pagina spa-first-view

In dit voorbeeld is home de weergave die wordt geladen op de eerste pagina die wordt geladen.

de bibliotheek van JavaScript

De hoogste vraag vraagt verpersoonlijking voor de home mening zonder een Analytics te registreren of vertoningsgebeurtenissen te ontslaan. In de onderste aanroep wordt de paginaweergave vastgelegd en worden de onderdrukte weergavegebeurtenissen geactiveerd. Neem dezelfde viewName op in beide aanroepen, zodat de weergave consistent wordt opgenomen.

code language-js
// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
    type: "decisioning.propositionFetch",
    renderDecisions: true,
    personalization: {
        sendDisplayEvent: false
    },
    xdm: {
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});
de markeringsuitbreiding van SDK van het Web
  1. Creeer een ​ XDM voorwerp ​ gegevenselement dat web.webPageDetails.viewName aan de naam van de mening (bijvoorbeeld, home) plaatst.

  2. Vorm een bovenkant van pagina Send event actie: laat Use guided events toe, selecteer Request personalization, en verwijs het gegevenselement in het XDM gebied.

  3. Vorm een bodem van pagina Send event actie: laat Use guided events toe, selecteer Collect analytics, en verwijs het zelfde gegevenselement in het XDM gebied zodat viewName in beide gebeurtenissen aanpast.

Weergave tweede pagina — optie 1 spa-second-view-option-1

In dit voorbeeld is één gebeurtenis voldoende omdat de personalisatie voor de pagina al is opgehaald.

de bibliotheek van JavaScript
code language-js
alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});
de markeringsuitbreiding van SDK van het Web
  1. Creeer een ​ XDM voorwerp ​ gegevenselement dat web.webPageDetails.viewName aan de naam van de nieuwe mening (bijvoorbeeld, cart) plaatst.

  2. Configureer bij de wijziging van de weergave één Send event -actie: laat Use guided events uitgeschakeld, schakel Render visual personalization decisions in en verwijs naar het gegevenselement in het XDM -veld.

Weergave tweede pagina — optie 2 spa-second-view-option-2

Gebruik deze aanpak wanneer u de onderkant van een paginagebeurtenis moet vertragen (bijvoorbeeld wanneer de analysegegevens van de pagina niet gereed zijn op het moment dat de weergave wordt gewijzigd). Verwerk de wijziging van de weergave in twee stappen:

  1. Geef boven aan de pagina de al opgehaalde voorstellen weer zonder een Edge Network-aanroep te maken.
  2. Als de analysegegevens gereed zijn, verzendt u de onderkant van de paginagebeurtenis.

Neem dezelfde viewName op in beide aanroepen, zodat de weergave consistent wordt opgenomen.

de bibliotheek van JavaScript

Roep applyPropositions boven aan de pagina aan om de in de cache opgeslagen voorstellingen voor de nieuwe weergave weer te geven. Roep vervolgens sendEvent onder aan de pagina aan met includeRenderedPropositions: true , zodat de onderdrukte weergavegebeurtenissen worden geactiveerd.

code language-js
// Top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
    viewName: "cart"
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});
de markeringsuitbreiding van SDK van het Web
  1. Creeer een ​ XDM voorwerp ​ gegevenselement dat web.webPageDetails.viewName aan de naam van de nieuwe mening (bijvoorbeeld, cart) plaatst.

  2. Voor de bovenkant van de paginagebeurtenis configureert u een Apply propositions -actie en stelt u het View name -veld in op de naam van de weergave (bijvoorbeeld cart ). Met deze handeling worden de al opgehaalde voorstellen weergegeven zonder contact op te nemen met de Edge Network.

  3. Voor de onderzijde van de paginagebeurtenis configureert u een Send event -actie: enable Use guided events , select Collect analytics en reference the data element in the XDM field.

GitHub-voorbeeld github-sample

Het ​ top-en-ondersteekproef in de legy-samples bewaarplaats ​ toont aan hoe te om verpersoonlijking bij de bovenkant van de pagina te verzoeken en analysegegevens bij de bodem te verzenden. Download het voorbeeld en voer het lokaal uit om te zien hoe de boven- en onderkant van paginagebeurtenissen werken. Het voorbeeld gebruikt rechtstreeks de JavaScript-bibliotheek; dezelfde patronen worden toegepast wanneer u equivalente regels configureert in de Web SDK-tagextensie.

recommendation-more-help
1ae86b30-e55e-49c1-ab11-9d0356a5f3e1