Implementation Guide - The essentials

Nosto Implementierung
Das Startpaket
Hallo!
Ich heisse Jan und ich werde Ihnen anhand dieses Dokuments bei der Implementierung
zur Seite stehen.
Vorstellung
Die Nosto Implementierung besteht aus sieben Schritten und Sie können innerhalb
weniger Stunden mit der Lösung online gehen!
Javascript hinzufügen
Auf gehts!
Tagging
Vorschau
Recommendations
1
Javascript hinzufügen
Positionierung
Design
2
Brauchen Sie Hilfe ?
[email protected]
4
Vorschau Modus - Empfehlungen
6
Design
7
Aktivierung !
Tagging
Aktivierung
3
5
Vorschau-Modus des Tagging
Nosto Recommendation Platzhalter
Vorstellung
Javascript hinzufügen
Tagging
Vorschau
<script type="text/javascript">
//<![CDATA[
(function(){function a(a){var b,c,d=window.document.createElement("iframe");d.src="javascript:false",(d.frameElement||d).style.cssText="width: 0;
height: 0; border: 0";var e=window.document.createElement("div");e.style.display="none";var
f=window.document.createElement("div");e.appendChild(f),window.document.body.insertBefore(e,window.document.body.firstChild),f.appendChild(d);try{c=d.c
ontentWindow.document}catch(g){b=document.domain,d.src="javascript:var d=document.open();d.domain='"+b+"';void(0);",c=d.contentWindow.document}return
c.open()._l=function(){b&&(this.domain=b);var c=this.createElement("scr".concat("ipt"));c.src=a,this.body.appendChild(c)},c.write("<bo".concat('dy
onload="document._l();">')),c.close(),d}var b="nostojs";window[b]=window[b]||function(a){(window[b].q=window[b].q||[]).push(a)},window[b].l=new
Date;var c=function(d,e){if(!document.body)return setTimeout(function(){c(d,e)},30);e=e||{},window[b].o=e;var
f=document.location.protocol,g=["https:"===f?f:"http:","//",e.host||"connect.nosto.com",e.path||"/include/",d].join("");a(g)};window[b].init=c})();
nostojs.init(‘[accountID]’);
//]]>
</script>
Recommendations
Positionierung
Design
Aktivierung
Die Einbettung des Javascripts ermöglicht es Nosto, die ersten
Bits an Informationen zu erhalten.
Es muss in der Kopfzeile Ihrer Website in der HTML-Struktur
platziert werden.
Es ist eine universelles Skript und muss nur an einer Stelle
angepasst werden: der Konto-ID-Abschnitt [accountID].
Bei jedem Laden der Seite, durchsucht der Nosto Crawler die
betreffende Seite und sendet die Nosto Tags in die Nosto Cloud.
Brauchen Sie Hilfe ?
[email protected]
Dank dieser Javascript-Einbettung ist Nosto auch in der Lage, in
Echtzeit die Aktivität Ihrer Website zu analysieren. Allerdings fehlt
den Daten noch Struktur. Die nächsten Schritte sind daher wichtig!
Das eingebettete Javascript muss im Header Ihrer Website in der
HTML-Struktur platziert werden. Es darf nicht im Body oder im
Footer platziert werden.
Folglich wird es auf Ihrer Website seitenübergreifend angezeigt
werden.
Beachten Sie, dass Sie die Klammern entfernen, wenn die Konto-ID
hinzugefügt wird.
Als Beispiel, wenn Ihre Konto-ID 12345 lautet, müssen Sie sie so
hinzufügen:
nostojs.init(‘12345’);
Kategorie-Seite
Vorstellung
Produktdetailseite
Suchseite
Warenkorb
Bestätigungsseite
Kundeninformationen
Nosto benötigt eine klar definierte Datenstruktur, um den Informationen, die über das Javascript esammelt werden, Bedeutung
zu geben. Browsingverlauf und Kaufverhalten sind entscheidend für Nosto Algorithmen, um entsprechende Empfehlungen zu
produzieren.
Javascript hinzufügen
Um dies zu tun, müssen ein paar Zeilen Code auf jeder Kategorieseite platziert werden.
Tagging
Vorschau
Recommendations
<div class="nosto_category" style="display:none">/Winter/Accessories/Beanies</div>
Positionierung
Design
Aktivierung
Die Codezeile (DIV-Element) muss in der Template-Datei Ihrer
Kategorie-Seite platziert werden.
Folglich wird jede Kategorie-Seite mit dem div-Tag markiert
werden.
Brauchen Sie Hilfe ?
[email protected]
Im obigen Beispiel ist der Wert /Winter/Accessories/Beanies ein
Beispiel für eine Kategorie. Dies muss durch die entsprechende
Kategorie-Variable in der E-Commerce-Plattform ersetzt werden.
Das div-Tag “nosto_category” wird auch Produktseiten
hinzugefügt, aber die Variable, der Inhalt des Containers ist ein
wenig anders.
Im Folgenden gehen wir auf das Tagging der nächsten Seite ein:
Tagging von Produktseiten
Kategorie-Seite
Produktdetailseite
Warenkorb
Suchseite
Bestätigungsseite
Kundeninformationen
Vorstellung
Javascript hinzufügen
<div class="nosto_product" style="display:none">
Tagging
Vaterartikel-Produkt-ID (dh. bei Änderung von Größe oder Farbe bleibt der Tag konstant)
<span class="product_id">Beanie123</span>
Vorschau
Produktdetailseiten-URL
<span class="url">http://www.example.com/product/Beanie123</span>
Produktname
<span class="name">Red wool beanie</span>
<span class="image_url">http://www.example.com/img/BEANIE123.jpg</span>
Recommendations
<span class="price">30.90</span>
Preisvariable (sollte mit dem günstigsten Preis übereinstimmen)
<span class="price_currency_code">EUR</span>
Positionierung
Produkt-Image-URL: Wir ziehen das Bild von der Seite und platzieren
es automatisch in unserer Cloud.
Währung also EUR, USD, … - 3 Buchstaben-Kode nach ISO4217
<span class="availability">InStock</span>
Verfügbarkeit: Entweder InStock, Discontinued or OutOfStock (bitte auch so auf English angeben)
<span class="category">/Winter/Accessories/Beanies</span>
Design
Kategoriezugehörigkeit
<span class="category">/Sales/Accessories</span>
<!-- Additional properties -->
Aktivierung
<span class="description">It's a beautiful beanie.</span>
<span class="list_price">40.90</span>
<span class="brand">Adidas</span>
Produktbeschreibung
UVP Preis - Preis vor Abzug eines Rabatts
Marke
<span class="tag1">Men</span>
<span class="tag2">Red</span>
frei wählbares Produktattribut z.B. Farbe oder Geschlecht
<span class="tag3">Sales</span>
<span class="date_published">2011-12-31</span>
Brauchen Sie Hilfe ?
Datum, wann das Produkt zum ersten Mal auf der Website angezeigt wurde
</div>
[email protected]
<div class="nosto_category" style="display:none">/Sales/Accessories</div>
Aktivkategorie (basierend auf Breadcrumb)
Der Pfad, der vom Kunden zum Produkt gewählt wurde
Kategorie-Seite
Produktdetailseite
Suchseite
Warenkorb
Bestätigungsseite
Kundeninformationen
Vorstellung
Javascript hinzufügen
Standardmäßig muss der Suchparameter während
der Nosto Implementierung im Dashboard angegeben
werden. Wenn Sie sich bei http://my.nosto.com,
anmelden, gehen Sie zu «Konto» und dann
“Abfrageparameter".
Tagging
Vorschau
Im Beispiel unten lautet der Suchabfrage-Parameter
«q»
Recommendations
Positionierung
Design
q
Aktivierung
Wenn Sie aus irgendeinem Grund keinen Suchabfrageparameter haben, können Sie als Alternative folgende Div Elemente
auf die Seite setzen:
<div class="nosto_search_term" style="display:none">[Keyword]</div>
Exemple : <div class="nosto_search_term" style="display:none">red beanie</div
Brauchen Sie Hilfe ?
[email protected]
Kategorie-Seite
Produktdetailseite
Suchseite
Warenkorb
Bestätigungsseite
Kundeninformationen
Vorstellung
Javascript hinzufügen
<div class="nosto_cart" style="display:none">
Tagging
<div class="line_item">
Vater Produkt ID (entspricht genau der Produktdetailseite)
<span class="product_id">Beanie123</span>
Vorschau
<span class="quantity">1</span>
Quantität
<span class="name">Red wool beanie</span>
Produktname
Recommendations
<span class="unit_price">30.90</span>
<span class="price_currency_code">EUR</span>
Positionierung
Produktpreis (entspricht dem niedrigeren Preis auf der Produktdetailseite)
Währung - 3 Buchstaben - ISO4217
</div>
<div class="line_item">
Design
<span class="product_id">Gloves456</span>
<span class="quantity">1</span>
Aktivierung
<span class="name">Blue gloves</span>
Wiederholen Sie das Tagging für jedes Produkt im Warenbkorb
<span class="unit_price">15.90</span>
<span class="price_currency_code">EUR</span>
</div>
Vorsicht
-
Brauchen Sie Hilfe ?
[email protected]
-
-Jeder unterschiedliche Artikel im Warenkorb muss in einem “line_item” div-Tag aufgelistet werden
- Die Produkt-ID muss die Vater-ID sein (also unabhängig von Variationen)
- Die ID muss die gleiche sein, wie die ID auf der Produktdetailseite. Dies ermöglicht Nosto den Bezug zu den
Produktmetatdaten herzustellen.
Kategorie-Seite
Produktdetailseite
Warenkorb
Suchseite
Bestätigungsseite
Kundeninformationen
Vorstellung
Javascript hinzufügen
<div class="nosto_purchase_order" style="display:none">
Tagging
<span class="order_number">1445</span>
Order ID
<div class="buyer">
Vorschau
<span class=« email">[email protected]</span>
<span class="first_name">John</span>
Vorname
Recommendations
<span class="last_name">Doe</span>
Email Adresse des Kunden
Nachname
<div class="purchased_items">
Positionierung
<div class="line_item">
<span class="product_id">Beanie123</span>
Design
<span class="quantity">1</span>
<span class="name">Red wool beanie</span>
Aktivierung
Informationen zu den gekauften Produkten
<span class="unit_price">30.90</span>
<span class="price_currency_code">EUR</span>
</div>
</div>
</div>
Vorsicht
-
Brauchen Sie Hilfe ?
[email protected]
-
- Die Produkt-IDs müssen die Vater-IDs sein (also keine Variationsinformationen enthalten). Die ID muss die gleiche sein, wie auf der
Produktdetailseite und auf der Warenkorbseite. Dies ermöglicht Nosto die Konvertierungen seitenübergreifend korrekt zu verfolgen.
- Wenn mehrere Produkte bestellt werden, muss jeder von ihnen in einem einzelnen line_item div-Tag enthalten sein.
- Die Tags müssen auf der Auftragsbestätigungs-Seite platziert werden. Wenn Sie externe Zahlungsmodule wie Paypal verwenden, müssen
Sie Ihren Kunden wieder auf die Auftragsbestätigungs-Seite umleiten, wenn der Kauf abgeschlossen ist.
Kategorie-Seite
Produktdetailseite
Suchseite
Warenkorb
Bestätigungsseite
Vorstellung
Javascript hinzufügen
Tagging
<div class="nosto_customer" style="display:none">
Kundenemail
<span class="email">[email protected]</span>
Vorschau
<span class="first_name">John</span>
<span class="last_name">Doe</span>
Vorname
Nachname
Bonjour, François !
Recommendations
<!-- Additional properties -->
<span class="birth_date">2011-12-31</span>
Geburtsdatum
</div>
Positionierung
Design
Aktivierung
Die Tags müssen auf jedem Seitentyp platziert werden.
Diese Informationen werden nur verwendet, um personalisierte E-Mails zu
verschicken: Warenkorbabbrecher, Order Follow-up und die Wir-vermissenSie Email.
Brauchen Sie Hilfe ?
[email protected]
Die Informationen sind verschlüsselt und werden nicht für andere Zwecke
verwendet.
Kundeninformationen
Wenn Sie die Nosto Tags implementiert haben, können Sie bequem den Nosto Vorschau-Modus (auch bekannt als
Nosto Debug Tool) verwenden, um sicherzustellen, dass alles entsprechend korrekt getagt wurde.
Um die Vorschau-Modus zu aktivieren, können Sie die Zeichenfolge ”?nostodebug=true” am Ende Ihrer URL
hinzufügen. Eine Konsole wird angezeigt (siehe unten) und zwar mit den Informationen, die an Nosto gesendet werden.
Vorstellung
<>
Javascript hinzufügen
http://www.meinshop.de?nostodebug=true
Tagging
Vorschau
Wenn Sie auf das graue Zahnrad klicken, werden die Informationen angezeigt, die an Nosto geschickt werden.
Falls erforderliche Werte fehlen, werden Sie über rosa Fehlermeldungen angezeigt.
Recommendations
Positionierung
Design
Aktivierung
1
Brauchen Sie Hilfe ?
[email protected]
2
Nosto kann nun ihre Traffic-Daten analysieren. Browsing und Kaufverhalten wird für jeden Ihrer Besucher und Kunden
verfolgt.
Allerdings werden noch keine Empfehlung angezeigt.
Vorstellung
Javascript hinzufügen
Tagging
Vorschau
Recommendations
Positionierung
Design
Aktivierung
Brauchen Sie Hilfe ?
[email protected]
Um diese zu zeigen, müssen Sie die Nosto Platzhalter (DIV-Elemente) im DOM einbauen, wo Sie letztlich erscheinen
sollen.
Sie können ein Empfehlungs-Element in Ihrem Nosto Dashboard erstellen
(http://my.nosto.com). Wählen Sie einfach den Tab “Kampagnen” und die Empfehlung-Slots Kategorie.
Alternativ können Sie auch eine der vorhandenen Empfehlung Slots bearbeiten.
Wenn Sie einen Empfehlungs-Slot erstellen, müssen Sie entscheiden, wo und mit welchem Regelwerk zur Festlegung
des Inhalts der Empfehlungen gearbeitet werden soll. Klicken Sie auf die Schaltfläche «Wählen» und wählen Sie den
gewünschten Regelsatz.
Als nächstes können Sie die Einstellungen anpassen und das Design-Template auswählen.
Vorstellung
Javascript hinzufügen
Wenn Sie eine vorhandene Slot wählen, sind die Nosto Algorithmen bereits voreingestellt.
Wenn Sie bereit sind, können Sie speichern und den HTML-Code auf der gewünschten Seite platzieren.
Die Nosto Empfehlungen werden durch DIV-Element nosto_element (Beispiel unten) definiert.
Tagging
Vorschau
Recommendations
Positionierung
Design
Vorsicht
Wichtig
Wenn Sie die Empfehlungsslots auf Ihrer Seite einfügen,
werden keine Empfehlungen angezeigt, auch wenn der
Empfehlungsslot einzeln aktiviert ist.
Standardmäßig und aus Sicherheitsgründen, werden alle
Nosto Empfehlungen komplett vor Ihren Usern verborgen
gehalten.
Sie können alle Empfehlungen aktivieren, indem Sie den
Schalter im “Konto” Tab umlegen.
Aktivierung
Brauchen Sie Hilfe ?
[email protected]
Mit den Platzhaltern vor Ort müssen Sie nun sicherstellen, dass alles perfekt eingerichtet ist, so dass Sie die Empfehlungen
mit gutem Gewissen angestellt werden können.
Nutzen Sie sie den Vorschau-Modus indem Sie ?nostodebug=true an Ihre URL hängen.
Das erlaubt Ihnen auch das Styling mit Live Daten vorzunehmen.
Vorstellung
Dieser Prozess ist 100% sicher und findet komplett “im Verborgenen” statt. Kein Kunde sieht die Recommendation Slots.
Javascript hinzufügen
Tagging
Wenn die Nosto Algorithmen nicht genügend Daten gesammelt haben, werden Nosto Mock-Ups bzw Platzhalter
angezeigt. Kein Kunde wird je diese Platzhalter zu Gesicht bekommen (Falls Sie das Element jetzt “live-schalten”
würden, wird das Element von Nosto vollständig ausgeblendet.)
Vorschau
Recommendations
Positionierung
Design
Wenn die Nosto Algorithmen genug Daten gesammelt gesammelt haben, werden echte Produkte im Slot angezeigt.
Aktivierung
Brauchen Sie Hilfe ?
[email protected]
Nosto gibt Ihnen völlige Freiheit in Bezug auf das Front-End-Design.
Wenn Sie eine Empfehlungsslot erstellt haben, müssen Sie entweder eine bereits gestaltete Nosto-Design-Vorlage wählen
oder eine von Grund auf neu bauen (nach eigenem Geschmack).
Vorstellung
5 generischen Vorlagen werden standardmäßig angeboten. Allerdings können Sie diese bearbeiten und in ihren HTML &
CSS-Eigenschaften ändern, falls gewünscht.
Javascript hinzufügen
Tagging
Vorschau
Recommendations
Positionierung
Design
Aktivierung
Sie haben jederzeit Zugriff auf die Eigenschaften der Design-Vorlagen.
Brauchen Sie Hilfe ?
Als Beispiel können Sie wählen, wie viele Produkte pro Zeile angezeigt werden sollen, die Farbe und die Größe der Schrift,
Farbe der CTA-Tasten, …
[email protected]
Dies gibt Ihnen die Möglichkeit, einen visuell völlig integrierten Empfehlungslot zu bauen, der Ihrem Website-Styleguide folgt.
Vorstellung
Javascript hinzufügen
Tagging
Wenn Sie interne Ressourcen
haben, können Sie die
Empfehlung-Design-Vorlagen
direkt auf der HTML-Seite ändern.
Dies gibt Ihnen mehr Freiheit in
Bezug auf individuelles Design
und Ästhetik.
Vorschau
Recommendations
Positionierung
Design
Aktivierung
Important
Wenn Sie die HTML- und CSSEigenschaften einer Design
Vorlage ändern, ist es von
entscheidender Bedeutung, dass
Nosto Variablen wie z.B $!
product.price beibehalten werden.
Unter dem Template Editor
befindet sich eine Liste mit allen
Nosto Variablen, die für Sie bereit
stehen.
Brauchen Sie Hilfe ?
[email protected]
Herzlichen Glückwunsch! Sie haben jetzt die wesentlichen technischen Details von Nosto verstanden!
Wir empfehlen Ihnen, den Nosto Vorschau-Modus während und nach der Implementierungsphase von Nosto zu
verwenden. Dies ist ein sicherer Weg, um sicherzustellen, dass alles visuell und bezüglich der Algorithmen Ihren
Erwartungen entspricht.
Gehen Sie auf my.nosto.com um die Welt der Personalisierung zu entdecken!
Vorstellung
Javascript hinzufügen
Tagging
Vorschau
Recommendations
Positionierung
Design
Aktivierung
Brauchen Sie Hilfe ?
[email protected]
Sobald Sie Nosto installiert und der Javascript-Code auf der Seite vorliegt, sehen Sie das Nosto Onboarding Menü.
Dieser 3-Schritte Leitfaden führt Sie durch die Vorschau, die Einstellungen der Empfehlungen und lässt Sie dann Nosto
aktivieren. Viel Spass!
<>
http://my.nosto.com
Los geht’s !