Allez directement au contenu principal
@capgo/capacitor-gtm Analytique Open source

GTM plugin Capacitor

Intégration Google Tag Manager pour les analyses et les suivi

Installer

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

Guide

Comment utiliser GTM dans Capacitor

Tester sur appareil

Télécharger l'application Capgo, puis scannez le code QR code.

Lien QR de prévisualisation du plugin GTM code

Utilisation de @capgo/capacitor-gtm

L'interface principale du plugin Google Tag Manager.

Installer

bun add @capgo/capacitor-gtm
bunx cap sync

bunx cap sync copie les code natifs du plugin dans vos projets natifs. Exécutez-l’à nouveau après chaque mise à niveau du plugin.

Importer

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

API en un coup d'œil

Méthode Description
initialize Initialise Google Tag Manager avec l'identifiant de conteneur spécifié.
push Envoie un événement à la couche de données Google Tag Manager.
setUserProperty Définit une propriété utilisateur dans la couche de données Google Tag Manager.
getValue Récupère une valeur du dataLayer du Gestionnaire de balises Google. Cherche dans le dataLayer la valeur la plus récente de la clé spécifiée.
reset Réinitialise l'instance du gestionnaire de balises Google et efface toutes les données. Cela supprimera toutes les données de la dataLayer et nécessitera une réinitialisation.

Exemples

initialize()

Initialise Google Tag Manager avec l'identifiant de conteneur spécifié.

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

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

push()

Envoie un événement à la couche de données Google Tag Manager.

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

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

setUserProperty()

Définit une propriété utilisateur dans la couche de données Google Tag Manager.

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

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

getValue()

Récupère une valeur du dataLayer du Gestionnaire de balises Google. Cherche dans le dataLayer la valeur la plus récente de la clé spécifiée.

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

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

reset()

Réinitialise l'instance du gestionnaire de balises Google et efface toutes les données. Cela supprimera toutes les données de la dataLayer et nécessitera une réinitialisation.

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

await GoogleTagManager.reset();

Référence complète

Continuez à partir de l'utilisation de @capgo/capacitor-gtm

Si vous utilisez L'utilisation de @capgo/capacitor-gtm pour planifier le travail du plugin natif, connectez-l’avec @capgo/capacitor-gtm pour les détails d'implémentation dans @capgo/capacitor-gtm Prise en main pour les détails d'implémentation dans Prise en main, Répertoire de plugins Capgo pour le flux de travail du produit dans le Répertoire de Plugin Capgo Capacitor Plugins par Capgo pour le détail d'implémentation dans Capacitor Plugins par Capgo, et Ajouter ou Mettre à Jour les Plugins pour le détail d'implémentation dans Ajouter ou Mettre à Jour les Plugins.

FAQ

FAQ du plugin GTM

Comment installez-vous le plugin GTM dans une application Capacitor?

Exécutez « bun add @capgo/capacitor-gtm » (ou « npm install @capgo/capacitor-gtm »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte les natives code. Importez-l’à partir de « @capgo/capacitor-gtm » dans votre application code.

Le plugin @capgo/capacitor-gtm fonctionne-t-il avec React, Vue et Angular?

Oui. Le GTM est un paquet Capacitor, il fonctionne donc avec tout framework web qui s'exécute à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript simple.

Quelle version de Capacitor est prise en charge par @capgo/capacitor-gtm?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple, plugin v8 avec Capacitor 8). La table de compatibilité dans le README du GitHub liste les versions maintenues.

Le plugin @capgo/capacitor-gtm est-il gratuit et open source?

Oui. La source code est publique sur GitHub à https://github.com/Cap-go/capacitor-gtm/ et le package est gratuit pour l'installation depuis npm. Les rapports de bogues et les demandes de tirage sont les bienvenus.

Peut-on mettre à jour code qui utilise GTM sans passer par une revue de l'App Store ?

L'installation ou la mise à niveau du plugin modifie le code natif, il faut donc une nouvelle construction de l'App Store. Après cela, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être déployées instantanément avec les mises à jour Capgo en direct.

Envoyez les modifications GTM sans attendre la revue de l'application

Une fois le plugin dans votre magasin de build, Capgo met à jour en temps réel vos modifications de JavaScript, HTML et CSS chez les utilisateurs en quelques minutes.

Démarrez avec Capgo