# Das Tag einbinden Das Script-Tag von punchout.dev, wo es in Shopware, WooCommerce, Magento und jedem anderen Shop hingehört, die erlaubten Origins, die Warenkorb-URL-Muster und die vier CSP-Zeilen. URL: https://punchout.dev/de/docs/getting-started/install-the-tag/ Diese Seite zeigt, wie Sie das Script-Tag von punchout.dev in Ihren Shop einbauen und was Sie außerdem einstellen müssen, damit Browser und punchout.dev es akzeptieren. ## Das Tag Das Portal zeigt das Tag im Tab **Einbindung** des Shops unter **Script-Tag**. Es sieht so aus: ```html ``` | Teil | Bedeutung | | --- | --- | | `src` | Das Script, ausgeliefert von `js.punchout.dev`. Der Tab Einbindung zeigt es als **Snippet-URL**. | | `async` | Das Script hält das Rendern der Seite nie auf. | | `data-shop-id` | Ihre **Shop-ID**, `pob_live_` plus 22 Zeichen. Sie ist öffentlich: Sie benennt den Shop und berechtigt zu nichts. | Ohne `data-shop-id` bleibt das Tag wirkungslos. Binden Sie das Tag auf jeder Seite des Shops ein, am besten im Layout-Template vor ``. Ein Punchout landet auf Ihrer Landing-Seite, und der Einkäufer klickt sich von dort zum Warenkorb. Auf jeder Seite dieses Wegs muss das Tag vorhanden sein. ## Wo das Tag hingehört Die drei Shop-Plugins geben das Tag selbst aus. Ist ein Plugin installiert, fügen Sie das Tag nicht zusätzlich ein, sonst steht es auf jeder Seite zweimal. Der Tab **Einbindung** bietet den Plugin-Download und die Installationsschritte an, wenn unter **Allgemein** → **Shopsystem** Shopware, WooCommerce oder Magento eingestellt ist. Ohne Plugin hängt die richtige Stelle von Ihrem Theme ab. Die folgenden Hinweise beschreiben, wo Shops auf der Plattform das Tag üblicherweise einfügen. punchout.dev hat sie nicht für Ihr Theme geprüft. ### Shopware 1. Laden Sie im Tab **Einbindung** das Plugin herunter und laden Sie es in Shopware unter **Erweiterungen** hoch. 2. Aktivieren Sie es und tragen Sie in seiner Konfiguration die **Shop-ID** und die **Snippet-URL** ein. Das Plugin markiert außerdem den Warenkorb für die Warenkorb-Erkennung und übernimmt den Auto-Login, siehe [Shopware 6](https://punchout.dev/de/docs/plugins/shopware/). Ohne Plugin setzen Shops das Tag meist in den Footer des Storefront-Themes oder binden es über einen Tag-Manager ein. ### WooCommerce 1. Laden Sie im Tab **Einbindung** das Plugin herunter. Öffnen Sie in WordPress **Plugins**, fügen Sie mit **Plugin hochladen** ein neues Plugin hinzu und aktivieren Sie es. 2. Tragen Sie unter **WooCommerce → punchout.dev** die **Shop-ID**, die **Snippet-URL** und die Public-Key-Zeilen ein. Mehr dazu unter [WooCommerce](https://punchout.dev/de/docs/plugins/woocommerce/). Ohne Plugin steht das Tag häufig in der `footer.php` des Themes oder in einem Script-Feld, das manche Themes im Customizer anbieten. ### Magento 1. Laden Sie im Tab **Einbindung** das Modul herunter und entpacken Sie es nach `app/code`. Das Archiv enthält bereits `PunchoutDev/Bridge`. 2. Führen Sie die folgenden Befehle aus und tragen Sie danach unter **Stores → Configuration → punchout.dev** die **Shop-ID**, die **Snippet-URL** und die Public-Key-Zeilen ein. ```bash bin/magento module:enable PunchoutDev_Bridge bin/magento setup:upgrade bin/magento cache:flush ``` Mehr zum Modul unter [Magento 2](https://punchout.dev/de/docs/plugins/magento/). Ohne Modul setzen Shops das Tag meist in die Footer-Scripts der Design-Konfiguration unter **Content → Design → Configuration**. ### Jeder andere Shop Kopieren Sie das Tag in das Layout-Template des Shops oder binden Sie es über einen Tag-Manager ein. Bei Shopify gehört es üblicherweise in die `theme.liquid` des Themes (**Onlineshop → Themes → Code bearbeiten**). Lassen Sie danach punchout.dev Ihren Warenkorb per Setup-Link finden ([Warenkorb-Erkennung](https://punchout.dev/de/docs/getting-started/cart-detection/)), oder markieren Sie ihn selbst, indem Sie dem Element mit den Positionen das Attribut `data-punchout-cart` geben. Wollen Sie mehr als das Tag einbauen, etwa einen Auto-Login, lesen Sie [Eigene Integration](https://punchout.dev/de/docs/plugins/custom/). ## Erlaubte Origins punchout.dev arbeitet nur auf den Origins, die für den Shop eingetragen sind. Die Liste pflegen Sie im Tab **Allgemein** unter **Erlaubte Origins**. | Regel | Detail | | --- | --- | | Format | `https://shop.example`: Schema, Host und Port, kein Pfad, keine Query | | Abgleich | Exakt. `https://www.shop.example` und `https://shop.example` sind zwei Origins. Tragen Sie beide ein, wenn beide den Shop ausliefern | | Anzahl | 1 bis 5 Origins | | Im Produktivbetrieb | `https` und ein öffentlicher Hostname | | Erster Eintrag | Dort landen Punchout-Launches und Setup-Links | Auf einer Seite, deren Origin nicht eingetragen ist, läuft kein Punchout, und das Tag bleibt still. ## Warenkorb-URL-Muster Unter Tab **Allgemein** → **Erweiterte Einstellungen** → **Warenkorb-URL-Muster** tragen Sie bis zu 10 reguläre Ausdrücke ein, etwa `^/checkout/cart`. punchout.dev vergleicht sie mit Pfad und Query der Seite und unterscheidet dabei nicht zwischen Groß- und Kleinschreibung. Die Muster wirken nur, solange der Shop weder den Plugin-Marker noch einen **Container-Selector** hat ([Warenkorb-Erkennung](https://punchout.dev/de/docs/getting-started/cart-detection/)). Dann legen sie fest, auf welchen Seiten das Panel den Warenkorb liest: - Mit Mustern gelten nur Seiten als Warenkorb, deren Adresse auf eines davon passt. - Ohne Muster erkennt das Panel Warenkorbseiten selbst, an den üblichen Warenkorb-Adressen und am Inhalt der Seite. Ihre Muster bestimmen auch, welche Seiten für die Warnung „Der Warenkorb wird nicht mehr gefunden“ im Tab **Nutzung** als Warenkorbseiten zählen. Sobald der Warenkorb markiert oder erkannt ist, schränken die Muster nicht mehr ein, wo der Warenkorb gelesen wird. ## Content-Security-Policy Sendet Ihr Shop einen `Content-Security-Policy`-Header, muss dieser vier Quellen freigeben. Sonst blockiert der Browser das Panel oder die Übergabe. Der Tab **Einbindung** zeigt die vier Zeilen für Ihren Shop unter **Content-Security-Policy**: ```txt script-src https://js.punchout.dev connect-src https://api.punchout.dev style-src 'unsafe-inline' form-action https://procurement.customer.example:* ``` | Direktive | Warum | | --- | --- | | `script-src` | Das Panel lädt von `js.punchout.dev`. | | `connect-src` | Das Panel kommuniziert mit `api.punchout.dev`. | | `style-src 'unsafe-inline'` | Die Styles des Panels sind inline. | | `form-action` | Der Warenkorb wird von der Shopseite aus an das Einkaufssystem übergeben. Eine strenge `form-action`-Regel blockiert das ohne sichtbare Fehlermeldung. | Das Portal bildet die Zeile `form-action` aus Tab **Allgemein** → **Erlaubte Rücksprung-Hosts**, mit einer Quelle `https://:*` je Host. Der Port ist offen (`:*`), weil punchout.dev nur Hostnamen vergleicht und SAP-Systeme oft auf anderen Ports als 443 antworten. Solange **Erlaubte Rücksprung-Hosts** leer ist, zeigt das Portal den Platzhalter `https://buyer-system.example`. Ersetzen Sie ihn durch die Hosts der Einkaufssysteme Ihrer Kunden. :::caution Der [Test-Punchout](https://punchout.dev/de/docs/getting-started/test-punchout/) schickt seinen Warenkorb an `https://api.punchout.dev`. Solange Sie ihn nutzen, muss `form-action` auch `https://api.punchout.dev` erlauben. Schränkt Ihr Shop **Erlaubte Rücksprung-Hosts** ein, tragen Sie dort auch `api.punchout.dev` ein. Die Zeile `form-action` im Tab **Einbindung** nimmt ihn dann auf. ::: Ergänzen Sie diese Quellen in den Direktiven, die Ihre Policy schon hat. Ersetzen Sie Ihre Policy nicht durch diese Zeilen. ## Prüfen, ob das Tag läuft Ein gewöhnlicher Seitenaufruf zeigt nichts, weil das Tag ohne Punchout oder Setup-Link still bleibt. Zuverlässig prüfen Sie es mit dem nächsten Schritt: Erzeugen Sie einen Setup-Link und lassen Sie Ihren Warenkorb erkennen ([Warenkorb-Erkennung](https://punchout.dev/de/docs/getting-started/cart-detection/)). Eine erfolgreiche Erkennung beweist, dass das Tag auf Ihrer Warenkorbseite läuft. Der Checklisten-Schritt **Snippet eingebunden** im Tab **Einrichtung** wird nach der ersten erfolgreichen Warenkorb-Erkennung per Setup-Link oder nach dem ersten Punchout-Launch des Shops grün. Ein gehosteter Launch per OCI, cXML oder IDS Connect zählt ebenfalls und erreicht punchout.dev, bevor sich Ihr Shop öffnet. Ein grüner Schritt allein beweist deshalb nicht, dass das Tag installiert ist. **Prüfen** am Schritt lädt ihn neu, und der Tab **Warenkorb** zeigt den Zeitpunkt unter **Snippet zuerst gesehen**. ## Was das Tag bei einem normalen Besuch tut Nichts. Ohne Punchout oder Setup-Link zeigt das Tag kein Panel und sendet nichts über das Netz. Aktiv wird es nur in zwei Fällen: - **Ein Punchout.** Ein Einkaufssystem hat den Shop aufgerufen. Das Tag zeigt das Panel, liest den Warenkorb, sobald der Einkäufer die Warenkorbseite öffnet, und übergibt ihn auf Klick des Einkäufers. Ein Punchout dauert höchstens vier Stunden. - **Setup-Modus.** Sie haben einen Setup-Link geöffnet. Siehe [Warenkorb-Erkennung](https://punchout.dev/de/docs/getting-started/cart-detection/). Für den Datenschutz gilt: - Das Tag liest keine Cookies des Shops. - Es sendet nichts ohne laufenden Punchout oder Setup-Link. - Es setzt nie ein Geheimnis in eine URL und entfernt die Launch-Parameter aus der Adressleiste. - Es übergibt den Warenkorb nur an eine `http`- oder `https`-Adresse. Mehr unter [Sicherheit und Datenschutz](https://punchout.dev/de/docs/account/security-and-privacy/).