Zum Inhalt springen
Alle Artikel

Produktanleitungen

Social Proof auf WordPress und WooCommerce ohne Plugin

Installiere Provedly auf WordPress mit einem einzigen wp_footer-Hook, sende WooCommerce-Bestellungen an die Records API und erfahre, welche Bestellungen als Verified gelten.

Provedly-Team··6 Min. Lesezeit

Du brauchst kein weiteres WordPress-Plugin, um Kaufbenachrichtigungen anzuzeigen. Ein vierzeiliger wp_footer-Hook lädt das Provedly-Script, und ein zweiter Hook auf woocommerce_payment_complete sendet jede bezahlte Bestellung an die Records API. Das Einzige, was du vorab verstehen musst, ist, welche dieser Bestellungen das Kennzeichen „Verifizierter Kauf“ tragen können, denn die Antwort hängt davon ab, wie dein Checkout mit Stripe kommuniziert.

Lieber ein Plugin? Provedly gibt es jetzt auf WordPress.org. Es lädt Widget und Leisten, legt den signierten WooCommerce-Webhook für dich an (sodass jede bezahlte Bestellung das Verifizierungszeichen bekommt) und übergibt die Besucher-ID für die Zuordnung, ganz ohne Code. Siehe Provedly ist jetzt auf WordPress.org. Der handgeschriebene Weg unten funktioniert weiterhin, wenn du lieber kein Plugin hinzufügen willst.

Das Script mit wp_footer installieren

Füge das in die functions.php deines Child-Themes ein. Wenn du kein Child-Theme hast, leg zuerst eines an; wenn du das Eltern-Theme bearbeitest, verlierst du die Änderung beim nächsten Theme-Update.

add_action('wp_footer', function () {
    echo '<script src="https://provedly.app/w/widget.js" data-token="pp_your_token" async defer></script>';
});

Das ist die ganze Installation. Das Script ist etwa 6 KB gzipped groß, lädt asynchron und rendert in einem Shadow DOM, sodass sich das CSS deines Themes und das des Widgets nie begegnen. Caching-Plugins sind kein Problem; das Tag selbst ist statisch, und das Widget holt seine Konfiguration beim Laden selbst von Provedly.

Wenn dein Hoster functions.php sperrt, kannst du bei den meisten Block-Themes dasselbe Tag als Block „Individuelles HTML“ in einen Footer-Template-Teil einfügen. So oder so sollte das Tag einmal pro Seite vorkommen.

Entscheiden, wo es erscheint

Das URL-Targeting von Provedly erledigt die Frage „nicht auf der Checkout-Seite“ ohne PHP-Bedingungen. Stell das Widget im Dashboard auf „all except“ und liste /checkout/*, /my-account/* und /cart/ auf. Jemandem, der gerade bezahlt, den Kauf eines Fremden zu zeigen, lenkt ab, statt zu ermutigen.

Das Geräte-Targeting liegt an derselben Stelle. Auf schmalen Bildschirmen konkurriert ein Toast mit dem In-den-Warenkorb-Button, deshalb zeigen manche Shops Toasts nur auf dem Desktop und den Live-Besucherzähler auf beiden.

WooCommerce-Bestellungen an die Records API senden

WooCommerce löst woocommerce_payment_complete aus, sobald eine Bestellung bezahlt ist. Häng dich daran, bau die Nutzlast und sende sie von Server zu Server. Der API-Key gilt pro Widget und liegt im Tab Data; bewahre ihn in wp-config.php auf, nicht im Theme.

add_action('woocommerce_payment_complete', function (int $order_id) {
    $order = wc_get_order($order_id);
    if (! $order) {
        return;
    }

    $item = current($order->get_items());

    wp_remote_post('https://provedly.app/api/v1/widgets/pp_your_token/records', [
        'headers' => [
            'Authorization' => 'Bearer ' . PROVEDLY_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body' => wp_json_encode([
            'name'         => $order->get_billing_first_name() . ' ' . $order->get_billing_last_name(),
            'city'         => $order->get_shipping_city() ?: $order->get_billing_city(),
            'state'        => $order->get_shipping_state() ?: $order->get_billing_state(),
            'country'      => $order->get_shipping_country() ?: $order->get_billing_country(),
            'product_name' => $item ? $item->get_name() : null,
            'price'        => wp_strip_all_tags($order->get_formatted_order_total()),
            'external_id'  => (string) $order->get_id(),
            'occurred_at'  => $order->get_date_paid()->format(DATE_ATOM),
        ]),
        'timeout' => 5,
    ]);
});

Ein paar Hinweise zu den Feldern. country muss der zweistellige ISO-Code sein, den WooCommerce ohnehin speichert. external_id macht den Aufruf idempotent; wenn der Hook für eine Bestellung zweimal feuert, liefert der zweite Request 422, und nichts wird dupliziert. Der Name, den du sendest, wird von deiner Einstellung für das Namensformat umformatiert, bevor ihn jemand sieht, den vollen Namen zu senden ist also in Ordnung; standardmäßig zeigt das Widget „Sarah M.“.

Welche Bestellungen das Verifizierungszeichen bekommen

Jetzt der ehrliche Teil. Provedly markiert einen Kauf nur dann als „Verified“, wenn er über einen signierten Webhook von Stripe, Shopify oder WooCommerce ankommt. Der eigene Bestell-Webhook von WooCommerce, signiert mit einem Secret, das über die WooCommerce-Verbindung mit Provedly geteilt wird, erfüllt das. Bestellungen, die du aus deinem eigenen Hook an die Records API postest, werden, so echt sie auch sind, als „Imported“ gekennzeichnet, weil Provedly nicht beweisen kann, dass sie stattgefunden haben.

Wie die Bestellung zu Provedly kommt Angezeigtes Label
Stripe-Webhook, checkout.session.completed, Signatur gültig Verifizierter Kauf
Signierter WooCommerce-Bestell-Webhook, Signatur gültig Verifizierter Kauf
Records API aus woocommerce_payment_complete Imported
CSV-Import früherer Bestellungen Imported

Ob dein WooCommerce-Shop den Stripe-Webhook nutzen kann, hängt von deinem Zahlungs-Gateway ab. Die Stripe-Quelle von Provedly lauscht auf checkout.session.completed, das Event, das Stripe sendet, wenn eine gehostete Checkout Session abgeschlossen ist. Manche WooCommerce-Integrationen für Stripe nutzen den gehosteten Checkout; viele nutzen Kartenfelder auf der eigenen Seite auf Basis von Payment Intents, die dieses Event nicht auslösen. Prüf die Einstellungen deines Gateways. Wenn es Checkout Sessions erzeugt, registriere https://provedly.app/api/hooks/stripe/{token} als Webhook-Endpunkt in deinem Stripe-Dashboard und füge das whsec_-Secret im Tab Data des Widgets ein; die Anleitung steht in Stripe-Webhooks für verifizierte Käufe. Wenn nicht, nutze die WooCommerce-Verbindung oder den Records-API-Hook oben und akzeptiere das Label Imported. Deine Besucher können trotzdem auf das Badge klicken und auf der öffentlichen Verifizierungsseite genau sehen, woher die Daten stammen.

Mit CSV nachträglich befüllen

Ein neues Widget ohne Historie zeigt in den ersten Stunden nichts. Exportiere die Bestellungen des letzten Monats aus WooCommerce (Bestellungen, Exportieren, oder ein beliebiges Export-Tool), benenne die Spalten in name,city,state,country,product_name,price,occurred_at um und importiere sie im Tab Data. Nur name ist Pflicht. Zeilen, die älter als dein Rückblickzeitraum sind, werden gespeichert, aber nicht angezeigt. Details in Frühere Bestellungen per CSV importieren.

Zuordnung

Wenn das Dashboard proof-unterstützte Bestellungen zählen soll, füge die Besucher-ID zur Nutzlast hinzu. Auf der Checkout-Seite liefert window.Provedly?.visitorId() sie; speichere sie in einem versteckten Feld oder in der Session und sende sie als visitor im Aufruf der Records API. Die Zuordnung basiert auf der Besucher-ID mit einem 30-Tage-Fenster und wird nie geschätzt, ohne die ID meldet das Dashboard also schlicht nichts statt einer Vermutung.

Häufige Fragen

Macht das meine WordPress-Website langsamer?

Das Tag ist async defer, das Bundle ist etwa 6 KB gzipped groß, und das Widget wartet standardmäßig 3 Sekunden vor dem ersten Toast. Es blockiert das Rendering nicht und verursacht keinen Layout-Shift.

Kann ich statt functions.php ein Plugin für Code-Snippets nutzen?

Ja. Jeder Mechanismus, der das Tag einmal pro Seite im Footer ausgibt, funktioniert. Der Punkt bei „ohne Plugin“ ist, dass du kein eigenes Social-Proof-Plugin mit eigenen Datenbanktabellen und Admin-Bildschirmen brauchst.

Warum nicht einfach ein paar Käufe eintippen, um loszulegen?

Das kannst du. Von Hand hinzugefügte Zeilen erscheinen als Sample, und Zeilen aus CSV oder der API als Imported. Eingetippte Zahlen, die als Live-Aktivität dargestellt werden, sind genau das, was Behörden inzwischen beim Namen nennen; die Regel der FTC zu gefälschten Bewertungen und Testimonials ist Ende 2024 in Kraft getreten. Labels halten dich davon fern.

Der Free-Plan deckt eine Website, ein Widget und 2.000 Impressionen pro Monat ab, verifizierte Käufe inklusive: Pläne ansehen.

wordpresswoocommerceinstallation

Neue Artikel per E-Mail erhalten

Ehrlicher Social Proof, verifizierte Käufe und was die Conversion wirklich bewegt. Höchstens ein paar E-Mails im Monat; Abmelden mit einem Klick.

Wir schicken dir eine E-Mail zur Bestätigung. Deine Adresse wird nur für diesen Newsletter verwendet; siehe Datenschutzerklärung (auf Englisch).

Zeig Proof, hinter dem du stehen kannst.

Kostenloser Plan, eine Website, 2,000 Impressionen im Monat, verifizierte Käufe inklusive. Im kostenlosen Plan verlinkt das Badge auf deine Verifizierungsseite, und genau darum geht es.