Hinzufügen von Adobe Target Recommendations mit dem Formular-Editor von Adobe Target

Dieser Artikel richtet sich an technisch orientierte Adobe Target Nutzer 

(… wenn der einzige Ort, der Ihnen zur Verfügung steht, die target-global-mbox ist 🙃 

Adobe Target Recommendations sind eine großartige Möglichkeit, Ihren Nutzern personalisierte, relevante Inhalte auf einer Vielzahl von E-Commerce-Seiten wie Produktübersichten, Produktdetailseiten oder Warenkorbseiten anzuzeigen.  

Wenn Sie noch nie etwas von Recommendations gehört haben, sollten Sie sich die Adobe Dokumentation zu Recommendations ansehen und sich über die vielfältigen Möglichkeiten informieren.   

Mit dem VEC (Visual Experience Composer) steht Ihnen ein intuitives Tool zur Verfügung, mit dem Sie Ihre vorbereitete Recommendations-Komponente an beliebiger Stelle auf Ihrer Zielseite platzieren können.  

Obwohl sich das Tool hervorragend für Nicht-Entwickler eignet, kann es bei der Verwendung dennoch zu Problemen kommen. Abhängig von der Struktur Ihrer Website kann die exakte Platzierung eines Elements schwierig sein – bei einigen Browsern funktioniert die VEC-Vorschau Ihrer Zielseite mitunter gar nicht.   

Kommt Ihnen das bekannt vor…?  

In der Adobe Target-Dokumentation finden Sie zahlreiche Hinweise, wie Sie die Herausforderungen bei der Verwendung des VEC meistern können 

Sollte dies Ihre VEC-Probleme dennoch nicht lösen, verzweifeln Sie nicht: Recommendations kann in einer Aktivität über den Formulareditor verwendet werden. 

Inhalt

Recommendation-Offers vs. HTML-Offers

Sehen wir uns den Hauptunterschied zwischen der Einrichtung eines HTML-Offers und der Verwendung der Recommendations- Komponente in einer Aktivität an.  

Bei einem HTML-Offer können Sie die target-global-mbox (oder eine beliebige mBox) als Containerstandort verwenden, um ein beliebiges Element des DOM über das Javascript zu ändern.   

Zum Einfügen einer Recommendations-Komponente benötigen Sie eine mBox als Speicherort, die Sie tatsächlich ersetzen können. Es gibt keine zusätzliche Option, um einen benutzerdefinierten Code hinzuzufügen, wenn Sie einen Empfehlungsblock zu Ihrer Seite hinzufügen.  

Schauen wir uns die Optionen in Adobe Target an

Um die Empfehlungen auf Ihre Seite laden zu können, müssen Sie einen Ort auswählen und dann “Recommendations hinzufügen” wählen.  

Wenn Sie die target-global-mbox als Standort auswählen konnten, wird Ihre Recommendations-Komponente nicht angezeigt, da die target-global-mbox nicht mit einem tatsächlichen Element auf Ihrer Seite übereinstimmt.  

Die Herausforderung

Die Produktdetailseite, die Sie ändern möchten, bietet Ihnen keine benutzerdefinierte mBox für die Platzierung der Recommendations. Sie verfügt noch nicht einmal über ein Element, das die Empfehlungen enthalten kann.  

Wenn Sie nicht in der Lage sind, die Codebasis Ihrer Website direkt zu ändern (oder dies über einen Tag-Manager zu tun), müssen Sie diese Voraussetzungen innerhalb Ihrer Adobe Target-Aktivität einrichten.  

Die Lösung

Erstellen Sie ein HTML-Offer mit benutzerdefiniertem Code, der ein Platzhalterelement für Empfehlungen hinzufügt und es als benutzerdefinierten mBox-Speicherort kennzeichnet.  

Der Code wird auf der target-global-mbox ausgeführt und bietet Ihnen einen zweiten Speicherort für Ihre Recommendations-Komponente.  

Damit dieser Ansatz funktioniert, müssen Sie einen Aktivitätstyp wählen, bei dem Sie mehrere Standorte festlegen können:  

  • Ort 1: Die target-global-mbox für die Ausführung Ihres Vorbereitungscodes   
  • Ort 2: Ihre neue benutzerdefinierte Box zum Laden der Empfehlungen  

So wird es gemacht

Schritt 1 – HTML-Angebot mit benutzerdefiniertem Javascript

Erstellen Sie ein neues DOM-Element

Wählen Sie die Stelle, an der Ihre Empfehlungen erscheinen sollen und erstellen Sie ein div mit einer benutzerdefinierten ID über javascript.  

In meinem Beispiel wollte ich erreichen, dass die Empfehlungen direkt unter der Produktbeschreibung erscheinen. Also habe ich ein neues leeres div-Element angelegt, die ID “myReco” hinzugefügt und es direkt darunter eingebaut. 

Verwandeln Sie dieses div in eine Standort-mBox

Sie möchten, dass ein bestimmtes Element auf dieser Seite (Ihr neues div) eine mBox ist und wollen es durch Ihre Empfehlungskomponente ersetzen.  

Hierfür verwenden wir die Funktionen getOffer() und applyOffer() aus at.js  

Weitere Informationen zu den at.js-Funktionen finden Sie in den Dev-Dokumenten von Adobe:

getOffer();

applyOffer();

In der Funktion getOffer() erstellen wir manuell eine benutzerdefinierte mBox, indem wir sie einfach als mBox benennen, die für das Rendern eines Offers verwendet werden soll.  

In der Funktion applyOffer() adressieren wir diese neue mBox und weisen einen Selektor zu, um Adobe Target mitzuteilen, wo es den Inhalt des Offers für diese spezielle mBox platzieren soll.  

Wir richten die Funktion applyOffer() als Callback zu getOffer() ein, so dass die Platzierung des Offers sofort ausgeführt wird.

Speichern Sie Ihr HTML als Offer in Adobe Target

Erstellen Sie auf der Registerkarte Offers Ihres Adobe Target-Arbeitsbereichs ein neues HTML-Offer und fügen Sie den HTML-Code mit Ihrem Skript in das Bedienfeld ein. 

Offers tab in Adobe Target
Create new HTML Offer
Create new HTML Offer
Paste code to Offer panel and Save
Paste code to Offer panel and Save

Schritt 2 – Wählen Sie einen Aktivitätstyp, bei dem Sie mehrere Standorte festlegen können.

Dies ist mit dem Aktivitätstyp Empfehlungen nicht möglich. Richten Sie daher Ihre Aktivität als A/B-Test oder Experience Targeting ein.  

Ich habe eine Experience Targeting-Aktivität gewählt und mein HTML-Offer mit benutzerdefiniertem Javascript-Code als Inhalt ausgewählt, der an meinem ersten Standort, der target-global-mbox, ausgeführt werden soll. 

Schritt 3 – Wählen Sie den neuen Ort und fügen Sie Ihre Recommendations-Komponente hinzu

Da Sie eine benutzerdefinierte mBox erstellt haben, können Sie nun diese mBox als zweiten Ort auswählen und “Empfehlung hinzufügen” wählen.  

Richten Sie Ihre Empfehlungen so ein, wie Sie es bei einer Recommendation-Aktivität tun würden, indem Sie die Schritte “Criteria”, “Design” und “Collection” durchlaufen. 

Das Ergebnis

Überprüfen Sie Ihre Aktivität mit dem Link Adobe Target Preview, um sicherzustellen, dass Ihre Empfehlungen korrekt angezeigt werden. Passen Sie diese zudem im Abschnitt für den benutzerdefinierten Code an, den Sie als HTML-Offer an der Position target-global-mbox hinzugefügt haben.  

Als Entwicklerin überzeugt mich dieser Ansatz durch die Flexibilität, die er bei der Platzierung und Gestaltung meiner Recommendations-Komponente auf jeder Seite ermöglicht – unabhängig von der ursprünglichen Einrichtung (vorbereitete benutzerdefinierte mboxes).   

Funktioniert das auch für Experience-Fragmente...?

Gut, dass Sie fragen: Ja, das tut es 🙂

Wie Sie mit Adobe Target und KI-unterstützten UX-Tests und Personalisierung starten

Denise Paché

Denise Paché ist Senior Experimentation Entwicklerin bei Up Reply und hat sich auf datengesteuerte Personalisierung und Experimente mit Adobe Target spezialisiert. Sie hat Kunden dabei unterstützt, ihre CRO-Strategien und Zielgruppenanforderungen in sinnvolle Kampagnen umzusetzen. In diesem Blog wird sie Einblicke in die Arbeit mit Adobe Target und praktische Lösungen für Personalisierungsanwendungen geben. 

Lassen Sie uns Ihr E-Commerce-Business auf die nächste Stufe heben

Erschließen Sie neue Möglichkeiten und definieren Sie die Kundenerfahrung neu durch personalisierte, datengetriebene Strategien mit Up Reply.