Logo Help Portal
  • Die ersten Schritte

    Einführung

    • Onboarding: Übersicht
    • Projektstart
    • E-Mail-Compliance
    • Account-Administration

    Daten

    • Datenaustausch
    • Daten-Onboarding
    • Webdatensammlung
    • Integrationen

    Channels

    • E-Mail-Onboarding
    • Smart Insight
    • Predict
  • Training

    Ressourcen

    • Einführung
    • Online Self-learning
    • Onboarding-Videos

    Events

    • Trainer-geleitete Schulungen
    • Webinare
    • Seminare
    • Trainingskalender
  • Benutzerhandbücher

    Strategie

    • Personalisierung
    • Automatisierung
    • Data Monitoring

    Channels

    • E-Mail
    • Mobile Apps
    • Web
    • Ads
    • SMS

    Add-ons

    • Smart Insight
    • Predict
    • Incentive Recommendation
    • AIM
    • Relational Data
  • Support-Artikel
    Forrester Wave CCCM (Independent Platforms) Report Q4 2019

    Neuigkeiten

    • Was gibt es Neues in der Emarsys Plattform?
    • CSA-Updates
    • Pilot Features
    • Artikel zum Datenschutz und zur DSGVO

    Support

    • Emarsys - Hilfe und Support
    • Ihr Benutzerprofil verwalten
    • Preparing for Black Friday 2019
    • Black Friday 2019 - Best practices
  • |
  • Partners

    Enhance Partners

    • Getting Started as an Emarsys Partner
    • The Emarsys Integration Platform
    • Automation Center Integrations
  • Developer
  • Systemstatus
Benötigen Sie Hilfe?
Deutsch English Español Français Русский Türkçe 简体中文 Test New Chat
Anmelden
  • Predict
  • Web Recommender
  • 0 Predict Web Recommender

In diesem Abschnitt:

  • Web Recommender - Übersicht
  • Web Recommender-Logik
  • Web Recommender-Vorlagen
  • A/B Testing Web Recommendations
  • Web Recommender für lokalisierte Websites
  • Web Recommender Reporting
  • Web-Empfehlungen – Best Practices und Beispiele
  • Mobile Recommendations
EDIT
Expand all

Web Recommender-Vorlagen

Updated: 29. Juli 2019 11:50

Predict Web Recommender-Vorlagen verwenden die beliebte Vorlagensprache doT.js.

Wenn empfohlene Artikel von den Recommender-Servern im SC-Objekt zurückgegeben werden, steuert die Vorlage Struktur und Inhalt der Dokumentenelemente, die in Ihr Empfehlungs-Widget eingefügt werden. Im Grunde ist eine Vorlage ein Stück HTML-Code, das JavaScript-Snippets enthält.

Wir stellen eine Standardvorlage zur Verfügung, die durch CSS gesteuert wird, aber Sie können gern Ihre eigene Vorlage implementieren. Wir raten Ihnen, sich mit den Konzepten vertraut zu machen, indem Sie diesen Abschnitt lesen. Dann können Sie mit der eigentlichen Implementierung beginnen, indem Sie die Standardvorlage kopieren und abändern.

Inhalt:

  • Eine nicht vordefinierte Recommender-Vorlage verwenden
    • Eine Recommender-Vorlage definieren
    • Die Vorlage auf eine Recommender-Box anwenden
    • Die Vorlagensprache
    • Die äußeren HTML-Elemente empfohlener Artikel markieren
    • Namen der Navigations-Buttons des Recommenders
    • Standardvorlage kopieren und abändern
  • Direkt in Javascript mit den empfohlenen Artikeln arbeiten
    • Rabatte anzeigen
    • Tun Sie etwas, nachdem die Empfehlungen gerendert wurden.
    • Benutzen Sie kein Scarab-Rendering, sondern rendern Sie mit Ihrem eigenen Code.
    • Live-Daten von Ihren Servern erhalten
  • Problembehandlung

Eine nicht vordefinierte Recommender-Vorlage verwenden

Eine Recommender-Vorlage definieren

Fügen Sie Ihre Vorlage zu einem Skriptblock hinzu, bei dem das scripts type-Attribut auf text/html gesetzt ist. Beginnen Sie innerhalb des Blocks mit der Präambel <![CDATA[ und schließen Sie mit ]]>. Sie können mehrere Vorlagen definieren, indem Sie verschiedene ids verwenden. Das Beispiel unten zeigt, wie Sie eine Dummy-Vorlage hinzufügen, die nur den Text Dies ist meine erste Website Recommender-Vorlage anzeigt.

<script type="text/html" id="my-recommender-template"> <![CDATA[ <i>This is my first recommender template</i>. ]]> </script>

Die Vorlage auf eine Recommender-Box anwenden

Die Vorlage kann an den API-Befehl recommend übergeben werden, indem templateId gesetzt wird. Zum Beispiel kann die oben definierte my-recommender-template wie unten auf das RELATED-Widget angewendet werden.

<div id="my-recommendation-container"></div> <script>       ScarabQueue.push(["recommend", {        logic: "RELATED",        containerId: "my-recommendation-container",        templateId: "my-recommender-template"      }]); </script>

Die Vorlagensprache

Vorlagen werden durch das JavaScript-Objekt SC ersetzt, das die empfohlenen Produkte im Array SC.page.products hält. Jedes Produkt hat Attribute, die den Spalten des hochgeladenen Produktkatalogs entsprechen. Zum Beispiel bezieht sich SC.page.products[0].title auf den Inhalt des Katalogfelds Titel des ersten empfohlenen Artikels etc.

Die Größe dieses Arrays überschreitet niemals die Grenze, die als Argument an den Befehl recommend übergeben wird. Die Vorlage ist im Wesentlichen ein HTML-String, aber Sie können mit {{= variable }} den Wert einer JavaScript-Variable in den HTML-Code einfügen. Ein Beispiel:

<i>We recommend {{=SC.page.products.length}} number of products for You</i>!

Außerdem kann die Vorlage JavaScript-Codeblöcke zwischen {{ und }} enthalten. Ein Beispiel:

{{ if(SC.page.products.length > 0) { }} <i>We primarily recommend {{=SC.page.products[0].title}} for You</i>! {{ } else { }} <i>Sorry! No recommendations found!</i> {{ } }}

Die äußeren HTML-Elemente empfohlener Artikel markieren

Unser System muss jeden Klick auf empfohlene Artikel verfolgen. Um dies zu unterstützen, müssen Sie das Attribut data-scarabitem zu einem der HTML-Elemente hinzufügen, die den empfohlenen Artikel enthalten, und den Wert auf die ID des empfohlenen Produktes setzen. Beispiel für einen Link zu einem empfohlenen Artikel, enthalten in einem span-Element:

<span data-scarabitem="{{= SC.page.products[i].id }}">     <a href="{{= SC.page.products[i].link }}">         <img src="{{= SC.page.products[i].image }}">             {{= SC.page.products[i].title }}    </a> </span>

Namen der Navigations-Buttons des Recommenders

Benutzer können weitere Empfehlungen anfordern oder zu den zuvor empfohlenen Artikeln zurückgehen. Die Klassenattribute der entsprechenden HTML-Elemente müssen daher auf scarab-next bzw. scarab-prev gesetzt werden. Unser System stellt die Click Event Handler auf diese Elemente ein. Ein Beispiel:

<div class="scarab-prev">Click here for previously shown recommendations</div> ... recommended items ... <div class="scarab-next">Click here for more recommendations</div>

Wenn der entsprechende Vorgang deaktiviert wird (das erste Set wird angezeigt oder es sind keine weiteren Empfehlungen anzuzeigen), wird der Name der Klasse scarab-disabled-button zu dem Klassenattribut des HTML-Elements hinzugefügt. CSS-Regeln können auf diese Klasse angewendet werden, um die entsprechenden Buttons zu verbergen oder zu deaktivieren.

Standardvorlage kopieren und abändern

Wenn Sie mit dem vorigen Abschnitt vertraut sind, beginnen Sie mit der konkreten Implementierung, indem Sie die unten genannte Standardvorlage verwenden und abändern.

<script type="text/html" id="my-recommender-template"> <![CDATA[ {{ if (SC.page.products.length) { }} <div class="scarab-itemlist">     <div class="scarab-prev"></div>     {{ for (var i=0; i < SC.page.products.length; i++) { }}       {{ var p = SC.page.products[i]; }}       <span data-scarabitem="{{= p.id }}" class="scarab-item">           <a href="{{= p.link }}">               <img src="{{= p.image }}">               {{= p.title }}           </a>       </span>     {{ } }}     <div class="scarab-next"></div> </div> {{ } }} ]]> </script>

Denken Sie daran, dass Sie die Vorlage auf jedes Recommender-Widget anwenden müssen, wie im Beispiel unten:

<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", {     logic: "RELATED",     containerId: "my-recommendation-container",     templateId: "my-recommender-template" }]); </script>

Ein Beispiel:

Direkt in Javascript mit den empfohlenen Artikeln arbeiten

Wenn Sie unmittelbar auf die empfohlenen Artikel zugreifen möchten, können Sie eine JavaScript-Funktion an den Befehl recommend übergeben, der als Success Handler bezeichnet wird. Wird aufgerufen, nachdem der Empfehlungsdienst die Empfehlungen zurückgegeben hat, aber bevor das Widget gerendert wird. Der Success Handler nimmt zwei Parameter, das SC-Objekt und eine render-Funktion, die aufgerufen werden muss, um das Widget-Rendering zu starten. Folgendes können Sie mit dieser Funktion tun.

Rabatte anzeigen

Sagen wir, Sie möchten den Rabatt auf das Produkt im Vergleich zum empfohlenen Ladenpreis anzeigen. Sie könnten den Wert aus den Feldern price und msrp im Vorlagencode zwischen Doppelklammern berechnen {{ }}, aber dadurch wäre die Vorlage schwerer zu lesen. Mit der Funktion success können Sie die Anzeige von der Logik trennen.

var mySuccessHandler = function(SC, render) {   for (var i = 0, l = SC.page.products.length; i < l; i++) {     var product = SC.page.products[i];     product.discount = ((1 - product.price / product.msrp) * 100).toFixed(0) + '%';   }   render(SC); };  ScarabQueue.push(["recommend", {   logic: "RELATED",   containerId: "my-recommendations",   success: mySuccessHandler }]);

Das obige Beispiel ermöglicht Ihnen, das Feld discount in der Recommender-Vorlage ähnlich wie Katalogfelder wie title oder link zu verwenden.

Tun Sie etwas, nachdem die Empfehlungen gerendert wurden.

Vielleicht möchten Sie einen Standard-Click Handler hinzufügen oder eine Animation starten, nachdem das Widget gerendert wurde.

var mySuccessHandler = function(SC, render) {   render(SC);   attachMyClickHandler(); }; ScarabQueue.push(["recommend", {   logic: "RELATED",   containerId: "my-recommendations",   success: mySuccessHandler }]);

Benutzen Sie kein Scarab-Rendering, sondern rendern Sie mit Ihrem eigenen Code.

Wenn Sie einfach nur die IDs der empfohlenen Produkte haben möchten und sich um den Rest selbst kümmern, können Sie dies mithilfe eines Success Handlers tun, der nicht render aufruft.

var mySuccessHandler = function(SC, render) {   var recommendedItems = [];   for (var i = 0, l = SC.page.products.length; i < l; i++) {     recommendedItems.push(SC.page.products[i].id);   }   doMyOwnThing(recommendedItems); }; ScarabQueue.push(["recommend", {   logic: "RELATED",   containerId: "my-recommendations",   success: mySuccessHandler }]);

Sie werden das Widget nach wie vor in dem gegebenen container rendern und die empfohlenen Artikel mit data-scarabitem-Attributen markieren müssen, da das Click Tracking andernfalls nicht funktioniert.

Live-Daten von Ihren Servern erhalten

In einigen Szenarien müssen Sie zusätzliche Informationen zu den empfohlenen Artikeln einholen, indem Sie über asynchrone Requests mit anderen Servern kommunizieren. Zum Beispiel verkaufen Sie Kinokarten und wollen die genaue Anzahl von verfügbaren Karten anzeigen, indem Sie die Verfügbarkeit in Ihrer eigenen Buchungsdatenbank überprüfen.

var mySuccessHandler = function(SC, render) {   $.ajax({     url: 'ajax/num_available_tickets?items=...',     success: function(data) {       for (var i = 0, l = SC.page.products.length; i < l; i++) {         SC.page.products[i].num_available_tickets = ...       }       render(SC);     }   }); }; ScarabQueue.push(["recommend", {   logic: "RELATED",   containerId: "my-recommendations",   success: mySuccessHandler }]);

Das Feld num_available_tickets kann jetzt im Vorlagencode verwendet werden. Bitte beachten Sie, dass dies die Anzeige des Widgets verzögert, da der Browser auf eine Extra-Request warten muss.

Problembehandlung

Fehler beim Überprüfen der Web Recommender Vorlagen: 'Unexpected "}"

Der Web Recommender verwendet dieselbe Vorlagensprache wie die TWIG-Personalisierung, was in Hinblick auf die geschwungenen Klammern { und } zu Fehlern führen kann. In Folge wird bei Überprüfung der Vorlage möglicherweise folgende Fehlermeldung ausgegeben:

Für dieses Problem gibt es zwei mögliche Lösungen.

1. Entfalten Sie die geschwungenen Klammern mittels String-Verkettung, etwa:

2. Deaktivieren Sie das Twig Parsing, indem Sie Teile des Contents zwischen Statements des Typs verbatim/endverbatim einschließen, wie etwa:

<!-- {% verbatim %} --> <script>  </script> <!-- {% endverbatim %} -->

oder

<script> // {% verbatim %}    // {% endverbatim %} </script>
War dieser Beitrag hilfreich?

Haben Sie Fragen? Anfrage einreichen
Zurück an den Anfang

Emarsys ist ein Leader

You may also be interested in:

Verwandte Beiträge

  • Web Recommender-Logik
  • Web Recommender - Übersicht
  • A/B Testing Web Recommendations
  • JavaScript API für die Datensammlung - Referenz
  • Vorlagenvariablen einrichten
Copyright © 2019 Emarsys eMarketing Systems. All rights reserved
Legal Notice Privacy Policy Master Services Agreement Anti-spam Policy