W-JAX 2017: Online-Marketingorientierte Architektur [GER]

Oftmals sind unsere Anwendungen Teil des öffentlichen Internets, und wir wollen mit unserem Content, Shop oder Webanwendung von Kunden oder Interessenten gefunden werden. Dabei kümmern wir uns entweder selbst um das Thema Onlinemarketing, haben eine externe Agentur oder gar eine eigene interne komplette Abteilung dafür. Ich entdecke bei meinen Kunden und Partnern immer wieder dieselben Muster und Konflikte in Zusammenarbeit mit den Themen aus dem Onlinemarketing.

In meinem Vortrag geht es um diese Beobachtungen, Probleme, Ursachen und Lösungen. Dabei werden konkrete Implementierungen angerissen wie der "No-Index Feature Toggle", "Graceful degraded Dead Links" oder "Header-based A/B Testing".

Des Weiteren möchte ich unserer Java-Community zeigen, dass uns SPA oder Tools wie React zwar wunderbar bei der Umsetzung helfen, aber K.o.-Kriterien und Horrorszenarien für Google-Optimierungen werden können.

Mein Appell dabei an alle Architekten und Entwickler von öffentlichem Content ist es, onlinemarketingorientierte Architekturen zu entwerfen und entsprechende Konzepte umzusetzen.

Transcript

1. Online-Marketingorientierte Architektur ... damit auch Marketing glücklich ist! omo-architecture.org
2. Frank Hinkel 1 Baujahr 82 15 Jahre IT (meistens Java) Geschäftsführer NEOZO Schwerpunkt: leichtgewichtige Architekturen @frhinkel
3. Online Marketing & Architektur (???) Wie passt das zusammen Und was soll der Talk 2
4. Besseres Google Ranking (SEO) Mehr Abschlüsse (Conversion-Rate) Aktualität Nutzer analysieren ... Ziele von Online Marketing 3
5. 4 Adwords Universal Search: Google Maps Lokal
6. 5 Organische Treffer
7. Ziele von IT Architekturen 6 System passt zu Qualitätszielen des Unternehmens Funktionalität Performance Zuverlässigkeit Effizienz ...
8. Online Marketing & Architektur 7 Anforderungen OM Architektur Muster Super Duper URLs URL Translator
9. Online Marketing & Architektur 8 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks
10. Online Marketing & Architektur 9 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle
11. Online Marketing & Architektur 10 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing
12. Online Marketing & Architektur 11 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing Flexible Robots.txt & Sitemap Generierung No-Index Toggle
13. Online Marketing & Architektur 12 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing Flexible Robots.txt & Sitemap Generierung No-Index Toggle Größtmögliche Indizierung SEO based Tooling
14. Wie die Realität oft aussieht IT/Entwickler Business/Fachbereiche Marketing (Agentur oder Abteilung) 13
15. 14 dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case
16. 15 dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case works, makes sense, user hates
17. 16 dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case SEO Analytics OnPage Conversion-Rate OffPage Social Media works, makes sense, nobody likes
18. 17 dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case SEO Analytics OnPage Conversion-Rate OffPage Social Media works, makes sense, nobody likes sounds good, doesn‘t work
19. 18 works, makes sense, nobody likes sounds good, doesn‘t work people will use, company will die dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case SEO Analytics OnPage Conversion-Rate OffPage Social Media
20. 19 works, makes sense, nobody likes sounds good, doesn‘t work people will use, company will die *magic* dev marketing business js resilience scalability scala microservice docker react elixir angular requirement feature bug use-case SEO Analytics OnPage Conversion-Rate OffPage Social Media
21. Beobachtung: Zu wenig Marketing und Dev 20 Anforderungen zu spät oder zu wenig berücksichtigt Software-Architektur kann Anforderungen nicht effizient bedienen Technologieauswahl passt nicht zu Marketing Vorgaben dev marketing
22. Was Online Marketing von uns möchte...
23. Online Marketing & Architektur 22 Anforderungen OM Architektur Muster Super Duper URLs URL Translator
24. Super duper URLs Immer aktuell und sprechend Immer individuell Ständig änderbar In sämtlichen Sprachen In verschiedenen Permutationen 23
25. Super duper URLs /product/desktable4991-w211 EN: /product/desk-table-green-200x80 DE: /produkt/schreibtisch-grün-200x80 DE: /produkt/tisch/schreibtisch-grün-200x80 24
26. Lösung: URL-Translator Implementierung eines URL-Translators Implementierung eines URL CMS Komponente Voraussetzung: Physische Trennung von auszuführendem Code und URL 25
27. Lösung: URL-Translator Best Practice: Die Ressourcen-orientierung durch ROCA (roca-style.org) 26 Keine Seiten bauen sondern Ressourcen... /product/{id} <<Resource>>
28. Lösung: URL-Translator Best Practice: HAL-Konzepte strukturieren, vereinfachen und standardisieren URL Abstraktionen 27
29. Lösung: URL-Translator Best Practice: HAL-Konzepte strukturieren, vereinfachen und standardisieren URL Abstraktionen 28
30. Lösung: URL-Translator 29 URL Translator <<Filter>> /product/{id} <<Resource>> Mapping Table <<DB>> IN: /produkt/tisch/schreibtisch-grün-200x80 OUT: /product/desktable4991-w211 client
31. Online Marketing & Architektur 30 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks
32. Keine 404, keine Soft-404 Produkte, Artikel, Beiträge laufen aus oder... werden umbenannt alter Index alte Bookmarks ... 31 https://httpstatusdogs.com/ Google eats doggo‘s index L https://de.ryte.com/wiki/Soft_404-Fehler
33. Lösung: Graceful Degraded Deadlinks Zeig das Beste an was du kannst 404-Ziel: /produkt/schreibtisch-x1-grün-200x80 User: Großkunde, Office Neues Ziel: /produkt/schreibtisch-höhenverstellbar-200x80 32
34. Lösung: URL-Translator 33 HTTP Error Handler <<Handler>> /product/{id} <<Resource>> Recommendation Engine <<System>> client IN: A)404-src: /produkt/tisch/schreibtisch-grün-200x80 B)user: xyz OUT: /produkt/schreibtisch-höhenverstellbar-200x80 404: not found
35. Online Marketing & Architektur 34 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle
36. Flexible Analytics Welche User sind wo und machen wann was? Warum springen sie ab? (Bounce) Wieviel wird von wem gekauft? ... 35
37. Flexible Analytics Unterschiedliche Herangehensweisen: 36 A) Eigene BI Landschaft: Storage, Hive, Pig, Exasol, Tableau B) Google Analytics & Google Tag Manager 2+2 = 4 -1 = 3 quick math Google Tag Manager
38. Flexible Analytics: B) Google Analytics Beispiel Funnel 37 Datenschutz?
39. Lösung: GTM - Feature Toggle GTM Java-Script Snippet in CMS auslagern für Self-Service 38
40. Lösung: GTM - Feature Toggle Feature Toggle im Front-End anbinden 39
41. Online Marketing & Architektur 40 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing
42. Crazy A/B-Testing Trial & Analytics von verschiedenen UX Flows UX Designs Daten 41
43. Crazy A/B-Testing Trial & Analytics von verschiedenen UX Flows UX Designs Daten 42 „Kunden unter 30 Jahren: weniger Text = +9%“
44. Lösung: Header Based A/B Testing Challenge A): Switch wird an verschiedenen Stellen benötigt UX Flow: Frontend UX Design: Assets Daten: Backend Challenge B): Viele Anwendungen sind Stateless, keine Session 43
45. Lösung: Header Based A/B Testing 44 HTTP Header stehen überall im Zyklus eines Requests zur Verfügung
46. Lösung: Header Based A/B Testing 45 State über HTTP Header benötigt auch keine Session
47. Lösung: Header Based A/B Testing 46 Der Header kann einfach durch einen NGINX, Apache oder Filter enriched werden
48. Lösung: Header Based A/B Testing 47 Das sieht dann so aus...
49. Lösung: Header Based A/B Testing 48
50. Lösung: Header Based A/B Testing Vorgehensweise A) Erkennung der auszusteuernden Variante 49 - Hier Entscheidung in Reverse Proxy auf Basis von Domain
51. Lösung: Header Based A/B Testing Vorgehensweise A) Erkennung der auszusteuernden Variante B) Durchführung des Switches 50 - Hier Entscheidung in Reverse Proxy auf Basis von Domain - Header kann danach überall abgefragt werden request.getHeader(„x-http-ab-test-mode“)
52. Lösung: Header Based A/B Testing Weitere Themen NGINX kann mit Hilfe von Lua auch Zufallsentscheidungen treffen Fortgeschrittener Entscheidungen können über Servlet Filter abgedeckt werden 51 A/B Identifier <<Filter>> /product/{id} <<Resource>> client Male add_header mod ‘mod-a‘ Female add_header mod ‘mod-b‘ request.getHeader(‘mod‘)
53. Online Marketing & Architektur 52 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing Flexible Robots.txt & Sitemap Generierung No-Index Toggle
54. Flexible Robots.txt & Sitemap Generierung Robots.txt: Verboten für den Crawler Sitemap: Landkarte von Website 53
55. Flexible Robots.txt & Sitemap Generierung Robots.txt & Sitemap Ändern sich ständig konsistent vollständig korrekt 54
56. Flexible Robots.txt & Sitemap Generierung Robots.txt & Sitemap Ändern sich ständig konsistent vollständig korrekt 55 Automatisierung
57. Online Marketing & Architektur 56 Anforderungen OM Architektur Muster Super Duper URLs URL Translator Keine 404, keine Soft-404 Graceful Degraded Deadlinks Flexible Analytics Google Tag Manager – Feature Toggle Crazy A/B-Testing Header Based A/B-Testing Flexible Robots.txt & Sitemap Generierung No-Index Toggle Größtmögliche Indizierung SEO based Tooling
58. Größtmögliche Indizierung Kurze Selbstreflexion... 57 JavaScript Frameworks Angular vs React https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc
59. Größtmögliche Indizierung Kurze Selbstreflexion... 58 JavaScript Frameworks Angular vs React https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc - scalability - compatiblity - tooling - community - Jobs - licences - development time - footprint
60. Größtmögliche Indizierung Kurze Selbstreflexion... 59 JavaScript Frameworks Angular vs React https://hackernoon.com/angular-vs-react-the-deal-breaker-7d76c04496bc - scalability - compatiblity - tooling - community - Jobs - licences - development time - footprint
61. Größtmögliche Indizierung Crawler Friendly Content 60 Can Google properly crawl and index JavaScript? https://www.slideshare.net/goralewicz/can-google-properly-crawl-and-index-javascript-seo- experiments-results-and-findings
62. Größtmögliche Indizierung 61 [q:ele]
63. Größtmögliche Indizierung Crawling Budget effizient verbrauchen 62 What Crawl Budget Means for Googlebot https://webmasters.googleblog.com/2017/01/what-crawl-budget-means-for-googlebot.html
64. Größtmögliche Indizierung Fazit von @bart_goralewicz: Generell können nur Google und Ask Javascript handeln Nicht alle Javascript Frameworks sind indizierbar Indizierung ist nur eins der Probleme: Javascript kann trotz erfolgreichem Rendering und Indizierung zu viel Crawler Budget verbrauchen 63 dev marketing
65. Lösung: Größtmögliche Indizierung Finger weg von JS Frameworks zum aufbauen des DOM.... wenn andere Suchmaschinen relevant sind (International) wenn nur Google: trotzdem aufpassen wegen Crawling Budget Falls zu spät: Prerendering Tools verwenden und serverseitig react.js processieren. 64
66. Performance Besonders im E-Commerce messbar 65 Jede Sekunde zählt! Zusammenhang von Conversion-Rate und Ladezeit https://www.findologic.com/zusammenhang-von-conversion-rate-und-ladezeit/
67. Online-Marketingorientierte Architektur 66 URL Translator Graceful Degraded Deadlinks GTM – Feature Toggle No-Index Toggle SEO based Tooling Performance Automated Microdata Header based A/B-Testing dev marketing continuous collaboration omo-architecture.org
68. Online-Marketingorientierte Architektur URL Translator Graceful Degraded Deadlinks GTM – Feature Toggle No-Index Toggle SEO based Tooling Performance Automated Microdata Header based A/B-Testing dev marketing continuous collaboration omo-architecture.org Frank Hinkel hinkel@neozo.de Vielen Dank!
69. Quellen [q:hal] http://stateless.co/hal_specification.html [q:ele] https://www.slideshare.net/goralewicz/can-google-properly-crawl-and-index-javascript-seo-experiments-results-and-findings https://openclipart.org/detail/82327/cartoon-thought-bubble https://openclipart.org/detail/243741/grass-layered https://openclipart.org/detail/171507/money-pot https://openclipart.org/detail/247563/simple-cartoon-person https://openclipart.org/detail/239997/simple-character-and-a-hi https://openclipart.org/detail/232615/ultra-smart-owl 68