구글 태그 관리자

Google 태그 관리자는 코드 없이 웹사이트의 모든 태그를 관리할 수 있는 플랫폼입니다.

연동 설정

Amplitude 플러그인 설정

이벤트를 Google 태그 관리자로 전달하려면 Amplitude 목적지 플러그인의 변형을 사용하십시오. 아래 템플릿은 Google 태그 관리자용으로 제작된 목적지 플러그인입니다. 이 플러그인은 Google 태그 관리자 브라우저 스니펫의 인스턴스를 생성하고 Amplitude의 SDK에서 추적된 이벤트를 전달합니다. 필요에 따라 이 템플릿을 사용자 정의하십시오.

import { DestinationPlugin, Event, PluginType, Result } from '@amplitude/analytics-types';
export class GTMPlugin implements DestinationPlugin {
  name = 'google-tag-manager';
  type = PluginType.DESTINATION as const;
  containerId: string;
  constructor(containerId: string) {
    this.containerId = containerId;
  }
  async setup(): Promise<void> {
    if (!window.dataLayer) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
      const head = document.getElementsByTagName('head')[0],
        script = document.createElement('script'),
        dataLayer = 'datalayer' != 'dataLayer' ? '&l=' + 'datalayer' : '';
      script.async = true;
      script.src = 'https://www.googletagmanager.com/gtm.js?id=' + this.containerId + dataLayer;
      head.insertBefore(script, head.firstChild);
    }
  }
  async execute(event: Event): Promise<Result> {
    window.dataLayer.push(event);
    return {
      code: 200,
      event: event,
      message: 'Event pushed onto GTM Data Layer',
    };
  }
}

Amplitude 플러그인 사용법

앱 코드에서 플러그인을 가져와서 Amplitude SDK 인스턴스에 추가하십시오.

import * as amplitude from '@amplitude/analytics-browser';
import { GTMPlugin } from './GTMPlugin';
amplitude.init(AMPLITUDE_API_KEY);
amplitude.add(new GTMPlugin(GOOGLE_TAG_MANAGER_CONTAINER_ID));
amplitude.logEvent('open app');

이 내용이 도움이 되었나요?