Coding, Wordpress

Für WordPress-Buchblogs: Bücher nach Autoren ausgeben

Wenn du einen WordPress-Blog betreibst und dort Bücher rezensierst, hast du vielleicht manchmal den Wunsch, noch weitere Bücher desselben Autors direkt am Beitrag anzuhängen. Ich habe dies für japanliteratur.net umgesetzt und zeige dir, wie du Rezensionen von Büchern desselben Autors miteinander verknüpfen kannst.

Ein Screenshot
So sieht die Umsetzung auf japanliteratur.net aus

1. Autoren vertaggen

Die Voraussetzung ist, dass du deinen Artikeln in WordPress Tags zuordnest. Für den Autor Ryu Murakami sollte überall „Ryu Murakami“ hinterlegt sein:

Tags
Schlagwörter, die für den Beispielartikel vergeben wurden.

2. Benutzerdefinierte Felder in WordPress nutzen

Metadatenfelder in WordPress

Ich nutze in WordPress viele verschiedene benutzerdefinierte Felder, beispielsweise für die bibliografischen Angaben. Für die Verknüpfung der Autoren legst du das Feld „autor_link“ an und gibst hier den Tag-Slug ein – das ist die URL, unter der der Tag erreichbar ist. Beim Tag von Ryu Murakami beispielsweise sind alle vertaggten Bücher unter tag/ryu-murakami/ zu finden, also setze ich in das Feld ryu-murakami ein.

3. Code einbauen

Der Code wird nun auf der content.php eingebaut:


     <?php
        if ( get_post_meta($post->ID, 'autor_link', true) ) {
          echo "<h3>Weitere Bücher vom Autor</h3>";
          $query = new WP_Query( array( 'tag' => get_post_meta($post->ID, 'autor_link', true) ) );

          if ( $query->have_posts() ) {
            while ( $query->have_posts() ) {
              $query->the_post();
              if( $post->ID == $do_not_duplicate ) continue; ?>

                <div class="similar-books">
                  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
                </div>

                <p>
                  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                </p>
            <?php }
          } 

          wp_reset_postdata();
        }
      ?>

Und so funktioniert es im Detail:

<?php
if ( get_post_meta($post->ID, 'autor_link', true) ) {

Zunächst wird abgefragt, ob das Feld autor_link beim jeweiligen Artikel überhaupt gefüllt ist. Wenn es nicht gefüllt ist, erfolgt auch keine Abfrage auf ähnliche Artikel.

$query = new WP_Query( array( 'tag' => get_post_meta($post->ID, 'autor_link', true) ) );

Dann erfolgt ein Query auf alle Artikel, die den Tag haben, der zuvor innerhalb von autor_link definiert wurde. Das ist notwendig, da ein Artikel auch noch viele andere Tags haben kann, die an dieser Stelle natürlich nicht für den Query herangezogen werden sollen.

if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
if( $post->ID == $do_not_duplicate ) continue; ?>

Zum Schluss wird die eigentliche Schleife gestartet, die die Posts ausgibt. Hier wird auch ausgeschlossen, dass der aktuelle Artikel im Query enthalten ist.

<div class="similar-books">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
</div>

<p>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</p>

Zum Schluss kannst du in diesem Bereich noch bestimmen, was ausgegeben werden soll. Im Beispiel wird das Artikelbild (the_post_thumbnail()) und ein Link mit dem Titel des Artikels (the_title()) ausgegeben.

Standard
Coding, Web-Entwicklung

Udacity Erfahrungsbericht – Frontend Web Developer

Udacity ist eine von vielen kostenpflichtigen Möglichkeiten, sich online weiterzubilden. Anders als beispielsweise Programme von Universitäten ist die von Ex-Google Mitarbeiter Sebastian Thrun gegründete „Online-Universität“ eng an aktuellen Marktentwicklungen und Trends ausgerichtet und bietet ständig neue Kurse zu aktuellen Themen. Von Februar bis September 2018 habe ich bei Udacity den Front End Web Developer Nanodegree abgeschlossen. Was mir gefallen hat und was nicht, erfahrt ihr in diesem ausführlichen Abschlussbericht.

Update Mai 2019: Der Kurs wie in diesem Bericht beschrieben ist bei Udacity so nicht mehr im Angebot. Die wesentliche Neuerung ist nun, dass man nicht mehr frei lernen kann wie man möchte, sondern der Kursinhalt innerhalb eines viermonatigen strukturieren Programms durchgearbeitet werden muss. Viele Dinge wie Lehrmaterialien und Projektarbeiten sind aber gleich geblieben.

Kursaufbau

Udacitys Websites selbst ist teilweise schon auf Deutsch, der Kursinhalt selbst ist aber auf Englisch (bei einigen Videos gibt es schon deutsche Untertitel) und es wird vorausgesetzt, dass man in dieser Sprache kommuniziert. Eine Hürde sollte dies aber nicht sein, da Ressourcen und wichtige Websites eh auf Englisch sind und ein Entwickler hiermit klarkommen sollte.

Im Kurs werden folgende Inhalte in dieser Reihenfolge vermittelt:

1 : HTML und CSS
2 : Javascript
3 : Front End Applications
4 : React (Update Mai 2019: Dies ist nicht mehr Inhalt des Kurses)

Die einzelnen Teile bauen aufeinander auf. Man kann beispielsweise Teil 2 erst in Angriff nehmen, wenn alle Aufgaben aus Teil 1 abgegeben wurden (diese müssen noch nicht bewertet worden sein, müssen aber im Review sein).

Qualität der Kurse

Die Einleitungen zu den Kursen sind großartig und stark motivierend. Udacity hat sich hier genau überlegt, was sie wie am besten erklären können. Das Zuschauen macht Spaß und Quizze zwischendrin lockern die Struktur etwas auf.

Die Qualität der Video-Kurse ist meiner Ansicht nach sehr hoch. Dennoch gibt es einen Nachteil: Videos können nie so ins Detail gehen wie ein Buch. Deshalb muss man sich darauf einstellen: Das Video erklärt die Grundprinzipien und gibt einen guten Einstieg, vertiefendes Wissen muss man sich dazu aneignen, meistens durch Lesen.

Am Ende gibt es kleine Aufgaben, die immer so gestellt sind, dass man nicht nur das Gelernte anwenden, sondern selbstständig auch Neues erarbeiten kann. Beispiel: Nach dem ersten Lernabschnitt zum Thema HTML und CSS soll nach Vorlage ein Portfolio erstellt werden. Dieses kann modifiziert werden. Wie stark man es modifiziert und welche Styles man unterbringt und dazu neu lernt, bleibt dem User überlassen.

Wer nicht so stark in die Tiefe gehen, sondern nur einen Überblick über das Thema haben will, für den enthalten die Kurse aber alles, was zum Verständnis notwendig ist.

Lernen unterwegs & obil

Es gibt eine Udacity App, in der man sich alle Videokurse ansehen kann. Die App war 2018 noch ein wenig buggy und der kleine Smartphone-Bildschirm eignete sich nicht immer für die Quizze. Lernen war für mich deshalb praktisch nur am Desktop möglich. Damit man auch offline ein wenig lernen kann, stehen die Videos auch zum Download zur Verfügung. Auch Aufgaben können – wenn man nichts nachschlagen muss, was wohl eher unwahrscheinlich ist – offline erledigt werden. Richtig funktioniert das Lernkonzept von Udacity aber immer noch klassisch, mit einer stabilen Internetverbindung und auf einem großen Bildschirm.

Workload

Udacity gibt an, dass man für den Font End Web Developer 4 Monate benötigt, wenn man sich jede Woche 10 Stunden Zeit für diesen Nanodegree nimmt. Wie viel Zeit man tatsächlich investieren muss, hängt wohl individuell vom Vorwissen ab. Den ersten Kursabschnitt von vieren (HTML und CSS) kann man beispielsweise mit Vorkenntnissen in rund 14 Stunden abschließen. A React-Projekt (dieses ist 2019 nicht mehr im Kurs enthalten) saß ich aber beispielsweise insgesamt über 100 Stunden. Hinzu kommt der eigenen Anspruch: Möchte ich wirklich nur das Kursmaterial abreißen oder mich tatsächlich mit den Themen beschäftigen? Dann reichen 10 Stunden meiner Ansicht nach nicht aus.

Schwierigkeitsgrad der Projekte

Abgeschlossene Projekte und ein Code Review ohne Beanstandung sind die Voraussetzung dafür, einen Udacity Nanodegree zu erwerben.

Die Projekte sind inhaltlich sehr praxisnah, machen Spaß und bilden eine schöne Grundlage für ein Portfolio, wenn man sie noch ein wenig modifiziert und eine persönliche Note hinzugibt.

Der gefühlte Schwierigkeitsgrad der Projekte bei Udacity schwankt stark. Im Video sieht alles noch sehr einfach und irgendwie logisch aus, sobald es aber an das eigene Projekt geht, wird es manchmal doch etwas hakelig. Ich habe es so empfunden, dass man von Udacity oft einfach ins kalte Wasser geworfen wird und sich dann selbst einen Plan machen muss, womit man als erstes beginnt.

Hilfe bekommt man im Forum von anderen Teilnehmern oder auf YouTube, wo ehemalige Teilnehmer über ihr Projekt berichten. Da viele Teilnehmer ihr Projekt auch über github einreichen, findet man hier auch einige Lösungen. So kann man sich mit viel Geduld und einer Kombination aus Recherche auch gut selbst helfen. Mit der Zeit aber werden die Projekte komplexer und dann hilft Googeln oft nicht, sondern nur eine Person, die sich das Projekt im Ganzen anschaut. Hierzu gibt es bei Udacity einen Betreuer:

Mentorship & Betreuung

Damit sind wir beim ersten Kritikpunkt angelangt. So gut die Kurse konzipiert sind und so angenehm das Lernen insgesamt ist, das Mentorship-Versprechen konnte Udacity innerhalb der 7 Monate, die ich dort gelernt habe, nicht einlösen.

Anfangs gab es einen Mentor, mit dem ich 1:1 chatten konnte. Nach einer gewissen Inaktivität (ich arbeite nebenbei Vollzeit und musste wegen eines Projektes circa 2 Monate aussetzen) wurde mir ein neuer Mentor zugeteilt. Die Qualität der Mentoren schwankte stark: Manche gaben nur allgemeine Tipps, alle meine Fragen hatte ich mir meist beantwortet, ehe der Mentor sich irgendwann dazu meldete. Dann wurde ohne Vorankündigung das Mentorenprogramm komplett abgeschafft. Ein Mentor war nun allein für ein komplettes Projekt verantwortlich und die Studenten konnten sich gegenseitig Fragen beantworten. Ich war an dieser Stelle sehr frustriert, da ich kurz vor dem Abschluss stand und eine tiefergehende Betreuung benötigte. Zum Glück hat mich an dieser Stelle ein befreundeter Entwickler unterstützt.

Beim aktuellen Nanodegree wirbt Udacity wieder mit einer Betreuung durch den Mentor. Ich kann nicht beurteilen, ob sich die Situation inzwischen verbessert hat. 2018 hatte ich allerdings den Eindruck, dass es mehr Schüler als Mentoren gibt und Udacity hier einfach nicht Schritt halten konnte.

Code Reviews

Zu jedem Projekt gibt es abschließend ein Code Review. Nur wenn dieses gut ausfällt, gilt das Projekt als abgeschlossen.

Das Code-Review ist stark standardisiert, trotzdem wurden mir auch Verbesserungsvorschläge gegeben. Udacity gibt an, innerhalb von 24 Stunden zu antworten. Für das erste, einfache Projekt kam eine Antwort innerhalb von nur 4 Stunden, nach erneuter Einreichung eine Freigabe nach 15 Minuten. Für das zweite, umfangreichere Projekt wurde darauf hingewiesen, dass das Review hier 7 Tage dauern kann. Hier kam das Review an einem Sonntag innerhalb von einer Stunde!

Allerdings: Die Reviews sind manchmal etwas kryptisch und wenn man etwas anders macht, es aber noch nicht richtig ist, wird es einfach wieder abgelehnt. Das ist etwas frustrierend. Die Review-Qualität schwankt aber ganz stark je nach Reviewer. Manche haken einfach nur ab, was erfüllt ist und was nicht, andere geben hilfreiche Tipps bei der Lösung.

Fazit

Auch wenn Udacity und seine Nanodegrees in deutschen Unternehmen keinesfalls einen Stellenwert wie ein Uniabschluss einnehmen, lohnt es sich, bei Udacity für sich selbst zu lernen. Die Qualität der Kurse ist außergewöhnlich hoch. Udacity erwartet dafür von seinen Studenten ein gewisses Maß an Experimentierfreudigkeit, Neugier und Selbständigkeit – alles Qualitäten, die man benötigt, wenn man im Webentwicklungs-Umfeld unterwegs ist.

Standard
Datenanalyse

Wie externe Zahlungsdienste deine Statistik verfälschen können

Um auszuwerten, wie erfolgreich unsere Kampagnen, Ads und Bannerschaltungen sind, messen wir mit Google Analytics oder anderen Tools, ob der Besucher in unserem Shop etwas kauft (= „konvertiert“) oder nicht.

Dazu folgen wir ihm vom Seiteneinstieg über die Registrierung, durch den Checkout-Funnel und bis zur Bestellbestätigungsseite.

Was aber passiert, wenn der Kunde zwischendrin aussteigt, von unserem Shop auf auf eine fremde Website umgelenkt wird und von dort dann wiederkommt? Die Surf-Historie des Kunden geht verloren!

Das kann zum Beispiel vorkommen, wenn du einen externen Zahlungsanbieter wie Paypal eingebunden hast. Aber auch bei Kreditkarten nutzen viele Shops externe Dienste und Kunden müssen zum Eingeben ihrer Kreditkartendaten zur Website der Bank selbst.

In diesem Fall verlässt der Kunde technisch gesehen deine Website. Google Analytics beendet die Session des Kunden zugleich. Hat der Kunde dann seineZahlung erfolgreich durchgeführt, kommt er wieder auf deine Seite – allerdings mit einer neuen Session! Die Quelle ist nun die fremde Website.

So siehst du zwar den Kauf, aber nicht mehr den richtigen Referral, also die Quelle, von der der Kunde gekommen ist. Extrem ärgerlich ist das, wenn du es nicht bemerkst und die Daten über mehrere Wochen falsch einkaufen, denn es gibt keine Möglichkeit, die Referrals im Nachhinein zu reparieren.

In Google Analytics kannst du aber vorsorgen: Hierzu musst du die fremde Website in die Verweis-Ausschlussliste eintragen:

Auswahlmenü zum Verweisausschluss
Verweis-Ausschlussliste in Google Analytics

Zu dieser Seite gelangst du über die allgemeinen Einstellungen > Tracking-Informationen > Verweis-Ausschlussliste

Liste der Verweisausschlüsse
De Weg zur Verweis-Ausschlussliste in Google Analytics

Standard
Web-Entwicklung

Ressourcen: Einstieg in die Webentwicklung

Wenn du diesen Artikel liest, hast du wahrscheinlich schon einmal auf irgendeine Weise an einer Website mitgearbeitet. Oder zumindest mit WordPress geblogt. Und wahrscheinlich hast du dabei festgestellt, dass dir diese Arbeit ziemlich gut gefällt und du noch tiefer einsteigen möchtest. Am Anfang ist das gar nicht so einfach, da man nicht so recht weiß, wo man einsteigen soll. Mit diesem Starterpaket kannst du aber sicher sein, dass du alle für den Einstieg wichtigen Themen mitnimmst.

Deine Grundausstattung für den Einstieg

1. Das IT-Handbuch für Fachinformatiker

Eigentlich ist dieses Buch ein Begleiter für den Ausbildungsgang „Fachinformatiker für Anwendungsentwicklung“. Was in diesem Ausbildungsgang gelehrt wird, kommt aber dem schon relativ nahe, was du als Webentwickler benötigst (zumindest im Vergleich zu einem Handbuch über Informatik oder Ähnliches). Darüberhinaus gibt dir dieses Buch ein breit gefächertes Grundlagenwissen, das wir bei deiner Arbeit helfen wird.

Eine ältere Auflage des Buches stellt der Verlag kostenfrei online zur Verfügung:

2. Schrödinger lernt HTML, CSS und Javascript

Einer der besten direkten Einstiege in HTML, CSS und Javascript ist das knapp 900 Seiten starke Buch aus der Schrödinger-Reihe des Rheinwerk-Verlags.

Schau dir einfach mal die Leseprobe an, dann wirst du sehen, was dieses Buch so besonders macht: Mit viel Liebe zum Detail wird alles ganz genau erklärt. Es gibt momentan auf dem Markt kein vergleichbares Buch mit Ausnahme der „Von Kopf bis Fuß“-Reihe (allerdings ist diese schon etwas veraltet).

3. Code-Editor

Um die Codebeispiele ausprobieren zu können, benötigst du einen Texteditor, mit dem du Code schreiben kannst und der die Code-Syntax ordentlich hervorhebt. Die beiden bekanntesten Editoren sind:

4. Codepen

Schnell mal etwas Code ausprobieren oder schauen, wie es andere machen? Das geht mit Codepen, einer Art Facebook für Entwickler. Die Registrierung ist kostenfrei und du kannst beliebig viele sogenannte Pens erstellen, allerdings sind diese im kostenlosen Basisaccount alle öffentlich einsehbar.

5. Git und GitHub

Wenn du entwickelst, ist es sehr praktisch, deine einzelnen Arbeitsschritte zu sichern und Zwischenversionen zu speichern. Das hilft später auch, Fehler schneller zu identifizieren oder zu beheben, indem du einfach eine alte, korrekte Version wieder einspielst. Das beliebteste Tool hierzu ist Git – und die dazugehörige Online-Plattform GitHub.

Die Funktionen von Git sind am Anfang nicht immer ganz eingänglich – sowohl was die Bedienung als auch die Konzepte von Commits, Branches etc. angeht. Ich empfehle hierzu deshalb folgendes Lehrmaterial:

  • Wenn du noch nie mit der Shell gearbeitet hast, hilft zunächst das Buch Git for Humans, Git und seine Bedienung zu verstehen
  • Aufbauend darauf schaust du dir dann diesen kostenlosen Kurs bei Udacity an

Ressourcen zur Weiterbildung

„Das ist doch ganz einfach, das Web ist voll von Anleitungen, google einfach mal.“ Diese Antwort macht den Einstieg meist schwer, denn du kannst nur nach einer Lösung suchen, wenn du weißt, was du suchst. Deshalb ist es am Anfang meist doch einfacher, auf vorstrukturierte, in sich geschlossene Lernmaterialien zugreifen, die einen Überblick über alles Wesentliche geben. Hast du das oben empfohlene Schrödinger-Buch also durchgearbeitet, kannst du hier dein Wissen erweitern:

  • Udacity-Kurse: Udacity bietet sehr viele kostenfreie, qualitativ hochwertige Kurse zum Thema Webentwicklung an. Grundsätzlich lassen sich hier auch Zertifikate, sogenannte Nanodegrees ablegen, die sind aber kostenpflichtig. Eine Übersicht über alle kostenfreien Tutorials gibt es hier: https://de.udacity.com/courses/all
  • Rheinwerk Open Books: alte Auflagen des Rheinwerk-Verlages gibt es kostenfrei online zum Nachlesen
  • Atomic Design – ein Buch zur Modularen Entwicklung von Web-Interfaces. Die Gedanken, die hier formuliert werden, gehören zu den aktuellen Best-Practices
  • Von Kopf bis Fuß: Diese Reihe aus dem O’Reilly-Verlag schafft es, technische Themen sehr einfach zu erklären. Viele praktische Beispiele zum Mitmachen und Nachvollziehen helfen, dass die Inhalte auch wirklich im Kopf hängen bleiben. Besonders empfehlen, da sie mir selbst geholfen haben, kann ich die Bücher „jQuery“ und „Entwurfsmuster“
  • Smashing Magazine Bücher: Die Reihe eines bekannten Magazins für Webentwicklung. Viele Bücher gibt es günstiger, wenn man sie vor Erscheinen vorbestellt
  • A Book Apart: Bücher, die das bekannte Magazin „A List Apart“ herausbringt. Die Besonderheit dieser Bücher: Sie sind alle so geschrieben, dass Einsteiger sie verstehen.

Praktische Tools

Ressourcen zum Nachschlagen

Standard
Shopware

Shopware für Verlage

Tipp: Um Shopware vollumfänglich zu testen und die hier beschriebenen Ideen nachzuvollziehen, könnt ihr die offizielle Demoversion http://www.shopwaredemo.de nutzen. Eine Registrierung ist nicht nötig.

Und noch ein Hinweis: Ich beschreibe hier, was mit Shopware grundsätzlich möglich ist und zeige euch, wie flexibel das System ist. Wenn ihr allerdings professionell mit einem größeren Produktsortiment arbeitet, ist es natürlich empfehlenswert, für einige der unten beschriebenen Funktionen richtige Plugins (d.h. einzelne Module, die der Grundinstallation von Shopware flexibel hinzugefügt werden können) zu entwickeln.

Inhaltsverzeichnis

  1. Die Produktdetailseite
  2. Produkte richtig sortieren
  3. Autoren

1. Die Produktdetailseite

1.1. Produktinformationen

Shopware bringt von Haus aus schon viele praktische Felder mit, in denen nur noch die Produktinformationen eingetragen werden müssen wie beispielsweise Produkttitel, Lagerbestand, Breite und Höhe usw. Da Shopware aber erstmal von Haus aus noch nicht für den Buchverkauf vorgesehen ist, fehlen diese Felder:

  • Autor
  • Format (z.B. gebunden, Taschenbuch)
  • Auflage
  • Seitenanzahl

Diese lassen sich in Shopware relativ leicht über die Attributfelder nachrüsten. Die ersten beiden Freitextfelder sind sogar schon im Backend beim jeweiligen Artikel (Artikel – Übersicht – Artikel bearbeiten) vorhanden:

Freitextfelder in Shopware

Zusätzliche Felder lassen sich bei Shopware über Einstellungen – Freitextfeld-Verwaltung bearbeiten.

Freitextfeld-Verwaltung in Shopware

Wie auf dem Screenshot zu sehen, findet ihr hier auch die Freitextfelder, die im Screenshot oben befüllt werden. Benennt diese Felder einfach in „Seiten“ und „Format“ um, und schon ist die Produktseite um diese Informationen ergänzt:

beispielhafte Produkteseite

Weitere Felder lassen sich über die Freitext-Verwaltung hinzufügen:

Freitextfeld-Verwaltung in Shopware

Unterhalb der konfigurierten Felder attr1 bis attr4 gibt es noch die Felder attr5 bis attr20, die ihr aktivieren und wie die oben vorgestellten Felder umbenennen könnte. Um sie unterhalb der oben konfigurierten Seiten und dem Buchformat anzeigen zu lassen, ist allerdings noch eine Ergänzung in der Template-Datei eures Themes notwendig.

Da das Templating von Shopware ein Thema für sich ist und dieser Artikel eigentlich nur einführend sein soll, führe ich die Änderung der Vollständigkeit halber auf. Für jemanden, der sich mit Templating auskennt, ist es keine große oder aufwändige Sache. Ihr solltet euch darüber aber zunächst nicht weiter den Kopf zerbrechen, sondern einfach weiterlesen, was mit Shopware noch alles möglich ist!

Notwendige Ergänzung in /detail/index.tpl (beispielhaft für ein neues Attributfeld „attr5“):


{block name='frontend_detail_data_attributes' append}
{if $sArticle.attr5}
    <li class="base-info--entry entry-attribute">
        <strong class="entry--label">
            {s name="DetailAttributeField5Label"}{/s}:
        </strong>

        <span class="entry--content">
            {$sArticle.attr5|escape}
        </span>
    </li>
{/if}
{/block}

1.2. Auch erhältlich als…

Produkte in ähnlichem Format bei Amazon

Amazon macht es – wie so oft – geschickt vor und verknüpft Produkte in unterschiedlichen Medienformaten miteinander. So sieht der Kunde immer auf einen Blick, ob es eine gebundene Ausgabe, ein Taschenbuch, ein E-Book oder eventuell sogar noch ein Hörbuch zu diesem Titel gibt. In Shopware ist diese Möglichkeit noch nicht direkt angelegt, über einen kleinen Umweg könnt ihr aber eine Verknüpfung schaffen: Macht euch einfach die Zubehör-Artikel und die oben vorgestellte Freitextfeld-Verwaltung zunutze!

Verknüpft dazu zuerst beim jeweiligen Artikel im Reiter Cross-Selling:

Cross-Selling bei Shopware

Bei einem Buch macht es Sinn, dieses jetzt mit seinem E-Book, Hörbuch, der gebunden Ausgabe und der Taschenbuchausgabe untereinander zu verknüpfen. Entscheidend dafür, dass die Verknüpfung auch funktioniert ist, dass das Feld „Format“ (attr2), das wir unter 1.1. angelegt haben, existiert und ausgefüllt ist – nämlich mit dem Format, das verlinkt werden soll. So steht dann beim Buch:

Auch erhältlich als:

  • gebundenen Ausgabe
  • E-Book
  • Hörbuch

Mit dem Code weiter unten – an der richtigen Stelle eingebunden – kann das dann so aussehen:

Medium in anderen Formaten erhältlich

Und hier der Code:

{s name="DetailDataInfoZubehoer" namespace="frontend/detail/index"}Auch erhältlich als:{/s}

{if $sArticle.sRelatedArticles && !$sArticle.crossbundlelook}
<ul>
    {foreach $sArticle.sRelatedArticles as $accssoryproduct}
            {if $sArticle.sRelatedArticles && !$sArticle.crossbundlelook}
                <li>
                    <a href="{$accssoryproduct.linkDetails}">{$accssoryproduct.attr2}</a>
                </li>
            {/if}
        {/foreach}
</ul>
{/if}

1.3. Leseproben Above the Fold einbinden

Leseproben lassen sich bei Shopware für jeden einzelnen Artikel ganz einfach im Reiter Ressourcen einbinden. Leider erscheinen sie dann aber auch nur ganz unten, zusammen mit anderen Downloads und Ressourcen. Da die Leseprobe aber mit das wichtigste Verkaufsinstrument ist, sollte sie direkt beim Buch eingebunden werden, am besten ganz prominent direkt daneben – der Platz ist schon vorhanden, da Shopware hier sowieso schon die Innenansichten einbindet:

Leseprobe einbinden - so könnte es aussehen

Wichtig ist nun, dass ihr bei jedem Upload die Leseprobe in Shopware (nicht der Dateiname, sondern die Bezeichnung im Shopware-Backend) mit „Leseprobe“ benennt. Dann lässt sich folgender Code in der Produktdetailseite weiter oben so einbinden, dass die Leseprobe – wenn vorhanden – noch über den Innenansichten angezeigt wird:

    <div class="image--thumbnails image-slider--thumbnails">
        {foreach $sArticle.sDownloads as $download}
            {if $download.description == "Leseprobe"}
                                
                <a href="{$download.filename}" target="_blank" title="Leseprobe {$sArticle.articleName}">
                    <span>
                        {s name="DetailThumbnailLeseprobe" namespace="frontend/detail/index"}Leseprobe{/s}
                    </span>
                </a>    

            {/if}
        {/foreach}
    </div>

2. Produkte richtig sortieren

Bei den meisten Online-Shops ist die Sortierung der Produkte erstmal ganz einfach: es kommt eine neue Kollektion herein, diese wird in den Shop eingepflegt, veröffentlicht und verkauft. Shopware bringt hier noch die praktische Funktion mit sich, dass ein „Neu“-Bagde bei diesen Artikeln angezeigt wird. Im Backend ist zudem ganz einfach einstellbar, bis zu wie viel Tage nach seinem Einstelldatum der Artikel mit diesem Badge gekennzeichnet ist.

Produktsortierung bei Shopware

Bei Büchern ist das nicht ganz so einfach. Verlage stellen ihre „Kollektion“ nicht ein, wenn sie zum Verkauf bereitsteht, sondern bekanntermaßen einmal im Frühjahr und einmal im Herbst. Die Bücher sind dann oft ein paar Monate lang noch nicht kaufbar, aber schon vorbestellbar. Das ein großes Problem: In der Kategorieübersicht stehen die neuen, noch nicht verfügbaren Bücher unter Umständen wochen- bis monatelang ganz oben, während aktuell grade wirklich neue Titel auf Seite 2 oder weit unten begraben sind.

Aber hierfür hat Shopware zum Glück schon eine Lösung parat und hat Einstelldatum und Erscheinungsdatum entkoppelt:

  • Das Einstelldatum ist verantwortlich für die Sortierung der Produkte im Shop. Die Produkte werden achronologisch, von neu nach alt, nach diesem Datum sortiert
  • Das Erscheinungsdatum gibt frei, ab wann ein Artikel verfügbar ist

Für die Praxis bedeutet dies: neue, noch nicht erschienene Bücher sollten, sofern sie nicht ganz oben stehen sollen, immer ein fiktives Einstelldatum, das weit in der Vergangenheit liegt, bekommen – und ihr tatsächlicher Erscheinungstermin sollte im Feld Erscheinungsdatum vermerkt werden!

3. Autoren

Sollen die Autoren einfach nur beim Buch mit angezeigt werden, kann hierfür ebenfalls ein weiteres Freitextfeld angelegt werden, in das der oder die Autoren eingetragen werden können. In der Regel ist bei einer Verlagswebsite der Autor aber auch immer mit einer Autorenseite verknüpft.

Shopware hat von Haus aus mit den sogenannten Herstellern ein ähnliches Prinzip schon vorbeitet: Jedes Produkt ist einem Hersteller zugeordnet, auf einer Herstellerseite lassen sich dann alle Produkte eines Herstellers gesammelt ansehen:

Eine Herstellerseite in Shopware

Allerdings lässt sich jedes Produkt nur einem Hersteller zuordnen, eine Mehrfachauswahl ist also nicht möglich. Deshalb gibt es an dieser Stelle nur zwei Möglichkeiten: Das Modul aufbrechen oder ein komplett neues Plugin für Autoren anlegen. Ich würde euch empfehlen, ein extra Autoren-Plugin anzulegen, da sich das Hersteller-Modul daneben perfekt für Verlage und Imprints nutzen lässt!

Es gibt sicher noch mehr Details, die für Verlage bei Shopware entscheidend sind, dies sind aber die entscheidendsten Punkte, mit denen sich wohl jeder Verlag gleich zu Beginn befassen wird, wenn er überlegt, auf Shopware umzusteigen. Natürlich gibt es auch noch ganz andere Probleme wie Performance, Wartbarkeit etc., mir ging es aber darum, in diesem Artikel die möglichst praxisnahen Fragen, die aus Nicht-Entwicklersicht aufkommen, zu beantworten.

Standard
Shopware

Shopware: Google Analytics Conversion Funnel einrichten

Die „empfohlene“ Einrichtung

Google Conversion Funnel Einstellungen für Shopware

Auf Grundlage der Anleitung im Forum hatte ich den Funnel zunächst so aufgebaut:

  1. /checkout/cart (Warenkorb)
  2. /register (Registrierung)
  3. /checkout/confirm (Bestellüersichtsseite)
  4. /checkout/finish (Bestellung erfolgt)

Dies bringt jedoch gleich mehrere Probleme mit sich:

Warenkorb

Hat man bei Shopware den AJAX-Warenkorb (d.h., dass der Warenkorb von rechts auf den Bildschirm „gefahren“ kommt) aktiviert, gelangen die Nutzer in der Regel nicht unbedingt auf den Warenkorb, sondern direkt auf die Registrierungsseite.

Selbst wenn man (wie oben im Screenshot zu sehen rechts neben den Eingabefeldern) die Option „erforderlich“ auswählt, hat das zur Folge, dass unter Umständen 100 Leute in den Funnel aussteigen, aber 140 den Kauf abschließen.

Ajax Warenjorb bei Shopware

Der Ajax-Warenkorb, der rechts „ausfährt“, leitet direkt zur Kasse und nicht zur Warenkorbseite /checkout/cart

Registrierung

Von der Seite /register (Registrierung) gelangt man zu nahezu 100% immer zu /checkout/confirm (Bestellübersichtsseite). Dies also in zwei Schritte aufzuteilen bringt so gut wie gar nichts, da hier auch keine Ausstiege stattfinden.

Hinzu kommt, dass /register nicht immer die angezeigt URL ist, auf die man gelangt, wenn man vom Warenkorb zur Kasse will, sondern in der Regel /checkout/confirm. Dort wird je nachdem, ob man eingeloggt ist oder nicht, entweder die Login- oder die Bestellbestätgungsseite angezeigt.

Die Confirm-Seite eingeloggt

Unter derselben URL werden in eingeloggtem und nicht eingeloggtem Zustand zwei unterschiedliche Inhalte aufgerufen. Für Google Analytics wird dies aber als ein Seitenaufruf gesehen, da die URL gleich ist.

Die Confirm-Seite nicht eingeloggt

Eine Lösung für das Problem

Als erstes entferne ich den Warenkorb aus dem Funnel. Der Warenkorb lässt sich weiterhin als einzelne Seite betrachten: Über die Reiter „Navigationsübersicht“ lässt sich sehen, wie hoch die Ausstiege sind. Weiter hilft hier außerdem Googles Bericht zum Nutzerfluss.

Die nun verbleibenden Seiten in den Funnel einzuordnen, wird ziemlich schwer, denn der Nutzer ruft unterschiedliche Seiten auf, je nachdem ob er eingeloggt ist oder nicht und ob er Neukunde ist oder nicht:

eingeloggter Nutzer Neukunde (erstellt Login) Bestellung ohne Registrierung
/checkout/confirm
Login
/checkout/confirm
Registrierung
/checkout/confirm
Adresseingabe
/checkout/shippingPayment
Zahlungsart wählen
/checkout/shippingPayment
Zahlungsart wählen
/checkout/confirm
Bestellübersicht
/checkout
Bestellübersicht
/checkout
Bestellübersicht
Zwischenschritt mit Payment-Seiten z.B. für SEPA, Kreditkarte…
/checkout/finish
Bestellbestätigunsseite – für alle gleich

Nach dieser Übersicht gäbe es demnach einen zweischrittigen Funnel, bestehend aus /checkout/confirm und /checkout/finish. Beides ist nur wenig aussagekräftig ist das ist wahrscheinlich auch der Grund, warum es keine weiteren Artikel und Anleitungen zu diesem Thema gibt.

Welche Möglichkeiten gibt es sonst noch?

  • Für Google Analytics lassen sich einzelne Seiten umbenennen, das heißt, obwohl die URL /checkout ist, wird in Analytics /xyz0123 geschrieben. Der Aufwand ist relativ hoch, da – z.B. über den Tag-Manager – definiert werden müsste, wann die Seite umbenannt wird
  • Für die drei Fälle – eingeloggter Nutzer, nicht eingeloggter Nutzer, Neukunde – könnten theoretisch drei Zielvorhaben mit drei getrennten Funnels definiert werden. Schwierig wird das allerdings, da alle ja dasselbe Ziel hätten…
  • Abfinden damit, dass der Funnel bei Shopware nicht so optimal funktioniert: In diesem Fall gibt es bei Google die Möglichkeit, sich einzelne Seiten herauszufischen und hier zu betrachten, wie hoch Ausstiege und Abbrüche sind und wo der Nutzer als nächstes hingeht.
Standard
Reisen

Fushimi Inari

Der Fushimi Inari Taisha in Kyoto ist einer der bekanntesten Schreibe Japans. Nicht nur ausländische Touristen, sondern auch viele Japaner besuchen ihn gerne. Warum ich schon mehrmals dort war und dir einen Besuch dort unbedingt empfehle, erfährst du in diesem Beitrag.

Schon auf dem Weg zum Fushimi Inari drängen sich die Besucher. Wie bei fast jedem größeren Tempel oder Schrein in Japan ist das Heiligtum gar nicht so heilig, wie man es sich vorstellt: Die Straßen zum Tempel hin sind reine Verkaufsstraßen, auf denen man Souvenirs und Essen kaufen kann.

Lokale Souvenirs zum Verkauf

In Japan üblich: Mit Wachs nachgebildet präsentiert dieses Restaurant seine Speisen

Einen kleinen Imbiss und Getränke sollte man sich bei warmem Wetter allerdings schon hier mitnehmen – der Aufstieg zum Schrein ist lang. Der Fushimi Inari – und das ist ein absoluter Pluspunkt, umfasst nämlich einen ganzen Berg. Stufe und Stufe und Tor um Tor erklimme ich in zunächst einer guten halben Stunde den Berg. Durch die vielen Bäume rund um den Pfad der Tore entlang ist es schön frisch und je weiter man nach oben kommt, desto mehr entfernt man sich vom Trubel der Stadt.

Die Tore, japanisch torii säumen den Weg. Die Tore werden übrigens gespendet, die Schriftzeichen auf jedem Tor verraten den Spender.

Viele Japaner machen sich für den Schreinbesuch schick. Das gibt tolle Fotomotive wie hier.

Auf dem Weg nach oben gibt es immer wieder Getränkeautomaten zur Erfrischung oder auch kleine Pausenbereiche zum Einkehren.

Allerdings gibt es davon für japanische Verhältnisse doch recht wenig. Hinzu kommt, dass der Fushimi Inari ein heiliger Ort ist und es deshalb ab einem gewissen Punkt keine Toiletten mehr gibt. Wer also wirklich bis ganz nach oben möchte oder oben angekommen noch den Rundweg gehen möchte, sollte dies einplanen.

Endlich angekommen gibt es zur Belohnung Ruhe und eine tolle Aussicht.

Oben auf dem Berg sprudelt auch eine Quelle. Diese Schöpflöffel sind zum Reinigen der Hände vor dem Schreinbesuch, ein religiöses Ritual.

Der Rückweg bergab ist deutlich leichter als der Hinweg und ich verrate dir schon jetzt: Du kannst dich gleich noch auf eine sehr leckere Belohnung freuen! Zunächst bietet sich aber noch die Gelegenheit, beim Tempel selbst ein paar schöne Souvenirs zu kaufen.

Diese Füchse kann man kaufen ähnlich wie kleine Gebetsschildchen in anderen Tempeln, auf die man seine Wünsche schreibt. Es bringt sicher Glück, dem Fuchs ein Gesicht aufzumalen 😉

Nicht fehlen darf natürlich ein Mini-Torii zum Mitnehmen!

Einen ganz besonderes Foto konnte ich bei meinem ersten Besuch im Fushimi Inari machen – es war zugleich der Tag, an dem Michelle Obama dort zu Gast war. Schon beim Aufstieg wurde es immer leerer, nur einzelne Polizisten schauten zwischen den Toren hervor:

Während ich die Stille genoss, kam unten die damalige First Lady der USA an. Und während der Fushimi Inari dann irgendwann für die Öffentlichkeit gesperrt wurde, saß ich oben auf dem Berg und durfte nicht mehr runter. Irgendwann wurde ich dann von Sicherheitskräften neben den Toren begleitet, während sich unter den Toren eine Delegation aus Japanern und Amerikanern an den Aufstieg machte.

Es lohnt sich also immer, ein wenig Proviant mitzunehmen. Viel schöner ist es allerdings, sich nachher mit einem leckeren Ramen-Set zu belohnen. Der kleine Ramen-Imbiss Men Kou Bou Ren, der von innen wirklich heimelig eingerichtet ist, befindet sich direkt gegenüber der Fushimi-Inari-Bahnstation.

Hier gibt es sehr leckere, kräftige Tonkotsu Ramen, beispielsweise als Mittagsmenü mit Reis und Karaage:

Am Bahnsteig mache ich dann das letzte schöne Foto für diesen Tag. Bis zum nächsten Mal!

FAQ Fushimi Inari

Kann man den Fushimi Inari auch nachts besuchen?

Ja, das ist durchaus möglich. Gerade in den späten Nachmittags- und Abendstunden ist es etwas weniger voll als tagsüber und das kann ein Pluspunkt für alle sein, die das Gedränge nicht so gern mögen. Die Wege sind ausreichend ausgeleuchtet. Allerdings kann es auch etwas unheimlich werden, zwischen den beleuchteten Toren in vollkommener Dunkelheit und Stille umherzuwandern.

Zu welcher Jahreszeit sollte man den Fushimi Inari besuchen?

Da die Torii von Wald umgeben sind, macht die Jahreszeit bis auf den Winter für den Schreinbesuch wenig aus. Da man viel laufen muss, ist entscheidend, dass es nicht zu heiß und schwül ist, wenn man den Fushimi Inari besucht.

Lohnt sich ein Tagestrip nach Kyoto für den Fushimi Inari?

Ein ganzer Tag wäre vielleicht etwas zu viel für einen einzigen Schreinbesuch. Um sich ausführlich Zeit zu nehmen, reichen meiner Ansicht nach zwei bis drei Stunden. Praktisch ist, dass der Fushimi Inari vom Bahnhof Kyoto aus sehr schnell zu erreichen ist. Das macht ihn zu einem guten Anlaufpunkt für einen Tagestrip. Von dort aus kann man dann direkt mit der Keihan-Line Richtung Norden/Sanjo fahren und sich ein wenig Kyotos Innenstand oder das berühmte Gion-Viertel anschauen!

Standard
Datenanalyse

Crossdomain-Tracking in Google Analytics einrichten

Ihr kennt es sicher aus eurem Online-Marketing-Alltag: Es wird eine hübsche Microsite oder eine aufwändige Kampagnenseite unter einer neuen URL erstellt. Der Traffic wird mit viel Aufwand und Budget auf diese Seite gelenkt. Es wird ein eigenes Tracking eingerichtet und wir sehen, dass 1.000 Besucher zu dieser Seite kamen und sich im Schnitt 3 Minuten und 23 Sekunden dort aufhalten. Nur haben die Besucher dann auch auf den großen roten Button geklickt, sind zu eurem Webshop gelangt und haben das beworbene Produkt tatsächlich gekauft?

Das lässt sich nur schwer sagen. Schickt ihr Besucher nämlich von einer zu einer anderen Domain, geht die Surfhistorie des Nutzers verloren.

Ein Praxisbeispiel

Die Firma X verkauft Blumentöpfe. Zur Frühjahrssaison launcht Sie die Microsite Blumentopfberater, auf der man sich interaktiv beraten lassen und zu seinem Wunschblumentopf finden kann. Ist der richtige Blumentopf gefunden, wird man zum Blumentopfshop weitergeleitet.

Ein Beispiel für Domainübergreifendes Tracking
Bild vergrößern

Damit der Blumentopfberater auch so richtig genutzt wird, schaltet die Firma Werbung: Auf Facebook und über Google Adwords.

Die Auswertung der Landingpage mit Google Analytics zeigt nun, wie viele Besucher über die Werbung über Facebook und Adwords zum Blumentopfberater kamen:

300 Besucher über Facebook
200 Besucher über Google Adwords

Aber wer davon hat jetzt gekauft und welcher Kanal war effektiver?

Das kann man nicht direkt sehen, denn beim Wechsel von der Domain blumentopfberater.xyz zum blumentopfshop.xyz wechselt der Besucher die Domain – seine Surfhistorie geht damit verloren!

Eine kleine Abhilfe gibt es: Im Google-Analytics-Konto des Blumentopfshops kann man sich nun alle Besucher anschauen, die von der Quelle Blumentopfberater an den Shop weitergeleitet wurden (sogenannte Referrals von blumentopfberater.xyz): Nun wird klar, dass es 10 Verkäufe und 100 Besucher über den Blumentopfberater gab.

Waren die 10 Käufer aber nun Kunden, die über Facebook oder Google Adwords akquiriert wurden? Das lässt sich leider nicht mehr sagen – und deshalb benötigen wir ein domainübergreifendes Tracking.

Tracking einrichten mit Google Analytics: Die Grundlagen

In der Google-Hilfe gibt es eine Anleitung für domainübergreifendes Tracking, allerdings ist dieses bisher recht knapp gehalten und wenig bebildert. Da die Einrichtung heikel ist, da ihr euch damit schnell eure Analytics-Daten verunreinigen könnt, habe ich hier meine Einrichtung dokumentiert.

Als Beispiel verbinde ich meine eigenen Domains japanliteratur.net und krempin.it, wobei japanliteratur.net die primäre Domain mit einer Datenproperty ist, die ich nun auch für krempin.it öffne. Oder verständlicher: Dem Google-Analytics-Konto von japanliteratur.net wird die Domain krempin.it hinzugefügt.

Die Einrichtung erfolgt in diesen Schritten:

  1. Trackingcode erweitern
  2. Ausschluss der sekundären Domain hinzufügen
  3. Ausschluss der sekundären Domain testen
  4. Filter für absolute URLs anlegen
  5. Filter für absolute URLs testen
  6. Conversion-Tracking anpassen
  7. Weitere Filter anpassen

1. Trackingcode erweitern

Als erstes müsst ihr den bestehenden Trackingcode erweitern. Die beste Anleitung hierzu hat Google selbst. Bei mir sieht die Erweiterung dann für die beiden Domains jeweils so aus:

Für den Code bei japanliteratur.net

  ga('create', 'UA-XXXXXXX', 'auto', {'allowLinker': true});
  ga('require', 'linker');
  ga('linker:autoLink', ['krempin.it'] );

Für den Code bei krempin.it

  ga('create', 'UA-XXXXXXX', 'auto', {'allowLinker': true});
  ga('require', 'linker');
  ga('linker:autoLink', ['japanliteratur.net'] );

2. Ausschluss der sekundären Domain hinzufügen

Nach dieser Codeerweiterung wird sich in euren Daten aber noch nichts verändern. Damit das Tracking funktioniert, müsst ihr zunächst die sekundäre Domain aus den Verweisen ausschließen. Standardmäßig ist der Verweis nur für die primäre Domain eingerichtet. Solange die sekundäre Domain nicht ausgeschlossen wird, behandelt Google sie deshalb weiterhin als Verweisdomain und kann die Benutzerprofile der beiden Seiten nicht verbinden.

Zu den ausgeschlossenen Domains gelangt ihr über Verwaltung -> Property -> Tracking-Informationen -> Verweis-Ausschlussliste


Bild vergrößern

Hier gebt ihr dann einfach die sekundäre Domain (ohne http und www) ein:


Bild vergrößern

3. Ein erster Test

Um zu testen, ob die Einrichtung des Trackingcodes funktioniert hat, solltet ihr

  1. Überprüfen, ob der Code im Quelltext vorhanden ist
  2. In Google Analytics im Menüpunkt „Echtzeit“ das Recording testen:

Ruft dazu eine beliebige Unterseite auf der einen und eine weitere Unterseite auf der anderen Domain auf. Nun müssten wie im Screenshot unten beide Seiten angezeigt werden – in diesem Beispiel ist das einmal http://japanliteratur.net/kanji-flashcards-von-white-rabbit-press/ (primäre Domain) und einmal http://krempin.it/mehr-traffic-mit-pdf-leseproben/ (sekundäre Domain).


Bild vergrößern

Wichtig außerdem: Die sekundäre Domain darf nicht mehr als Trafficquelle auftauchen. Taucht sie weiterhin auf, werdet ihr nur die URLs der primären Domain sehen. Die sekundäre Domain muss in dem Fall wie oben beschrieben also noch ausgeschlossen werden.

4. Filter für absolute URLs anlegen

Wer sich das Beispiel oben genau angesehen hat, wird bemerkt haben, dass es mit dem Zusammenführen der beiden Domains nun aber ein Trackingproblem gibt: Woher weiß ich, wenn ich sie nicht selbst erstellt habe, welche Seite zu welcher Domain gehört? Und was mache ich bei Seiten mit doppeltem Namen (z.B. /impressum/ auf sowohl japanliteratur.net als auch krempin.it)?

Hierzu muss ein Filter über die Datenansicht gelegt werden, der vor die relativen Pfade die Domain setzt, sodass wir nachher URLs erhalten wie:

http://japanliteratur.net/kanji-flashcards-von-white-rabbit-press/
statt
/kanji-flashcards-von-white-rabbit-press/

Achtung: Wird ein Filter über eine Datenansicht gelegt, ist dies unumkehrbar. Der Filter beginnt erst zu messen, wenn ihr ihn einrichtet und hört erst auf zu messen, wenn ihr ihn löscht. Die Daten während der Messung sind durch den Filter unwiderruflich durch beeinflusst und können nicht wieder in den „Rohzustand“ zurückversetzt werden. Richtet deshalb am besten eine neue Datenansicht ein, in der ihr die Filter anwendet. Die alte Datenansicht lasst ihr so bestehen. Dies geht im Menüpunkt „Verwalten“:


Bild vergrößern

Nun könnt ihr unter Verwalten – Datenansicht – Filter für die neu eingerichtete Datenansicht einen Filter anlegen: Nach der Anleitung von Google sieht das dann so aus:


Bild vergrößern

5. Filter für absolute URLs testen

Um den Filter zu testen, geht ihr in Google Analytics einfach wieder ins Echtzeit-Tracking – die Domain wird nun schon mitgeschrieben:


Bild vergrößern

Lasst nun zur Vorsicht noch einmal einen oder auch mehrere Tage vergehen und schaut euch die neuen Daten dann noch einmal an.

Was noch zu beachten ist…

Je nachdem, wie ausgebaut und gefiltert eure Datenansicht ist, müsst ihr unbedingt noch weitere Umstellungen vornehmen, damit das Tracking weiterhin sauber läuft:

6. Conversion-Tracking anpassen

Beim Conversion-Tracking habt ihr eine URL hinterlegt, um die Conversion-Rate zu berechnen. In der Regel ist das die Danke-Seite, die der Kunde nach Durchführung der Bestellung erreicht. Wird die Seite besucht, wird eine Conversion gezählt. Da nun der neue Filter greift, der die Domain vollständig ausgibt, müsst ihr auch hier die Seite anpassen (alternativ könnt ihr auch einen regulären Ausdruck verwenden, falls ihr das lieber tut, die vollständige, exakte Domain anzugeben, ist meiner Ansicht nach aber sicherer).


Bild vergrößern

Bitte auch dran denken: Wenn ihr einen Conversion-Trichter / Funnel verwendet, müssen auch hier die Seiten umbenannt werden!

7. Filter

Dasselbe gilt natürlich auch für Filter. Filtert ihr eine bestimmte Seite und sucht wie in dem Beispiel im Screenshot nach der Seite /warenkorb, wird der Filter diese nicht mehr finden, sondern eine Umbenennung in primaeredomain.de/warenkorb ist notwendig.


Bild vergrößern

Sobald allerdings mehrere Filter auf einer Datenansicht liegen, wird die Umbenennung heikel und fehleranfällig. Aber es gibt einen kleinen Trick, mit dem ihr euch die Arbeit erleichtern könnt: Nutzt den Mechanismus, mit dem Google Filter einsetzt.

Google wendet die Filter in der Reihenfolge an, in der sie auf der Filterübersicht eingetragen sind. Zuerst also den Filter an Position 1, dann an Position 2. Fügt ihr den Filter, der absoluten URLs anzeigt, als letztes hinzu, so werden zunächst alle eure bisherigen Filter angewendet – und diese funktionieren ja auch wie bisher – und erst am Schluss wird die URL umgewandelt!


Bild vergrößern

Pro und Kontra des domainübergreifenden Trackings

Wenn euch diese Anleitung noch nicht abgeschreckt hat und ihr nun ernsthaft überlegt, das domainübergreifende Tracking einzurichten, helfen euch zum Schluss vielleicht noch diese Pro- und Contra-Argumente weiter.

Pro

  • Endlich können die Wege des Besuchers auch über mehrere Domains hin erfasst werden
  • Filter ermöglichen es, die Domains trotz allem weiterhin auch einzeln betrachten zu können (dieser Punkt wird in dieser Anleitung nicht erklärt)
  • Das Tracking eignet sich dafür, beliebig viele Domains zu verknüpfen – damit ihr saubere Daten habt, solltet ihr die Verknüpfung aber nur für die Domains vornehmen, über die ihr selbst die Kontrolle habt

Contra

  • Die Einrichtung muss mit großer Sorgfalt durchgeführt werden, insbesondere bei den Filtern solltet ihr aufpassen – und euch damit auch schon auskennen
  • „Bruch“ im Datenbestand: Dadurch, dass den Seiten Hostnamen gegeben werden (meinedomain.de davor gesetzt wird), habt ihr vom Tag der Umstellung an zunächst erstmal zwei Einträge: /unterseite/ (für alle Einträge bis zur Umstellung) und meinedomain.de/unterseite (für alle Einträge ab der Umstellung) für dieselbe Unterseite

Hinweis

Ich übernehme keine Gewähr dafür, dass diese Anleitung vollständig und richtig ist. Findet ihr Fehler oder habt Anmerkungen und Fragen, kontaktiert mich gerne.

Standard
Web-Entwicklung

JavaScript Cheat Sheet

Inhalt

  1. Elemente auswählen
  2. Elemente hinzufügen, ändern und löschen
  3. Events auslösen
  4. First Class Functions
  5. Objektorientiertes JavaScript

Allgemeines

JavaScript lässt sich genau wie HTML und CSS direkt im Browser manipulieren. In Chrome geht das über die Developer Tools (F12) unter Console (Esc).

Elemente auswählen

Mit Javascript lassen sich einzelne HTML-Elemente einer Seite auswählen und dann beliebig manipulieren, löschen etc.

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

In diesem Code lassen sich die Element so auswählen und ausgeben:

document.getElementById('caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Gibt immer nur ein Element zurück. Das Element verfügt über eine einmalige ID.

const mainElement = document.getElementById('wrapper');
mainElement.querySelector('#caption');
<h1 id="caption">Ich bin eine Überschrift</h1>

Funktioniert genau wie das Beispiel oben, sucht allerdings nur nach dem Element in einem anderen Element und nicht im gesamten document.

document.querySelector('.argument');
<li class="argument">Argument 1</li>

Selektiert Elemente, die mehr als ein Mal vorkommen können, davon aber immer nur das erste.

document.querySelectorAll('.argument');
NodeList(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:NodeList

Selektiert nicht nur das erste, sondern alle Element und gibt eine Node-Liste aus, über die man im Gegensatz zu getElementsByClassName und getElementsByTagName loopen kann:

const element = document.querySelectorAll('.argument');
for(let i = 0; i < element; i++){
    console.dir(element[i]);
}
document.getElementsByClassName('argument');
HTMLCollection(3) [li.argument, li.argument, li.argument]
0:li.argument
1:li.argument
2:li.argument
length:3
__proto__:HTMLCollection

Selektiert im Gegensatz zu querySelector alle Elemente und gibt sie als Liste aus.

document.getElementsByTagName('p');
HTMLCollection(2) [p.paragraph, p.second-paragraph]
0:p.paragraph
1:p.second-paragraph
length:2
__proto__:HTMLCollection

Gibt eine Liste aller vorkommenden Tags (und ihrer Klassen) aus.

document.querySelector('.argument').innerHTML;
"Argument 1 <a href="link.html">mit einem Link</a>"

Ausgewählt wurde das erste Listenelement mit der Klasse .argument. Alles, was sich innerhalb dieses Tags befindet, wird als String ausgegeben.

document.querySelector('.argument').outerHTML;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

Die Auswahl ist dieselbe wie beiinnerHTML, es wird allerdings auch der umschließende Tag mitgegeben.

document.querySelector('.argument').textContent;
"Argument 1 mit einem Link"

Gibt nur den Text innerhalb des Tags wieder und entfernt alle HTML-Tags innerhalb des Textes. (Wichtig: Übergibt man textContent, der HTML-Content enthält, wird dieser natürlich auch nur als String, nicht als HTML dargestellt!)

document.querySelector('.argument').innerText;
"<li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>"

InnerText funktioniert fast genauso wie textContent – mit einem Unterschied: Der Text wird bei innerText so ausgegeben, wie er durch das CSS gestyled wurde. Wird beispielsweise ein Teil des Textes auf display:none gesetzt, wird dieser mit innerText nicht ausgegeben.

document.querySelector('.argument-list').firstElementChild;
<li class="argument">
   "Argument 1 "
   <a href="link.html">mit einem Link</a>
</li>
document.getElementById('input-field').value;
"99"

Gibt nur den Value des Input-Feldes aus

document.querySelector('#input-field').className;

document.querySelector('#input-field').className.split(' ')
"super cool classnames"

(3) ["super", "cool", "classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
__proto__:Array(0)

Gibt die Klassennamen eines elements als String aus. Über Split kann daraus ein Array gemacht werden.

document.querySelector('#input-field').classList;
DOMTokenList(3) ["super", "cool", "classnames", value: "super cool classnames"]
0:"super"
1:"cool"
2:"classnames"
length:3
value:"super cool classnames"
__proto__:DOMTokenList

Möglich bei classList sind folgende Aktionen:

  • .add()
  • .remove()
  • .toggle()
  • .contains()

Elemente hinzufügen, ändern und löschen

Beispielcode:

<div id="wrapper">
  <h1 id="caption">Ich bin eine Überschrift</h1>
  <p class="paragraph">Dies ist ein Fließtext.</p>

  <input id="input-field" value="99">

  <ul class="argument-list">
    <li class="argument">Argument 1 <a href="link.html">mit einem Link</a></li>
    <li class="argument">Argument 2</li>
    <li class="argument">Argument 3</li>
  </ul>

  <p class="second-paragraph">Dies ist noch ein Fließtext.</p>
</div>

Hinzufügen

const newParagraph = document.createElement('p');
newParagraph.textContent = "ABCD";
document.querySelector('.paragraph').appendChild(newParagraph);
<p class="paragraph">Dies ist ein Fließtext.</p>
<p>ABCD</p> // neu hinzugefügt!

Ein Element wird mit createElement erstellt, mit textContent mit Inhalt gefüllt und mit appendChild hinter dem ersten p-Tag eingefügt.

const mainHeading = document.querySelector('#caption');
const textToAdd = '<h2>Unterüberschrift</h2>';

mainHeading.insertAdjacentHTML('afterend', textToAdd);

Mit insertAdjacentHTML lassen sich Element und Inhalt flexibler als mit appendChild hinzufügen. Es gibt vier verschiedenen Parameter, die gesetzt werden können:

  • beforebegin: vor dem h2-Tag
  • afterbegin: nach dem h2-Tag
  • beforeend: vor dem /h2-Tag
  • afterend: nach dem /h2-Tag

Verändern

document.querySelector('h1').style.color = 'red';
document.querySelector('h1').style.textDecoration = 'underline';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Über style kann das Styling verändert werden (nur ein Wert pro Aufruf).

document.querySelector('h1').style.cssText = 'color: red; text-decoration: underline;';
<h1 id="caption" style="color: red; text-decoration: underline;">Ich bin eine Überschrift</h1>

Mit cssText dagegen können mehrere Werte pro Aufruf verändert werden. Während oben für Werte wie text-decoration die lowerCamelCase-Schreibvariante verwendet wird, kann man hier die aus CSS gewohnte Schreibweise nutzen.

document.querySelector('h1').setAttribute('id', 'new-caption');
document.querySelector('h1').setAttribute('style', 'new-style');
<h1 id="caption">Ich bin eine Überschrift</h1>  // vorher
<h1 id="new-caption" class="new-style">Ich bin eine Überschrift</h1>  // nachher 

Entfernen

const firstElement = document.querySelector('.argument-list').firstElementChild;
document.querySelector('.argument-list').removeChild(firstElement);

Zunächst wird das erste Unterelement der Liste ausgewählt und anschließend entfernt. Einfacher geht es aber so:

const firstElement = document.querySelector('.argument');
document.querySelector('.argument').parentElement.removeChild(firstElement);

Erst wird das zu entfernende Element direkt ausgewählt und dann direkt entfernt. Und am einfachsten geht es so:

document.querySelector('.argument').remove();

Events

Eine Liste mit allen verfügbaren Events gibt es auf der Seite von Mozilla. Events können in den Developer Tools (in Chrome) untersucht werden, indem ein Element ausgewählt wird. Unter Event Listeners findet man alle vorhandenen Events.

document.querySelector('h1').addEventListener('click', function () {
  console.log('The heading was clicked!');
});

Fügt der Konsole „The heading was clicked hinzu“, sobald die H1 angeklickt wird.

function headingClickFunction() {
console.log('The heading was clicked');
}

document.querySelector('h1').addEventListener('click', headingClickFunction);
document.querySelector('h1').removeEventListener('click', headingClickFunction);

Entfernt einen hinzugefügten EventListener. Wichtig dabei: Beide Aktionen, sowohl add als auch remove müssen auf dieselbe Funktion verweisen.

First Class Functions

Funktionen in JavaScript sind First-Class-Funktionen. Das bedeutet:

1. Sie können in Variablen gespeichert werden:

const variable = myFunction();

2. Sie können von einer anderen Funktion zurückgegeben werden:

const higherOrderFunction = function () {
    return function () {
        return 8;
    }
}

3. Sie können als Argument an eine andere Funktion übergeben werden.

Eine Funktion, die an eine andere Funktion übergeben wird, nennt man Callback Function. Die Funktion, die die Callback Function ausführt, heißt Higher-Order Function.

Objektorientiertes JavaScript

Literal notation – empfohlen:

const myObject = {};

Constructor function:

const myObject = new Object();

Beispiel für ein Objekt:

const oma = {
  age: 82,
  name: 'Elfriede',
  greet: function () {
    console.log('Guten Tag');
  }
};

Gibt einen Array aller Keys / Values aus:

const oma = {
  name: 'Elfriede',
};


Object.keys(oma);    // name

Object.values(oma);  // Elfriede

Values ist erst seit 2017 Standard, wird also noch nicht von jedem Browser unterstützt.

Objekte modifizieren

Zugreifen oder verändern einzelner Elemente:

oma.age = 82;
oma.greet;
oma[‚greet‘]();

… oder erstellen ganz neuer Elemente:

oma.haircut = 'Dauerwelle';  // oder
oma['haircut'] = 'Dauerwelle';

Entfernen einer Property:

delete oma.haircut;

Funktionen ansprechen:

const oma = {
  greet: function () {
    console.log('Guten Tag');
  }
};
const oma = {
  greet: function gutenTag() {
    console.log('Guten Tag');
  }
};

… geht bei beiden gleich:

oma.greet();

This

Mit this können Methoden direkt das Objekt adressieren:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};
oma.greet();

Achtung: Die Art und Weise, wie Funktionen aufgerufen werden, hat einen Einfluss darauf, auf was sich this bezieht!

a. Funktion als Methode in einem Objekt -> das Objekt selbst *
b. „Normale“ Funktion -> das window Objekt
c. …

* Wird eine Funktion aus einem Objekt aber in einer Variablen gespeichert, ist die Referenz das window Objekt:

const oma = {
  name: 'Elfriede',
  greet: function () {
    console.log(`Ich heiße ${this.name}.`);
  }
};

const talk = oma.greet;
talk();
Standard
Datenanalyse

Potenziale entdecken: Mehr Traffic mit PDF-Leseproben

Eure Seiten ranken gut bei Google? Oder sucht ihr noch nach einem Weg, mehr Traffic zu erhalten? In beiden Fällen solltet ihr euch einen Teil eurer Website genauer anschauen, den ihr bisher wahrscheinlich noch gar nicht analysiert habt: PDF-Leseproben.

Leseproben als „blinder Fleck“ in Google Analytics

Nur leider fehlt der Abruf eben dieser PDFs in den Google Analytics Berichten. Im letzten Beitrag hatte ich erklärt, warum Leseproben mit Google Analytics standardmäßig nicht trackbar sind. Eine Lösung dafür ist die Einrichtung eines Event-Tracking-Codes. Aber auch dann sind Leseproben immer noch nicht komplett analysierbar, denn der Event-Tracking Code trackt nur, wer auf einen bestimmten Link zur Leseprobe geklickt hat. Damit fallen all die Abrufe weg, die über andere Quellen kommen. Das könnten beispielsweise sein:

  • Das PDF rankt gut bei Google und die Besucher öffnen von dort aus das PDF
  • Die Leseprobe wird direkt von einer anderen Seite aus verlinkt
  • Die interne Suche eurer Seite leitet direkt zum PDF weiter

In beiden Fällen greift das Event-Tracking nicht, da die Besucher niemals auf den Leseproben-Link klicken, sondern über andere Quellen zum PDF kommen.

Die Lösung: Google Search Console

Um euch aber zumindest einen groben Eindruck darüber zu verschaffen, welchen Stellenwerte eure PDFs haben, könnt ihr ein weiteres kostenloses Tool von Google nutzen: Die Google Search Console (ehemals „Webmaster Tools“, Anleitung zur Einrichtung dieses Tools).

Unter Suchanfragen -> Suchanalyse gibt Google euch mit den im Screenshot gezeigten Einstellungen die 1000 meistgeklickten Seiten aus – und hier tauchen nun auch die PDFs auf, sofern diese bei Google gut ranken.


Suchanalyse in der Google Search Console

Mit Hilfe der Search Console könnt ihr also sehen, welche eurer PDF-Leseproben für Google eine Bedeutung haben. Nun gilt es, dies zu nutzen und den Traffic, den Google auf die Leseproben weiterleitet, auszuschöpfen.

PDFs als Trafficquelle nutzen

Nachdem ihr die PDFs mit den meisten Impressionen und Klicks in der Search Console identifiziert habt, solltet ihr genau diese PDFs gezielt bearbeiten und einen Link zu eurer Website setzen, beispielsweise mit einem kurzen Hinweis:

Dies ist eine Leseprobe. Das komplette Buch erhalten Sie bei Verlag X.

Besonders ansprechend bereitet Rheinwerk seine Leseproben auf: In der dieser Leseprobe erfolgt nicht nur ein Branding durch Logo und Corporate Design des Verlages, sondern es gibt auch einen Link zur Produktseite.

Bei der Bearbeitung des PDFs solltet ihr zwei Dinge beachten: Erstens solltet ihr nicht zu viel am PDF ändern oder gar einige Seiten löschen und durch neue einsetzen. Wenn das PDF rankt, dann hat dies seine Gründe und ihr solltet es möglichst in seiner jetzigen Form belassen. Zweitens solltet ihr keinesfalls die Dateibenennung des PDFs verändern, da das PDF genau mit dieser URL bei Google rankt.

Effekte testen

Keine Maßnahme ohne Auswertung: Am Ende solltet ihr testen, wie effektiv die neuen Leseproben mit den Links tatsächlich sind. Dazu solltet ihr untersuchen, ob die Visits bei den Produktseiten, auf die die Leseproben-PDFs verweisen, steigen.

Leider ist eine saubere Auswertung hier wieder nur beschränkt möglich. Bei den Besucherquellen könnt ihr beispielsweise nicht unterscheiden, welcher Besucher von Google über die Leseprobe auf eure Seite kommt und welcher Besucher direkt auf der Produktseite einsteigt. Auch ein Kampagnen Tracking über Google Analytics solltet ihr auf keinen Fall in Betracht ziehen: Baut ihr nämlich in das PDF eine Kampagnen-URL ein, überschreibt diese alle anderen Zugriffsquellen und zählt auch Besucher, die das PDF von eurer Website aus aufrufen und dann auf den Link klicken.

Es bleibt also nur ein Vergleich von zwei Zeiträumen und die Hoffnung, dass der Effekt so groß ist, dass er auffällig ist. In Google Analytics könnt ihr Vergleichszeiträume über die Zeitraumauswahl in der rechten oberen Ecke ändern:

Vergleichszeiträume in Google Analytics
Vergleichszeiträume in Google Analytics

Zur Illustration verwende ich einen Screenshot der Zahlen einer Unterseite von einer meiner privaten Websites:

Analyse von Vergleichszeiträumen

Auf dieser Seite habe ich keine bestimmten Maßnahmen durchgeführt, es ist also mehr oder weniger Zufall, dass sich die Besuche verringert haben. Zeigen soll euch dieser Screenshot nur, wie ihr die Effekte sichtbar machen könnt.

Tipp – Segmente einrichten: Ihr könnt die Analyse noch genauer präzisieren, indem ihr ein Segment anlegt, das nur die Besucher enthält, die über Google auf eure Website kommen. Mehr Informationen dazu findet ihr in der Google Analytics-Hilfe.

Pro und Contra von Traffic über Leseproben

In der Ausgabe 54 des suchradars wird das Thema PDFs ebenfalls diskutiert. Markus Hövener sieht PDFs unter Conversion-Aspekten kritisch, da sich eben ein PDF und keine Website öffnet. Positiv hebt er aber hervor, was für mich auch Anlass war, diesen Beitrag zu schreiben: Wenn ihr sowieso PDFs für Leseproben erstellt und diese Sichtbarkeit erlangen, solltet ihr den Traffic auf jeden Fall mitnehmen.

Standard