Saltar al contenido principal
@capgo/capacitor-gtm Análisis Fuente abierta

GTM plugin de Capacitor

Integración de Google Tag Manager para análisis y seguimiento

Instalar

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

Guía

Cómo usar GTM en Capacitor

Probar en dispositivo

Descargue la aplicación Capgo, luego escane el código QR code.

Vista previa del plugin GTM QR code

Usando @capgo/capacitor-gtm

La interfaz principal para el plugin de Google Tag Manager.

Instalar

bun add @capgo/capacitor-gtm
bunx cap sync

bunx cap sync copia el code nativo del plugin en tus proyectos nativos. Correlo de nuevo después de cada actualización del plugin.

Importar

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

Vista general de API

Método Ejemplo de uso
initialize Inicia el administrador de etiquetas de Google con el ID de contenedor especificado.
push Pushe un evento al dataLayer del administrador de etiquetas de Google.
setUserProperty Establece una propiedad de usuario en el dataLayer del Google Tag Manager.
getValue Obtiene un valor del dataLayer del administrador de etiquetas de Google. Busca a través del dataLayer por el valor más reciente de la clave especificada.
reset Reinicia la instancia del administrador de etiquetas de Google y elimina todos los datos. Esto eliminará todos los datos del dataLayer y requerirá la re-inicialización.

Ejemplos de uso

initialize()

Inicia el administrador de etiquetas de Google con el ID de contenedor especificado.

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

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

push()

Pushe un evento al dataLayer del administrador de etiquetas de Google.

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

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

setUserProperty()

Establece una propiedad de usuario en el dataLayer del Google Tag Manager.

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

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

getValue()

Obtiene un valor del dataLayer del administrador de etiquetas de Google. Busca a través del dataLayer por el valor más reciente de la clave especificada.

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

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

reset()

Reinicia la instancia del administrador de etiquetas de Google y elimina todos los datos. Esto eliminará todos los datos del dataLayer y requerirá la re-inicialización.

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

await GoogleTagManager.reset();

Referencia completa

Sigue adelante desde Usando @capgo/capacitor-gtm

Si estás utilizando Usando @capgo/capacitor-gtm para planificar el trabajo de plugin nativo, conectalo con @capgo/capacitor-gtm para los detalles de implementación en @capgo/capacitor-gtm Inicio rápido para los detalles de implementación en Inicio rápido, Directorio de Plugins Capgo para el flujo de trabajo del producto en Directorio de Plugins Capgo Plugins de Capgo en Capacitor para el detalle de implementación en Plugins de Capgo en Capacitor, y Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins.

FAQ

Preguntas frecuentes del plugin de GTM

¿Cómo instalo el plugin de GTM en una aplicación Capacitor?

Run "bun add @capgo/capacitor-gtm" (or "npm install @capgo/capacitor-gtm"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-gtm" in your app code.

¿Funciona @capgo/capacitor-gtm con React, Vue y Angular?

Yes. GTM is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

¿Qué versión de Capacitor soporta @capgo/capacitor-gtm?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

¿Es @capgo/capacitor-gtm gratuito y de código abierto?

Yes. La fuente code es pública en GitHub en https://github.com/Cap-go/capacitor-gtm/ y el paquete es gratuito para instalar desde npm.

Puedo actualizar code que utiliza GTM sin una revisión de la Tienda de Aplicaciones?

Instalar o actualizar el plugin cambia el code nativo, por lo que necesita una nueva compilación de la tienda. Después de eso, los cambios en JavaScript, HTML y CSS que llaman al plugin pueden enviar con actualizaciones Capgo en vivo.

Envíe cambios de GTM sin esperar a la revisión de la aplicación

Una vez que el plugin esté en tu tienda de construcción, Capgo actualizaciones en vivo envían los cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Comience con Capgo