GA4/GTM連携実装仕様書¶

概要¶

VendureはGoogle Analytics 4（GA4）およびGoogle Tag Manager（GTM）への自動データ送信機能を標準では提供していないため、カスタム実装が必要です。本ドキュメントでは、リツビB2B ECサイトにおけるGA4/GTM連携の実装仕様を定義します。

現状と課題¶

Vendureの制限事項¶

dataLayer自動送信なし: 標準機能として提供されていない
公式プラグインなし: GA4/GTM連携の公式プラグインが存在しない
手動実装必要: すべてのEコマースイベントを手動で実装する必要がある

他プラットフォームとの比較¶

プラットフォーム	GA4/GTM対応状況	実装工数
Shopify	標準搭載	0人日
BigCommerce	標準搭載	0人日
WooCommerce	プラグイン対応	0.5人日
Magento	プラグイン対応	0.5人日
Vendure	カスタム実装	5人日

実装範囲¶

必須Eコマースイベント¶

1. 商品表示系イベント¶

view_item_list: 商品一覧表示
view_item: 商品詳細表示
select_item: 商品選択

2. カート操作系イベント¶

add_to_cart: カート追加
remove_from_cart: カート削除
view_cart: カート表示

3. 購入フロー系イベント¶

begin_checkout: チェックアウト開始
add_shipping_info: 配送情報追加
add_payment_info: 決済情報追加
purchase: 購入完了

4. その他のイベント¶

refund: 返品処理
login: ログイン
sign_up: 新規登録

B2B特有の追跡項目¶

// B2B向け拡張パラメータ
{
  // 標準Eコマースパラメータ
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORDER-12345',
    value: 150000,
    currency: 'JPY',
    // B2B特有パラメータ
    custom_dimensions: {
      customer_type: '企業会員',      // 顧客ステータス
      discount_rate: '40',            // 掛率
      payment_terms: 'monthly',       // 支払条件
      business_unit: '東京支店',      // 事業所
      order_type: 'direct_shipping'   // 直送フラグ
    }
  }
}

技術実装詳細¶

1. フロントエンド実装（Next.js）¶

GTM初期化¶

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script id="gtm-script" strategy="afterInteractive">
          {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','GTM-XXXXX');`}
        </Script>
      </head>
      <body>
        <noscript>
          <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
            height="0" width="0" style={{ display: 'none', visibility: 'hidden' }}
          />
        </noscript>
        {children}
      </body>
    </html>
  )
}

dataLayer送信ユーティリティ¶

// utils/analytics/gtm.ts
export class GTMService {
  static pushEvent(eventName: string, parameters: any) {
    if (typeof window !== 'undefined' && window.dataLayer) {
      window.dataLayer.push({
        event: eventName,
        ...parameters,
      });
    }
  }

  static trackEcommerce(eventName: string, ecommerceData: any) {
    this.pushEvent(eventName, {
      ecommerce: {
        ...ecommerceData,
      },
    });
  }
}

購入完了トラッキング例¶

// components/OrderConfirmation.tsx
import { GTMService } from '@/utils/analytics/gtm';

const trackPurchase = (order: Order) => {
  GTMService.trackEcommerce('purchase', {
    transaction_id: order.code,
    value: order.totalWithTax / 100,
    tax: order.taxSummary.reduce((sum, tax) => sum + tax.taxTotal, 0) / 100,
    shipping: order.shippingWithTax / 100,
    currency: order.currencyCode,
    items: order.lines.map(line => ({
      item_id: line.productVariant.sku,
      item_name: line.productVariant.name,
      item_category: line.productVariant.product.collections[0]?.name,
      price: line.proratedUnitPriceWithTax / 100,
      quantity: line.quantity,
      // B2B特有情報
      discount: line.discountedUnitPriceWithTax / 100,
    })),
  });
};

2. Vendure Backend連携¶

GraphQLクエリ拡張¶

# 必要な情報を取得するためのクエリ
query GetOrderForAnalytics($id: ID!) {
  order(id: $id) {
    id
    code
    state
    totalWithTax
    taxSummary {
      taxRate
      taxTotal
    }
    shippingWithTax
    currencyCode
    customer {
      id
      emailAddress
      groups {
        id
        name
      }
    }
    lines {
      id
      quantity
      proratedUnitPriceWithTax
      discountedUnitPriceWithTax
      productVariant {
        id
        sku
        name
        product {
          id
          name
          collections {
            id
            name
          }
        }
      }
    }
  }
}

3. GTMコンテナ設定¶

必要なタグ¶

GA4設定タグ: 基本設定
GA4イベントタグ: 各Eコマースイベント用
カスタムHTMLタグ: 特殊な処理用

必要なトリガー¶

dataLayerイベントトリガー（各イベント名に対応）
ページビュートリガー
クリックトリガー

必要な変数¶

dataLayer変数（ecommerce.transaction_id等）
カスタムJavaScript変数（データ変換用）

実装工数見積もり¶

タスク	工数	詳細
フロントエンド実装	3人日	dataLayer送信ロジック、各イベント実装
GTMコンテナ設定	1人日	タグ、トリガー、変数の設定
テスト・デバッグ	0.5人日	DebugView確認、本番環境テスト
ドキュメント作成	0.5人日	実装ガイド、運用手順書
合計	5人日

プライバシー・コンプライアンス対応¶

// Cookie同意後にのみGTM有効化
if (hasUserConsent()) {
  loadGTM();
}

個人情報の除外¶

メールアドレス、氏名等の個人情報はdataLayerに含めない
User IDはハッシュ化して送信
IPアドレス匿名化設定

運用・保守¶

定期メンテナンス項目¶

GTMコンテナバージョン管理
GA4データ品質チェック
Enhanced Ecommerce設定の確認

トラブルシューティング¶

dataLayer送信エラーの監視
GA4 DebugViewでのリアルタイム確認
GTM Preview modeでの検証

期待効果¶

ビジネス価値¶

詳細な顧客行動分析: 購買パターンの把握
ROI測定: マーケティング施策の効果測定
B2B特有の分析: 顧客グループ別売上、掛率別分析

技術的メリット¶

標準化されたデータ収集: GA4 Ecommerce仕様準拠
柔軟な拡張性: カスタムイベント追加可能
他ツール連携: Google Ads等との連携強化

リスクと対策¶

リスク	影響度	対策
データ欠損	高	エラー監視、リトライ処理実装
プライバシー違反	高	個人情報除外、同意管理実装
パフォーマンス低下	中	非同期処理、バッチ送信

まとめ¶

GA4/GTM連携は、Vendureでは完全なカスタム実装が必要となりますが、実装により以下が実現可能です：

標準的なEコマーストラッキング: 業界標準の分析基盤構築
B2B特有の分析: 掛率、顧客グループ等の独自分析
マーケティング最適化: データドリブンな意思決定支援

実装には5人日程度の工数が必要となるため、基本実装とは別途オプション機能として見積もり対象となります。