Nosto Implementierung. Das Startpaket

Transkript

1 Nosto Implementierung Das Startpaket

2 Hallo! Ich heisse Jan und ich werde Ihnen anhand dieses Dokuments bei der Implementierung zur Seite stehen. Die Nosto Implementierung besteht aus sieben Schritten und Sie können innerhalb weniger Stunden mit der Lösung online gehen! Auf gehts! 1 5 Modus - Empfehlungen Modus des 7! 4 Nosto Recommendation Platzhalter

3 <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=[" "connect.nosto.com",e.path "/include/",d].join("");a(g)};window[b].init=c})(); nostojs.init( [accountid] ); //]]> </script> 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. 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 lautet, müssen Sie sie so hinzufügen: nostojs.init( );

4 Kategorie-Seite 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. Um dies zu tun, müssen ein paar Zeilen Code auf jeder Kategorieseite platziert werden. <div class="nosto_category" style="display:none">/winter/accessories/beanies</div> 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. 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 der nächsten Seite ein: von Produktseiten

5 Kategorie-Seite Produktdetailseite Suchseite Warenkorb Bestätigungsseite Kundeninformationen <div class="nosto_product" style="display:none"> <span class="url"> Produktdetailseiten-URL <span class="product_id">beanie123</span> <span class="name">red wool beanie</span> <span class="image_url"> <span class="price">30.90</span> Vaterartikel-Produkt-ID (dh. bei Änderung von Größe oder Farbe bleibt der Tag konstant) Produktname Preisvariable (sollte mit dem günstigsten Preis übereinstimmen) Produkt-Image-URL: Wir ziehen das Bild von der Seite und platzieren es automatisch in unserer Cloud. <span class="price_currency_code">eur</span> <span class="availability">instock</span> Währung also EUR, USD, - 3 Buchstaben-Kode nach ISO4217 Verfügbarkeit: Entweder InStock, Discontinued or OutOfStock (bitte auch so auf English angeben) <span class="category">/winter/accessories/beanies</span> <span class="category">/sales/accessories</span> <!-- Additional properties --> Kategoriezugehörigkeit <span class="description">it's a beautiful beanie.</span> Produktbeschreibung <span class="list_price">40.90</span> UVP Preis - Preis vor Abzug eines Rabatts <span class="brand">adidas</span> 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> </div> <span class="date_published"> </span> <div class="nosto_category" style="display:none">/sales/accessories</div> Datum, wann das Produkt zum ersten Mal auf der Website angezeigt wurde Aktivkategorie (basierend auf Breadcrumb) Der Pfad, der vom Kunden zum Produkt gewählt wurde

6 Kategorie-Seite Produktdetailseite Suchseite Warenkorb Bestätigungsseite Kundeninformationen Standardmäßig muss der Suchparameter während der Nosto Implementierung im Dashboard angegeben werden. Wenn Sie sich bei anmelden, gehen Sie zu «Konto» und dann Abfrageparameter". Im Beispiel unten lautet der Suchabfrage-Parameter «q» q 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

7 Kategorie-Seite Produktdetailseite Suchseite Warenkorb Bestätigungsseite Kundeninformationen <div class="nosto_cart" style="display:none"> <div class="line_item"> <span class="product_id">beanie123</span> <span class="quantity">1</span> Quantität Vater Produkt ID (entspricht genau der Produktdetailseite) <span class="name">red wool beanie</span> <span class="unit_price">30.90</span> <span class="price_currency_code">eur</span> </div> <div class="line_item"> <span class="product_id">gloves456</span> <span class="quantity">1</span> <span class="name">blue gloves</span> <span class="unit_price">15.90</span> <span class="price_currency_code">eur</span> </div> Produktname Produktpreis (entspricht dem niedrigeren Preis auf der Produktdetailseite) Währung - 3 Buchstaben - ISO4217 Wiederholen Sie das für jedes Produkt im Warenbkorb Vorsicht - -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.

8 Kategorie-Seite Produktdetailseite Suchseite Warenkorb Bestätigungsseite Kundeninformationen <div class="nosto_purchase_order" style="display:none"> <span class="order_number">1445</span> Order ID <div class="buyer"> <span Adresse des Kunden <span class="first_name">john</span> <span class="last_name">doe</span> <div class="purchased_items"> <div class="line_item"> <span class="product_id">beanie123</span> <span class="quantity">1</span> Vorname Nachname <span class="name">red wool beanie</span> <span class="unit_price">30.90</span> <span class="price_currency_code">eur</span> </div> </div> </div> Informationen zu den gekauften Produkten Vorsicht - - 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.

9 Kategorie-Seite Produktdetailseite Suchseite Warenkorb Bestätigungsseite Kundeninformationen <div class="nosto_customer" style="display:none"> <span Kunden <span class="first_name">john</span> <span class="last_name">doe</span> <!-- Additional properties --> <span class="birth_date"> </span> Vorname Nachname Geburtsdatum Bonjour, François! </div> Die Tags müssen auf jedem Seitentyp platziert werden. Diese Informationen werden nur verwendet, um personalisierte s zu verschicken: Warenkorbabbrecher, Order Follow-up und die Wir-vermissen- Sie . Die Informationen sind verschlüsselt und werden nicht für andere Zwecke verwendet.

10 Wenn Sie die Nosto Tags implementiert haben, können Sie bequem den Nosto -Modus (auch bekannt als Nosto Debug Tool) verwenden, um sicherzustellen, dass alles entsprechend korrekt getagt wurde. Um die -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. < > 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. 1 2

11 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. 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 ( Wählen Sie einfach den Tab Kampagnen und die Empfehlung-Slots Kategorie. Alternativ können Sie auch eine der vorhandenen Empfehlung Slots bearbeiten.

12 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 -Template auswählen. 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. Vorsicht Wenn Sie die Empfehlungsslots auf Ihrer Seite einfügen, werden keine Empfehlungen angezeigt, auch wenn der Empfehlungsslot einzeln aktiviert ist. Wichtig 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.

13 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 -Modus indem Sie?nostodebug=true an Ihre URL hängen. Das erlaubt Ihnen auch das Styling mit Live Daten vorzunehmen. Dieser Prozess ist 100% sicher und findet komplett im Verborgenen statt. Kein Kunde sieht die Recommendation Slots. 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.) Wenn die Nosto Algorithmen genug Daten gesammelt gesammelt haben, werden echte Produkte im Slot angezeigt.

14 Nosto gibt Ihnen völlige Freiheit in Bezug auf das Front-End-. Wenn Sie eine Empfehlungsslot erstellt haben, müssen Sie entweder eine bereits gestaltete Nosto--Vorlage wählen oder eine von Grund auf neu bauen (nach eigenem Geschmack). 5 generischen Vorlagen werden standardmäßig angeboten. Allerdings können Sie diese bearbeiten und in ihren HTML & CSS-Eigenschaften ändern, falls gewünscht. Sie haben jederzeit Zugriff auf die Eigenschaften der -Vorlagen. 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, Dies gibt Ihnen die Möglichkeit, einen visuell völlig integrierten Empfehlungslot zu bauen, der Ihrem Website-Styleguide folgt.

15 Wenn Sie interne Ressourcen haben, können Sie die Empfehlung--Vorlagen direkt auf der HTML-Seite ändern. Dies gibt Ihnen mehr Freiheit in Bezug auf individuelles und Ästhetik. Important Wenn Sie die HTML- und CSS- Eigenschaften einer 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.

16 Herzlichen Glückwunsch! Sie haben jetzt die wesentlichen technischen Details von Nosto verstanden! Wir empfehlen Ihnen, den Nosto -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! 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, die Einstellungen der Empfehlungen und lässt Sie dann Nosto aktivieren. Viel Spass! < >

17 Los geht s!