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 Konfigurieren von Tags und Hinzufügen des ID-Dienstes abschließen.

Hinzufügen des Codeausschnitts zur Vorab-Ausblendung in Target

Bevor wir beginnen, müssen wir die Tag-Einbettungscodes geringfügig aktualisieren. Wenn die Tag-Einbettungscodes asynchron geladen werden, kann das Rendern der Seite abgeschlossen sein, bevor die Target-Bibliothek vollständig geladen ist und den Inhaltsaustausch 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 Flimmern vermeiden möchten, empfehlen wir dringend, einen speziellen Codeausschnitt zur Vorab-Ausblendung unmittelbar vor den asynchronen Einbettungscodes der Tags fest zu codieren.

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 direkt vor Ihrem Tag-Einbettungscode ein, wie unten dargestellt (keine Sorge, wenn die Zeilennummern unterschiedlich sind). In diesem Screenshot wurde das vorab ausgeblendete 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, die weiterhin die ältere Target-Bibliothek mbox.js, verwenden, sollten ein Upgrade auf at.js 2.x vornehmen, 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 die Target v2-Erweiterung hinzugefügt und die Aktionen Load Target und Fire Page Load Request ausgelöst haben, sollte eine Seitenladeanforderung für alle Seiten vorhanden sein, auf denen Ihre Tag-Eigenschaft verwendet wird.

Ü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:

Sie müssen in diesem Tutorial keine Entitätsparameter übergeben, aber der Workflow ist identisch mit den Schritten zur Übergabe des Anforderungsparameters pageName - 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 entsprechen Tag-Eigenschaften und Analytics-Report Suites. Ein Unternehmen mit mehreren Marken, Websites und Marketingteams kann für jede Website oder mobile App eine andere Target-Eigenschaft, Tag-Eigenschaft und Analytics-Report Suite verwenden. Die Eigenschaften von Tags werden durch ihre Einbettungscodes unterschieden, Analytics-Report Suites durch ihre Report Suite-ID und Target-Eigenschaften durch ihren Eigenschafts-Token-Parameter.

Das Eigenschafts-Token muss mithilfe einer benutzerdefinierten Code-Aktion in Tags mit der Funktion targetPageParams() implementiert werden. Wenn Sie mehrere Sites mit unterschiedlichen at_property -Werten mit einer einzelnen 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:

Die Best Practice ist, eine Bestellbestätigungsanforderung in allen Bestelltrichtern zu verwenden, auch auf Nicht-Einzelhandels-Sites. 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 Integration von Analytics for Target (A4T) für den Großteil ihrer Berichterstellung verwenden, können auch die Bestellanforderung bei Verwendung von Automated Personalization-Aktivitäten implementieren, die A4T nicht unterstützen. Darüber hinaus ist die Bestellanforderung ein wichtiges Element in Recommendations-Implementierungen, das Algorithmen ermöglicht, die auf dem Kaufverhalten basieren. Aktuelle Informationen zur A4T-Unterstützung finden Sie in der 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 nur wenige Fälle, in denen Sie andere Target-Anforderungen als die Seitenladeanforderung und die Bestellbestätigungsanforderung stellen müssen. Manchmal werden wichtige Daten, die Sie für die Personalisierung verwenden möchten, nicht vor den Tag-Einbettungscodes auf der Seite definiert. Sie können am Ende der Seite fest codiert sein oder von einer asynchronen API-Anfrage zurückgegeben werden. Diese Daten können mit einer zusätzlichen Anfrage an Target gesendet werden. Es ist jedoch nicht optimal, diese Anfrage für die Inhaltsbereitstellung zu verwenden, da die Seite bereits sichtbar ist. Diese Daten können verwendet werden, um das Besucherprofil zur späteren Verwendung anzureichern (mithilfe von Profilparametern) oder um den Recommendations-Katalog zu füllen.

Unter diesen Umständen verwenden Sie die Aktion "Benutzerspezifischer Code"in der Haupterweiterung, um eine Anfrage mit den Methoden getOffer()/applyOffer() und trackEvent() auszulösen. Dies ähnelt sehr den Schritten, die Sie gerade in der Bestellbestätigungsanforderung durchgeführt haben. Sie verwenden lediglich einen anderen Anforderungsnamen und nicht die speziellen Bestellparameter. Stellen Sie sicher, dass Sie die Aktion Target laden verwenden, bevor Sie Target-Anforderungen aus benutzerdefiniertem Code durchführen.

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 "Benutzerspezifischer Code"in der Haupterweiterung und positionieren Sie sie 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 mit "Adobe Analytics hinzufügen">