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.
- Platform launch (Client-seitig) ist jetzt tags
- Platform launch Server Side ist jetzt event forwarding
- Edge-Konfigurationen sind jetzt datastreams
Lernziele
Am Ende dieser Lektion können Sie:
- Fügen Sie das pre-hiding-Snippet hinzu, mit dem Flackern bei der Verwendung von Target mit asynchronen Tag-Einbettungs-Codes verwaltet werden können
- Target v2-Erweiterung hinzufügen
- Seitenladeanforderung (früher „globale Mbox“) auslösen
- Parameter zur Seitenladeanforderung hinzufügen
- erklären, wie Profil- und Entitätsparameter zur Seitenladeanforderung hinzugefügt werden können
- Bestellbestätigungsanforderung mit den erforderlichen Parametern auslösen
- erklären, wie Sie erweiterte Konfigurationen wie Bibliothekskopf- und -fußzeile hinzufügen
- eine Target-Implementierung überprüfen
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:
body {opacity: 0 !important}
gibt die CSS-Definition an, die für die Vorab-Ausblendung bis zum Laden von Target verwendet werden soll. Standardmäßig wird der gesamte Seiteninhalt ausgeblendet. Wenn Sie eine einheitliche DOM-Struktur mit einem Containerelement nutzen, das einfach zu identifizieren ist und z. B. den gesamten Inhalt unter Ihrer Navigation umfasst, und die Navigation in keinem Fall testen oder personalisieren möchten, können Sie diese Einstellung nutzen, um die Vorab-Ausblendung auf dieses Containerelement zu beschränken.3000
Gibt die Zeitüberschreitungseinstellung für die Voraub-Ausblendung an. Standardmäßig gilt: Wenn Target nach drei Sekunden nicht geladen wurde, wird die Seite angezeigt. Dieser Fall sollte nur extrem selten auftreten.
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:
-
der Konfiguration der Erweiterung, die die Einstellungen der Hauptbibliothek verwaltet
-
Regelaktionen für folgende Funktionen:
- Laden von Target (at.js 2.x)
- Hinzufügen von Parametern zu Seitenladeanforderungen
- Hinzufügen von Parametern zu allen Anforderungen
- Auslösen einer Seitenladeanforderung
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
-
Navigieren Sie zu Erweiterungen > Katalog
-
Geben Sie
target
in den Filter ein, um die Adobe Target-Erweiterungen schnell zu finden. Es gibt zwei Erweiterungen: Adobe Target und Adobe Target v2. In diesem Tutorial wird die Version v2 der Erweiterung verwendet, die die neueste Version von at.js (derzeit 2.x) verwendet, die sowohl für traditionelle Websites als auch für Einzelseitenanwendungen (SPA) ideal ist. -
Klicken Sie auf Installieren
-
Wenn Sie die Erweiterung hinzufügen, werden viele, aber nicht alle at.js-Einstellungen aus der Target-Oberfläche importiert, wie unten dargestellt. Eine Einstellung, die nicht importiert wird, ist die Zeitüberschreitung, die nach dem Hinzufügen der Erweiterung stets 3000 ms beträgt. Behalten Sie für das Tutorial die Standardeinstellungen bei. Beachten Sie, dass auf der linken Seite die at.js-Version angezeigt wird, die mit der aktuellen Version der Erweiterung geliefert wird.
-
Klicken Sie auf In Bibliothek speichern
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
-
Navigieren Sie im linken Navigationsbereich zu Regeln und klicken Sie dann auf
All Pages - Library Loaded
, um den Regeleditor zu öffnen -
Klicken Sie unter „Aktionen“ auf , um eine neue Aktion hinzuzufügen.
-
Wählen Sie Erweiterung > Adobe Target v2
-
Wählen Sie Aktionstyp > Ziel laden
-
Klicken Sie Änderungen beibehalten
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
-
Klicken Sie unter „Aktionen“ erneut auf , um eine weitere neue Aktion hinzuzufügen.
-
Wählen Sie Erweiterung > Adobe Target v2
-
Wählen Sie Aktionstyp > Auslösen einer Seitenladeanfrage
-
Es gibt einige Konfigurationen für die Seitenladeanforderung, die sich darauf beziehen, ob die Seite ausgeblendet und welcher CSS-Selektor für die Vorab-Ausblendung verwendet werden soll. Diese Einstellungen funktionieren zusammen mit dem auf der Seite fest codierten Codeausschnitt für die Vorab-Ausblendung. Behalten Sie die Standardeinstellungen bei.
-
Klicken Sie Änderungen beibehalten
-
Die neue Aktion wird in der Reihenfolge nach der
Load Target
-Aktion hinzugefügt und die Aktionen werden in dieser Reihenfolge ausgeführt. Sie können die Aktionen per Drag&Drop verschieben, um die Reihenfolge neu anzuordnen. In diesem Szenario mussLoad Target
allerdings vorFire Page Load Request
stehen. -
Klicken Sie auf In Bibliothek speichern und erstellen
Ü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“
-
Laden Sie Ihre Musterseite erneut. Die Verzögerung von drei Sekunden sollte nicht mehr angezeigt werden, bevor die Seite sichtbar ist. Wenn Sie die Beispielseite mit dem
file://
-Protokoll laden, sollten Sie diesen Schritt in einem Firefox- oder Safari-Browser durchführen, da Chrome bei Verwendung desfile://
-Protokolls keine Target-Anforderung auslöst. -
Öffnen Sie die Site „Luma“.
-
Stellen Sie sicher, dass der Debugger die Tag-Eigenschaft Ihre zuordnet, wie in der Lektion beschrieben
-
Navigieren Sie zur Registerkarte „Zusammenfassung“ des Debuggers.
-
Stellen Sie im Abschnitt
Launch
sicher, dassTarget
unter der ÜberschriftExtensions
aufgeführt ist -
Überprüfen Sie im Abschnitt
Target
, ob Ihre Version der at.js-Bibliothek angezeigt wird. -
Öffnen Sie abschließend die Registerkarte
Target
, erweitern Sie Ihren Client-Code und bestätigen Sie, dass Ihre Seitenladeanforderung angezeigt wird:
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:
-
Add Params to Page Load Request
fügt Parameter zu Seitenladeanforderungen hinzu (entspricht der targetPageParams()-Methode) -
Add Params to All Requests
fügt Parameter in allen Target-Anforderungen hinzufügt, z. B. in der Seitenladeanforderung und zusätzlichen Anforderungen, die von Aktionen mit benutzerdefiniertem Code ausgeführt oder auf Ihrer Site fest codiert wurden (entspricht der targetPageParamsAll()-Methode)
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.
Add Params to Page Load Requests
Aktion zu verwenden.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
-
Navigieren Sie im linken Navigationsbereich zu Regeln und klicken Sie dann auf
All Pages - Library Loaded
, um den Regeleditor zu öffnen. -
Klicken Sie unter „Aktionen“ auf , um eine neue Aktion hinzuzufügen.
-
Wählen Sie Erweiterung > Adobe Target v2
-
Wählen Sie Aktionstyp > Parameter zur Seitenladeanfrage hinzufügen
-
Geben Sie
pageName
als den Namen“ -
Klicken Sie auf , um das Datenelement-Modal zu öffnen.
-
Klicken Sie auf das
Page Name
- Datenelement. -
Klicken Sie auf Auswählen-Schaltfläche
-
Klicken Sie Änderungen beibehalten
-
Klicken Sie auf den linken Rand der
Add Params to Page Load Request
-Aktion und ziehen Sie sie, um die Aktionen vor derFire Page Load Request
-Aktion neu anzuordnen (sie können vor oder nachLoad Target
sein). -
Klicken Sie auf In Bibliothek speichern und erstellen
Ü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“
- Laden Sie die Luma-Site neu und stellen Sie sicher, dass sie Ihrer eigenen Tag-Eigenschaft zugeordnet ist.
- Öffnen Sie die Entwicklertools Ihres Browsers.
- Klicken Sie auf die Registerkarte „Netzwerk“.
- Filtern Sie die Anforderungen nach
tt.omtrdc
(oder Ihrer CNAMEd-Domäne für Target-Anforderungen). - Erweitern Sie den Abschnitt
Headers
>Request Payload
>execute.pageLoad.parameters
, um denpageName
-Parameter und -Wert zu überprüfen.
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:
- Als Schlüssel zum Auslösen von Produktempfehlungen: Wenn Sie beispielsweise einen Empfehlungsalgorithmus verwenden, z. B. „Personen, die Produkt X angesehen haben, haben auch Produkt Y angesehen“, ist „X“ der „Schlüssel“ der Empfehlung. Es handelt sich normalerweise um die Produkt-SKU (
entity.id
) oder -kategorie (entity.categoryId
), die der Besucher gerade anzeigt. - Zur Erfassung des Besucherverhaltens für Empfehlungsalgorithmen, wie z. B. „Zuletzt angezeigte Produkte“ oder „Am häufigsten angezeigte Produkte“
- Zur Füllung des Recommendations-Katalogs. Recommendations enthält eine Datenbank aller Produkte oder Artikel auf Ihrer Website, damit sie im Empfehlungsangebot bereitgestellt werden können. Wenn Sie beispielsweise Produkte empfehlen, möchten Sie normalerweise Attribute wie den Produktnamen (
entity.name
) und ein Produktbild (entity.thumbnailUrl
) anzeigen. Einige Kunden füllen ihren Katalog mithilfe von Backend-Feeds. Sie können jedoch auch mittels Entitätsparametern in Target-Anforderungen gefüllt 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:
- Die Kunden-ID muss auf der Seite vor dem Tag-Einbettungs-Code verfügbar sein
- Die Adobe Experience Platform Identity Service-Erweiterung muss installiert werden.
- Sie müssen die
Set Customer IDs
-Aktion in einer Regel verwenden, die beim Ereignis „Bibliothek geladen (Seitenanfang)“ ausgelöst wird. - Verwenden Sie die
Fire Page Load Request
-Aktion in einer Regel, die nach der Aktion „Kunden-IDs festlegen“ ausgelöst wird.
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
-
Öffnen Sie die Site „Luma“.
-
Stellen Sie sicher, dass der Debugger die Tag-Eigenschaft Ihre zuordnet, wie in der Lektion beschrieben
-
Melden Sie auf der Site „Luma“ sich mit den folgenden Anmeldedaten an:
test@adobe.com
/test
-
Kehren Sie zur Startseite „Luma“ zurück.
-
Öffnen Sie die Entwicklertools Ihres Browsers.
-
Klicken Sie auf die Registerkarte „Netzwerk“.
-
Filtern Sie die Anforderungen nach
tt.omtrdc
(oder Ihrer CNAMEd-Domäne für Target-Anforderungen). -
Erweitern Sie den Abschnitt
Headers
>Request Payload
>id.customerIds.0
, um die Kunden-ID-Einstellungen und -Werte zu überprüfen:
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:
-
Öffnen Sie auf einer separaten Registerkarte die Target-Benutzeroberfläche.
-
Navigieren Sie Administration > Eigenschaften
-
Identifizieren Sie die gewünschte Eigenschaft und klicken Sie auf die </>oder erstellen Sie eine neue Eigenschaft
-
Kopieren Sie den Code-Ausschnitt aus dem
<script></script>
in die Zwischenablage -
Navigieren Sie in Ihrer Registerkarte „Tags im linken Navigationsbereich zu Regeln“ und klicken Sie dann auf
All Pages - Library Loaded
, um den Regeleditor zu öffnen. -
Klicken Sie unter „Aktionen“ auf die
Core - Custom Code
-Aktion, umAction Configuration
zu öffnen. -
Öffnen Sie den Code-Editor und fügen Sie den Code aus der Target-Schnittstelle ein, die die
targetPageParams()
enthält -
Klicken Sie auf die Schaltfläche Speichern.
-
Aktivieren Sie Kontrollkästchen „global", damit
targetPageParams()
im globalen Umfang deklariert wird -
Klicken Sie Änderungen beibehalten
-
Klicken Sie auf In Bibliothek speichern und erstellen
at_property
über die Aktion Parameter zur Seitenladeanfrage hinzufügen hinzuzufügen, wird der Parameter in der Netzwerkanfrage ausgefüllt, aber Visual Experience Composer (VEC) von Target kann ihn beim Laden der Seite nicht automatisch erkennen. Füllen Sie at_property
immer mit der Funktion targetPageParams()
in einer Aktion vom Typ „Benutzerdefinierter Code“.Ü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
-
Öffnen Sie die Site „Luma“.
-
Stellen Sie sicher, dass der Debugger die Tag-Eigenschaft Ihre zuordnet, wie in der Lektion beschrieben
-
Öffnen Sie die Entwicklertools Ihres Browsers.
-
Klicken Sie auf die Registerkarte „Netzwerk“.
-
Filtern Sie die Anforderungen nach
tt.omtrdc
(oder Ihrer CNAMEd-Domäne für Target-Anforderungen). -
Erweitern Sie den Abschnitt
Headers
>Request Payload
>property.token
, um den Wert zu überprüfen.
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:
- Dedupliziert versehentlich mehrfach aufgegebene Bestellungen.
- Filtert extreme Bestellungen (Bestellungen, deren Summe mehr als drei Standardabweichungen vom arithmetischen Mittel beträgt).
- Verwendet im Hintergrund einen anderen Algorithmus zur Berechnung der statistischen Genauigkeit.
- Erstellt einen speziellen, herunterladbaren Auditbericht für einzelne Bestelldetails.
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
- Klicken Sie linken Navigationsbereich auf Datenelemente“
- Klicken Sie Datenelement hinzufügen
- Benennen Sie das Datenelement
Order Id
. - Wählen Sie Datenelementtyp > JavaScript-Variable
- Verwenden Sie
digitalData.cart.orderId
alsJavaScript variable name
. - Aktivieren Sie die Option
Clean text
. - Klicken Sie auf In Bibliothek speichern
(Die Bibliothek wird erst erstellt, nachdem alle Änderungen für die Anfrage zur Bestellbestätigung vorgenommen wurden.)
Erstellen des Datenelements für den Warenkorbbetrag
- Klicken Sie Datenelement hinzufügen
- Benennen Sie das Datenelement
Cart Amount
. - Wählen Sie Datenelementtyp > JavaScript-Variable
- Verwenden Sie
digitalData.cart.cartAmount
alsJavaScript variable name
. - Aktivieren Sie die Option
Clean text
. - Klicken Sie auf In Bibliothek speichern
Erstellen des Datenelements für Warenkorb-SKUs (Target)
-
Klicken Sie Datenelement hinzufügen
-
Benennen Sie das Datenelement
Cart SKUs (Target)
. -
Wählen Sie Datenelementtyp > Benutzerdefinierter Code
-
Für Target müssen die SKUs in Form einer kommagetrennten Liste vorliegen. Dieser benutzerdefinierte Code formatiert das Daten-Layer-Array im richtigen Format. Fügen Sie im Editor für benutzerdefinierten Code Folgendes ein:
code language-javascript var targetProdSkus=""; for (var i=0; i<digitalData.cart.cartEntries.length; i++) { if(i>0) { targetProdSkus = targetProdSkus + ","; } targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku; } return targetProdSkus;
-
Aktivieren Sie die Option
Force lowercase value
. -
Aktivieren Sie die Option
Clean text
. -
Klicken Sie auf In Bibliothek speichern
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
-
Klicken Sie linken Navigationsbereich auf Regeln“
-
Klicken Sie Regel hinzufügen
-
Geben Sie einen Namen für die Regel ein
Order Confirmation Page - Library Loaded - 60
. -
Klicken Sie auf Ereignisse > Hinzufügen
- Wählen Sie Ereignistyp > Bibliothek geladen (Seitenanfang)
- Ändern unter „Erweiterte Optionen die
Order
in60
, sodass sie nach derLoad Target
-Aktion ausgelöst wird (in unsererAll Pages - Library Loaded
, in derOrder
auf50
gesetzt ist) - Klicken Sie Änderungen beibehalten
-
Klicken Sie Bedingungen > Hinzufügen
-
Wählen Sie Bedingungstyp > Pfad ohne Abfragezeichenfolge
-
Geben Sie für
Path equals
thank-you.html
ein. -
Schalten Sie die Regex-Option ein, um die Logik von
equals
incontains
zu ändern. Sie können dieTest
-Funktion verwenden, um zu bestätigen, dass der Test mit dieser URL absolviert wird:https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html
-
Klicken Sie Änderungen beibehalten
-
-
Klicken Sie auf Aktionen > Hinzufügen
-
Wählen Sie Aktionstyp > Benutzerdefinierter Code
-
Klicken Sie auf Editor öffnen
-
Fügen Sie den folgenden Code in das
Edit Code
-Modal ein.code language-javascript adobe.target.getOffer({ "mbox": "orderConfirmPage", "params":{ "orderId": _satellite.getVar('Order Id'), "orderTotal": _satellite.getVar('Cart Amount'), "productPurchasedId": _satellite.getVar('Cart SKUs (Target)') }, "success": function(offer) { adobe.target.applyOffer({ "mbox": "orderConfirmPage", "offer": offer }); }, "error": function(status, error) { console.log('Error', status, error); } });
-
Klicken Sie Speichern, um den benutzerdefinierten Code zu speichern
-
Klicken Sie auf Änderungen beibehalten, um die Aktion beizubehalten
-
-
Klicken Sie auf In Bibliothek speichern und erstellen
Ü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.
-
Öffnen Sie die Site „Luma“.
-
Stellen Sie sicher, dass der Debugger die Tag-Eigenschaft Ihre zuordnet, wie in der Lektion beschrieben
-
Fügen Sie auf der Site mehrere Produkte zu Ihrem Einkaufswagen hinzu
-
Begeben Sie sich zum Checkout
-
Während des Checkout-Prozesses sind die einzig erforderlichen Felder
First Name
undLast Name
-
Klicken Sie auf der Seite „Bestellung überprüfen“ auf die Schaltfläche
Place Order
. -
Öffnen Sie die Entwicklertools Ihres Browsers.
-
Klicken Sie auf die Registerkarte „Netzwerk“.
-
Filtern Sie die Anforderungen nach
tt.omtrdc
(oder Ihrer CNAMEd-Domäne für Target-Anforderungen). -
Klicken Sie auf die zweite Anforderung.
-
Erweitern Sie den Abschnitt
Headers
>Request Payload
>execute.mboxes.0
, um den Anforderungsnamen und die Bestellparameter zu überprüfen:
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“ >