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.

HINWEIS

Adobe Experience Platform Launch wird als eine Suite von Datenerfassungstechnologien in Adobe Experience Platform integriert. In der Benutzeroberfläche wurden verschiedene terminologische Änderungen eingeführt, die Sie bei der Verwendung dieses Inhalts beachten sollten:

Lernziele

Am Ende dieser Lektion können Sie:

  • Fügen Sie den Codeausschnitt zur Vorab-Ausblendung hinzu, der zur Verwaltung von Flackern bei der Verwendung von Target mit asynchronen Tags-Einbettungscodes verwendet wird.
  • 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 Configure tags und Add the Identity Service abschließen.

Hinzufügen des Codeausschnitts zur Vorab-Ausblendung in Target

Bevor wir beginnen, müssen wir die eingebetteten Tags geringfügig aktualisieren. Wenn die Tags-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(g,b,d,f){(function(a,c,d){if(a){var e=b.createElement("style");e.id=c;e.innerHTML=d;a.appendChild(e)}})(b.getElementsByTagName("head")[0],"at-body-style",d);setTimeout(function(){var a=b.getElementsByTagName("head")[0];if(a){var c=b.getElementById("at-body-style");c&&a.removeChild(c)}},f)})(window,document,"body {opacity: 0 !important}",3E3);
</script>

Öffnen Sie die Beispielseite und fügen Sie sie direkt vor dem Tags-Einbettungscode ein, wie unten dargestellt (keine Sorge, wenn die Zeilennummern unterschiedlich sind):

Bewegen des Mauszeigers über die Erweiterung

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.
  • 3E3 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, die noch die ältere Target-Bibliothek mbox.js, verwenden, sollten ein Upgrade auf at.js 2.x vornehmen, um Tags zu verwenden.

Die Target v2-Erweiterung besteht aus zwei Hauptteilen:

  1. der Konfiguration der Erweiterung, die die Einstellungen der Hauptbibliothek verwaltet
  2. Regelaktionen für folgende Funktionen:
    1. Laden von Target (at.js 2.x)
    2. Hinzufügen von Parametern zu Seitenladeanforderungen
    3. Hinzufügen von Parametern zu allen Anforderungen
    4. 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

  1. Navigieren Sie zu Erweiterungen > Katalog.

  2. 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.

  3. Klicken Sie auf Installieren.

    Installieren der Target v2-Erweiterung

  4. 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.

  5. Klicken Sie auf In Bibliothek speichern.

    Speichern der Erweiterung

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

HINWEIS

Jede Version der Target-Erweiterung enthält eine spezifische Version von at.js, die in der Erweiterungsbeschreibung aufgeführt ist. Sie aktualisieren die ar.js-Version, indem Sie die Target-Erweiterung aktualisieren.

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

  1. Navigieren Sie im linken Navigationsbereich zu Regeln und klicken Sie dann auf All Pages - Library Loaded , um den Regeleditor zu öffnen.

    Regel „Alle Seiten öffnen - Bibliothek geladen“

  2. Klicken Sie unter „Aktionen“ auf Auf das Plussymbol klicken, um eine neue Aktion hinzuzufügen.

    Auf das Plussymbol klicken, um eine neue Aktion hinzuzufügen

  3. Wählen Sie Erweiterung > Adobe Target v2 aus.

  4. Wählen Sie Aktionstyp > Target laden aus.

  5. Klicken Sie auf Änderungen beibehalten

    Klicken Sie auf Ä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

  1. Klicken Sie unter „Aktionen“ erneut auf Auf das Plussymbol klicken, um eine weitere neue Aktion hinzuzufügen.

    Auf das Plussymbol klicken, um eine weitere Aktion hinzuzufügen

  2. Wählen Sie Erweiterung > Adobe Target v2 aus.

  3. Wählen Sie Aktionstyp > Seitenladeanforderung auslösen aus.

  4. 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.

  5. Klicken Sie auf Änderungen beibehalten

    Aktion zum Auslösen einer Seitenladeanforderung

  6. 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 muss Load Target allerdings vor Fire Page Load Request stehen.

  7. Klicken Sie auf In Bibliothek speichern und erstellen.

    Speichern und erstellen

Ü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 Tageigenschaft verwendet wird.

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

  1. 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 des file://-Protokolls keine Target-Anforderung auslöst.

  2. Öffnen Sie die Site „Luma“.

  3. Stellen Sie sicher, dass der Debugger die Eigenschaft "tags"der Entwicklungsumgebung Ihrer -Entwicklungsumgebung zuordnet, wie in der früheren Lektion beschrieben.

    Ihre Tags-Entwicklungsumgebung wird im Debugger angezeigt

  4. Navigieren Sie zur Registerkarte „Zusammenfassung“ des Debuggers.

  5. Stellen Sie im Abschnitt Launch sicher, dass Target unter der Überschrift Extensions aufgeführt ist

  6. Überprüfen Sie im Abschnitt Target, ob Ihre Version der at.js-Bibliothek angezeigt wird.

    Bestätigen, dass Target auf der Registerkarte „Zusammenfassung“ des Debuggers angezeigt wird

  7. Öffnen Sie abschließend die Registerkarte Target, erweitern Sie Ihren Client-Code und bestätigen Sie, dass Ihre Seitenladeanforderung angezeigt wird:

    Bestätigen, dass die Seitenladeanforderung ausgeführt wurde

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:

  1. Add Params to Page Load Request fügt Parameter zu Seitenladeanforderungen hinzu (entspricht der targetPageParams()-Methode)

  2. 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 ID-Dienst verwendet haben, um zusätzliche Parameter für das Library Loaded-Ereignis festzulegen, bevor die Regel die Seitenladeanforderung auslöst.

TIPP

Da die meisten Implementierungen die Seitenladeanforderung für die Aktivitätsbereitstellung verwenden, reicht es in der Regel aus, nur die 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

  1. Navigieren Sie im linken Navigationsbereich zu Regeln und klicken Sie dann auf All Pages - Library Loaded , um den Regeleditor zu öffnen.

    Regel „Alle Seiten öffnen - Bibliothek geladen“

  2. Klicken Sie unter „Aktionen“ auf Auf das Plussymbol klicken, um eine neue Aktion hinzuzufügen.

    Auf das Plussymbol klicken, um eine neue Aktion hinzuzufügen

  3. Wählen Sie Erweiterung > Adobe Target v2 aus.

  4. Wählen Sie Aktionstyp > Parameter zur Seitenladeanforderung hinzufügen aus.

  5. Geben Sie pageName als den Namen ein.

  6. Klicken Sie auf Datenelementsymbol, um das Datenelement-Modal zu öffnen.

  7. Klicken Sie auf das Page Name- Datenelement.

  8. Klicken Sie auf die Schaltfläche Auswählen.

    Klicken Sie auf die Schaltfläche „Auswählen“

  9. Klicken Sie auf Änderungen beibehalten

    Klicken Sie auf Änderungen beibehalten

  10. Klicken Sie auf den linken Rand der Add Params to Page Load Request-Aktion und ziehen Sie sie, um die Aktionen vor der Fire Page Load Request-Aktion neu anzuordnen (sie können vor oder nach Load Target sein).

  11. Klicken Sie auf In Bibliothek speichern und erstellen.

    Auf „In Bibliothek speichern und erstellen“ klicken

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

  1. Laden Sie die Site "Luma"neu und stellen Sie sicher, dass sie Ihrer eigenen Tag-Eigenschaft zugeordnet ist.
  2. Öffnen Sie die Entwicklertools Ihres Browsers.
  3. Klicken Sie auf die Registerkarte „Netzwerk“.
  4. Filtern Sie die Anforderungen nach tt.omtrdc (oder Ihrer CNAMEd-Domäne für Target-Anforderungen).
  5. Erweitern Sie den Abschnitt Headers > Request Payload > execute.pageLoad.parameters, um den pageName-Parameter und -Wert zu überprüfen.

Parameter „pageName“ im Debugger

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:

Profilparameter festlegen

Entitätsparameter

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

  1. 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.
  2. Zur Erfassung des Besucherverhaltens für Empfehlungsalgorithmen, wie z. B. „Zuletzt angezeigte Produkte“ oder „Am häufigsten angezeigte Produkte“
  3. 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.

Sie müssen in diesem Tutorial keine Profilparameter weitergeben, aber der Arbeitsablauf 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 Entitätsparametern

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 ID-Dienstes 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 den Tags Einbettungscode 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

  1. Öffnen Sie die Site „Luma“.

  2. Stellen Sie sicher, dass der Debugger die Eigenschaft "tags"der Entwicklungsumgebung Ihrer -Entwicklungsumgebung zuordnet, wie in der früheren Lektion beschrieben.

    Ihre Tags-Entwicklungsumgebung wird im Debugger angezeigt

  3. Melden Sie auf der Site „Luma“ sich mit den folgenden Anmeldeinformationen an: test@adobe.com/test

  4. Kehren Sie zur Startseite „Luma“ zurück.

  5. Öffnen Sie die Entwicklertools Ihres Browsers.

  6. Klicken Sie auf die Registerkarte „Netzwerk“.

  7. Filtern Sie die Anforderungen nach tt.omtrdc (oder Ihrer CNAMEd-Domäne für Target-Anforderungen).

  8. Erweitern Sie den Abschnitt Headers > Request Payload > id.customerIds.0, um die Kunden-ID-Einstellungen und -Werte zu überprüfen:

Kunden-ID-Einstellungen im Debugger

WARNUNG

Mit Adobe Experience Platform Identity Service können Sie mehrere IDs an den Service senden. Es wird jedoch nur die erste ID an Target gesendet.

Hinzufügen des Parameters „Eigenschafts-Token“

HINWEIS

Dies ist eine optionale Übung für Target Premium-Kunden.

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

  1. Öffnen Sie auf einer separaten Registerkarte die Target-Benutzeroberfläche.

  2. Gehen Sie zu Administration > Eigenschaften

  3. Identifizieren Sie die Eigenschaft, die Sie verwenden möchten, und klicken Sie auf </> (oder erstellen Sie eine neue Eigenschaft).

  4. Kopieren Sie das Codefragment im <script></script> in die Zwischenablage.

    Abrufen des Eigenschafts-Tokens über die Adobe Target-Oberfläche

  5. Navigieren Sie auf der Registerkarte "Tags"zu Regeln im linken Navigationsbereich und klicken Sie dann auf All Pages - Library Loaded , um den Regeleditor zu öffnen.

    Regel „Alle Seiten öffnen - Bibliothek geladen“

  6. Klicken Sie unter „Aktionen“ auf die Core - Custom Code-Aktion, um Action Configuration zu öffnen.

    Öffnen Sie die Aktion „Parameter zur Seitenladeanforderung hinzufügen“

  7. Öffnen Sie den Code-Editor und fügen Sie den Code aus der Target-Oberfläche ein, die die Funktion targetPageParams() enthält.

  8. Klicken Sie auf die Schaltfläche Speichern .

    Öffnen Sie die Aktion „Parameter zur Seitenladeanforderung hinzufügen“

  9. Aktivieren Sie die Option Global ausführen , damit targetPageParams() im globalen Bereich deklariert wird.

  10. Klicken Sie auf Änderungen beibehalten

    Klicken Sie auf Änderungen beibehalten

  11. Klicken Sie auf In Bibliothek speichern und erstellen.

    Klicken Sie auf „Speichern und in Bibliothek erstellen“

WARNUNG

Wenn Sie versuchen, den Parameter at_property über die Aktion Parameter zur Seitenladeanforderung hinzufügen hinzuzufügen, wird der Parameter in der Netzwerkanforderung aufgefüllt, aber der 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 mit benutzerspezifischem 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

  1. Öffnen Sie die Site „Luma“.

  2. Stellen Sie sicher, dass der Debugger die Eigenschaft "tags"der Entwicklungsumgebung Ihrer -Entwicklungsumgebung zuordnet, wie in der früheren Lektion beschrieben.

    Ihre Tags-Entwicklungsumgebung wird im Debugger angezeigt

  3. Öffnen Sie die Entwicklertools Ihres Browsers.

  4. Klicken Sie auf die Registerkarte „Netzwerk“.

  5. Filtern Sie die Anforderungen nach tt.omtrdc (oder Ihrer CNAMEd-Domäne für Target-Anforderungen).

  6. Erweitern Sie den Abschnitt Headers > Request Payload > property.token, um den Wert zu überprüfen.
    Das Eigenschafts-Token sollte in jeder Anforderung als Parameter „at_property“ sichtbar sein

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:

  1. Dedupliziert versehentlich mehrfach aufgegebene Bestellungen.
  2. Filtert extreme Bestellungen (Bestellungen, deren Summe mehr als drei Standardabweichungen vom arithmetischen Mittel beträgt).
  3. Verwendet im Hintergrund einen anderen Algorithmus zur Berechnung der statistischen Genauigkeit.
  4. Erstellt einen speziellen, herunterladbaren Auditbericht für einzelne Bestelldetails.

Am besten verwenden Sie eine Bestellbestätigungsanforderung in allen Bestelltrichtern – auch auf anderen Sites als Einzelhandelsseiten. 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.

Auch Kunden, die die Integration von Analytics for Target (A4T) für den Großteil ihrer Berichterstellung verwenden, sollten die Bestellanforderung implementieren, da A4T noch nicht mit Aktivitätstypen wie automatisierter Zuordnung, Automated Personalization und automatischem Targeting kompatibel ist. Darüber hinaus ist die Bestellanforderung ein wichtiges Element bei der Implementierung von Recommendations, die Algorithmen auf Basis des Kaufverhaltens aktivieren.

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

  1. Klicken Sie im linken Navigationsbereich auf Datenelemente .
  2. Klicken Sie auf Datenelement hinzufügen.
  3. Benennen Sie das Datenelement Order Id.
  4. Wählen Sie Datenelementtyp > JavaScript-Variable aus.
  5. Verwenden Sie digitalData.cart.orderId als JavaScript variable name.
  6. Aktivieren Sie die Option Clean text.
  7. Klicken Sie auf In Bibliothek speichern.
    (Wir werden die Bibliothek erst dann erstellen, wenn wir alle Änderungen für die Auftragsbestätigungsanforderung vorgenommen haben.)

Erstellen des Datenelements für den Warenkorbbetrag

  1. Klicken Sie auf Datenelement hinzufügen.
  2. Benennen Sie das Datenelement Cart Amount.
  3. Wählen Sie Datenelementtyp > JavaScript-Variable aus.
  4. Verwenden Sie digitalData.cart.cartAmount als JavaScript variable name.
  5. Aktivieren Sie die Option Clean text.
  6. Klicken Sie auf In Bibliothek speichern.

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

  1. Klicken Sie auf Datenelement hinzufügen.

  2. Benennen Sie das Datenelement Cart SKUs (Target).

  3. Wählen Sie Datenelementtyp > Benutzerdefinierter Code aus.

  4. 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:

    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;
    
  5. Aktivieren Sie die Option Force lowercase value.

  6. Aktivieren Sie die Option Clean text.

  7. 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

  1. Klicken Sie im linken Navigationsbereich auf Regeln .
  2. Klicken Sie auf Regel hinzufügen
  3. Geben Sie einen Namen für die Regel ein Order Confirmation Page - Library Loaded - 60.
  4. Klicken Sie auf Ereignisse > Hinzufügen.
    1. Wählen Sie Ereignistyp > Bibliothek geladen (Seitenanfang) aus.
    2. Ändern Sie unter Erweiterte Optionen die Order in 60 , damit sie nach der Load Target -Aktion ausgelöst wird (die sich in unserer All Pages - Library Loaded -Regel befindet, bei der Order auf 50 gesetzt ist).
    3. Klicken Sie auf Änderungen beibehalten
  5. Klicken Sie auf Bedingungen > Hinzufügen.
    1. Wählen Sie Bedingungstyp > Pfad ohne Abfragezeichenfolge aus.

    2. Geben Sie für Path equals thank-you.html ein.

    3. Schalten Sie die Regex-Option ein, um die Logik von equals in contains zu ändern. Sie können die Test-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

      Platzhalterwerte für Vor- und Nachnamen eingeben

    4. Klicken Sie auf Änderungen beibehalten

  6. Klicken Sie auf Aktionen > Hinzufügen.
    1. Wählen Sie Aktionstyp > Benutzerdefinierter Code.

    2. Klicken Sie auf Editor öffnen.

    3. Fügen Sie den folgenden Code in das Edit Code-Modal ein.

      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);
        }
      });
      
    4. Klicken Sie auf Speichern, um den benutzerdefinierten Code zu speichern.

    5. Klicken Sie auf Änderungen beibehalten, um die Aktion beizubehalten.

  7. 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.

  1. Öffnen Sie die Site „Luma“.

  2. Stellen Sie sicher, dass der Debugger die Eigenschaft "tags"der Entwicklungsumgebung Ihrer -Entwicklungsumgebung zuordnet, wie in der früheren Lektion beschrieben.

    Ihre Tags-Entwicklungsumgebung wird im Debugger angezeigt

  3. Fügen Sie auf der Site mehrere Produkte zu Ihrem Einkaufswagen hinzu

  4. Begeben Sie sich zum Checkout

  5. Während des Checkout-Prozesses sind die einzig erforderlichen Felder First Name und Last Name

    Platzhalterwerte für Vor- und Nachnamen eingeben

  6. Klicken Sie auf der Seite „Bestellung überprüfen“ auf die Schaltfläche Place Order.

  7. Öffnen Sie die Entwicklertools Ihres Browsers.

  8. Klicken Sie auf die Registerkarte „Netzwerk“.

  9. Filtern Sie die Anforderungen nach tt.omtrdc (oder Ihrer CNAMEd-Domäne für Target-Anforderungen).

  10. Klicken Sie auf die zweite Anforderung.

  11. Erweitern Sie den Abschnitt Headers > Request Payload > execute.mboxes.0, um den Anforderungsnamen und die Bestellparameter zu überprüfen:

Bestellanforderungseinstellungen im Debugger

Benutzerdefinierte Anforderungen

Es gibt nur wenige Fälle, in denen Sie andere Target-Anforderungen als die Seitenladeanforderung und die Bestellbestätigungsanforderung senden müssen. Manchmal werden wichtige Daten, die Sie für die Personalisierung verwenden möchten, nicht vor den Tags-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 dennoch über eine zusätzliche Anforderung an Target gesendet werden. Es ist jedoch nicht optimal, diese Anforderung für die Bereitstellung von Inhalten zu verwenden, da die Seite hier bereits sichtbar ist. Sie können sie verwenden, um (mithilfe von Profilparametern) das Besucherprofil zur späteren Verwendung zu ergänzen oder den Recommendations-Katalog zu füllen.

Unter diesen Umständen verwenden Sie die Aktion mit benutzerdefiniertem Code in der Core-Erweiterung, um eine Anforderung mit den Methoden getOffer()/applyOffer() und trackEvent()
auszulösen. Dieser Vorgang ähnelt den Schritten sehr, die Sie in der Bestellbestätigungsanforderung durchgeführt haben. Sie verwenden einfach einen anderen Anforderungsnamen und nicht die speziellen Bestellparameter. Denken Sie daran, die Target laden-Aktion zu 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:

Bibliothekskopfzeile und -fußzeile der in der Aktionssequenz

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

Weiter mit „Hinzufügen von Adobe Analytics“ >

Auf dieser Seite