• Skip to primary navigation
  • Skip to main content
michaelnissen IT

michaelnissen IT

Business. Data. Web.

  • Home
  • Blog
  • Über mich
  • E-Commerce
    • Konzeption und Planung
    • Programmierung und Entwicklung
    • Online-Marketing und Akquise
    • DATEV-Format Export für WooCommerce
  • Data Science & Daten
  • Referenzen
  • Offene Stellen
  • Kontakt
  • Show Search
Hide Search

Blog

WooCommerce: Hausnummer im Kaufprozess abfragen

michael · 16. November 2020 · Leave a Comment

Das WordPress-Shop-Plugin WooCommerce kennt standardmäßig keine Hausnummern. Im Gegensatz zu vielen anderen Shopsystemen setzt es nur auf eine „Adresszeile 1“ und eine „Adresszeile 2“. Für viele Shops dürfte das letztlich keinen Unterschied machen – hier und da kann die fehlende Hausnummerabfrage aber zu Problemen führen. Das ist insbesondere der Fall, wenn:

  • Nachgeschaltete Dienstleister (und deren APIs) wie etwa DHL explizit nach einer Hausnummer fragen
  • Kunden vergessen, eine Hausnummer anzugeben (und dadurch häufige Nachfragen notwendig sind)

Hausnummer – ja oder nein?

Auf den ersten Blick scheint die Entscheidung gegen die explizite Verwendung eines Hausnummern-Felds überraschend und nicht nachvollziehbar. Es gibt aber auch gute Gründe für diese Entscheidung:

  • Conversion-Rate: Je mehr Felder ein Checkout hat, desto länger dauert der Kaufprozess und desto mehr Kunden können potenziell abspringen
  • Internationalisierung: Andere Länder, andere Sitten – in den USA z.B. sind Hausnummern häufig vorangestellt („123 Example St.“) – das müsste auch beim Layout berücksichtigt werden

Ansätze zur Problemlösung

Letztlich gibt es mehrere Ansätze, um das Problem zu beheben. Abhängig ist das vor allem vom Ursprungsproblem.

Im Fall von nachgeschalteten APIs lässt sich die Adresszeile 1 nachträglich z.B. durch Drittsoftware oder ein eigenes Plugin in eine Straße und eine Hausnummer „zerlegen“. Das kann man etwa mittels regulärer Ausdrücke (RegEx) umsetzen. Eine solche Lösung habe ich vor einigen Jahren für eine eigene Bestellverwaltungs-Plattform umgesetzt. Vorteil: Der schlanke Kaufprozess bleibt erhalten. Nachteil: Um wirklich alle Länder dieser Welt abzudecken, sind mehrere dutzend RegEx-Ausdrücke notwendig. Interessante Randfälle sind z.B. die „Straße des 17. Juni XYZ“ in Berlin, „N5 6+7“ in Mannheim, die „Herbortgasse 38/3/XYZ“ in Wien oder diverse (deutlich lebhafter umschriebene) Adressen in Spanien. Statt RegEx kann man natürlich auch auf Machine Learning setzen – aber wir wollen die Kirche ja im Dorf lassen ;-). Auch dafür gibt es mittlerweile Ansätze, z.B. AddressNet.

Kunden vergessen oder übersehen schlichtweg, dass in der Adresszeile 1 auch eine Hausnummer mit anzugeben ist? Dann ist es am einfachsten, das bestehende Feld deutlicher zu kommunizieren. Je nach verwendeter Shop-Konfiguration (Theme und Plugins) kann es vorkommen, dass zwar im Checkout-Feld selbst als „Placeholder“ von „Straße und Hausnummer“ die Rede ist, das eigentliche „Label“ aber nur von der Straße spricht. Dann kann man auch dem Kunden nicht wirklich einen Vorwurf machen.

Screenshot der Adresseingabe aus WooCommerce
Als Placeholder im HTML-Code ist zwar auch die Hausnummer verlangt – im entsprechenden Label taucht diese aber nicht auf. Das kann Kunden verwirren.

Hausnummerangabe verdeutlichen und klarer herausstellen

Wer einfach die Notwendigkeit der Hausnummer-Angabe verdeutlichen möchte, kann das mit wenigen Codeschnipseln erledigen. Der entsprechende Code wird etwa in ein eigenes Plugin kopiert. Bei Verwendung in der functions.php eines Themes muss man aufpassen, dass diese Datei unter Umständen bei Updates überschrieben wird.

<?php

add_filter( 'woocommerce_default_address_fields' , 'mn_override_street_field' );

// Our hooked in function - $address_fields is passed via the filter!
function mn_override_street_field( $fields ) {
     $fields['address_1']['label'] = "Straßenname und <b>Hausnummer</b>";
     return $fields;
}

?>

Im o. g. Beispiel wird noch der Zusatz „und Hausnummer“ an den Straßennamen gehängt. Achtung: Wer einen mehrsprachigen Shop betreibt (oder das ganze möglichst sauber umsetzen will), muss die WordPress bzw. i18n-Übersetzungs-Funktion nutzen und sich passende Sprachdateien erstellen.

Übrigens lassen sich so auch alle anderen Felder umbenennen. Es gibt mehrere Hooks, die in Frage kommen: woocommerce_default_address_fields (für alle Pflichtangaben) sowie woocommerce_billing_fields bzw. woocommerce_shipping_fields. Details dazu in der englischsprachigen WooCommerce-Referenz. Bei kundenspezifischen Implementierungen und Entwicklungsarbeiten unterstützte ich gerne.

Screenshot der Hausnummer-Abfrage in WooCommerce
Besser: Die Hausnummer ist deutlich hervorgehoben.

Hinzufügen der Hausnummer in WooCommerce

Natürlich gibt es Fälle, bei denen explizit eine eigene Hausnummerangabe notwendig wird. Dazu gibt es mehrere Möglichkeiten. Bei allen diesen Möglichkeiten muss man auf seine persönliche Shop-Konfiguration achten. Andere verwendete Plugins (z.B. Versand- oder Zahlungsdienstleister) verwenden unter Umständen weiterhin nur „Adresszeile 1“. Hier fehlt dann schlichtweg die Hausnummer, wenn diese in ein eigenes Feld eingegeben wird!

Hinzufügen der Hausnummer mittels Plugin

Am einfachsten geht es über das Plugin „Checkout Field Editor (Checkout Manager) for WooCommerce“. Hier lassen sich einfach und auch ohne Programmierkenntnisse entsprechende Felder hinterlegen. Das Plugin ist ziemlich selbsterklärend. Allerdings gibt es Nachteile: Jedes Plugin verlängert Ladezeilen, kann für Inkompatibilitäten sorgen und muss gewartet werden.

Hinzufügen der Hausnummer durch Code

Die Verwendung angepassten Codes setzt natürlich zumindest einfache Programmierkenntnisse voraus. Dafür lässt sich Ladezeit sparen. Natürlich muss aber auch dieser Code gewartet werden.

Auf der Seite businessbloomer.com finden sich mehrere Codeschnipsel, wie sich ein zusätzliches Hausnummern-Feld hinzufügen lässt. Nachteil: Das Layout des neuen Felds ist noch nicht optimal: Es wird in der „gesamten Breite“ angezeigt. Hier sind noch Feinarbeiten notwendig.

Cookie-Banner mit DSGVO-konformen Opt-In direkt in Google Tag Manager (GTM) erstellen

michael · 9. Oktober 2020 · Leave a Comment

Laut Datenschutz-Grundverordnung ist es notwendig, bei der Verwendung von Marketing- und Werbe-Cookies explizit ein Einverständnis des Nutzers einzuholen. Dafür gibt es unterschiedliche technische Lösungen – von CMS-Plugins bis hin zu kostenpflichtigen, professionellen JavaScript-basierten Lösungen.

Für die Einbindung von Marketing-Tags ist der Google Tag Manager eine häufig verwendete Lösung. Er vereinfacht die Verwaltung einer Vielzahl von Tags. Persönlich nutze ich ihn vor allem in Kombination mit Google Analytics und Google Optimize.

Ein einfaches Cookie-Banner in der Mobilansicht

Mit wenigen Codezeilen lässt sich auch ein einfacher Cookie-Banner in Google Tag Manager realisieren. Wichtig ist dabei, dass alle Marketing-Tags erst nach „Akzeptieren“ des Banners geladen werden (Optin). Möglich wird dies durch die Verwendung des DataLayer von Google Tag Manager. Vorteile sind eine geringe Codegröße, dadurch schnellere Ladezeiten und vor allem der Verzicht auf CMS-Plugins, die einen Einfluss auf Ladezeit haben und potenziell Sicherheitslücken hervorrufen können.

Im folgenden wird davon ausgegangen, dass bereits ein Google-Analytics-Tag in Google Tag Manager angelegt ist und mit dem Trigger „All Pages“ ausgelöst wird (d.h. nicht datenschutzkonform eingebaut ist).

Schritt 1: Cookiebanner-Tag anlegen

Zu Beginn wird in Google Tag Manager ein neues „Benutzerdefiniertes HTML-Tag“ angelegt. Benannt kann es etwa mit „Cookie-Banner-Tag“ werden, als Trigger wird der „All Pages“-Trigger verwendet. Dadurch wird das HTML-Tag bei jedem Seitenaufruf geladen.

Screenshot des "Neuer Tag"-Bildschirms
Das Cookiebanner-Tag enthält die eigentliche Cookiebanner-Funtionalität

Folgender Code wird unter „HTML“ eingefügt. Wichtig ist, in Zeile 44 und 59 die eigene Domain einzufügen. In Zeile 59 sollte der Punkt vor dem Domainnamen bestehen bleiben. Eine detaillierte Erklärung des Codes folgt im letzten Abschritt des Artikels. Anschießend kann das Tag gespeichert werden.

<style>
.cookie-banner {
  padding: 0.5em;
  position: fixed;
  z-index: 9999999;
  bottom: 0;
  background-color: #04378b;
  color: #fff;
  border-top: 1px solid #ccc;
  width: 100%;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
}
  
.cookie-banner a {
  color: #fff;
  text-decoration: underline;
}

.control {
  flex-shrink: 0;
}

.cookie-banner button {
  padding: 1em;
  background: #8C1257;
  color: white;
  border: none;
}

.small {
  font-size: 12px;
}

.small:hover, .cookie-banner button:hover {
  cursor: pointer;
}
</style>
<div class="cookie-banner" id="cookie-banner">
  <div class="text">
  Verwendung von Cookies: Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, nutzen wir Cookies. <a href="https://meine-domain.de/datenschutzerklaerung/">Mehr erfahren: Datenschutzerklärung</a>.
  </div>
  <div class="control">
    <button onclick="acceptCookies();">
      Cookies zulassen
    </button>
    <span class="small" onclick="denyCookies()">
      Ablehnen.
    </span>
  </div>
</div>

<script>
  function acceptCookies() {
    var x = document.getElementById("cookie-banner");
    document.cookie = "cookieconsent=True;max-age=31536000;domain=.DOMAIN-NAME-HIER-EINGEBEN-PUNKT-BESTEHEN-LASSEN.de;path=/";
    dataLayer.push({'event':'user_cookie_consent'});
    x.style.display = "none";
  }
  
  function denyCookies() {
    var x = document.getElementById("cookie-banner");
    x.style.display = "none";
  }
  
  function initializeBanner() {
    var cookieString = document.cookie;
    if(cookieString.includes("cookieconsent=True")){
      dataLayer.push({'event':'user_cookie_consent'});
    }
    else {
      var x = document.getElementById("cookie-banner");
      x.style.display = "flex";
    }
  }
    
  // In some cases, the GTM code is not ready yet when DOMContentLoaded is called - in this case, the code must be executed right away, as DOMContentLoaded won't fire again
  if(document.readyState === "complete" || document.readyState === "interactive") {
    initializeBanner();
  }
  else {
    document.addEventListener("DOMContentLoaded", function(event){
      initializeBanner();
    });  
  }
  
</script>

Schritt 2: Neuer Trigger: Cookies akzeptiert

Google Analytics (und alle anderen Marketing-Tags) sollen erst beim Feuern des Tag Manager-Events „user_cookie_consent“ geladen werden. Dieses wird in Zeile 72 des obigen Codes in den DataLayer injiziert. Um auch in Google Tag Manager auf das Feuern dieses Events zu warten, muss ein neuer Trigger angelegt werdne. Als Triggertyp wird „Benutzerdefiniertes Ereignis“ ausgewählt, der Name kann z.B. „Cookies akzeptiert“ lauten. Wichtig ist der „Ereignisname“ – dieser muss „user_cookie_consent“ lauten.

Screenshot des "Neuer Trigger"-Bildschirms
Ein neuer Trigger ist notwendig, damit Marketing-Tags erst dann geladen werden, wenn das „Cookies akzeptiert“-Event gefeuert wurde

Schritt 3: Auslösende Trigger der Marketing-Tags ändern

Anschließend müssen unter „Tags“ noch alle Marketing-Tags (z.B. Google Analytics) so eingestellt werden, dass als „Auslösender Trigger“ der gerade erstellte „Cookies akzeptiert“-Trigger zum Einsatz kommt. Das kann dann zum Beispiel so aussehen:

Screenshot einer Übersicht angelegter Tags
Als „auslösender Trigger“ für Marketing-Tags wird jetzt der „Cookies akzeptiert“-Trigger verwendet.

Jetzt müssen die Ergebnisse nur noch durch Klick auf „Senden“ veröffentlicht werden! Es bietet sich an, die Ergebnisse durch Verwendung des Chrome Tag Assistent zu überprüfen.

Was macht der neu eingefügte Code eigentlich?

Das HTML-Tag besteht zunächst einmal aus vielen Styling-Informationen für den Cookie-Banner selbst (Zeile 1-40) sowie den entsprechenden HTML-Code (Zeile 42-56). Dieser kann nach belieben angepasst werden – der obige Code bietet Mobil wie auf dem Desktop eine relativ gute Darstellung.

Die Funktion acceptCookies setzt selbst einen Cookie, der dafür sorgt, dass der Cookie-Banner nach Akzeptieren des Banners nicht erneut angezeigt wird. Darüber hinaus wird das entsprechende Event in den DataLayer injiziert (gepusht), auf welches GTM „hört“ und anschließend die entsprechenden Marketing-Cookies läd. Der Banner wird anschließend versteckt.

In denyCookies wird einfach nur der Banner versteckt. Wer auch dafür sorgen möchte, dass Nutzer nicht erneut um eine Einwilligung gebeten werden, sollte noch Zeile 59 kopieren und „cookieconsent=True“ durch „cookieconsent=False“ ersetzen.

InitializeBanner wird nach Laden der Seite aufgerufen. Hier wird zunächst überprüft, ob bereits eine Einwilligung gegeben wurde. In diesem Fall wird direkt das user_cookie_consent-Event gefeuert. Andernfalls wird der Banner dargestellt. Ggfs. wäre weitere Code erforderlich, um den Cookie-Banner nicht anzuzeigen, falls ein Nutzer eine Einwilligung explizit abgelehnt hat.

In den Zeilen 80 bis 88 wird in jedem Fall darauf gewartet, dass das DOM bereits geladen ist („DOMContentLoaded“). Es kann aber auch vorkommen, dass der GTM-Code erst geladen/initialisiert wird, wenn das DOM bereits fertig aufgebaut ist.

WooCommerce: „Lieferung an eine andere Adresse senden“ auf der „Zur Kasse“-Seite standardmäßig deaktiveren

michael · 11. Juli 2020 · 2 Comments

WooCommerce bietet Kunden die Möglichkeit, neben einer Rechnungsadresse auch eine separate Lieferadresse auszuwählen. Das geschieht in der Kasse über den Schriftzug und das Häkchen „Lieferung an eine andere Adresse senden?“.

Screenshot aus dem WooCommerce-Checkout auf der "zur Kasse"-Seite: Das Häkchen bei "Lieferung an eine andere Adresse senden" ist gesetzt.

Bei vielen WordPress- und WooCommerce-Installationen ist diese Option standardmäßig aktiviert. Das bedeutet, dass das Häkchen beim Besuch der Seite gesetzt ist und auch die entsprechenden Felder (doppelt) angezeigt werden.

Nachteile der standardmäßigen Aktivierung

Das kann mehrere Nachteile haben:

  • Der Checkout-Prozess wird insgesamt in die Länge gezogen
  • Der Kunde fühlt sich unter Umständen genötigt, die Felder ebenfalls auszufüllen
  • Gerade auf mobilen Geräten ist die Checkout-Seite (zur Kasse-Seite) noch unübersichtlicher
  • Insgesamt ist die Conversion-Rate möglicherweise beeinträchtigt

Der E-Commerce-Riese Amazon beispielsweise bietet gar nicht erst die Möglichkeit, eine Lieferadresse zu setzen. Die genauen Hintergründe sind sicherlich schwierig in Erfahrung zu bringen – sehr plausibel scheint aber, dass die Option aber aufgrund der möglichen Beeinträchtigung der Conversions – also der prozentualen Kaufabschlüsse – nicht angeboten wird.

Häkchen „Alternative Lieferadresse“ standardmäßig deaktiveren

Dementsprechend ist es für die meisten Shops sinnvoll, das Häkchen standardmäßig zu deaktivieren. Das ist glücklicherweise einfach möglich: Im WordPress-Backend in den WooCommerce Einstellungen muss die Seite Versand aufgerufen werden („WooCommerce“ > „Einstellungen“ > „Versand“). Anschließend klickt man auf den relativ unscheinbaren Link „Versandoptionen“. Hier kann jetzt die Option „Rechnungsadresse des Kunden als Standard“ eingestellt werden. Damit ist das Häkchen nicht mehr gesetzt und der Checkout insgesamt verkürzt.

Bild der WooCommerce-Einstellungen zur Deaktivierung des Häkchens "Alternative Lieferadresse"

Buttons überlagern sich in WooCommerce und WordPress, zum Beispiel „Ausführung wählen“

michael · 30. Juni 2020 · Leave a Comment

In einigen Themes kommt es bei der Verwendung von WooCommerce manchmal zu Anzeigeproblemen. Konkret meldete sich ein Kunde, da der Schriftzug „Ausführung wählen“ sich in der Mobilansicht überlappte. Das sieht nicht nur unschön aus, sondern kann auch zu Usability-Problemen führen – und die führen wieder zu weniger Bestellungen.

Die Buttons mit dem Schriftzug „Ausführung wählen“ werden nicht korrekt dargestellt und überlappen sich.

Im konkreten Fall kam das Theme „YooTheme“ zum Einsatz. YooTheme bietet eine ganze Reihe an „ausgefalleneren“ Presets für die Darstellung der Buttons, wie etwa hier dem absichtlich ungerade-verspielten Rand. Es ist gut möglich, dass diese Einstellung auch zum Überlappen der Buttons führte.

Ursache des Problems: YooTheme überschreibt für die WooCommerce-Buttons die „white-space“-CSS-Eigenschaft. Einfach ausgedrückt sorgt die „white-space“-Anweisung dafür, wie der Browser Leerzeichen anzeigen soll. Es gibt aber auch die Option „white-space: no-wrap“ – diese Unterdrückt Zeilenumbrüche im Text. Genau das ist hier der Fall – und deshalb wird „Ausführung wählen“ in einer Zeile angezeigt, obwohl zwei viel sinnvoller wären.

Glücklicherweise lässt sich das Problem einfach lösen: Dafür muss einfach folgender CSS-Code auf der Webseite eingefügt werden. Er sorgt dafür, dass Zeilenumbrüche wieder regulär gesetzt werden können.

/* Fix: "Ausfuehrung waehlen"-Buttons ueberlagern sich gegenseitig in Mobilansicht */
.woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button {
	white-space: normal;
}

Nicht jeder hatte schon einmal Kontakt mit zusätzlichen CSS-Layout-Anweisungen in WordPress: Der oben gezeigte Code kann bei den meisten Themes im WordPress-Adminbereich (Backend) unter Design > Customizer > „Zusätzliches CSS“ eingefügt werden. Dabei sollte darauf geachtet werden, bestehenden Code nicht zu überschreiben (d.h. ganz unten zusätzlich einfügen)!

Unter „Zusätzliches CSS“ im WordPress-Customizer können zusätzliche Layout-Anweisungen eingefügt werden.

Literaturempfehlungen und Einstiege: Eine Einführung in die Topologische Datenanalyse (TDA)

michael · 19. April 2020 · Leave a Comment

Vor mittlerweile über einem Jahr arbeitete ich relativ intensiv an einer Arbeit im Bereich der Topologischen Datenanalyse (TDA). Als Nicht-Vollblut-Mathematiker (sondern Informatiker) ist der Einstieg in dieses Themengebiet nicht unbedingt der Einfachste. Im Rahmen der Arbeit entstand deshalb eine relativ großzügige Literaturliste. Neben rund 100 Quellen, die detailliert im Themengebiet beheimatet sind, war selbstverständlich auch Einstiegsliteratur enthalten. Bisher fand ich nicht die Zeit, diese Liste zu veröffentlichen. Ich bin mir allerdings sicher, dass die Literaturempfehlungen der ein oder anderen Person zumindest etwas Zeit sparen könnte, weshalb ich meine Empfehlungen für den Einstieg in den Themenbereich unten präsentiere. Die vollständige Literaturliste mit rund 100 Quellen werde ich in einem separaten Beitrag online stellen.

[Read more…] about Literaturempfehlungen und Einstiege: Eine Einführung in die Topologische Datenanalyse (TDA)

Sie haben Fragen oder möchten ein Angebot anfordern? Kontakt

  • Impressum
  • Datenschutzerklärung
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus.OKDatenschutzerklärung