@createyourtemplate/shop-module-tagmanager

Tag Manager für den PlentyONE Shop (PWA)

Nuxt-Modul, das den PlentyONE Shop an Google Tag Manager, Google Analytics 4 und Google Ads anbindet. Es schreibt alle Shop-Ereignisse im GA4-E-Commerce-Schema in den dataLayer, beachtet die Cookie-Leiste des Shops (Consent Mode v2) und kommt ohne Änderungen am Theme aus.

Einbindung

1. Paket im Hauptverzeichnis des Shops installieren:

   npm install @createyourtemplate/shop-module-tagmanager
   

2. Modul in apps/web/nuxt.config.ts eintragen, vor @nuxtjs/i18n:

   modules: [
     '@createyourtemplate/shop-module-tagmanager',
     '@nuxtjs/i18n',
     // …
   ],
   

   Das mitgelieferte @plentymarkets/shop-module-gtag darf nicht gleichzeitig aktiv sein, sonst wird doppelt gezählt.

3. ID und Lizenzschlüssel in apps/web/nuxt.config.ts eintragen:

   tagManager: {
     gtmId: 'GTM-XXXXXXX',
     license: '<Lizenzschlüssel>',
   },
   

   Bei eigenem Hosting lassen sich die Werte stattdessen als Env-Variablen setzen (PWA_TAGMANAGER_GTM_ID, PWA_TAGMANAGER_LICENSE). Im PlentyONE-Hosting sind eigene Env-Variablen nicht möglich, dort gilt die nuxt.config.ts.

Ohne ID bleibt das Modul vollständig inaktiv.

Lizenz

Außerhalb von localhost und des Entwicklungsmodus läuft das Modul nur mit einem gültigen Lizenzschlüssel für die aufgerufene Domain. Sie erhalten ihn von create your template; nennen Sie bei der Bestellung alle Domains, unter denen der Shop erreichbar ist (zum Beispiel shop.de, www.shop.de und eine Testumgebung).

Ohne gültigen Schlüssel läuft der Shop unverändert weiter, nur das Tracking ist aus. Den Grund nennt eine Zeile im Build- bzw. Server-Log, die mit [tagmanager] beginnt.

Konfiguration

Jede Variable hat eine gleichnamige Option in der nuxt.config.ts unter tagManager: { … } (PWA_TAGMANAGER_GTM_ID wird zu gtmId, PWA_TAGMANAGER_PRICE_MODE zu priceMode usw.). Env-Variablen haben Vorrang.

Events

page_view, view_item_list, select_item, view_item, add_to_cart, remove_from_cart, view_cart, add_to_wishlist, begin_checkout, add_shipping_info, add_payment_info, purchase, search, login, sign_up, generate_lead (Newsletter-Anmeldung und Kontaktformular, Parameter lead_source).

Für den Google Tag Manager liegt dem Paket die Seite gtm-container.html bei. Im Browser geöffnet, erstellt sie aus Ihrer GA4-Mess-ID und Ihren Google-Ads-Daten eine Importdatei für den Container (Verwaltung › Container importieren).

Im Modus gtm liegen E-Commerce-Daten unter ecommerce, alle anderen Parameter direkt im Event. GA4 darf im Container keine eigenen Seitenaufrufe senden (in der GA4-Konfiguration send_page_view auf false, Trigger auf das Event page_view).

Eigene Events:

const { track } = useTagManager();
track('generate_lead', { lead_source: 'callback' });