    ← Dokumentation / PlentyShop PWA
  

    NUXT 3 // VUE 3 // ALOKAI MODUL (V3.7.4)
  

PlentyShop PWA Dokumentation & Setup-Handbuch

Technischer Leitfaden für das smblnc-gtm-tracking-pwa Nuxt-Modul (v3.7.4): B2B-Lizenzsystem, Google Tag Manager, Consent Mode v2, serverseitiges Klaviyo, OpenAI Pixel und Site Editor Integration mit 1-Klick-Kopierbuttons.

Zum PWA Web-Konfigurator → Zur Installation & Nuxt-Setup ↓ Zum Site Editor Setup ↓

    SCHRITT-FÜR-SCHRITT // INSTALLATION & NUXT-SETUP
  

Installation & Integration in PlentyShop PWA

Das Modul smblnc-gtm-tracking-pwa ist vollständig für Nuxt 3, Vue 3 und Alokai (Vue Storefront) optimiert. Folgen Sie dieser Schritt-für-Schritt-Anleitung für eine fehlerfreie Einbindung und Bereitstellung.

1. Modul & B2B-Lizenzschlüssel in nuxt.config.ts einbinden

Fügen Sie das Modul in Ihrer PWA-Codebase unter apps/web/nuxt.config.ts ein und tragen Sie Ihren persönlichen smblnc Lizenzschlüssel ein:

// apps/web/nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@plentymarkets/shop-core',
    '@plentymarkets/shop-module-mollie',
    '@smblnc/smblnc-gtm-tracking-pwa', // oder './modules/gtm-tracking'
    // ... weitere Module
  ],

  // smblnc B2B-Lizenzschluessel (von smblnc.de bereitgestellt)
  gtmTracking: {
    licenseKey: 'SMBLNC-PWA-XXXX-XXXX-XXXX-XXXX',
  },
});

        Alternative Eingabe via .env Datei (Empfohlen für CI/CD & Docker):
      

Statt in nuxt.config.ts können Sie den Lizenzschlüssel auch als Umgebungsvariable in .env hinterlegen:

        NUXT_PUBLIC_SMBLNC_LICENSE_KEY=SMBLNC-PWA-XXXX-XXXX-XXXX-XXXX
      

        ✓ Automatischer Entwicklungs- & Staging-Bypass
      

Test-, Staging- und CI/CD-Domains (localhost, 127.0.0.1, *.vercel.app, *.netlify.app, *.plentymarkets-cloud01.com) sind vollautomatisch freigeschaltet und benötigen keinen Lizenzschlüssel.

        ✓ Automatische Schutzfunktionen inklusive
      

Automatisches Ausblenden des alten Plenty-Drawers: Das Modul blendet den veralteten GA4-Drawer im Site Editor automatisch aus (disabledEditorSettings).
Schutz vor Doppel-Tracking: Sollte @plentymarkets/shop-module-gtag noch aktiv sein, unterdrückt unser Modul dessen Skripte automatisch via app:resolve-Hook.

2. PlentyShop Site Editor öffnen & Drawers konfigurieren

Öffnen Sie den PlentyShop Site Editor im Plentymarkets Backend.
Klicken Sie in der linken vertikalen Werkzeugleiste auf das Zielscheiben-Icon („Tracking & Analytics“).
Es öffnet sich das Einstellungsmenü mit sämtlichen Accordion-Drawers für Google Tag Manager, GA4, Ads, Meta Pixel, Microsoft Ads, Pinterest, Klaviyo, etc.

3. Google Tag Manager aktivieren & Consent Mode v2

Öffnen Sie den Drawer Google Tag Manager.
Aktivieren Sie die Checkbox Enable Google Tag Manager.
Hinterlegen Sie Ihre Container-ID (z. B. GTM-XXXXXXX).
Setzen Sie Cookies that should be registered auf no-cookies (GTM setzt keine eigenen Cookies).

Consent Mode v2: Das Modul initialisiert den Google Consent Mode v2 standardmäßig im Status denied (Essenziell). Sobald der Kunde im PWA Cookie-Banner einwilligt, werden die Signale reaktiv via gtag('consent', 'update', ...) und Event consentChanged freigeschaltet.

4. Wichtiger Tipp: Google Merchant Center (GMC) & Google Ads Dashboard

Im vorkonfigurierten GTM Web-Container übermittelt das Tag Google Ads - Bestellbestaetigung / Kauf Verkaufsdaten auf Produktebene (Einkaufswagendaten):

        ⚠ Vermeidung gelber Warnmeldungen im Google Ads Dashboard
      

Haben Sie ein aktives Google Merchant Center Konto (Shopping / PMax)?
→ Lassen Sie die Option „Verkaufsdaten auf Produktebene angeben“ aktiviert und tragen Sie Ihre Merchant Center ID in der GTM-Variable Google Merchant Center ID ein.

Haben Sie KEIN Merchant Center Konto?
→ Deaktivieren (entfernen) Sie im Tag Google Ads - Bestellbestaetigung / Kauf einfach den Haken bei „Verkaufsdaten auf Produktebene angeben“.
Effekt: Google Ads erfasst Umsatz, Transaktionen und Enhanced Conversions weiterhin zu 100%. Sie verhindern jedoch die lästige Warnmeldung („Es wurde keine übereinstimmende Merchant Center-ID gefunden“) im Ads-Diagnose-Center.

5. PWA Build & Deployment

Bauen und deployen Sie Ihre PlentyShop PWA mit den Standard-Befehlen:

      pnpm build
    

Nach dem Rollout ist das Tracking vollständig SSR-fähig aktiv. Das PWA Cookie-Banner synchronisiert alle Zustände in Echtzeit mit dem Google Tag Manager.

2. Features in Version 3.7.x

NEU IN V3.7.4

B2B-Lizenzsystem & Schutz

Offline HMAC-SHA256 Schutz mit 24h-Heartbeat gegen smblnc.de. Entwicklungs- und Preview-Umgebungen (Vercel, Netlify, Cloud01) sind vollautomatisch freigeschaltet.

NEU IN V3.7.0

Serverseitiges Klaviyo sGTM

Serverseitige Weiterleitung von Active on Site, View Item, Add to Cart und Purchase an Klaviyo über sGTM. Schützt Warenkorbabbrüche vor ITP und Adblockern.

NEU IN V3.6.0

OpenAI Measurement Pixel

ChatGPT Ads & Conversion Tracking (oaiq.min.js). Vollautomatische Übergabe von PageViews und Purchases mit PWA Consent-Integration.

BOT-SCHUTZ V3.4.0

Fraud0 Bot-Exclusion

Priorität 1000 auf allen Seiten mit Exception-Trigger zur Blockierung teurer Werbe-Tags bei erkanntem Invalid Traffic.

    PLENTYSHOP SITE EDITOR // TRACKING & ANALYTICS
  

3. Konfiguration im PlentyShop Site Editor

Der Shopbetreiber bedient die Einstellungen im PlentyShop Site Editor über das Zielscheiben-Icon (Tracking & Analytics) in der linken Navigationsleiste.

1. Drawer: Google Tag Manager

Einstellung	Empfohlener Wert	Erklärung
Enable Google Tag Manager	Aktiviert	Aktiviert den GTM Web Container im SSR-Modus
Google Tag Manager ID	`GTM-XXXXXXX`	Individuelle Container-ID des Shops
Cookies that should be registered	`no-cookies`	GTM setzt keine eigenen Cookies
Google Search Console Verifizierung	HTML-Tag oder ID	Rendert Meta-Tag im HTML-`<head>` vor dem Body