Zum Hauptinhalt springen
@capgo/capacitor-gtm Analytics Open Source

GTM Capacitor Plugin

Google Tag Manager Integration für Analytics und Tracking

Installieren

bun add @capgo/capacitor-gtm bunx cap sync
npm, pnpm oder yarn
  • npm install @capgo/capacitor-gtm
  • pnpm add @capgo/capacitor-gtm
  • yarn add @capgo/capacitor-gtm

Anleitung

GTM in Capacitor nutzen

Verwendung von @capgo/capacitor-gtm

Die Hauptschnittstelle für das Google Tag Manager Plugin.

Installieren

bun add @capgo/capacitor-gtm
bunx cap sync

bunx cap sync kopiert den nativen code des Plugins in deine nativen Projekte. Nach jedem Plugin-Upgrade erneut ausführen.

Importieren

import { GoogleTagManager } from '@capgo/capacitor-gtm';

API auf einen Blick

Methode Beschreibung
initialize Initialisiert den Google Tag Manager mit der angegebenen Container-ID.
push Pusht ein Event in den dataLayer von Google Tag Manager.
setUserProperty Setzt eine User-Property im Google Tag Manager dataLayer.
getValue Liest einen Wert aus dem Google Tag Manager dataLayer aus. Durchsucht den dataLayer nach dem aktuellsten Wert des angegebenen Keys.
reset Setzt die Google Tag Manager-Instanz zurück und löscht alle Daten. Dadurch wird der dataLayer geleert und eine Re-Initialisierung erforderlich.

Beispiele

initialize()

Initialisiert den Google Tag Manager mit der angegebenen Container-ID.

import { GoogleTagManager } from '@capgo/capacitor-gtm';

await GoogleTagManager.initialize({ containerId: 'container-id-123' });

push()

Pusht ein Event in den dataLayer von Google Tag Manager.

import { GoogleTagManager } from '@capgo/capacitor-gtm';

await GoogleTagManager.push({
  event: 'purchase',
  parameters: {
    value: 99.99,
    currency: 'USD'
  }
});

setUserProperty()

Setzt eine User-Property im Google Tag Manager dataLayer.

import { GoogleTagManager } from '@capgo/capacitor-gtm';

await GoogleTagManager.setUserProperty({
  key: 'user_type',
  value: 'premium'
});

getValue()

Liest einen Wert aus dem Google Tag Manager dataLayer aus. Durchsucht den dataLayer nach dem aktuellsten Wert des angegebenen Keys.

import { GoogleTagManager } from '@capgo/capacitor-gtm';

const result = await GoogleTagManager.getValue({ key: 'key-123' });
console.log(result);

reset()

Setzt die Google Tag Manager-Instanz zurück und löscht alle Daten. Dadurch wird der dataLayer geleert und eine Re-Initialisierung erforderlich.

import { GoogleTagManager } from '@capgo/capacitor-gtm';

await GoogleTagManager.reset();

Vollständige Referenz

Weiter mit der Nutzung von @capgo/capacitor-gtm

Wenn du es nutzt Nutzung von @capgo/capacitor-gtm Um die Arbeit an nativen Plugins zu planen, verbinde sie mit @capgo/capacitor-gtm für die Implementierungsdetails in @capgo/capacitor-gtm, Erste Schritte für die Implementierungsdetails in Erste Schritte, Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für die Implementierungsdetails in Capacitor Plugins von Capgo, und Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren.

FAQ

GTM Plugin FAQ

Wie installiere ich das GTM Plugin in einer Capacitor App?

Führe "bun add @capgo/capacitor-gtm" (oder "npm install @capgo/capacitor-gtm") aus und danach "bunx cap sync", damit die iOS- und Android-Projekte die nativen code übernehmen. Importiere es in deiner App code aus "@capgo/capacitor-gtm".

Funktioniert @capgo/capacitor-gtm mit React, Vue und Angular?

Ja. GTM ist ein Capacitor Package und funktioniert daher mit jedem Web-Framework, das in Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und reinem JavaScript.

Welche Capacitor Version wird von @capgo/capacitor-gtm unterstützt?

Capgo Plugins folgen der Major-Version von Capacitor: Nutze die Plugin-Major-Version, die zu deiner Capacitor Major-Version passt (z. B. Plugin v8 bei Capacitor 8). Die Kompatibilitätstabelle im GitHub README listet die gepflegten Versionen auf.

Ist @capgo/capacitor-gtm kostenlos und Open Source?

Ja. Der code Quellcode ist auf GitHub unter https://github.com/Cap-go/capacitor-gtm/ öffentlich einsehbar und das Package kann kostenlos via npm installiert werden. Bug-Reports und Pull Requests sind willkommen.

Kann ich code mit GTM nutzen und updaten, ohne ein App Store Review abzuwarten?

Die Installation oder ein Upgrade des Plugins ändert den nativen code, weshalb ein neuer Store-Build nötig ist. Danach können JavaScript-, HTML- und CSS-Änderungen, die das Plugin aufrufen, sofort per Capgo Live Updates ausgeliefert werden.

GTM-Änderungen ausrollen, ohne auf den App-Review zu warten

Sobald das Plugin in deinem Store-Build ist, bringt Capgo mit Live-Updates deine JavaScript-, HTML- und CSS-Änderungen in Minuten zu den Nutzern.

Starte mit Capgo