DocumentatieExperience PlatformDoel migreren van at.js 2.x naar Web SDK

Adobe Target Visual Experience Composer (VEC)-activiteiten renderen

Last update: Thu Oct 03 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • tussenpersoon
  • Ervaren
  • Ontwikkelaar

De doelactiviteiten worden opstelling gebruikend of Visual Experience Composer (VEC) of op vorm-gebaseerde composer. De het Web SDK van het Platform kan op VEC-Gebaseerde activiteiten op de pagina enkel zoals at.js terugwinnen en toepassen. Voor dit onderdeel van de migratie gaat u als volgt te werk:

  • De extensie van de browser Visual Editing Helper installeren
  • Voer een sendEvent vraag met het Web SDK van het Platform uit om activiteiten te verzoeken.
  • Werk alle verwijzingen van uw at.js-implementatie bij die getOffers() gebruiken om een Target pageLoad -aanvraag uit te voeren.

Visuele bewerkingshulpprogramma voor browsers

Met de Adobe Experience Cloud Visual Editing Helper-browserextensie voor Google Chrome kunt u websites betrouwbaar laden binnen de Adobe Target Visual Experience Composer (VEC) voor een snelle auteur en QA-webbeleving.

De visuele het Uitgeven browser van Helper uitbreiding werkt met websites die at.js of het Web SDK van het Platform gebruiken.

Vraag de Visual Editing Helper aan en installeer deze

  1. Navigeer aan Adobe Experience Cloud Visuele het Uitgeven Helper browser uitbreiding in de Opslag van het Web van Chrome.

  2. Klik toevoegen aan Chrome > Uitbreiding toevoegen.

  3. Open VEC in Doel.

  4. Om de uitbreiding te gebruiken, klik het Visuele het Uitgeven de browser van de Helper browser van de Helper pictogram

    Visuele het Uitgeven van het pictogram van de Uitbreiding {modal="regular"}

    in uw browser van Chrome terwijl op de Wijze VEC of QA.

De visuele het Uitgeven Helper wordt automatisch toegelaten wanneer een website in het Doel VEC aan macht authoring wordt geopend. De extensie heeft geen voorwaardelijke instellingen. De extensie verwerkt automatisch alle instellingen, inclusief de instellingen voor SameSite-cookies.

Verwijs naar de specifieke documentatie voor meer informatie over de Visuele het Uitgeven uitbreiding van de Helperen het oplossen van problemen de Visuele Composer van de Ervaring.

IMPORTANT
De nieuwe Visuele het Uitgeven uitbreiding van de Helpervervangt de vorige de Browser van de Helper van het Doel VEC uitbreiding. Als de oudere uitbreiding van de Helper VEC geïnstalleerd is, zou het moeten worden verwijderd of worden onbruikbaar gemaakt alvorens de Visuele Uitgevende uitbreiding van de Helper te gebruiken.

Inhoud automatisch aanvragen en toepassen

Nadat SDK van het Web van het Platform op de pagina wordt gevormd, kunt u inhoud van Doel verzoeken. In tegenstelling tot at.js die kan worden gevormd om inhoud automatisch te verzoeken wanneer de bibliotheek laadt, vereist het Web SDK van het Platform u uitdrukkelijk om een bevel uit te voeren.

Als voor uw at.js-implementatie de pageLoadEnabled -instelling is ingesteld op true , die automatische rendering van VEC-gebaseerde activiteiten mogelijk maakt, voert u de volgende sendEvent -opdracht uit met de Platform Web SDK:

JavaScript
code language-javascript 
alloy("sendEvent", {
  "renderDecisions": true
});
Markeringen

Gebruik in tags het actietype Send event met de optie Render visual personalization decisions geselecteerd:

verzend een gebeurtenis met Render visuele verpersoonlijkingsbesluiten die in markeringen {modal="regular"} worden geselecteerd

Inhoud aanvragen en op aanvraag toepassen

Sommige implementaties van het Doel vereisen één of andere douaneverwerking van aanbiedingen VEC alvorens hen op de pagina toe te passen. Of, vragen zij veelvoudige plaatsen in één enkele vraag. In een at.js-implementatie kunt u dit doen door pageLoadEnabled in te stellen op false en de getOffers() functie te gebruiken om een pageLoad request uit te voeren.

at.js-voorbeeld met getOffers() en applyOffers() om VEC-gebaseerde activiteiten handmatig te renderen
code language-javascript 
adobe.target.getOffers({
  request: {
    execute: {
      pageLoad: {}
    }
  }
}).
then(response => adobe.target.applyOffers({ response: response }));

De Platform Web SDK heeft geen specifieke pageLoad -gebeurtenis. Alle aanvragen voor doelinhoud worden beheerd met de optie decisionScopes met de opdracht sendEvent . Het __view__ bereik dient voor het doel van de pageLoad aanvraag.

Een equivalente Web SDK van het Platform sendEvent benadering:
  1. Een opdracht sendEvent uitvoeren die het __view__ beslissingsbereik bevat
  2. De geretourneerde inhoud met de opdracht applyPropositions toepassen op de pagina
  3. Een opdracht sendEvent uitvoeren met het gebeurtenistype en de propositiegegevens van decisioning.propositionDisplay om de indruk te vergroten
code language-javascript 
alloy("sendEvent", {
  // Request the special "__view__" scope for target-global-mbox / pageLoad
  decisionScopes: ["__view__"]
}).then(function(result) {
  // Check if content (propositions) were returned
  if (result.propositions) {
    var retrievedPropositions = result.propositions;
    // Apply propositions to the page
    return alloy("applyPropositions", {
      propositions: retrievedPropositions
    }).then(function(applyPropositionsResult) {
      var renderedPropositions = applyPropositionsResult.propositions;
      // Send a display notification with the sendEvent command
      alloy("sendEvent", {
        "xdm": {
          "eventType": "decisioning.propositionDisplay",
          "_experience": {
            "decisioning": {
              "propositions": renderedPropositions
            }
          }
        }
      });
    });
  }
});
NOTE
Het is mogelijk om manueel wijzigingenterug te geven die in de Visuele Composer van de Ervaring worden gemaakt. Handmatige rendering van op VEC gebaseerde wijzigingen komt niet vaak voor. Controleer of uw at.js-implementatie de functie getOffers() gebruikt om handmatig een Target pageLoad -aanvraag uit te voeren zonder applyOffers() te gebruiken om de inhoud op de pagina toe te passen.

De SDK van het Web van het Platform biedt ontwikkelaars heel wat flexibiliteit met het vragen van en het teruggeven van inhoud aan. Verwijs naar de specifieke documentatie over het teruggeven van gepersonaliseerde inhoudvoor extra opties en details.

Voorbeeld van implementatie

De basisimplementatie van Web SDK van het Platform is nu voltooid.

JavaScript

JavaScript-voorbeeld met automatische rendering van Target-inhoud:

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

  <!--Platform Web SDK base code-->
  <script>
    !function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||
    []).push(o),n[o]=function(){var u=arguments;return new Promise(
    function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}
    (window,["alloy"]);
  </script>

  <!--Platform Web SDK loaded asynchonously. Change the src to use the latest supported version.-->
  <script src="https://cdn1.adoberesources.net/alloy/2.6.4/alloy.min.js" async></script>

  <!--Configure Platform Web SDK then send event-->
  <script>
    alloy("configure", {
      "edgeConfigId": "ebebf826-a01f-4458-8cec-ef61de241c93",
      "orgId":"ADB3LETTERSANDNUMBERS@AdobeOrg"
    });

    // Send an event to the Adobe edge network and render Target content automatically
    alloy("sendEvent", {
      "renderDecisions": true
    });
  </script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>
Markeringen

Hiermee wordt de voorbeeldpagina gecodeerd met de automatische rendering van Target-inhoud:

code language-html 
<!doctype html>
<html>
<head>
  <title>Example page</title>
  <!--Data Layer to enable rich data collection and targeting-->
  <script>
    var digitalData = {
      // Data layer information goes here
    };
  </script>

  <!--Third party libraries that may be used by Target offers and modifications-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!--Prehiding snippet for Target with asynchronous Web SDK deployment-->
  <script>
    !function(e,a,n,t){var i=e.head;if(i){
    if (a) return;
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("mboxEdit") !== -1, ".body { opacity: 0 !important }", 3000);
  </script>

    <!--Tags Header Embed Code: REPLACE WITH THE INSTALL CODE FROM YOUR OWN ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
</head>
<body>
  <h1 id="title">Home Page</h1><br><br>
  <p id="bodyText">Navigation</p><br><br>
  <a id="home" class="navigationLink" href="#">Home</a><br>
  <a id="pageA" class="navigationLink" href="#">Page A</a><br>
  <a id="pageB" class="navigationLink" href="#">Page B</a><br>
  <a id="pageC" class="navigationLink" href="#">Page C</a><br>
  <div id="homepage-hero">Homepage Hero Banner Content</div>
</body>
</html>

Voeg de extensie Adobe Experience Platform Web SDK toe aan tags:

voeg de uitbreiding van SDK van het Web van Adobe Experience Platform {modal="regular"} toe

Voeg de gewenste configuraties toe:
vormend de de migratieopties van de de marktextensie van SDK van het Web {modal="regular"}

Maak een regel met een Send event -handeling en Render visual personalization decisions geselecteerd:
verzend een gebeurtenis met Render Personalizations die in markeringen worden geselecteerd {modal="regular"}

Daarna, leer hoe te om te verzoeken en vorm-gebaseerde activiteiten van het Doelteruggeven.

NOTE
Wij zijn geëngageerd om u met uw migratie van het Doel van at.js aan Web SDK te helpen succesvol zijn. Als u in obstakels met uw migratie loopt of als er kritieke informatie ontbreekt in deze gids voelt, gelieve ons te vertellen door in deze communautaire besprekingte posten.
recommendation-more-help
a69e1b51-9545-4d8a-822d-319242c29110