Produktboxen ohne WordPress einbetten

Mit Einbettungs-Schlüssel, einem Script-Tag und Platzhaltern zeigst du Boxen auf jeder HTML-Seite.

Für statische Seiten oder andere Systeme als WordPress gibt es die Einbettung: ein Script-Tag und Platzhalter im HTML. Die Affiliate-Links tragen die Tracking-IDs der Website, zu der der Schlüssel gehört.

Einrichten

1. Unter „Websites“ die Website öffnen und den Bereich „Einbettung“ wählen (nur für Owner und Admins sichtbar).
2. Im Feld „Domains“ die Domains eintragen, auf denen die Boxen erscheinen sollen – eine je Zeile oder mit Komma getrennt.
3. „Schlüssel anlegen“ klicken.
4. Unter „Code erstellen“ die Box-Art wählen, Produkte suchen bzw. eine Liste, einen Produktberater oder eine Produktart wählen, die Optionen der Box und das Aussehen einstellen. Die Live-Vorschau zeigt die Box mit echten Daten.
5. Im Reiter „Website (HTML)“ auf „Code kopieren“ klicken und den Code in deine Seite einfügen. Das Script-Tag braucht jede Seite nur einmal; weitere Boxen sind nur weitere Platzhalter. Die Reiter „WordPress“, „Ghost“ und „Discourse“ zeigen dieselbe Box als Shortcode.

Code erzeugen – von überall im Dashboard

Du musst dafür nicht zur Website wechseln: Der Dialog „Code erzeugen“ steht überall im Dashboard bereit – über die Schaltfläche in der Seitenleiste oder das Tastenkürzel Alt + Umschalt + E. Auf der Seite eines Produkts und einer Liste öffnet „Als Box einbetten“ ihn mit dem Produkt bzw. der Liste schon gewählt.

1. Box-Art wählen und Produkt, Liste oder Produktberater aussuchen; die Optionen der Box stellst du darunter ein.
2. Hast du mehrere Websites mit Schlüssel, wählst du rechts oben die Website – ihr Schlüssel steht dann im Code. Die Vorschau zeigt die Box mit deinen echten Daten (für Owner und Admins).
3. Kopiere den Code in der passenden Form: „Website (HTML)“ mit Script-Tag und Platzhalter, „WordPress“ als Shortcode (z. B. [affilinode_product id="…"]) für Beiträge und Seiten, „Ghost“ oder „Discourse“.

Der Dialog liest nur: Er legt nichts an und ändert nichts, deshalb steht er allen Rollen zur Verfügung. Hast du noch keine Website mit Schlüssel, zeigt er den Weg dorthin; den Shortcode für WordPress kannst du trotzdem schon kopieren.

„beispiel.de“ gilt mit und ohne www, „*.beispiel.de“ für alle Subdomains. Ohne Domain funktioniert der Schlüssel nirgends. Der Schlüssel steht im Quelltext der Seite, kann aber nur lesen und wirkt nur auf den freigegebenen Domains.

Platzhalter

                  <script src="…/embed.js" data-key="DEIN-SCHLÜSSEL" async></script>
<div data-affilinode="product" data-id="asin:B0XXXXXXXX"></div>
<div data-affilinode="compare" data-ids="asin:B0XXXXXXXX,asin:B0YYYYYYYY"></div>
<div data-affilinode="list" data-list="<Listen-ID>"></div>
                

• Mit data-id: product (Box), compact (Zeile), offers (Preisvergleich), button, card (Karte), price-history (Preisverlauf, data-days), spare-parts (Ersatzteile), accessories (Zubehör).
• Mit data-ids: grid (Karten nebeneinander) und compare (Vergleichstabelle, bis 6 Produkte).
• list: Bestenliste mit data-list="<Listen-ID>" oder data-view="<Sicht>".
• picker: Vergleichswähler, Leser suchen selbst; data-type schränkt auf eine Produktart ein.
• deals: gesunkene Bestpreise, data-type, data-min (Mindestersparnis in %), data-limit und data-filter (nur Produkte mit bestimmten Eigenschaften, siehe unten).
• Mit data-id außerdem: rating (Testbewertung; data-criteria, data-proscons, data-button="0" blenden Teile aus), glance (Auf einen Blick; data-count, data-fields), energy (Folgekosten; data-compare, data-years, data-price) und alternatives (data-kinds="cheaper,better,successor", data-limit je Art).
• Ohne Produkt: search (Produktsuche; data-type, data-facets, data-per-page), advisor (Produktberater; data-id = ID des Beraters), compat (Kompatibilitäts-Check; data-system="hub:zigbee2mqtt", data-kind, data-product), top (Bester in der Kategorie; data-type, data-by="rating|value|field", data-field) und scatter (Preis-Leistungs-Diagramm; data-type, data-field, data-highlight).
• Mitten im Satz: <span data-affilinode="link" data-id="…"></span> (Textlink) und <span data-affilinode="field" data-id="…" data-field="price"></span> (einzelner Wert).
• Die Attribute heißen wie im WordPress-Plugin, nur mit data- davor und Bindestrich statt Unterstrich (per_page → data-per-page). Der Generator setzt nur, was vom Standard abweicht.
• Weitere Attribute: data-title (eigene Überschrift), data-title-style="short|detailed", data-limit.
• Am Script-Tag optional: data-locale, data-country, data-theme="light|dark|auto", data-accent (Farbe). Ohne data-locale gilt die Sprache der Seite aus <html lang> (Ghost, Discourse setzen sie selbst), ohne data-country das Land des Besuchers – die Sprache bestimmt nur die Texte.

Deals nach Eigenschaften filtern

Die Deal-Box kann auf Produkte mit bestimmten Eigenschaften eingeschränkt werden – etwa nur Smart-Home-Geräte, die Matter direkt unterstützen. Im Dialog „Code erzeugen“ trägst du den Filter im Feld „Merkmalsfilter“ ein; im Platzhalter heißt das Attribut data-filter, im Shortcode filter.

                  <div data-affilinode="deals" data-type="smart_plug" data-filter="matter=native"></div>
[affilinode_deals type="smart_plug" filter="matter=native;matter_version=1.3,1.4"]
                

• Form: eigenschaft=wert. Mehrere Werte derselben Eigenschaft trennst du mit Komma (ein Treffer genügt), mehrere Eigenschaften mit Strichpunkt (alle müssen passen). Beispiel: matter=native;matter_version=1.3,1.4 zeigt Produkte mit Matter direkt und der Matter-Version 1.3 oder 1.4.
• Die Eigenschaft ist der Schlüssel des Merkmals aus dem Datenblatt der Produktart (z. B. matter). Möglich sind Auswahlfelder, Mehrfachauswahl, Ja/Nein (true oder false) und Zahlen als Bereich (z. B. 18..36).
• Bei Auswahlwerten darfst du den Schlüssel oder die Bezeichnung schreiben, Groß- und Kleinschreibung ist egal.
• Produkte, bei denen die Eigenschaft nicht eingetragen ist, werden nicht gezeigt.
• Du kannst den Filter mit data-type kombinieren. Höchstens 5 Eigenschaften und 20 Werte je Eigenschaft.
• Ist ein Schlüssel oder Wert unbekannt, zeigt die Box nichts. In der Beispiel-Box (Demo-Schlüssel) wird der Filter nicht angewendet.

Deals mit Preisbezug und eigener Zielseite

Jeder Deal kann einen kurzen Hinweis tragen, der zeigt, warum der Preis interessant ist: „Günstigster Preis der letzten 90 Tage“ oder „12,50 € unter dem Durchschnitt anderer Händler“. Der Hinweis erscheint nur, wenn die aufgezeichneten Preise ihn belegen – bei zu kurzem Preisverlauf oder weniger als zwei weiteren Händlern mit aktuellem Preis steht keiner da. Amazon-Preise fließen nie in den Durchschnitt ein.

                  <div data-affilinode="deals" data-best="90" data-min-offers="2" data-link="https://example.org/geraete/{id}/"></div>
[affilinode_deals best="90" min_offers="2"]
                

• data-best (Shortcode best): zeigt nur Deals, deren Preis in den letzten 7 bis 365 Tagen der niedrigste war. Ohne genug Preisverlauf erscheint ein Deal dann nicht.
• data-min-offers (Shortcode min_offers): zeigt nur Deals, die bei mindestens so vielen Händlern (1 bis 10) aktuell lieferbar sind.
• data-link: Adresse deiner eigenen Seite je Deal, mit {id} (Produkt-ID) oder {gtin}, z. B. https://example.org/geraete/{id}/. Der Titel des Deals führt dann auf diese Seite; die Domain muss für deinen Einbettungs-Schlüssel freigegeben sein, sonst meldet die Box einen Fehler. Fehlt einem Produkt die GTIN, bleibt sein Titel ohne Link. Im WordPress-Plugin gibt es data-link nicht.
• Alle drei Angaben setzt du auch im Dialog „Code erzeugen“.

Alle weiteren Boxen

Auch die übrigen Boxen des WordPress-Plugins gibt es als Platzhalter – mit denselben Attributen wie die Shortcodes, als data-… mit Bindestrich (per_page wird data-per-page). Ihr Code wird erst nachgeladen, wenn eine davon auf der Seite steht; Seiten mit nur Produktboxen bleiben schlank.

                  <div data-affilinode="search" data-type="smartphone"></div>
<div data-affilinode="advisor" data-id="<Berater-ID>"></div>
<div data-affilinode="compat" data-system="hub:zigbee2mqtt"></div>
<div data-affilinode="alternatives" data-id="asin:B0XXXXXXXX"></div>
<div data-affilinode="top" data-type="smartphone" data-by="rating" data-limit="3"></div>
<div data-affilinode="glance" data-id="asin:B0XXXXXXXX"></div>
<div data-affilinode="scatter" data-type="smartphone" data-field="battery_capacity"></div>
<div data-affilinode="energy" data-id="<ID>" data-compare="<ID>" data-price="35"></div>
<div data-affilinode="rating" data-id="asin:B0XXXXXXXX"></div>
                

• search: Produktsuche mit Filtern (data-type, data-facets, data-per-page, data-view="grid|list", data-scope="site").
• advisor: Produktberater aus dem Dashboard, Frage für Frage (data-id, data-view).
• compat: „Passt das zu meinem …?“ – Besucher wählen ihr System; data-system wählt vor, data-choose="0" ohne Auswahl, data-product prüft ein Produkt.
• alternatives: günstiger, besser ausgestattet, Nachfolger (data-kinds, data-limit).
• top: Bester in der Kategorie nach Testnote, Preis-Leistung oder Datenblattwert (data-type, data-by, data-field, data-view="podium|grid|list", data-badge).
• glance: Auf einen Blick – Kernwerte mit Einordnung (data-count, data-fields, data-button="1").
• scatter: Preis-Leistungs-Diagramm (data-type, data-field, data-highlight, data-height, data-table="1").
• energy: Folgekosten nach EU-Energielabel, Besucher können die Annahmen ändern (data-compare, data-years, data-price in ct/kWh, data-water, data-cycles, data-hours).
• rating: deine Testbewertung mit Note, Kriterien, Pro und Contra (data-criteria="0", data-proscons="0", data-button="0").
• coupons: Gutscheine und Aktionen der Händler mit „Code anzeigen“ und Kopieren (data-merchant, data-product, data-shop = Shop-ID, data-kind="code,offer,free_shipping", data-limit bis 50). Unter einer Produktbox oder Karte: data-coupons="1".

Automatische Verlinkung

Mit data-autolink="1" am Script-Tag verlinkt das Script Produktnamen und Kategorien im Text deiner Seite – wie die automatische Verlinkung im WordPress-Plugin. "products" bzw. "categories" schränkt ein, data-autolink-max die Zahl der Links (Standard 3), data-autolink-shops="amazon,awin" die Shops in dieser Reihenfolge. Kategorien verlinken auf die Amazon-Suche mit deinem Tag. Nie verlinkt werden Links, Überschriften, Code, Formulare, Zitate und Elemente mit der Klasse no-autolink; weitere Bereiche nimmst du mit data-autolink-exclude=".kommentare, .sidebar" (CSS-Selektor) aus. Welcher Teil der Seite verlinkt wird, steuert data-links-scope (Standard: .gh-content, .cooked, article, main).

Ohne HTML zu schreiben geht es im Dashboard: Bei der Website unter „Einbettung“ im Generator den Reiter „Ghost & Foren“ öffnen und „Automatische Affiliate-Links“ wählen – Produkte und/oder Kategorien, Höchstzahl, Shops und Bereiche zum Ausnehmen. Der Generator erzeugt ein einzelnes Script-Tag, das du in die Seitenvorlage (vor dem schließenden Body-Tag) setzt. Das funktioniert auf jeder Website, nicht nur in Ghost und Foren: Amazon-Links tragen nur deinen Partner-Tag und laufen nie über eine Weiterleitung.

Ausprobieren mit Beispieldaten

Noch keine Produkte im Katalog? Der Generator zeigt die Vorschau dann mit Beispieldaten (Schalter „Mit Beispieldaten“) – auch, bevor ein Schlüssel angelegt ist. Für eigene Testseiten gibt es den öffentlichen Schlüssel data-key="demo": Er funktioniert auf jeder Domain und liefert erfundene Produkte, Marken und Shops (zum Beispiel data-id="nw-x5" oder data-list="smartphones-bestenliste").

                  <script src="…/embed.js" data-key="demo" async></script>
<div data-affilinode="product" data-id="nw-x5"></div>
<div data-affilinode="compare" data-ids="nw-x5,lm-pixel-s"></div>
                

Passend zum Inhalt (Kontext-Skript)

Die Darstellung „Passend zum Inhalt (Kontext-Skript)“ sucht die Produkte selbst: Das Script liest Titel, Überschriften und den Anfang des Haupttexts der Seite (höchstens 2.000 Zeichen) und zeigt passende, lieferbare Produkte aus deinem Katalog als Karten – mit der Überschrift „Passend zum Artikel“, Anzeige-Kennzeichnung und Affiliate-Hinweis. Gelesen wird der Hauptinhalt (ein Element mit data-affilinode-content, sonst article bzw. main); Navigation, Kopf- und Fußbereich und Seitenleisten bleiben außen vor.

                  <script src="…/context.js" data-key="DEIN-SCHLÜSSEL" async></script>
<div data-affilinode="context" data-limit="3"></div>

<!-- oder ohne Platzhalter: Box automatisch nach dem 3. Absatz -->
<script src="…/context.js" data-key="DEIN-SCHLÜSSEL" data-context-after="3" async></script>
                

• Ohne Platzhalter und ohne data-context-after liest und sendet das Script nichts.
• Gesendet werden nur der Seitentext und die Adresse der Seite (ohne Parameter) – keine Besucherdaten, keine Cookies. affilinode speichert den Text nicht; das Ergebnis je Seite wird zehn Minuten zwischengespeichert.
• context.js ist dasselbe Script wie embed.js – beide Adressen funktionieren, auf einer Seite genügt eines.
• Die Darstellung ist im Tarif Publisher enthalten; zu anderen bezahlten Tarifen buchst du sie als Zusatz „Contextual Ads“ unter „Abrechnung“ (monatlich kündbar). Ohne bleibt die Box auf deinen Seiten leer; der Generator zeigt dann einen Hinweis, die Live-Vorschau (mit einem Beispielartikel über Kopfhörer oder deinem eigenen Beispieltext) funktioniert trotzdem.

Inhalte per API

Besser als der Text aus dem Browser: Deine Website liefert ihre Beiträge direkt an affilinode. Dann wird jeder Beitrag einmal je Fassung analysiert, und das Script fragt nur noch mit der Adresse der Seite. Einrichten unter Websites → deine Website → „Inhalte“: WordPress (öffentliche REST-API), Discourse (neue und aktive Themen) und Ghost (Content API mit dem Content-API-Key) ruft affilinode stündlich ab; Discourse und Ghost melden Änderungen zusätzlich sofort per Webhook. Mit dem WordPress-Plugin geht es ohne Abruf: Einstellungen → „Passend zum Artikel“ → „Beiträge … an affilinode übermitteln“, danach einmal „Alle Beiträge jetzt übermitteln“.

• Gespeichert wird nur reiner Text (ohne HTML, höchstens 12.000 Zeichen), Titel und Adresse – keine Besucherdaten. Gelöschte, zurückgezogene oder geschützte Beiträge werden ausgeblendet.
• Eigene Anbindung: POST /v1/content mit dem API-Schlüssel der Website, bis 50 Beiträge je Aufruf. Für serverseitige Darstellung gibt es GET /v1/content/context?url=… (im WordPress-Plugin [affilinode_context]).
• Im Reiter „Inhalte“ siehst du, wie viele Beiträge affilinode kennt, wann zuletzt abgerufen wurde und ob ein Abruf scheiterte.

WordPress-Multisite: zentral oder je Unterseite

Hat deine Website Unterseiten (WordPress-Multisite, siehe Tracking-IDs → Unterseiten), wählst du oben im Reiter „Inhalte“, wie die Inhalte geführt werden: „Ganze Website zentral“ zeigt eine Übersicht für alles. „Je Unterseite“ zeigt jede Unterseite einzeln – mit Anzahl, Stand der KI-Analyse, den letzten Beiträgen, eigenen Quellen, einem Schalter „Contextual Ads für diese Unterseite“ und einem eigenen Knopf zum Löschen. Inhalte ohne Unterseite (etwa aus Discourse oder Ghost) stehen dort unter „Ohne Unterseite“.

• Ohne eigene Wahl entscheidet affilinode automatisch: „Je Unterseite“, sobald Unterseiten erkannt sind und das Plugin Beiträge mit Blog-ID übermittelt – sonst zentral.
• Ist eine Unterseite ausgeschaltet, nimmt affilinode ihre Beiträge nicht mehr an, und „Passend zum Inhalt“ arbeitet dort wie ohne gespeicherte Inhalte. Bereits Gespeichertes bleibt, bis du es löschst; gelöschte Beiträge verwirft affilinode weiterhin sofort.
• Die Schalter gelten nur im Modus „Je Unterseite“. Wählst du „Ganze Website zentral“, sind wieder alle Unterseiten angebunden.
• Eine eigene Quelle je Unterseite gibt es für WordPress (REST-API der Unterseite). Mit dem Plugin brauchst du sie nicht.

Contextual Ads+ (KI-Analyse)

Mit Contextual Ads+ liest ein Sprachmodell jeden gelieferten Beitrag: Will hier jemand etwas kaufen? Welche Produktart, welches Budget, welche Eigenschaften sind Pflicht („muss Zigbee können“, „bis 300 €“)? Die Box zeigt dann genau solche Produkte und unter jedem Titel den Grund, zum Beispiel „Passt: Zigbee, unter 300 €“. Die Analyse läuft einmal je Fassung, nie je Seitenaufruf.

• **Welches Modell:** das eigene Modell von affilinode oder Gemini über Google Cloud Vertex AI mit Rechenzentrum in der EU – nie andere externe Anbieter. Fällt Vertex AI aus, übernimmt das eigene Modell.
• **Was vorher entfernt wird:** Kommentarbereiche, E-Mail-Adressen, Telefonnummern und Links zu Personen (Profile, Autorenseiten); andere Links werden auf die Domain gekürzt, der Text auf den Anfang. Google nutzt die Inhalte nicht zum Training.
• **Im Tarif enthalten** ist Contextual Ads+ in Publisher (oder als Zusatz). **Ohne** schaltest du es je Website über Credits ein: Websites → deine Website → „Inhalte“ → „KI-Analyse über Credits erlauben“ (Standard aus). Jede analysierte Fassung eines Beitrags kostet dann Credits (Startpreis 2 Credits); unveränderte Beiträge werden nicht erneut berechnet, gescheiterte Analysen kosten nichts. Reicht das Guthaben nicht, pausiert die Analyse.

Shortcodes und Produktlinks im Text

Für Blogs und Foren, in deren Beiträgen du kein HTML setzen kannst, versteht das Script weitere Angaben am Script-Tag. Den passenden Code erzeugt der Reiter „Ghost & Foren“ unter „Code erstellen“; Platzhalter brauchst du dann keine.

• data-shortcodes="1": Shortcodes wie [affilinode_product id="…"] im Text werden zu Boxen – mit denselben Namen und Attributen wie im WordPress-Plugin.
• Mitten im Satz: [affilinode_link id="…" text="…"] wird zum Textlink, [affilinode_field id="…" field="price"] zum einzelnen Wert (price, title, link, button, shop, availability, stars, rating, reviews, brand, list_price, percentage_saved, last_update, thumb, asin). Beide bleiben an ihrer Stelle im Text und sehen aus wie die Links und der Text deiner Seite; statt id geht auch asin="…". Weitere Attribute: shop="amazon|ebay|awin", price="1" (Preis im Linktext), hide_unavailable="1". Links sind wie in den Boxen als Werbung gekennzeichnet (rel="sponsored", Hinweis beim Darüberfahren, Preise mit *).
• data-links="box" bzw. "compact": Amazon-, eBay- und Awin-Links sowie Links auf Angebote aus deinem Katalog werden zu Boxen bzw. Zeilen, höchstens data-links-max je Beitrag (Standard 3). Links in Zitaten und Code bleiben unverändert.
• data-links-scope: CSS-Selektor des Beitragsinhalts, falls das Script ihn nicht selbst findet.
• Gesendet werden dafür nur die Link-Adressen, keine Besucherdaten.

Klicks an dein Analytics

Mit data-analytics="ga4,gtm,umami,matomo" am Script-Tag meldet das Script Klicks auf Shop-Links an die genannten Dienste – nur an die, die deine Seite schon lädt (gtag, dataLayer, umami, _paq/_mtm). Ohne das Attribut wird nichts gemeldet. data-analytics-event setzt den Ereignisnamen für GA4, Tag Manager und Umami (Standard affiliate_click).

• Mitgeschickt werden shop, product (affilinode-ID), product_name (gekürzt), box_kind (Darstellung), position (in Bestenlisten) und link_domain (nur die Domain, nie die Affiliate-URL). Preise schickt die Einbettung nicht mit.
• Die Daten gehen an deinen Analytics-Dienst, nicht an affilinode. Die Einwilligung regelt dein Consent-Tool: Lädt es den Tracker erst nach der Zustimmung, meldet das Script vorher nichts.

Abgewiesene Domains

Ruft eine nicht freigegebene Domain die Boxen ab, bleiben sie dort leer. Solche Domains stehen beim Schlüssel unter „Abgewiesene Domains (30 Tage)“ und zusätzlich als Aufgabe. Ist es deine eigene Domain, klickst du „Freigeben“. Ist es eine fremde Domain, wurde dein Code kopiert – dann im Zweifel den Schlüssel widerrufen und neu anlegen.