Tutorial: Kaufratgeber / Produktfinder mit WordPress erstellen

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?

• WordPress
• Caldera Forms (kostenloses WordPress-Plugin)

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 Installation

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 anlegen

Ö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 Seite, 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ügen

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.

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 erstellen

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ügen

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.