Tutorial: Kaufratgeber / Produktfinder mit WordPress erstellen

Mit dem konstelosen WordPress-Plugin Caldera Forms zum Kaufberater

Mit dem kostenlosen WordPress-Plugin Caldera Forms zum Kaufberater.

Wie erstellt man einen Kaufratgeber für eine Affiliateseite? Einige NSC-Teilnehmer haben mich gefragt, wie ich den Produktfinder auf meiner Nischenseite realisiert habe. Der Verweis auf das entsprechende Plugin hat nur weitere Fragen hervorgerufen. Deswegen habe ich mich entschlossen, ein Tutorial zu schreiben, inklusive Schritt-für-Schritt-Anleitung und Musterformular zum Download.

Warum hilft ein Kaufratgeber?

Ein Kaufberater nimmt den Kunden bei der Hand, zeigt ihm die wichtigsten Aspekte bei der Entscheidung auf und empfiehlt ein möglichst passendes Produkt. Es ist eine schnelle, spielerische Hilfe für den potentiellen Käufer und ein Weg für Affiliate-Marketer die Conversion-Rate zu verbessern. Ich persönlich spreche lieber von Produktfinder – das Wort „Kaufberatung“ klingt für mich zu sehr nach Vertreter – aber das ist Geschmackssache.

Was benötigt man für die Erstellung des Produktfinders?


Hilfreich sind außerdem gute WordPress-Kenntnisse und ein Grundverständnis für HTML. Die benötigte Zeit hängt maßgeblich von der Komplexität des Unterfangens ab. Einfache Kaufratgeber lassen sich in einer Stunde erstellen, etwas schwierigere Strukturen benötigen 3 bis 4 Stunden. Caldera Forms ist ein recht umfangreiches Plugin, für das es noch dutzende Erweiterungen gibt. Die Möglichkeiten sind also sehr viel größer, als dieses Tutorial vermuten lässt. Experimentieren ist ausdrücklich erlaubt.

Kaufberater-Tutorial

#0 Vorüberlegungen und Konzept

Vor dem Start braucht ihr ein Konzept. Wie viele Fragen soll mein Produktfinder fassen? Wie viele Ergebnisse will ich präsentieren? Lasse ich Mehrfachantworten zu? Daraus entsteht mitunter eine komplexe Struktur, die am besten nicht nur im Kopf existiert. Gut eignen sich hier Mindmaps. Online könnt ihr zum Beispiel mit bubbl.us einfach, schnell und kostenlos eine Struktur erstellen. Das ist auch deswegen nötig, um nicht die Übersicht zu verlieren. Hat ein Kaufberater 3 Fragen mit jeweils 3 Antworten ergeben sich daraus bereits 27 verschiedene Antwortszenarien. Und das gilt auch nur, wenn wir von Mehrfachantworten absehen. Es empfiehlt sich, für verschiedene Szenarien dasselbe Ergebnis zu präsentieren – andernfalls sprengt nicht nur die Erstellung des Kaufberaters den Rahmen, auch bräuchtet ihr 27 verschiedene Produkte. Merke: Das Unterfangen steht und fällt mit einem guten Konzept.

Schritt-für-Schritt-Anleitung

#1 Download und Installationwpbackend

Ladet euch das kostenlose Plugin direkt bei WordPress herunter, installiert es. Ihr findet es anschließend im Backend als eigenen Menüpunkt.

 

 

 

#2 Neues Formular anlegen02anlegen

Öffnet Caldera Forms und klickt auf „Neues Formular“ . Gebt einen Namen und eventuell eine Beschreibung ein und klickt auf „Formular Erstellen„.

 

 

 

#3 Seiten hinzufügen

Es öffnet sich euer eben angelegtes Formular. Fügt nun so viele Seiten hinzu („Seite hinzufügen„), wie ihr für den Produktfinder benötigt. Für jede Frage braucht ihr eine seiteSeite, für das Ergebnis braucht ihr eine weitere. Wichtig: Auch wenn ihr viele verschiedene Ergebnisse habt, benötigt ihr nur eine Seite dafür. Wenn ihr also 3 Fragen habt, dann müsst ihr 4 Seiten anlegen.

#4 Elemente auf Frageseiten hinzufügenfragen

Nun gilt es die einzelnen Fragen einzubinden. Geht dafür auf die erste Seite und zieht per „Drag&Drop“ den Button „Element hinzufügen“ in das offene Feld unter dem Schriftzug „Seite 1“ . Es öffnet sich ein Menü, indem ihr bestimmt, welche Art von Frage im Kaufratgeber verwendet werden soll. Zu empfehlen sind „Radio Button“ (Einzelauswahl) und „Checkbox“ (Mehrfachauswahl). Egal wie viele Optionen ihr bei der Frage habt, es reicht jeweils ein Element der jeweiligen Art.

Auf der rechten Seite öffnen sich nun Einstellungsmöglichkeiten des Elements. Gebt einen Namen ein, der über den Antwortmöglichkeiten erscheint (eine Frage) und wahlweise eine erläuternde Beschreibung (erscheint unter den Antwortmöglichkeiten). Nun klickt ihr so lange auf „Option hinzufügen“ , bis ihr genügend Antwortmöglichkeiten habt. Der Name der Antwortmöglichkeit lässt sich selbstverständlich frei festlegen. Wiederhole diesen Vorgang auf all deinen Frageseiten und vergiss nicht zu speichern.

#5 Weiter-Button integrieren

Navigiert zurück auf eure erste Seite. Klickt auf das „+“ unter eurer Frage. Ein neuer Kasten erscheint.

04plus klickenweiter

Zieht nun ein neues Element in den zweiten Kasten und wählt „Buttons -> Button“ aus. Auf der rechten Seite erscheinen wieder die Einstellungsmöglichkeiten. Wählt als Namen „Weiter“ , als Slug einen individuellen Namen (weiter1,2,3…) und bei Art „Nächste Seite“ aus. Speichert und wiederholt dieses Prozedere auf all euren Frageseiten. Achte darauf, dass bei Slug jeweils ein unterschiedlicher Name eingetragen ist. Sonst funktionieren die Button nicht.

 

 

 

 

#6 Ergebnisseiten erstellenergebnisss

Nun öffnet eure letzte Seite, die für die Ergebnisse reserviert ist. Zieht per Drag&Drop „Element hinzufügen“ auf den offenen Kasten und wählt als Element „Inhalt-> HTML“ aus. Wählt einen Namen und einen Slug (erscheint nirgends). Nun wird es etwas komplizierter, denn ihr müsst unter Inhalt das Ergebnis einbinden. Es handelt sich nicht um einen „WYSIWYG“-Editor, sondern lediglich um eine HTML-Eingabe. Heißt: Ihr braucht Code, wenn ihr hier nicht nur Text stehen haben wollt.

Wollt ihr es simpel halten, könnt ihr die Überschrift mit H-Tags ausgeben (Beispiel: <h3>Ergebnis: Produkt1</h3>), Umbrüche einfügen (z.B. mit <br />), Text einfügen (<p>hier steht text </p>) und Links einfügen (<a href=“http://www.ergebnis.de“>Zu deinem Ergebnis<a/>). Eine weitere Möglichkeit: Ihr öffnet eine Seite oder einen Beitrag mit WordPress und verfasst eure Ergebnisseite so, wie ihr es für richtig haltet, wählt anschließend statt „visuell“ „text“, kopiert das Ergebnis und fügt es bei „Inhalt“ auf eurer Ergebnisseite ein. Vorsicht: Bindet ihr den Produktfinder später in der Sidebar ein, müsst ihr euch auch Gedanken um die beanspruchte Größe machen.

Speichert und legt nun die restlichen Ergebnisseiten genau gleich an. Achtung: Jede Ergebnisseite benötigt einen eigenen Kasten auf eurer letzten Seite (Wieder auf das „Plus“ klicken).

#7 Bedingungen hinzufügenbed

Fast geschafft! Nun kommt der schwierigste Schritt. Wir müssen dafür sorgen, dass bei bestimmten Antworten bestimmte Ergebnisse erscheinen. Klickt „Bedingungen“ an und anschließend „Add Conditional Group“ . Wählt einen Namen, mit dem ihr diese Bedingung auch wiedererkennt (jede Conditional Group beinhaltet die Bedingungen dafür, dass ein Ergebnis angezeigt wird). Wählt bei Typ „Anzeigen“ und anschließend klickt ihr auf „Add Conditional Line“ . Nun wählt ihr bei „If“ die erste Frage aus, „Ist“ lasst ihr stehen und rechts daneben wählt ihr die Antwortmöglichkeit aus, die ihr haben wollt. Um eine weitere Bedingungen hinzuzufügen wählt „Bedingungen hinzufügen“ und verfahrt für die nächste Frage genauso. Gibt es mehrere Pfade zu einem Ergebnis, wählt „Add Conditional Line“ und gebt den Pfad wie oben beschrieben ein. Seid ihr hier fertig, wählt ihr rechts den Ergebniskasten aus (Unter „Applied Fields„), der angezeigt werden soll, wenn die festgelegten Bedingungen erfüllt sind. Speichert. Für jede Ergebnisseite muss nun eine neue Conditional Group erstellt werden, bis alle Szenarien abgedeckt sind.

#8 Produktfinder einbinden

Das Einbindungen funktioniert nun wieder recht einfach. Geht auf eine Seite oder einen Beitrag, wählt den Caldera-Forms-Button und wählt das entsprechende Formular aus. Wenn ihr den Kaufberater in der Sidebar haben wollt, gibt es auch ein entsprechendes Widget.

Download: Musterformular

Dieses Formular für einen Kaufratgeber könnt ihr über die Schaltfläche „Importieren“ bei Caldera Forms auf eurer Seite integrieren. Es muss natürlich noch angepasst werden, ist aber voll funktionsfähig. Sie hilft hoffentlich auch als Anschauungsbeispiel weiter.

Zum Download

Troubleshooting

  • Das WordPress Plugin Autoptimize kann zu Problemen in Verbindung mit Caldera Forms führen. Falls Probleme auftreten, das Plugin deaktivieren, testen und falls es nun klappt das Plugin wieder aktivieren und einzelne Einstellungen testen, bis eine Konfiguration gefunden ist, die den reibungslosen Betrieb erlaubt.
  • Das W3 Total Cache verursacht teilweise Probleme. Falls W3 Total Cache die Problemursache ist, auf ein anderes Cache-Plugin ausweichen. Danke an Tobi für den Tipp.
  • Die „Slugs“ aller Elemente müssen unterschiedliche Namen tragen, sonst kommt es zu Komplikationen.

Wenn ihr weitere Probleme feststellt, bitte schreibt in die Kommentare. Ich ergänze den Artikel entsprechend.

SHARE IT:

Verwandte Artikel

Kommentare

  1. Hallo,
    danke für dieses super Tutorial! Ich werde versuchen es nächste Woche umzusetzten und auch auf meiner Seite einen Kaufberater einzubinden.

    Grüße
    Flo

  2. Lieber Till,

    aufgrund Deines Tipps bei der Nischenseiten-Challenge habe ich mich auch gleich auf Caldera Forms gestürzt. Dabei nutze ich statt direkter html-Ausgabe eigene WordPress-Artikel als Ergebnisseiten. Vielleicht für den einen oder anderen als Alternative zu Deiner Vorgehensweise interessant:

    Das funktioniert über die Nutzung der „Prozesoren“ in Caldera Forms. Ich habe für 3×3 mögliche Antwortkonstellationen jeweils einen Prozessor „Umleitung“ eingerichtet und als Bedingung jeweils eine der Antwortkonstellationen gewählt (analog zu Deiner Beschreibung oben unter #7).

    Das einzige was sonst noch anders ist: statt eines „Weiter“-Buttons wie oben beschrieben, hat der Button die Funktion „Absenden“. So wird die Umleitung ausgelöst. Als Ziel wird die entsprechende Seite mit passenden Produkten angesteuert.

    Wer es sich anschauen mag: es geht um die Auswahl von passenden höhenverstellbaren Aufsätzen für den Schreibtisch. Auf dieser Seite ist der Kaufberater per Button eingebunden und erreichbar (die „Modal“-Funktion von Caldera Forms), auf der ausführlichen Übersichtsseite zu Varidesk-Stehtischaufsätzenist das selbe Formular direkt in die Seite eingebunden.

    Das einzige was mich stört: Caldera Forms erzeugt bei der Einbindung in die Seite über der ersten Frage des Kaufberaters einen ziemlich breiten, leeren Rand. Weiß jemand, wie ich den weg bekomme?

    Herzlichen Gruß,
    Peter

    • Hallo Peter,

      danke für deine Nachricht.
      Sehr guter Hinweis mit den Prozessoren. Finde ich ebenfalls eine super Möglichkeit.
      Zu deiner Frage habe ich leider keine Antwort. Sorry!

      Liebe Grüße
      Till

  3. Hi,

    habe nach derartigen Kaufberater gesucht und ich finde, du hast es Top umgesetzt und ich werde mich noch die Woche ranmachen.

    Danke dir & Liebe Grüße
    Nadine

  4. Michel Tank 11. Juli 2017 at 20:00 · · Antworten

    Geile scheiße alter, genau danach suche ich schon Ewigkeiten! Sehr schön!

    Vielen Danke und beste Grüße
    Michel

  5. Michel Tank 11. Juli 2017 at 20:29 · · Antworten

    Wie bekommen ich den „Weiter“-Button etwas tiefer gesetzt mit CSS? Er ist mir zu nah an den Antwortmöglichkeiten, sieht blöd aus…

  6. Michel Tank 11. Juli 2017 at 22:49 · · Antworten

    danke, hatte es selber schon hinbekommen =)

Trackbacks

    Hinterlasse eine Nachricht

    Sie können diese Tags verwenden:: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>