使い方ガイド MOTENASU

分析 > WEB行動タグ設置（Shopify）

WEB行動タグ設置（Shopify）

▼概要

このガイドでは、ShopifyストアにMOTENASU WEB行動タグを実装する手順を説明します。

実装する機能
  • ページビュー自動追跡
  • 商品詳細ページ閲覧（view_item）
  • カート追加（add_to_cart）
  • カート削除（remove_from_cart）
  • チェックアウト開始（begin_checkout）
  • 購入完了（purchase）
  • ログイン済みユーザーの識別
  • ファイルダウンロード・フォーム送信の自動追跡
設置場所
設置場所 実装内容 必須度
theme.liquid ライブラリ読み込み、初期化、各種イベント追跡 必須
カスタマーイベント 購入完了（checkout_completed）追跡 必須

▼設置前の準備

必要な情報
  • GA4測定ID：G-XXXXXXXXXX 形式（MOTENASU側から提供）
  • clientId：クライアント識別ID（MOTENASU側から提供）
  • Shopify管理画面へのアクセス権限
theme.liquidの編集手順
1. 「オンラインストア」 → 「テーマ」 を開く
2. 現在使用中テーマの右上「…」ボタン（または「アクション」）をクリック
3. 「コードを編集」を選択
4. 左メニューのファイルツリーから layout/theme.liquid を開く
5. 以下のコードを追加後、右上の「保存」ボタンで反映

（Shopifyは自動でバージョンを保持します）

▼theme.liquidへの設置

設置位置1：</head> 閉じタグの直前

ライブラリの読み込みと初期化コードを</head>閉じタグの直前に追加します。

<!-- 既存のコード -->
<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
if (Shopify.designMode) {
  document.documentElement.classList.add('shopify-design-mode');
}
</script>

<!-- ⬇️ ここから追加 -->
<script defer src="https://ga4.motenasu-cdn.com/ga4-common.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // GA4統合クラスで初期化
        window.MOTENASU = window.MOTENASU || {};

        window.MOTENASU.ga4 = new GA4Analytics({
            measurementId: 'G-XXXXXXXXXX',  // ← 測定IDに置き換え
            clientId: 'your_client_id',      // ← クライアントIDに置き換え
            debugMode: false
        });

        // 自動追跡を有効にする
        window.MOTENASU.ga4.enableAutoTracking({
            downloads: true,  // ファイルダウンロード追跡
            forms: true       // フォーム送信追跡
        });

        // ログイン済みユーザーの識別
        {% if customer %}
          window.MOTENASU.ga4.setUserIdAfterLogin('{{ customer.id }}');
        {% endif %}
    });
</script>
<!-- ⬆️ ここまで追加 -->
</head>

設定値の変更ポイント

  • measurementId：MOTENASUから提供されたGA4測定ID（G-XXXXXXXXXX）
  • clientId：MOTENASUから提供されたクライアント識別ID
  • debugMode：通常はfalse（デバッグ時のみtrue）
設置位置2：</body> 閉じタグの直前

各種イベント追跡コードを</body>閉じタグの直前に追加します。

<!-- ⬇️ ここから追加 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (!window.MOTENASU || !window.MOTENASU.ga4) {
      return;
    }

    // ===== 商品ページ閲覧 =====
    {% if template.name == 'product' %}
    window.MOTENASU.ga4.ecommerce.trackViewItem({
      item_id: '{{ product.id }}',
      item_name: '{{ product.title | escape }}',
      price: {{ product.price | money_without_currency | remove: ',' }},
      item_category: '{{ product.type }}',
      item_brand: '{{ product.vendor }}',
      quantity: 1
    });
    {% endif %}

    // ===== カート追加・削除・クリアの自動検知 =====
    var originalFetch = window.fetch;
    window.fetch = function() {
      var args = Array.prototype.slice.call(arguments);
      var url = args[0];
      var options = args[1] || {};

      // --- カート追加 ---
      if (typeof url === 'string' && url.includes('/cart/add')) {
        var fetchPromise = originalFetch.apply(this, args);
        fetchPromise.then(function(response) {
          if (response.ok) {
            response.clone().json().then(function(data) {
              if (data.items && Array.isArray(data.items)) {
                data.items.forEach(function(item) {
                  window.MOTENASU.ga4.handleAddToCart({
                    item_id: String(item.product_id || item.id),
                    item_name: item.product_title || item.title,
                    price: (item.price || 0) / 100,
                    quantity: item.quantity || 1,
                    image_url: item.image || ''
                  });
                });
              } else if (data.id) {
                window.MOTENASU.ga4.handleAddToCart({
                  item_id: String(data.product_id || data.id),
                  item_name: data.product_title || data.title,
                  price: (data.price || 0) / 100,
                  quantity: data.quantity || 1,
                  image_url: data.image || ''
                });
              }
            });
          }
        });
        return fetchPromise;
      }

      // --- カート数量変更（追加・削除） ---
      if (typeof url === 'string' && url.includes('/cart/change')) {
        var fetchPromise = originalFetch.apply(this, args);

        fetchPromise.then(function(response) {
          if (response.ok) {
            response.clone().json().then(function(data) {
                // 数量減少 (items_removed)
                if (data.items_removed && data.items_removed.length > 0) {
                  data.items_removed.forEach(function(item) {
                    window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
                      item_id: String(item.product_id || item.id),
                      item_name: item.product_title || item.title,
                      price: (item.price || 0) / 100,
                      quantity: item.quantity || 1,
                      image_url: item.image || ''
                    });
                  });
                }

                // 数量増加 (items_added)
                if (data.items_added && data.items_added.length > 0) {
                  data.items_added.forEach(function(item) {
                    window.MOTENASU.ga4.handleAddToCart({
                      item_id: String(item.product_id || item.id),
                      item_name: item.product_title || item.title,
                      price: (item.price || 0) / 100,
                      quantity: item.quantity || 1,
                      image_url: item.image || ''
                    });
                  });
                }
            }).catch(function(err) {
              console.error('JSON error:', err);
            });
          }
        });
        return fetchPromise;
      }

      return originalFetch.apply(this, args);
    };

    // ===== チェックアウト開始トラッキング =====
    {% if template.name == 'cart' or template.name == 'product' %}
      var checkoutButtons = document.querySelectorAll([
        '[name="checkout"]',
        '[href*="/checkout"]',
        '.shopify-payment-button__button'
      ].join(','));

      checkoutButtons.forEach(function(button) {
        button.addEventListener('click', function() {
          fetch('/cart.js')
            .then(function(res) { return res.json(); })
            .then(function(cart) {
              var items = cart.items.map(function(item) {
                return {
                  item_id: String(item.product_id),
                  item_name: item.product_title,
                  price: item.price / 100,
                  quantity: item.quantity
                };
              });

              window.MOTENASU.ga4.ecommerce.trackBeginCheckout(items, '', {
                value: cart.total_price / 100,
                currency: 'JPY'
              });
            });
        });
      });
    {% endif %}
  });
</script>
<!-- ⬆️ ここまで追加 -->

{%- if settings.predictive_search_enabled -%}
  <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</body>
</html>

theme.liquidの実装完了

これで商品閲覧、カート操作、チェックアウト開始の追跡が動作します。

▼カスタマーイベントへの設置

重要：購入完了イベントは必ずカスタマーイベントで実装してください

Shopifyのチェックアウトプロセスはtheme.liquidの外で動作するため、購入完了イベントは専用の「カスタマーイベント」機能を使用します。

設定手順
1. 左下メニューから「設定」を開く
2. 「カスタマーイベント」をクリック
3. 「カスタムピクセルを追加」ボタンをクリック
4. 「新しいカスタムピクセルを作成」画面が表示される
  • ピクセル名（任意の名前）を入力
  • コードスニペット欄に以下のJavaScriptコードを貼り付け
5. コードを貼り付け
// Purchase tracking via Custom Pixel
analytics.subscribe("checkout_completed", function(event) {
    var checkout = event.data.checkout;
    
    // GA4統合ライブラリを読み込み
    var script = document.createElement('script');
    script.src = 'https://ga4.motenasu-cdn.com/ga4-common.js';
    script.onload = function() {
      // ライブラリ読み込み完了後に初期化
      window.MOTENASU = window.MOTENASU || {};
      window.MOTENASU.ga4 = new GA4Analytics({
        measurementId: 'G-XXXXXXXXXX',  // ← 測定IDに置き換え
        clientId: 'your_client_id',      // ← クライアントIDに置き換え
        debugMode: false
      });

      // 商品アイテムの変換
      var items = [];
      if (checkout.lineItems) {
        checkout.lineItems.forEach(function(item) {
          items.push({
            item_id: String(item.variant.product.id),
            item_name: item.title,
            item_category: item.variant.product.productType || '',
            item_brand: item.variant.product.vendor || '',
            price: parseFloat(item.variant.price.amount),
            quantity: item.quantity
          });
        });
      }

      // 購入完了トラッキング
      window.MOTENASU.ga4.handlePurchase({
        transaction_id: String(checkout.order.id),
        value: parseFloat(checkout.totalPrice.amount),
        tax: parseFloat(checkout.totalTax ? checkout.totalTax.amount : 0),
        shipping: parseFloat(checkout.shippingLine ? checkout.shippingLine.price.amount : 0),
        currency: checkout.currencyCode,
        coupon: checkout.discountApplications && checkout.discountApplications[0] ? checkout.discountApplications[0].title : '',
        items: items
      });
    };
    document.head.appendChild(script);
});
6. 「保存」→「有効化」をクリック

設定値の変更ポイント

  • measurementId：theme.liquidと同じGA4測定ID
  • clientId：theme.liquidと同じクライアント識別ID
  • debugMode：通常はfalse（デバッグ時のみtrue）

カスタマーイベントの実装完了

これで購入完了イベントの追跡が動作します。

▼動作確認

デバッグモードでの確認

デバッグ時はdebugMode: true に変更すると、ブラウザの開発者ツール（F12）のコンソールで詳細なログが表示されます。

1. 商品ページ閲覧の確認
  • 商品ページにアクセス
  • コンソールに「GA4Ecommerce: Tracking view_item」と表示されることを確認
2. カート追加の確認
  • 商品をカートに追加
  • コンソールに「GA4 Unified: handleAddToCart - Tracking ecommerce event」と表示されることを確認
  • 続いて「GA4 Unified: handleAddToCart - Sending to beacon API」と表示されることを確認
3. カート削除の確認
  • カート内の商品数量を減らす、または削除
  • コンソールに「GA4Ecommerce: Tracking remove_from_cart」と表示されることを確認
4. チェックアウト開始の確認
  • カートページで「チェックアウト」ボタンをクリック
  • コンソールに「GA4Ecommerce: Tracking begin_checkout」と表示されることを確認
5. 購入完了の確認
  • テスト購入を完了させる（Shopifyのテストモードを使用）
  • サンキューページで開発者ツールのコンソールを確認
  • 「GA4 Unified: handlePurchase - Tracking ecommerce event」と表示されることを確認
  • 続いて「GA4 Unified: handlePurchase - Sending to beacon API」と表示されることを確認
確認項目チェックリスト
イベント 確認方法 コンソールログ例
商品閲覧 商品ページにアクセス GA4Ecommerce: Tracking view_item
カート追加 商品をカートに追加 GA4 Unified: handleAddToCart
カート削除 カート内商品を削除 GA4Ecommerce: Tracking remove_from_cart
チェックアウト チェックアウトボタンクリック GA4Ecommerce: Tracking begin_checkout
購入完了 テスト購入完了 GA4 Unified: handlePurchase

本番環境リリース前の最終確認

  • debugMode: false になっているか確認
  • テスト購入でイベントが正常に送信されているか
  • MOTENASUダッシュボードでデータが表示されているか

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

イベントが送信されない
原因1：ライブラリが読み込まれていない
  • コンソールで window.MOTENASU を実行
  • undefined と表示される場合、ライブラリの読み込みに失敗しています
  • theme.liquidの<script defer src="...">タグが正しく記述されているか確認
原因2：測定IDまたはclientIdが間違っている
  • MOTENASUから提供された正しい値に置き換えているか確認
  • コンソールでエラーメッセージが出ていないか確認
原因3：カスタマーイベントが保存されていない
  • Shopify管理画面 → 設定 → カスタマーイベント で保存済みか確認
  • 購入完了イベントは必ずカスタマーイベントで実装する必要があります
購入完了イベントだけ送信されない
解決方法
  • カスタマーイベントの設定を再確認
  • 測定IDとclientIdがtheme.liquidと一致しているか確認
  • サンキューページで開発者ツールのコンソールを開き、エラーメッセージを確認
デバッグモードでログが表示されない
解決方法
  • debugMode: true に設定されているか確認
  • ブラウザのコンソールで window.MOTENASU.ga4.config を実行して設定を確認
  • ページをリロードしてから再度確認

▼注意事項・免責事項

動作保証について

本ガイドに記載の実装方法は、Shopifyの標準的な構成を前提としています。以下の点にご注意ください。

  • テーマ構成による影響
    • カスタマイズされたテーマ、サードパーティ製テーマでは動作しない場合があります
    • テーマの構造が標準と異なる場合、コードの調整が必要になることがあります
  • Shopifyバージョン・仕様変更の影響
    • Shopifyプラットフォームの仕様変更により、動作しなくなる可能性があります
    • カスタマーイベントAPIの変更により、購入完了イベントの実装方法が変わる場合があります
  • アプリ・プラグインとの競合
    • 他のトラッキングツールやカート関連アプリとの競合により、正常に動作しない場合があります
    • JavaScriptのfetchメソッドを上書きする他のスクリプトとの競合が発生する可能性があります
  • ブラウザ環境の影響
    • 広告ブロッカーやプライバシー保護機能により、イベント送信がブロックされる場合があります
    • 古いブラウザではJavaScriptが正常に動作しない可能性があります

免責事項

  • 本ガイドの実装により発生したいかなる損害についても、MOTENASUは一切の責任を負いません
  • 実装前に必ずテスト環境での動作確認を行ってください
  • 本番環境への適用は、お客様の責任において実施してください
  • 実装後も定期的に動作確認を行い、正常にデータが送信されているか確認することを推奨します

サポートについて

  • 基本的な実装サポートは提供いたしますが、個別のカスタマイズ対応には別途費用が発生する場合があります
  • テーマ固有の問題や、サードパーティ製アプリとの競合については、サポート対象外となる場合があります
  • Shopifyプラットフォームの仕様変更に伴う修正対応には、対応に時間を要する場合があります