본문으로 건너뛰기
@capgo/capacitor-gtm 분석 오픈 소스

GTM Capacitor 플러그인

Google 태그 매니저 통합을 위한 분석 및 추적

설치

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

Guide

How to use GTM in Capacitor

사용자 가이드

다운로드하여 Capgo 앱을 설치한 후 QR code 코드를 스캔하세요.

GTM 플러그인 미리보기 QR code

@capgo/capacitor-gtm을 사용합니다.

설치

Install

bun add @capgo/capacitor-gtm
bunx cap sync

bunx cap sync plugin은 원본 code을 프로젝트에 복사합니다. 플러그인 업그레이드 후 다시 실행하세요.

Import

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

API 한눈에

Method 설명
initialize 지정된 container ID로 Google Tag Manager를 초기화합니다.
push Google Tag Manager의 dataLayer에 이벤트를 푸시합니다.
setUserProperty Google Tag Manager의 dataLayer에 사용자 속성을 설정합니다.
getValue Google Tag Manager의 dataLayer에서 값을 가져옵니다. 지정된 키의 최신 값으로 검색합니다.
reset Google Tag Manager 인스턴스를 리셋하고 모든 데이터를 삭제합니다. 데이터 레이어에서 모든 데이터를 삭제하고 재초기화가 필요합니다.

예제

initialize()

지정된 container ID로 Google Tag Manager를 초기화합니다.

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

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

push()

Google Tag Manager의 dataLayer에 이벤트를 푸시합니다.

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

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

setUserProperty()

Google Tag Manager의 dataLayer에 사용자 속성을 설정합니다.

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

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

getValue()

Google Tag Manager의 dataLayer에서 값을 가져옵니다. 지정된 키의 최신 값으로 검색합니다.

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

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

reset()

Google Tag Manager 인스턴스를 리셋하고 모든 데이터를 삭제합니다. 데이터 레이어에서 모든 데이터를 삭제하고 재초기화가 필요합니다.

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

await GoogleTagManager.reset();

전체 참조

@capgo/capacitor-gtm 계속 사용하세요

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-gtm을 사용 중이라면 capgo/capacitor-gtm과 연결하세요 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-gtm의 구현 세부 정보를 참조하세요 @capgo/capacitor-gtm @capgo/capacitor GTM 구현 세부 사항을 위한 설명서 __CAPGO_KEEP_0__-gtm에서 계속 진행하세요 Capgo 플러그인 디렉토리 Capgo 제품 워크플로우를 위한 플러그인 디렉토리 Capacitor Capgo 플러그인 Capacitor Capgo 플러그인에 대한 구현 세부 사항 플러그인 추가 또는 업데이트 __CAPGO_KEEP_0__ 플러그인에 대한 구현 세부 사항

FAQ

GTM 플러그인 FAQ

Capacitor 앱에서 GTM 플러그인을 설치하는 방법은 무엇입니까?

bun 'add @capgo/capacitor-gtm' (또는 'npm install @capgo/capacitor-gtm') 명령어를 실행한 후 'bunx cap sync' 명령어를 실행하여 iOS와 Android 프로젝트가 네이티브 code을 인식하도록 하세요. 그리고 앱 code에서 '@capgo/capacitor-gtm'을 임포트하세요.

@capgo/capacitor-gtm은 React, Vue 및 Angular과 함께 작동합니까?

네. GTM은 Capacitor 패키지이므로, Capacitor 내에서 실행되는 모든 웹 프레임워크와 함께 작동합니다. 예를 들어, Ionic, React, Vue, Angular, Svelte 및 일반 JavaScript도 포함됩니다.

Which Capacitor version does @capgo/capacitor-gtm support?

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.

@capgo/capacitor-gtm은 무료이며 오픈 소스입니까?

네. code은 GitHub에 공개되어 있으며 https://github.com/Cap-go/capacitor-gtm/에서 무료로 설치할 수 있습니다. npm에서 패키지를 설치할 수 있습니다. 버그 리포트와 풀 리퀘스트는 환영합니다.

code GTM을 사용하는 앱을 업데이트할 수 있나요?

code을 설치하거나 업그레이드하면 원시 code이 변경되므로 새로운 스토어 빌드를 필요로 합니다. 그 후에 Capgo 라이브 업데이트를 사용하여 JavaScript, HTML 및 CSS 변경 사항이 바로 배포될 수 있습니다.

GTM 변경을 앱 리뷰 대기 없이 배포하세요.

플러그인이 스토어 빌드에 포함된 후, Capgo 라이브 업데이트 는 사용자에게 몇 분 내에 자바스크립트, HTML 및 CSS 변경을 푸시합니다.

Capgo로 시작하세요.