Zufällige Affiliate-Links ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.
Inhalt
Verdienen Sie mit Affiliate Geld
Wenn Sie keine externen Affiliate-Plugins im CMS Pico nutzen möchten, dann kann Ihnen der eingebaute Twig-Symfony Parser und YAML genau das gleiche leisten - es ist ganz einfach. Sie erhalten einen zufälligen Affiliate-Link mit Produkt-Bild, Produkt-Beschreibung und Bestell-Button im Theme oder Template - ganz ohne Plugin.
YAML Liste erstellen
Zunächst müssen Sie eine YAML-Liste entweder in der Datei config/config.yml oder in der pico-theme.yml anlegen. Sie können sich dabei an dem folgenden Beispiel orientieren:
021 affiliate:
021 - cta:
021 title: WordPress 5
021 description: Erstellen Sie einen Blog oder eine Website...
021 logo: affiliate-wp5.png
021 link: https://www.amazon.de...
021 label: kaufen...
021 - cta:
021 title: CSS von Animation bis Responsiv
021 description: Das Buch für den Webentwickler...
021 logo: affiliate-css.png
021 link: https://www.amazon.de...
021 label: kaufen...
021 - cta:
021 title: SEO
021 description: Die Suchmaschinen-Optimierung ist...
021 logo: affiliate-seo.png
021 link: https://www.amazon.de...
021 label: kaufen...Code
Es existieren drei Listen-Objekte cta die jweils title, description, logo, link und label als Attribute beinhalten. Titel stellt einen Buchtitel da, description die Beschreibung, logo das Produktbild, link den Link zum Affiliate-Shop und label ist die Beschriftung des Buttons der dem Leser gezeigt wird.
Affiliate Theme und Template mit Twig
Das Geheimnis dieses Affiliate-Banners ist der Twig-Befehl (Zufallswert - Random):
... {{ random(['apple', 'orange', 'citrus']) }} {# example output: orange #}Code
er liefert einen zufälligen Wert aus einem iterierbaren Objekt zurück, dies können Sie ohne Umwege im Theme ausgeben.
001 {% set item = random(config.theme_config.affiliate) %}
002 <div class="container-fluid py-5">
003 <div class="container">
004 <div class="row">
005 <div class="col-sm-2">
006 <img src="{{ item.logo }}" class="img-fluid mb-3">
007 </div>
008 <div class="col-sm">
009 <p><strong>{{ item.title }}</strong>   -   {{ item.description }}</p>
010 <a href="{{ item.link }}" class="btn btn-success">{{ item.label }}</a>
011 </div>
012 </div>
013 </div>
014 </div>Code
Das Codeschnipsel oben ist für das CSS-Framework Bootstrap entwickelt, kann aber an Ihr eigenes CSS einfach angepasst werden. Wichtig sind die folgenden Zeilen:
- Zeile 001: dem Value item wird ein zufälliges cta-Objekt aus der YAML-Liste zugewiesen
- Zeile 006: liest das Bild aus dem logo-Value
- Zeile 009: liest den Titel aus dem title-Value und die Beschreibung aus dem description-Value
- Zeile 011: zeigt den Bestellbutton mit label und dem link
Nachfolgend noch mal die bereinigte Kurzform des Beispiels ohne CSS.
... {% set item = random(config.theme_config.affiliate) %}
... <img src="{{ item.logo }}">
... <p>{{ item.title }} - {{ item.description }}</p>
... <a href="{{ item.link }}">{{ item.label }}</a>Code
Wenn Sie dieses Beispiel sinnvoll in Ihr Pico Theme einbauen, erhalten Sie eine zufällige Anzeige (mit Bild, Text und Bestellbutton) eines Affiliate-Produktes das Sie bwerben - am besten platzieren Sie dieses Template weit nach oben in der Webseite.
Optional
Möchten Sie bestimmte Produkte einfach und leicht abschalten können und von der Anzeige auf der Webseite ausschliessen, ohne alles erneut editieren zu müssen, dann sollten Sie einen boolean in die YAML-Liste einsetzen, den Sie abfragen ob der Artikel aktiv oder deaktiv ist. Ein Beispiel finden Sie im Beitrag YAML Syntax in Pico CMS
Der Vorteil dieser Variante gegenüber dem Plugin ist, das der Code überaus einfach und sicher ist, zudem können Sie alles mit (Pico) Bordmitteln abwickeln ohne auf externe Plugins zurückgreifen zu müssen. Dazu kommt, das Sie die YAML-Liste beliebig erweitern können, diese hat theoretisch keine Grenze. Pflegen Sie dort so viele Produkte ein, wie Sie vertretbar auf Ihrer Webseite bewerben möchten.
Hinweis: natürlich ist es notwendig, das Sie auch in einem Affiliate-Netzwerk registriert sind, um einen personalisierten Link entsllen zu können. Hier bietet sich Amazon an, da es sehr einfach zu handhaben ist. Alternativ können aber auch auf zufällige Beiträge Ihres eigenen Blogs verlinken, statt externer Affiliates.
Weiterführende Links
- Doc: twig.symfony.com
28.01.2024 Kontakt@Oliver-Lohse.de Affiliate CTA YAML
