Hinzufügen von Adobe Target

In dieser Lektion implementieren wir die Adobe Target-Erweiterung mit einer Seitenladeanforderung und benutzerdefinierten Parametern.

Adobe Target ist die Adobe Experience Cloud-Lösung, 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, sozialen Medien und anderen digitalen Kanälen maximieren können.

Lernziele

Am Ende dieser Lektion können Sie:

Voraussetzungen

Um die Lektionen in diesem Abschnitt abzuschließen, müssen Sie zunächst die Lektionen in Tags konfigurieren und Identity Service hinzufügen abschließen.

Hinzufügen des Codeausschnitts zur Vorab-Ausblendung in Target

Bevor wir beginnen, müssen wir eine kleine Aktualisierung der Tag-Einbettungs-Codes vornehmen. Wenn die Tag-Einbettungs-Codes asynchron geladen werden, kann das Rendering der Seite abgeschlossen sein, bevor die Target-Bibliothek vollständig geladen ist und ihren Austausch des Inhalts durchgeführt hat. Dies kann zum sogenannten „Flackern“ führen. Dabei wird kurz der Standardinhalt angezeigt, bevor er durch den von Target angegebenen personalisierten Inhalt ersetzt wird. Wenn Sie dieses Flackern vermeiden möchten, empfehlen wir dringend, ein spezielles pre-hiding-Snippet unmittelbar vor den asynchronen Einbettungs-Codes von Tags hartcodiert zu haben.

Dies wurde bereits auf der Site „Luma“ durchgeführt, aber lassen Sie uns fortfahren und dies auf der Beispielseite tun, damit Sie die Implementierung verstehen. Kopieren Sie die folgenden Codezeilen:

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

Öffnen Sie die Beispielseite und fügen Sie sie unmittelbar vor dem Tag-Einbettungs-Code ein, wie unten dargestellt (keine Sorge, wenn die Zeilennummern unterschiedlich sind). In diesem Screenshot wurde das pre-hiding-Snippet minimiert:

Laden Sie Ihre Musterseite erneut. Sie werden feststellen, dass die Seite drei Sekunden lang ausgeblendet wird, bevor sie angezeigt wird. Dieses Verhalten ist temporär und verschwindet, nachdem Sie Target bereitgestellt haben. Das Verhalten der Vorab-Ausblendung wird durch zwei Konfigurationen am Ende des Codeausschnitts zur Vorab-Ausblendung gesteuert. Diese können angepasst werden, jedoch empfiehlt es sich in der Regel, die Standardeinstellungen beizubehalten:

Weitere Informationen sowie den nicht minimierten Codeausschnitt zur Vorab-Ausblendung finden Sie unter Adobe Target-Erweiterung mit einer asynchronen Bereitstellung.

Hinzufügen der Target-Erweiterung

Die Adobe Target-Erweiterung unterstützt clientseitige Implementierungen mithilfe des JavaScript SDK von Target für das moderne Web: at.js. Kunden und Kundinnen, die noch die ältere Bibliothek von Target, mbox.js, verwenden sollten auf at.js 2.x aktualisieren um Tags verwenden zu können.

Die Target v2-Erweiterung besteht aus zwei Hauptteilen:

In dieser ersten Übung werden wir die Erweiterung hinzufügen und die Konfigurationen betrachten. In späteren Übungen werden wir die Aktionen nutzen.

Hinzufügen der Erweiterung

Zu diesem Zeitpunkt führt Target noch keine Aktionen aus, weshalb auch nichts zu überprüfen ist.

Laden von Target und Auslösen der Seitenladeanforderung

Marketingexperten können Target verwenden, um beim Testen und Targeting von Inhalten das Besuchererlebnis auf der Seite zu steuern. Aufgrund dieser wichtigen Rolle in der Anzeige der Seite sollte Target so früh wie möglich geladen werden, um Auswirkungen auf die Seitenanzeige zu minimieren. In diesem Abschnitt laden wir die JavaScript-Bibliothek von Target – at.js – und lösen die Seitenladeanforderung au (in früheren Versionen von at.js als „globale Mbox“ bezeichnet).

Sie können die All Pages - Library Loaded-Regel, die Sie in der Lektion Hinzufügen von Datenelementen, Regeln und Bibliotheken erstellt haben, zur Implementierung von Target verwenden, da sie beim Laden der Seite bereits so früh wie möglich ausgelöst wird.

Laden von Target

Mit der hinzugefügten Load Target-Aktion wird at.js auf der Seite geladen. Es werden jedoch keine Target-Anforderungen ausgelöst, bis wir die Fire Page Load Request-Aktion hinzufügen.

Auslösen einer Seitenladeanforderung

Überprüfen der Seitenladeanforderung

Nachdem Sie nun die Target v2-Erweiterung hinzugefügt und die Load Target- und Fire Page Load Request ausgelöst haben, sollte auf allen Seiten, auf denen Ihre Tag-Eigenschaft verwendet wird, eine Seitenladeanforderung erfolgen.

Überprüfen der Aktionen „Target Laden“ und „Seitenladeanforderung auslösen“

Herzlichen Glückwunsch! Sie haben Target implementiert!

Hinzufügen von Parametern

Die Übergabe von Parametern in der Target-Anforderung ermöglicht leistungsstarke Funktionen für Targeting-, Test- und Personalisierungsaktivitäten. Die Tag-Erweiterung bietet zwei Aktionen zum Übergeben von Parametern:

Diese Aktionen können vor der Load Target-Aktion verwendet werden und basierend auf Ihren Regelkonfigurationen auf verschiedenen Seiten unterschiedliche Parameter festlegen. Verwenden Sie die Funktion zur Regelsortierung, die Sie beim Festlegen von Kunden-IDs mit dem Identity Service verwendet haben, um zusätzliche Parameter für das Library Loaded-Ereignis festzulegen, bevor die Regel die Seitenladeanforderung auslöst.

Anforderungsparameter (mbox)

Parameter werden verwendet, um benutzerdefinierte Daten an Target weiterzugeben und damit Ihre Personalisierungsfunktionen zu erweitern. Sie eignen sich ideal für Attribute, die sich während einer Browser-Sitzung häufig ändern, wie z. B. der Seitenname, die Vorlage usw. und nicht persistent sind.

Fügen wir das Page Name-Datenelement, das wir zuvor in der Lektion Hinzufügen von Datenelementen, Regeln und Bibliotheken hinzugefügt haben, als Anforderungsparameter hinzu.

Hinzufügen von Anforderungsparametern

Überprüfen der Anforderungsparameter

Derzeit sind benutzerdefinierte Parameter, die mit at.js 2.x-Anforderungen übergeben werden, im Debugger nicht leicht sichtbar. Daher werden die Entwicklertools des Browsers verwendet.

Überprüfen des Anforderungsparameters „pageName“

Profilparameter

Ähnlich wie Anforderungsparameter werden Profilparameter auch über die Target-Anforderungen übergeben. Profilparameter werden jedoch in der Besucherprofildatenbank von Target gespeichert und bleiben für die Dauer des Besucherprofils bestehen. Sie können sie auf einer Seite Ihrer Site festlegen und in Target-Aktivitäten auf einer anderen Seite verwenden. Im Folgenden finden Sie ein Beispiel einer Automobilwebsite. Wenn ein Besucher zu einer Fahrzeugseite wechselt, können Sie den Profilparameter „profile.lastViewed=sportscar“ übergeben, um sein Interesse an diesem bestimmten Fahrzeug aufzuzeichnen. Wenn der Besucher zu anderen Seiten als einer Fahrzeugseite navigiert, können Sie die Inhalte auf der Grundlage des zuletzt angezeigten Fahrzeugs anpassen. Profilparameter eignen sich ideal für Attribute, die sich selten ändern oder nur auf bestimmten Seiten verfügbar sind

Sie werden in diesem Tutorial keine Profilparameter übergeben, doch der Arbeitsablauf ist fast identisch mit den Schritten zur Übergabe des pageName-Parameters. Der einzige Unterschied besteht darin, dass Sie Profilparametern ein profile.-Präfix voranstellen müssen. So würde ein Profilparameter namens „userType“ in der Add Params to Page Load Request-Aktion aussehen:

Entitätsparameter

Entitätsparameter sind spezielle Parameter, die aus drei Hauptgründen in Recommendations-Implementierungen verwendet werden:

In diesem Tutorial müssen Sie keine Entitätsparameter übergeben, aber der Workflow ist identisch mit dem, was Sie zuvor beim Übergeben des pageName-Anforderungsparameters getan haben. Geben Sie dem Parameter einfach einen Namen mit dem Präfix „entity“. und ordnen Sie ihn dem relevanten Datenelement zu. Beachten Sie, dass einige häufig verwendete Entitäten über reservierte Namen verfügen, die verwendet werden müssen (z. B. entity.id für die Produkt-SKU). So würde es aussehen, wenn Entitätsparameter in der Add Params to Page Load Request-Aktion festgelegt werden:

Hinzufügen von Kunden-ID-Parametern

Die Erfassung von Kunden-IDs mit Adobe Experience Platform Identity Service erleichtert den Import von CRM-Daten in Target mithilfe der Funktion Kundenattribute in Adobe Experience Cloud. Sie ermöglicht auch die geräteübergreifende Besucherzuordnung, sodass Sie eine einheitliche Benutzererfahrung gewährleisten können, wenn Ihre Kunden zwischen ihren Laptops und ihren Mobilgeräten wechseln.

Es ist unbedingt erforderlich, die Kunden-ID in der Set Customer IDs-Aktion des Identity Service festzulegen, bevor die Seitenladeanforderung ausgelöst wird. Zu diesem Zweck müssen Sie die folgenden Funktionen auf Ihrer Site bereitstellen:

In der vorherigen Lektion Hinzufügen von Adobe Experience Platform Identity ServiceAll Pages - Library Loaded - Authenticated - 10 haben Sie die Regel erstellt, um die Aktion „Kunden-ID festlegen“ auszulösen. Da diese Regel eine Order-Einstellung von 10 hat, werden die Kunden-IDs festgelegt, bevor unsere Seitenladeanforderung von der All Pages - Library Loaded-Regel ausgelöst wird, bei der die Order-Einstellung50 ist. Sie haben also bereits die Erfassung von Kunden-IDs für Target implementiert!

Überprüfen der Kunden-ID

Derzeit sind benutzerdefinierte Parameter, die mit at.js 2.x-Anforderungen übergeben werden, im Debugger nicht leicht sichtbar. Daher werden die Entwicklertools des Browsers verwendet.

Überprüfen der Kunden-ID

Hinzufügen des Parameters „Eigenschafts-Token“

Das Eigenschafts-Token ist ein reservierter Parameter, der mit der Target Premium-Funktion für Enterprise-Benutzerberechtigungen verwendet wird. Er wird zur Definition verschiedener digitaler Eigenschaften verwendet, damit unterschiedlichen Mitgliedern einer Experience Cloud-Organisation verschiedene Berechtigungen für die einzelnen Eigenschaften zugewiesen werden können. Sie möchten z. B., dass eine Gruppe von Benutzern Target-Aktivitäten auf Ihrer Website, aber nicht in Ihrer mobilen Anwendung einrichten kann.

Target-Eigenschaften sind analog zu Tag-Eigenschaften und Analytics Report Suites. Ein Unternehmen mit mehreren Marken, Websites und Marketing-Teams kann für jede Website oder Mobile App eine andere Target-Eigenschaft, eine andere Tag-Eigenschaft und eine andere Analytics-Report Suite verwenden. Tags-Eigenschaften werden anhand ihrer Einbettungs-Codes, Analytics-Report Suites anhand ihrer Report Suite-ID und Target-Eigenschaften anhand ihres Eigenschafts-Token-Parameters unterschieden.

Das Eigenschafts-Token muss mit einer benutzerdefinierten Code-Aktion in Tags mit der targetPageParams() implementiert werden. Wenn Sie mehrere Websites mit unterschiedlichen at_property-Werten mit einer einzigen Tag-Eigenschaft implementieren, können Sie den at_property-Wert über ein Datenelement verwalten.

Im Folgenden finden Sie eine optionale Übung für Target Premium-Kunden, wenn Sie ein Eigenschafts-Token in Ihrer Tutorial-Eigenschaft implementieren möchten:

Überprüfen des Eigenschafts-Tokens

Derzeit sind benutzerdefinierte Parameter, die mit at.js 2.x-Anforderungen übergeben werden, im Debugger nicht leicht sichtbar. Daher werden die Entwicklertools des Browsers verwendet.

Überprüfen des Eigenschafts-Token-Parameters

Hinzufügen benutzerdefinierter Anforderungen

Hinzufügen einer Bestellbestätigungsanforderung

Die Bestellbestätigungsanforderung ist ein spezieller Anforderungstyp, mit dem Bestelldetails an Target gesendet werden. Die Einbeziehung von drei spezifischen Anforderungsparametern – orderId, orderTotal und productPurchasedId – macht eine reguläre Target-Anforderung zu einer Bestellanforderung. Neben Berichten zum Umsatz übernimmt die Bestellanforderung auch folgende Aufgaben:

Es empfiehlt sich, eine Anfrage zur Bestellbestätigung in allen Auftragstrichtern zu verwenden, auch auf Websites, die nicht zum Einzelhandel gehören. Sites zur Lead-Generierung verfügen beispielsweise in der Regel über Lead-Trichter, bei denen am Ende eine eindeutige „Lead-ID“ generiert wird. Auf diesen Sites sollte eine Bestellanforderung mit einem statischen Wert (z. B. „1“) für orderTotal implementiert werden.

Kunden, die die Analytics for Target (A4T)-Integration für die meisten Berichte verwenden, möchten möglicherweise auch die Bestellanfrage implementieren, wenn sie Automated Personalization-Aktivitäten verwenden, die A4T nicht unterstützen. Darüber hinaus ist die Bestellanfrage ein wichtiges Element bei Recommendations-Implementierungen, da sie Algorithmen basierend auf dem Kaufverhalten unterstützt. Die neuesten Informationen zur A4T-Unterstützung finden Sie in Dokumentation.

Die Bestellbestätigungsanforderung sollte über eine Regel ausgelöst werden, die nur auf Ihrer Bestellbestätigungsseite oder im entsprechenden Bestellbestätigungsereignis ausgelöst wird. Häufig kann sie mit einer Regel kombiniert werden, die das Kaufereignis von Adobe Analytics festlegt. Sie muss mithilfe einer Aktion vom Typ „Benutzerdefinierter Code:“ der Core-Erweiterung konfiguriert werden, indem Sie über die entsprechenden Datenelemente orderId, orderTotal und productPurchasedId festlegen.

Fügen wir die Datenelemente und die Regel hinzu, die wir benötigen, um eine Auftragsbestätigungsanforderung auf der Luma-Site auszulösen. Da Sie bereits mehrere Datenelemente erstellt haben, haben wir diese Anleitungen abgekürzt.

Erstellen des Datenelements für die Bestell-ID

Erstellen des Datenelements für den Warenkorbbetrag

Erstellen des Datenelements für Warenkorb-SKUs (Target)

Nun müssen wir eine Regel erstellen, um die Auftragsbestätigungsanforderung mit diesen Datenelementen als Parameter auf der Bestellbestätigungsseite auszulösen.

Erstellen der Regel für die Auftragsbestätigungsseite

Überprüfen der Bestellbestätigungsanforderung

Derzeit sind benutzerdefinierte Parameter, die mit at.js 2.x-Anforderungen übergeben werden, im Debugger nicht leicht sichtbar. Daher werden die Entwicklertools des Browsers verwendet.

Benutzerdefinierte Anforderungen

Es gibt seltene Fälle, in denen Sie andere Target-Anfragen als die Seitenlade- und Bestellbestätigungsanfrage stellen müssen. Manchmal werden beispielsweise wichtige Daten, die Sie für die Personalisierung verwenden möchten, nicht auf der Seite vor dem Tag-Einbettungs-Code definiert. Sie können am Seitenende hartcodiert sein oder von einer asynchronen API-Anfrage zurückgegeben werden. Diese Daten können mithilfe einer zusätzlichen Anfrage an Target gesendet werden. Es ist jedoch nicht optimal, diese Anfrage für die Bereitstellung von Inhalten zu verwenden, da die Seite bereits sichtbar ist. Diese Daten können verwendet werden, um das Besucherprofil für die spätere Verwendung anzureichern (mithilfe von Profilparametern) oder um den Recommendations-Katalog zu füllen.

Verwenden Sie unter diesen Umständen die Aktion für benutzerspezifischen Code in der Haupterweiterung, um eine Anfrage mit den Methoden getOffer()/applyOffer() und trackEvent() auszulösen. Dies ähnelt dem, was Sie gerade in der Übung Bestellbestätigungsanfrage getan haben, aber Sie werden nur einen anderen Anfragenamen verwenden und nicht die speziellen Bestellparameter verwenden. Stellen Sie sicher, dass Sie die Aktion Target laden verwenden, bevor Sie Target-Anfragen aus benutzerdefiniertem Code stellen.

Bibliothekskopf- und -fußzeile

Der Bildschirm „at.js bearbeiten“ in der Target-Benutzeroberfläche enthält Felder, in denen Sie benutzerspezifischen JavaScript-Code einfügen können, damit er unmittelbar vor oder nach der Datei „at.js“ ausgeführt wird. Die Bibliothekskopfzeile wird manchmal verwendet, um at.js-Einstellungen über die
targetGlobalSettings()-Funktion zu überschreiben oder Daten von Drittanbietern mithilfe der Datenanbieter-Funktion weiterzugeben. Die Bibliotheksfußzeile wird manchmal verwendet, um at.js benutzerdefinierte Ereignis -Listener hinzuzufügen.

Um diese Funktion in Tags zu replizieren, verwenden Sie einfach die Aktion „Benutzerdefinierter Code“ in der Haupterweiterung und sequenzieren Sie die Aktion vor (Bibliothekskopfzeile) oder nach (Bibliotheksfußzeile) der Aktion „Target laden“. Hierfür können Sie dieselbe Regel nutzen wie für die Load Target-Aktion (siehe unten) oder separate Regeln mit Ereignissen oder Reihenfolgen verwenden, die zuverlässig vor oder nach der Regel mit Load Target ausgelöst werden:

Weitere Informationen zu Anwendungsfällen für benutzerdefinierte Kopf- und Fußzeilen finden Sie in den folgenden Ressourcen:

Weiter "Adobe Analytics hinzufügen“ >