Dokumentation Experience Platform Web SDK-Tutorial

Einrichten von Adobe Target mit dem Platform Web SDK

Last update: Mon Mar 11 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:
Web SDK,Tags

Erstellt für:

Beginner
Intermediate
Developer

CAUTION

Wir gehen davon aus, dass am Freitag, dem 15. März 2024, wichtige Änderungen an diesem Tutorial veröffentlicht werden. Danach ändern sich viele Übungen und Sie müssen das Tutorial möglicherweise von Anfang an neu starten, um alle Lektionen abzuschließen.

Erfahren Sie, wie Sie Adobe Target mit dem Platform Web SDK implementieren. Erfahren Sie, wie Sie Erlebnisse bereitstellen und zusätzliche Parameter an Target übergeben.

Adobe Target ist die Adobe Experience Cloud-Anwendung, die Ihnen all das bietet, was Sie benötigen, um die Erlebnisse Ihrer Kunden anzupassen und zu personalisieren, sodass Sie Umsätze auf Ihren Web- und mobilen Sites, in Apps und anderen digitalen Kanälen maximieren können.

Lernziele

Am Ende dieser Lektion können Sie:

Erfahren Sie, wie Sie den Codeausschnitt zur Vorab-Ausblendung des Platform Web SDK hinzufügen, um ein Flackern bei der Verwendung von Target mit asynchronen Tag-Einbettungscodes zu verhindern.
Konfigurieren eines Datenspeichers zur Aktivierung der Target-Funktion
visuelle Personalisierungsentscheidungen beim Laden der Seite rendern (früher "globale Mbox")
Übergeben von XDM-Daten an Target und Verstehen der Zuordnung zu Target-Parametern
Übergeben benutzerdefinierter Daten an Target, z. B. Profil- und Entitätsparameter
Validieren einer Target-Implementierung mit dem Platform Web SDK

TIP

Siehe unsere Migrieren von Target von at.js 2.x zum Platform Web SDK Tutorial für eine schrittweise Anleitung zum Migrieren Ihrer vorhandenen at.js-Implementierung.

Voraussetzungen

Um die Lektionen in diesem Abschnitt abzuschließen, müssen Sie zunächst:

Schließen Sie alle Lektionen für die Erstkonfiguration des Platform Web SDK ab, einschließlich der Einrichtung von Datenelementen und Regeln.
Vergewissern Sie sich, dass Editor- oder Genehmigerrolle.
Installieren Sie die Visual Experience Composer Helper-Erweiterung wenn Sie den Google Chrome-Browser verwenden.
Erfahren Sie, wie Sie Aktivitäten in Target einrichten. Wenn Sie einen Auffrischungskurs benötigen, sind die folgenden Tutorials und Handbücher für diese Lektion hilfreich:

Flackerverhinderung hinzufügen

Stellen Sie vor dem Start fest, ob je nachdem, wie die Tag-Bibliothek geladen wird, eine zusätzliche Lösung zur Flackerverarbeitung erforderlich ist.

NOTE

In diesem Tutorial wird die Site "Luma" , die eine asynchrone Implementierung von Tags und eine Flackerverhinderung aufweist. In diesem Abschnitt erhalten Sie Informationen dazu, wie die Flackerverhinderung mit dem Platform Web SDK funktioniert.

Asynchrone Implementierung

Wenn eine Tag-Bibliothek asynchron geladen wird, kann das Rendern der Seite abgeschlossen sein, bevor Target einen Inhaltsaustausch durchgeführt hat. Dieses Verhalten kann zum so genannten "Flackern"führen. Dabei wird kurz der Standardinhalt angezeigt, bevor er durch den von Target angegebenen personalisierten Inhalt ersetzt wird. Wenn Sie dieses Flimmern vermeiden möchten, empfiehlt Adobe, unmittelbar vor dem asynchronen Tag-Einbettungscode einen speziellen Codeausschnitt zur Vorab-Ausblendung hinzuzufügen.

Dieses Snippet ist bereits auf der Site "Luma"vorhanden, aber schauen wir uns genauer an, um zu verstehen, was dieser Code bewirkt:

<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("adobe_authoring_enabled") !== -1, ".personalization-container { opacity: 0 !important }", 3000);
</script>

Der vorab ausgeblendete Ausschnitt erstellt ein Stil-Tag im Seitenkopf mit der CSS-Definition Ihrer Wahl. Dieses Stil-Tag wird entfernt, wenn eine Antwort von Target empfangen wird oder die Zeitüberschreitung erreicht wird.

Das Verhalten der Vorab-Ausblendung wird durch zwei Konfigurationen am Ende des Ausschnitts gesteuert.

body { opacity: 0 !important } gibt die CSS-Definition an, die für die Vorab-Ausblendung verwendet werden soll, bis Target geladen wird. Standardmäßig ist die gesamte Seite ausgeblendet. Sie können diese Definition auf die Selektoren aktualisieren, die Sie vorab ausblenden möchten, sowie auf die Art und Weise, wie Sie sie ausblenden möchten. Sie können mehrere Definitionen einbeziehen, da dieser Wert einfach in das vorab ausgeblendete Stil-Tag eingefügt wird. Wenn Sie über ein leicht identifizierbares Container-Element verfügen, das den Inhalt unter Ihrer Navigation einschließt, können Sie diese Einstellung verwenden, um die Vorab-Ausblendung auf dieses Container-Element zu beschränken.
3000 gibt die Zeitüberschreitung in Millisekunden für die Vorab-Ausblendung an. Wenn vor der Zeitüberschreitung keine Antwort von Target empfangen wird, wird das Stil-Tag für die Vorab-Ausblendung entfernt. Das Erreichen dieser Zeitüberschreitung sollte selten sein.

NOTE

Der Codeausschnitt zur Vorab-Ausblendung für das Platform Web SDK unterscheidet sich geringfügig von dem für die at.js-Bibliothek von Target verwendeten. Stellen Sie sicher, dass Sie das richtige Snippet für das Platform Web SDK verwenden, da es eine andere Stil-ID verwendet als alloy-prehiding. Wenn der vorab ausgeblendete Ausschnitt für at.js verwendet wird, funktioniert er möglicherweise nicht ordnungsgemäß.

Der vorab ausgeblendete Ausschnitt ist auch innerhalb von Tags verfügbar:

Navigieren Sie zu Erweiterungen -Abschnitt von Tags
Auswählen Konfigurieren für die Adobe Experience Platform Web SDK-Erweiterung

Wählen Sie die Codeausschnitt zur Vorab-Ausblendung in die Zwischenablage kopieren button

Codeausschnitt zur Vorab-Ausblendung für asynchrone Implementierungen mit Target

note note
NOTE
Der standardmäßige Codeausschnitt zur Vorab-Ausblendung, der aus der Platform Web SDK-Erweiterung kopiert wird, kann eine CSS-Definition enthalten, die auf Ihrer Site nicht vorhanden ist, z. B. `.personalization-container { opacity: 0 !important }`. Stellen Sie sicher, dass Sie das vorab ausgeblendete Snippet für Ihre Site entsprechend überprüfen und ändern.

Synchrone Implementierung

Adobe empfiehlt die asynchrone Implementierung von Tags, wie auf der Site "Luma"gezeigt. Wenn die Tag-Bibliothek jedoch synchron geladen wird, ist das vorab ausgeblendete Snippet nicht erforderlich. Stattdessen wird der Vorab-Ausblendestil in den Einstellungen der Platform Web SDK-Erweiterung angegeben.

Der Vorab-Ausblendestil für synchrone Implementierungen kann wie folgt konfiguriert werden:

Navigieren Sie zu Erweiterungen -Abschnitt von Tags
Wählen Sie die Konfigurieren Schaltfläche für die Platform Web SDK-Erweiterung
Wählen Sie die Vorab-Ausblendungsstil bearbeiten button
Ändern Sie das CSS, um die Selektoren und Ausblendemethoden einzuschließen, die Sie verwenden möchten, z. B.: body { opacity: 0 !important } , wenn Sie den gesamten Text der Seite vorab ausblenden möchten.
Speichern Sie Ihre Änderungen und erstellen Sie sie in einer Bibliothek.

NOTE

Die Einstellung für den Stil vor der Ausblendung sollte nur für synchrone Implementierungen verwendet werden. Dieser Stil sollte leer sein oder auskommentiert sein, wenn Sie eine asynchrone Implementierung von Tags verwenden.

Weiterführende Informationen zur Verwaltung von Flackern mit dem Platform Web SDK finden Sie im Abschnitt zum Handbuch: Beheben von Flackern bei personalisierten Erlebnissen.

Konfigurieren des Datenspeichers

Target muss in der Datastream-Konfiguration aktiviert sein, bevor Target-Aktivitäten vom Platform Web SDK bereitgestellt werden können.

So konfigurieren Sie Target im Datastream:

Navigieren Sie zu Datenerfassung Benutzeroberfläche
Wählen Sie im linken Navigationsbereich die Option Datenspeicher
Wählen Sie die zuvor erstellte Luma Web SDK datastream
Wählen Sie Service hinzufügen aus
Auswählen Adobe Target als Dienst
Geben Sie bei Bedarf die optionalen Details zur Target-Implementierung ein. Befolgen Sie dabei die unten stehenden Anleitungen.
Wählen Sie Speichern aus

Eigenschafts-Token

Target Premium-Kunden haben die Möglichkeit, Benutzerberechtigungen mit Eigenschaften zu verwalten. Mit Target-Eigenschaften können Sie Grenzen festlegen, um die Benutzer Target-Aktivitäten ausführen können. Siehe Abschnitt Unternehmensberechtigungen in der Target-Dokumentation .

Um Eigenschafts-Token einzurichten oder zu finden, navigieren Sie zu Adobe Target > Administration > Eigenschaften. Die </> zeigt den Implementierungscode an. Die at_property value ist das Eigenschafts-Token, das Sie in Ihrem Datastream verwenden würden.

Target-Eigenschafts-Token

NOTE

Pro Datastream kann nur ein Eigenschafts-Token angegeben werden.

Target-Umgebungs-ID

Umgebungen in Target können Sie Ihre Implementierung in allen Entwicklungsstadien verwalten. Diese optionale Einstellung gibt an, welche Target-Umgebung Sie für jeden Datastream verwenden werden.

Adobe empfiehlt, die Target-Umgebungs-ID für jeden Ihrer Entwicklungs-, Staging- und Produktionsdatastreams unterschiedlich festzulegen, um die Dinge einfach zu halten.

Um Umgebungs-IDs einzurichten oder zu finden, navigieren Sie zu Adobe Target > Administration > Umgebungen.

Zielgruppen-Umgebungen

NOTE

Wenn keine Target-Umgebungs-ID angegeben ist, wird von der Target-Produktionsumgebung ausgegangen.

Target-Drittanbieter-ID-Namespace

Mit dieser optionalen Einstellung können Sie festlegen, welches Identitätssymbol für die Target-Drittanbieter-ID verwendet werden soll. Target unterstützt nur die Profilsynchronisierung für ein einzelnes Identitätssymbol oder Namespace. Weitere Informationen finden Sie im Abschnitt Echtzeit-Profilsynchronisierung für mbox3rdPartyId Abschnitt des Target-Handbuchs.

Die Identitätssymbole befinden sich in der Identitätsliste unter Datenerfassung > Kunde > Identitäten.

Identitätsliste

Verwenden Sie für diese Anleitung mit der Site "Luma"das Identitätssymbol lumaCrmId eingerichtet während der Lektion über Identitäten.

visuelle Personalisierungsentscheidungen rendern

Zunächst sollten Sie die in den Target- und Tag-Schnittstellen verwendete Terminologie verstehen.

Aktivität: Ein Satz von Erlebnissen, die auf eine oder mehrere Zielgruppen ausgerichtet sind. Ein einfacher A/B-Test könnte beispielsweise eine Aktivität mit zwei Erlebnissen sein.
Erlebnis: Eine Reihe von Aktionen, die auf einen oder mehrere Standorte oder Entscheidungsbereiche ausgerichtet sind.
Entscheidungsbereich: Ein Ort, an dem ein Target-Erlebnis bereitgestellt wird. Entscheidungsbereiche entsprechen "Mboxes", wenn Sie mit älteren Target-Versionen vertraut sind.
Personalisierungsentscheidung: Eine vom Server festgelegte Aktion, die angewendet werden soll. Diese Entscheidungen können auf Zielgruppenkriterien und der Priorisierung der Target-Aktivität basieren.
Vorschlag: Das Ergebnis der vom Server getroffenen Entscheidungen, die in der Platform Web SDK-Antwort bereitgestellt werden. Ein Tausch eines Bannerbilds wäre beispielsweise ein Vorschlag.

Seitenladeregel aktualisieren

Entscheidungen zur visuellen Personalisierung von Target werden vom Platform Web SDK bereitgestellt, wenn Target im Datastream aktiviert ist. Allerdings sie werden nicht automatisch gerendert. Sie müssen die globale Seitenladeregel ändern, um das automatische Rendering zu aktivieren.

Im Datenerfassung -Schnittstelle die Tag-Eigenschaft öffnen, die Sie für dieses Tutorial verwenden
Öffnen Sie die all pages - library load - AA & AT Regel
Wählen Sie die Adobe Experience Platform Web SDK - Send event action
Aktivieren visuelle Personalisierungsentscheidungen rendern mit dem Kontrollkästchen
Speichern Sie Ihre Änderungen und erstellen Sie sie dann in Ihrer Bibliothek.

Durch die Einstellung der visuellen Personalisierungsentscheidungen beim Rendern wendet das Platform Web SDK automatisch alle Änderungen an, die mit dem Target Visual Experience Composer oder der "globalen Mbox"angegeben wurden.

NOTE

In der Regel wird die visuelle Personalisierungsentscheidungen rendern sollte nur für eine einzelne Aktion "Ereignis senden"pro vollständigem Laden der Seite aktiviert werden. Wenn diese Einstellung für mehrere Aktionen vom Typ Ereignis senden aktiviert ist, werden nachfolgende Renderanforderungen ignoriert.

Wenn Sie diese Entscheidungen mithilfe von benutzerdefiniertem Code lieber selbst rendern oder bearbeiten möchten, können Sie die visuelle Personalisierungsentscheidungen rendern Einstellung deaktiviert. Das Platform Web SDK ist flexibel und bietet diese Möglichkeit, Ihnen vollständige Kontrolle zu geben. Weitere Informationen zu Manuelles Rendern von personalisiertem Inhalt.

Target-Aktivität mit dem Visual Experience Composer einrichten

Nachdem der grundlegende Implementierungsabschnitt abgeschlossen ist, erstellen Sie eine Erlebnis-Targeting-Aktivität (XT) in Target, um zu überprüfen, ob alles ordnungsgemäß funktioniert. Sie können das Target-Tutorial für Erstellen von Erlebnis-Targeting-Aktivitäten wenn Sie Hilfe benötigen.

NOTE

Wenn Sie Google Chrome als Browser verwenden, wird die Visual Experience Composer (VEC) Helper-Erweiterung ist erforderlich, um die Site ordnungsgemäß zur Bearbeitung im VEC zu laden.

Navigieren zu Target
Erstellen Sie eine Erlebnis-Targeting-Aktivität (XT) mit der Startseite "Luma"für die Aktivitäts-URL
Ändern Sie die Seite, beispielsweise ändern Sie den Text auf dem Startseitenbanner

Wählen Sie Adobe Analytics als Berichtsquelle mit der entsprechenden Report Suite und der Bestellungsmetrik als Ziel aus.

note note
NOTE
Wenn Sie Adobe Analytics nicht verwenden, wählen Sie Target als Berichtsquelle aus und wählen Sie eine andere Metrik wie Interaktion > Seitenansichten anstatt. Zum Speichern und Anzeigen der Vorschau der Aktivität ist eine Zielmetrik erforderlich.

Speichern Sie die Aktivität
Wenn Sie mit Ihren Änderungen vertraut sind, können Sie Ihre Aktivität aktivieren. Wenn Sie andernfalls eine Vorschau des Erlebnisses ohne Aktivierung anzeigen möchten, können Sie die QA-Vorschau-URL.
Laden Sie die Startseite von Luma und Sie sollten sehen, wie Ihre Änderungen angewendet wurden.
Nach einigen Stunden sollten Target-Aktivitätsdaten und -konversionen in Adobe Analytics angezeigt werden. Ausführliche Informationen finden Sie im Target-Handbuch . Berichterstellung von Analytics for Target (A4T).

Validieren mit dem Debugger

Wenn Sie eine Aktivität einrichten, sollte Ihr Inhalt auf der Seite gerendert werden. Selbst wenn keine Aktivitäten live sind, können Sie sich auch den Netzwerkaufruf "Ereignis senden"ansehen, um zu bestätigen, dass Target ordnungsgemäß konfiguriert ist.

CAUTION

Wenn Sie Google Chrome verwenden und die Variable Visual Experience Composer (VEC) Helper-Erweiterung installiert ist, stellen Sie sicher, dass die Target-Bibliotheken einfügen ist deaktiviert. Die Aktivierung dieser Einstellung führt zu zusätzlichen Target-Anforderungen.

Öffnen Sie die Adobe Experience Platform Debugger-Browsererweiterung
Navigieren Sie zu Demosite "Luma" und verwenden Sie den Debugger zum Ändern Sie die Tag-Eigenschaft auf der Site in Ihre eigene Entwicklungseigenschaft.
Seite neu laden
Wählen Sie die Netzwerk -Tool im Debugger
Filtern nach Adobe Experience Platform Web SDK
Wählen Sie den Wert in der Ereigniszeile für den ersten Aufruf aus
Beachten Sie, dass es unter Schlüssel gibt. query > personalization und decisionScopes hat den Wert von __view__. Dieser Umfang entspricht der "globalen Mbox"von Target. Bei diesem Platform Web SDK-Aufruf wurden Entscheidungen von Target angefordert.
Schließen Sie die Überlagerung und wählen Sie die Ereignisdetails für den zweiten Netzwerkaufruf aus. Dieser Aufruf ist nur vorhanden, wenn Target eine Aktivität zurückgegeben hat.
Beachten Sie, dass es Details zur Aktivität und zum Erlebnis gibt, die von Target zurückgegeben werden. Dieser Platform Web SDK-Aufruf sendet eine Benachrichtigung, dass eine Target-Aktivität an den Benutzer gerendert wurde, und erhöht eine Impression.

Einrichten und Rendern eines benutzerdefinierten Entscheidungsbereichs

Benutzerdefinierte Entscheidungsbereiche (ehemals "Mboxes") können verwendet werden, um HTML- oder JSON-Inhalte mit dem formularbasierten Experience Composer von Target strukturiert bereitzustellen. Inhalte, die an einen dieser benutzerdefinierten Bereiche gesendet werden, werden nicht automatisch vom Platform Web SDK gerendert.

Hinzufügen eines Bereichs zur Seitenladeregel

Ändern Sie Ihre Seitenladeregel, um einen benutzerdefinierten Entscheidungsbereich hinzuzufügen:

Öffnen Sie die all pages - library load - AA & AT Regel
Wählen Sie die Adobe Experience Platform Web SDK - Send Event action
Fügen Sie einen oder mehrere Bereiche hinzu, die Sie verwenden möchten. Verwenden Sie für dieses Beispiel homepage-hero.
Speichern Sie Ihre Änderungen und erstellen Sie in Ihrer Bibliothek.

TIP

Für dieses Tutorial verwenden Sie einen einzigen manuell definierten Bereich zu Demonstrationszwecken. Wenn Sie sich für die Verwendung mehrerer Entscheidungsbereiche entscheiden, die für bestimmte Seiten vorgesehen sind, sollten Sie in Erwägung ziehen, ein Datenelement zu verwenden, das abhängig vom Seitenpfad ein Array von Bereichen zurückgibt. Dieser Ansatz hilft, Ihre Implementierung einfach und skalierbar zu halten.

Antwort von Target verarbeiten

Nachdem Sie das Platform Web SDK konfiguriert haben, um Inhalte für die homepage-hero -Bereich, müssen Sie etwas mit der Antwort tun. Die Tag-Erweiterung des Platform Web SDK bietet eine Ereignis-Abschluss senden -Ereignis, mit dem eine neue Regel sofort Trigger werden kann, wenn eine Antwort von einer Ereignis senden -Aktion empfangen wird.

Erstellen Sie eine Regel mit dem Namen homepage - send event complete - render homepage-hero.
Fügen Sie der Regel ein Ereignis hinzu. Verwenden Sie die Adobe Experience Platform Web SDK und Abschluss des Ereignisses senden Ereignistyp.
Fügen Sie eine Bedingung hinzu, um die Regel auf die Startseite von Luma zu beschränken (Pfad ohne Abfragezeichenfolge ist gleich /content/luma/us/en.html).

Fügen Sie der Regel eine Aktion hinzu. Verwenden Sie die Core Erweiterung und Benutzerspezifischer Code Aktionstyp.

Herd-Regel Render homepage

note tip
TIP
Geben Sie Ihren Regelereignissen, Bedingungen und Aktionen beschreibende Namen, anstatt die Standardnamen zu verwenden. Robuste Komponentennamen von Regeln machen die Suchergebnisse viel nützlicher.

Geben Sie benutzerdefinierten Code ein, um die von der Platform Web SDK-Antwort zurückgegebenen Vorschläge zu lesen und Aktionen auszuführen. Der benutzerdefinierte Code in diesem Beispiel verwendet den Ansatz, der im Handbuch für Manuelles Rendern von personalisiertem Inhalt. Der Code wurde für die homepage-hero Beispielsbereich mit einer Tag-Regel-Aktion.

code language-javascript

code language-javascript
var propositions = event.propositions; var heroProposition; if (propositions) { // Find the hero proposition, if it exists. for (var i = 0; i < propositions.length; i++) { var proposition = propositions[i]; if (proposition.scope === "homepage-hero") { heroProposition = proposition; break; } } } var heroHtml; if (heroProposition) { // Find the item from proposition that should be rendered. // Rather than assuming there a single item that has HTML // content, find the first item whose schema indicates // it contains HTML content. for (var j = 0; j < heroProposition.items.length; j++) { var heroPropositionItem = heroProposition.items[j]; if (heroPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") { heroHtml = heroPropositionItem.data.content; break; } } } if (heroHtml) { // Hero HTML exists. Time to render it. var heroElement = document.querySelector(".heroimage"); heroElement.innerHTML = heroHtml; // For this example, we assume there is only a signle place to update in the HTML. } // Send a "display" event alloy("sendEvent", { xdm: { eventType: "propositionDisplay", _experience: { decisioning: { propositions: [ { id: heroProposition.id, scope: heroProposition.scope, scopeDetails: heroProposition.scopeDetails } ] } } } });

var propositions = event.propositions;

var heroProposition;
if (propositions) {
   // Find the hero proposition, if it exists.
   for (var i = 0; i < propositions.length; i++) {
      var proposition = propositions[i];
      if (proposition.scope === "homepage-hero") {
         heroProposition = proposition;
         break;
      }
   }
}

var heroHtml;
if (heroProposition) {
   // Find the item from proposition that should be rendered.
   // Rather than assuming there a single item that has HTML
   // content, find the first item whose schema indicates
   // it contains HTML content.
   for (var j = 0; j < heroProposition.items.length; j++) {
      var heroPropositionItem = heroProposition.items[j];
      if (heroPropositionItem.schema === "https://ns.adobe.com/personalization/html-content-item") {
         heroHtml = heroPropositionItem.data.content;
         break;
      }
   }
}

if (heroHtml) {
   // Hero HTML exists. Time to render it.
   var heroElement = document.querySelector(".heroimage");
   heroElement.innerHTML = heroHtml;
   // For this example, we assume there is only a signle place to update in the HTML.
}

// Send a "display" event
alloy("sendEvent", {
   xdm: {
      eventType: "propositionDisplay",
      _experience: {
         decisioning: {
            propositions: [
               {
                  id: heroProposition.id,
                  scope: heroProposition.scope,
                  scopeDetails: heroProposition.scopeDetails
               }
            ]
         }
      }
   }
});

Speichern Sie Ihre Änderungen und erstellen Sie in Ihrer Bibliothek.
Laden Sie die Startseite von Luma einige Male, was ausreicht, um die neue Seite zu erstellen. homepage-hero Entscheidungsumfang in der Target-Oberfläche registrieren.

Target-Aktivität mit dem formularbasierten Experience Composer einrichten

Nachdem Sie jetzt über eine Regel verfügen, um einen benutzerdefinierten Entscheidungsbereich manuell zu rendern, können Sie eine weitere Erlebnis-Targeting-Aktivität (XT) in Target erstellen. Verwenden Sie diesmal den formularbasierten Experience Composer.

Öffnen Adobe Target
Deaktivieren Sie die für die vorherige Lektion verwendete Aktivität
Erstellen einer Erlebnis-Targeting-Aktivität (XT) mit der Option Form-Based Experience Composer
Wählen Sie die homepage-hero Standort aus der Dropdown-Liste "Position"und HTML-Angebot erstellen aus der Dropdown-Liste Inhalt . Wenn der Speicherort nicht verfügbar ist, können Sie ihn eingeben. Target füllt regelmäßig neue Ortsnamen aus, nachdem Anforderungen für diesen Ort oder Bereich empfangen wurden.

Fügen Sie den folgenden Code in das Inhaltsfeld ein. Dieser Code ist ein einfaches Hero-Banner mit einem anderen Hintergrundbild:

code language-html

code language-html
`<div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');"> <div class="container cq-dd-image"> <div class="we-HeroImage-wrapper"> <p class="h3">New Luma Yoga Collection</p> <strong class="we-HeroImage-title h1">Be active with style </strong> <p> <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a> </p> </div> </div> </div>`

<div class="we-HeroImage jumbotron" style="background-image: url('/content/luma/us/en/women/_jcr_content/root/hero_image.coreimg.jpeg');">
   <div class="container cq-dd-image">
      <div class="we-HeroImage-wrapper">
         <p class="h3">New Luma Yoga Collection</p>
         <strong class="we-HeroImage-title h1">Be active with style&nbsp;</strong>
         <p>
            <a class="btn btn-primary btn-action" href="/content/luma/us/en/products.html" role="button">Shop Now</a>
         </p>
      </div>
   </div>
</div>

Im Ziele und Einstellungen wählen Sie Adobe Target als Berichtsquelle und Interaktion > Seitenansichten als Ziel
Speichern Sie die Aktivität
Wenn Sie mit Ihren Änderungen vertraut sind, können Sie Ihre Aktivität aktivieren. Wenn Sie andernfalls eine Vorschau des Erlebnisses ohne Aktivierung anzeigen möchten, können Sie die QA-Vorschau-URL.
Laden Sie die Startseite von Luma und Sie sollten sehen, wie Ihre Änderungen angewendet wurden.

NOTE

Das Konversionsziel "Auf mbox geklickt"funktioniert nicht automatisch. Da das Platform Web SDK benutzerdefinierte Bereiche nicht automatisch rendert, werden Klicks nicht an Orte verfolgt, an denen Sie den Inhalt anwenden möchten. Sie können Ihr eigenes Klick-Tracking für jeden Bereich mit dem Klick erstellen eventType mit dem entsprechenden _experience Details mithilfe der sendEvent Aktion.

Validieren mit dem Debugger

Wenn Sie Ihre Aktivität aktiviert haben, sollte Ihr Inhalt auf der Seite gerendert werden. Selbst wenn keine Aktivitäten live sind, können Sie auch die Ereignis senden Netzwerkaufruf zur Bestätigung, dass Target Inhalte für Ihre benutzerdefinierten Bereiche anfordert.

Öffnen Sie die Adobe Experience Platform Debugger-Browsererweiterung
Navigieren Sie zu Demosite "Luma" und verwenden Sie den Debugger zum Ändern Sie die Tag-Eigenschaft auf der Site in Ihre eigene Entwicklungseigenschaft.
Seite neu laden
Wählen Sie die Netzwerk -Tool im Debugger
Filtern nach Adobe Experience Platform Web SDK
Wählen Sie den Wert in der Ereigniszeile für den ersten Aufruf aus
Beachten Sie, dass es unter Schlüssel gibt. query > personalization und decisionScopes hat den Wert von __view__ wie zuvor, aber jetzt gibt es auch eine homepage-hero umfasst. Durch diesen Platform Web SDK-Aufruf wurden Entscheidungen von Target für Änderungen angefordert, die mithilfe des VEC und der spezifischen homepage-hero Standort.
Schließen Sie die Überlagerung und wählen Sie die Ereignisdetails für den zweiten Netzwerkaufruf aus. Dieser Aufruf ist nur vorhanden, wenn Target eine Aktivität zurückgegeben hat.
Beachten Sie, dass es Details zur Aktivität und zum Erlebnis gibt, die von Target zurückgegeben werden. Dieser Platform Web SDK-Aufruf sendet eine Benachrichtigung, dass eine Target-Aktivität an den Benutzer gerendert wurde, und erhöht eine Impression.

Übergeben zusätzlicher Daten an Target

In diesem Abschnitt übergeben Sie Target-spezifische Daten und sehen sich genauer an, wie XDM-Daten Target-Parametern zugeordnet werden.

Es gibt einige Datenpunkte, die für Target nützlich sein können und nicht vom XDM-Objekt zugeordnet sind. Zu diesen speziellen Target-Parametern gehören:

Erstellen von Datenelementen für Target-Parameter

Zunächst richten Sie einige zusätzliche Datenelemente für ein Profilattribut, Entitätsattribut und Kategoriewert ein und erstellen dann die data -Objekt, das zum Übergeben von Nicht-XDM-Daten verwendet wird:

target.entity.id zugeordnet zu digitalData.product.0.productInfo.sku
target.entity.name zugeordnet zu digitalData.product.0.productInfo.title

target.user.categoryId Verwenden Sie den folgenden benutzerspezifischen Code, um die Site-URL für die Kategorie der obersten Ebene zu analysieren:

code language-javascript
`var cat = location.pathname.split(/[/.]+/); if (cat[5] == 'products') { return (cat[6]); } else if (cat[5] != 'html') { return (cat[5]); }`

data.content unter Verwendung des folgenden benutzerspezifischen Codes:

code language-javascript

code language-javascript
`var data = { __adobe: { target: { "entity.id": _satellite.getVar("target.entity.id"), "entity.name": _satellite.getVar("target.entity.name"), "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"), "user.categoryId": _satellite.getVar("target.user.categoryId") } } } return data;`

var data = {
   __adobe: {
      target: {
         "entity.id": _satellite.getVar("target.entity.id"),
         "entity.name": _satellite.getVar("target.entity.name"),
         "profile.loggedIn": _satellite.getVar("user.profile.attributes.loggedIn"),
         "user.categoryId": _satellite.getVar("target.user.categoryId")
      }
   }
}
return data;

Seitenladeregel aktualisieren

Das Übergeben zusätzlicher Daten für Target außerhalb des XDM-Objekts erfordert die Aktualisierung der entsprechenden Regeln. Für dieses Beispiel müssen Sie nur die neue data.content -Datenelement zur generischen Seitenladeregel und Produktseitenansichtsregel hinzugefügt.

Öffnen Sie die all pages - library load - AA & AT Regel
Wählen Sie die Adobe Experience Platform Web SDK - Send event action
Fügen Sie die data.content Datenelement zum Datenfeld
Speichern Sie Ihre Änderungen und erstellen Sie in Ihrer Bibliothek.
Wiederholen Sie die Schritte 1 bis 4 für die Produktansicht - Bibliotheksladung - AA Regel

NOTE

Im obigen Beispiel wird eine data -Objekt, das nicht vollständig mit allen Seitentypen gefüllt ist. Tags handhabt diese Situation ordnungsgemäß und lässt Schlüssel mit einem nicht definierten Wert aus. Beispiel: entity.id und entity.name auf keinen Seiten außer Produktdetails übergeben werden.

Validieren mit dem Debugger

Nachdem die Regeln aktualisiert wurden, können Sie überprüfen, ob die Daten mithilfe des Adobe Debuggers korrekt übergeben wurden.

Navigieren Sie zum Demosite "Luma" und melden Sie sich mit der E-Mail an test@adobe.com und Kennwort test
Navigieren zu einer Produktdetailseite
Öffnen Sie die Adobe Experience Platform Debugger-Browsererweiterung und Ändern Sie die Tag-Eigenschaft in Ihre eigene Entwicklungseigenschaft.
Seite neu laden
Wählen Sie die Netzwerk im Debugger verwenden und nach Adobe Experience Platform Web SDK
Wählen Sie den Wert in der Ereigniszeile für den ersten Aufruf aus
Beachten Sie, dass es unter Schlüssel gibt. data > __adobe > target und sie werden mit Informationen zum Produkt, zur Kategorie und zum Anmeldestatus gefüllt.

Validierung in der Target-Oberfläche

Überprüfen Sie dann in der Target-Oberfläche, ob Daten empfangen wurden und für Zielgruppen und Aktivitäten verfügbar sind. XDM-Daten werden automatisch benutzerdefinierten Target-Parametern zugeordnet. Sie können überprüfen, ob XDM-Daten von Target empfangen wurden und durch Erstellen einer Zielgruppe verfügbar sind.

Öffnen Adobe Target
Navigieren Sie zum Zielgruppen Abschnitt
Erstellen Sie eine Zielgruppe und wählen Sie die Benutzerdefiniert Attributtyp
Suchen Sie die Parameter -Feld für web. Das Dropdown-Menü sollte mit allen XDM-Feldern gefüllt werden, die sich auf die Webseitendetails beziehen.

Überprüfen Sie anschließend, ob das Profilattribut für den Anmeldestatus erfolgreich übergeben wurde.

Wählen Sie die Besucherprofil Attributtyp
Suchen Sie nach loggedIn. Wenn das Attribut im Dropdown-Menü verfügbar ist, wurde das Attribut korrekt an Target übergeben. Es kann mehrere Minuten dauern, bis neue Attribute in der Target-Benutzeroberfläche verfügbar sind.

Wenn Sie über Target Premium verfügen, können Sie auch überprüfen, ob die Entitätsdaten korrekt übergeben wurden und die Produktdaten in den Recommendations-Produktkatalog geschrieben wurden.

Navigieren Sie zum Recommendations Abschnitt
Auswählen Katalogsuche in der linken Seitennavigation
Suchen Sie nach der Produkt-SKU oder dem Produktnamen, den Sie zuvor auf der Site "Luma"besucht haben. Das Produkt sollte im Produktkatalog angezeigt werden. Es kann mehrere Minuten dauern, bis neue Produkte im Recommendations-Produktkatalog durchsucht werden können.

Nachdem Sie diese Lektion abgeschlossen haben, sollten Sie über eine funktionierende Implementierung von Adobe Target mit dem Platform Web SDK verfügen.

Weiter:

NOTE

Vielen Dank, dass Sie Ihre Zeit investiert haben, um mehr über das Adobe Experience Platform Web SDK zu erfahren. Wenn Sie Fragen haben, ein allgemeines Feedback oder Vorschläge zu künftigen Inhalten teilen möchten, teilen Sie diese hier mit. Experience League Community-Diskussionsbeitrag

recommendation-more-help

8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4