Googleタグマネージャー

Google Tag Managerは、ウェブサイトのすべてのタグをコードなしで管理できるプラットフォームです。

連携を設定する

Amplitudeプラグインのセットアップ

イベントをGoogle Tag Managerに転送するには、Amplitude送信先プラグインのバリアントを使用してください。以下のテンプレートは、Google Tag Manager向けに設計された送信先プラグインです。このプラグインは、Google Tag Managerブラウザスニペットのインスタンスを作成し、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');

これは役に立ちましたか？