WEB行動タグ設置(侍カート)
▼概要
このガイドでは、侍カートにMOTENASU WEB行動タグを実装する手順を説明します。
実装する機能
- ページビュー自動追跡
- 商品詳細ページ閲覧(view_item)
- カート追加(add_to_cart)
- カート削除(remove_from_cart)
- チェックアウト開始(begin_checkout)
- 購入完了(purchase)
- ログイン済みユーザーの識別
- ファイルダウンロード・フォーム送信の自動追跡
設置箇所
侍カート管理画面の デザイン管理 → テンプレート編集 画面から、以下の箇所にコードを設置します。
| テンプレート編集の修正箇所 | 設置名称 | 必須度 |
|---|---|---|
| 共通レイアウト(PC・スマホ) | ヘッダー・フッター共通HTML | 必須 |
| フォーム一体型LP共通HTML | 条件付き | |
| アップセルLP共通HTML | 条件付き |
必須度について
- ヘッダー・フッター共通HTML:すべてのページで必須
- フォーム一体型LP共通HTML:フォーム一体型LPを利用している場合のみ設置
- アップセルLP共通HTML:LPを使用する際に必ず必要
▼設置前の準備
必要な情報
- GA4測定ID:G-XXXXXXXXXX 形式(MOTENASU側から提供)
- clientId:クライアント識別ID(MOTENASU側から提供)
- 侍カート管理画面へのアクセス権限
管理画面へのアクセス手順
1. 侍カート管理画面にログイン
2. 「デザイン管理」 → 「テンプレート編集」 を開く
3. 以下の設置名称を選択してコードを追加
- ヘッダー・フッター共通HTML(必須)
- フォーム一体型LP共通HTML(フォーム一体型LPを利用している場合のみ)
- アップセルLP共通HTML(LPを使用する際に必須)
▼【必須】共通レイアウトへの設置
すべてのページで動作させるために、共通レイアウトに設置します。
設置場所:ヘッダー・フッター共通HTML
設置位置1:</head> 閉じタグの直前
ライブラリの読み込みと初期化コードを</head>閉じタグの直前に追加します。
<!-- ⬇️ ここから追加 -->
<script defer src="https://ga4.motenasu-cdn.com/ga4-common.js?v=20251031"></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 $user.id > 0}
window.MOTENASU.ga4.setUserIdAfterLogin("{$user.id}");
{/if}
});
</script>
<!-- ⬆️ ここまで追加 -->
</head>
設定値の変更ポイント
measurementId:MOTENASUから提供されたGA4測定ID(G-XXXXXXXXXX)clientId:MOTENASUから提供されたクライアント識別IDdebugMode:通常はfalse(デバッグ時のみtrue)
設置位置2:</body> 閉じタグの直前
各種イベント追跡コードを</body>閉じタグの直前に追加します。
注意
以下のコードは非常に長いため、コピー時に欠損がないかご確認ください。
<!-- ⬇️ ここから追加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
if (!window.MOTENASU || !window.MOTENASU.ga4) {
return;
}
// ===== 商品詳細ページ =====
if (window.location.pathname.match(/^\/product\/\d+/)) {
var productData = {
item_id: '{if isset($product.0.item_id)}{$product.0.item_id}{/if}',
item_name: '{if isset($product.0.item_name)}{$view->escape($product.0.item_name)}{/if}',
price: {if !empty($product.0.sale_price)}{$product.0.sale_price}{elseif !empty($product.0.rank_discount_price)}{$product.0.rank_discount_price}{elseif !empty($product.0.item_price_tax)}{$product.0.item_price_tax}{else}0{/if},
item_category: '{if !empty($product.0.category_name)}{$product.0.category_name}{/if}',
item_brand: '{if !empty($product.0.maker_name)}{$product.0.maker_name}{/if}',
image_url: window.location.origin + '{if isset($product.0.main_image)}/item_sum_l_image/{$product.0.main_image}{/if}'
};
if (productData.item_id && productData.item_name) {
// 商品ページ閲覧イベント
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackViewItem({
item_id: productData.item_id,
item_name: productData.item_name,
price: productData.price,
item_category: productData.item_category,
item_brand: productData.item_brand,
quantity: 1
});
}
// カート追加ボタン(通常カート)
var cartButtons = document.querySelectorAll('input[type="image"]:not([name="regular_sub"])');
cartButtons.forEach(function(button) {
button.addEventListener('click', function(e) {
var form = this.closest('form');
var quantityInput = form.querySelector('input[name="item_num"]');
var quantity = quantityInput ? parseInt(quantityInput.value) || 1 : 1;
if (window.MOTENASU.ga4.handleAddToCart) {
window.MOTENASU.ga4.handleAddToCart({
item_id: productData.item_id,
item_name: productData.item_name,
price: productData.price,
quantity: quantity,
image_url: productData.image_url || ''
});
}
});
});
// 定期購入ボタン
var regularButtons = document.querySelectorAll('input[type="image"][name="regular_sub"]');
regularButtons.forEach(function(button) {
button.addEventListener('click', function(e) {
var form = this.closest('form');
var quantityInput = form.querySelector('input[name="item_num"]');
var quantity = quantityInput ? parseInt(quantityInput.value) || 1 : 1;
if (window.MOTENASU.ga4.handleAddToCart) {
window.MOTENASU.ga4.handleAddToCart({
item_id: productData.item_id,
item_name: productData.item_name,
price: productData.price,
quantity: quantity,
image_url: productData.image_url || ''
});
}
});
});
}
}
// ===== カートページ =====
if (window.location.pathname === '/cart') {
// 通常カート用
var cartItemsNormal = [];
var cartValueNormal = 0;
{if !empty($cart_arr)}
{foreach from=$cart_arr item=val}
cartItemsNormal.push({
cart_id: '{$val.cart_id}',
item_id: '{$val.item_id}',
item_cord: '{if isset($val.item_cord)}{$val.item_cord}{/if}',
item_name: '{$view->escape($val.item_name)}',
price: {if !empty($val.rank_discount_price)}{$val.rank_discount_price}{elseif !empty($val.sale_price)}{$val.sale_price}{else}{$val.item_price_tax}{/if},
quantity: {$val.item_num},
image_url: '{if isset($val.main_image)}{$val.main_image}{/if}'
});
{/foreach}
cartValueNormal = {if isset($sum_price)}{$sum_price}{else}0{/if};
{/if}
// 統合カート用
var cartItemsIntegrated = [];
var cartValueIntegrated = 0;
{if !empty($cart_arr_per_transaction)}
{foreach from=$cart_arr_per_transaction key=transaction_id item=cart_arr}
{foreach from=$cart_arr item=val}
cartItemsIntegrated.push({
cart_id: '{$val.cart_id}',
item_id: '{$val.item_id}',
item_cord: '{if isset($val.item_cord)}{$val.item_cord}{/if}',
item_name: '{$view->escape($val.item_name)}',
price: {if !empty($val.sale_price)}{$val.sale_price}{else}{$val.item_price_tax}{/if},
quantity: {$val.item_num},
transaction_id: '{$transaction_id}',
image_url: '{if isset($val.main_image)}{$val.main_image}{/if}'
});
{/foreach}
{/foreach}
{if isset($sum_price)}
{foreach from=$sum_price key=tid item=price}
cartValueIntegrated += {$price};
{/foreach}
{/if}
{/if}
var cartItems = cartItemsIntegrated.length > 0 ? cartItemsIntegrated : cartItemsNormal;
var cartValue = cartItemsIntegrated.length > 0 ? cartValueIntegrated : cartValueNormal;
// カート数量増加(+ボタン)
var plusButtons = document.querySelectorAll('input[name="sub_p"]');
plusButtons.forEach(function(button) {
button.addEventListener('click', function(e) {
var form = this.closest('form');
var cartId = form.querySelector('input[name="cart_id"]').value;
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && window.MOTENASU.ga4.handleAddToCart) {
window.MOTENASU.ga4.handleAddToCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: 1,
image_url: item.image_url || ''
});
}
});
});
// 統合カート用 +ボタン
var plusButtonsNew = document.querySelectorAll('button[name="sub_p"]');
plusButtonsNew.forEach(function(button) {
var originalOnclick = button.getAttribute('onclick');
if (originalOnclick) {
button.addEventListener('click', function(e) {
var match = originalOnclick.match(/cartNumChange\('([^']+)'/);
if (match) {
var cartId = match[1];
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && window.MOTENASU.ga4.handleAddToCart) {
window.MOTENASU.ga4.handleAddToCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: 1,
image_url: item.image_url || ''
});
}
}
});
}
});
// カート数量減少(-ボタン)
var minusButtons = document.querySelectorAll('input[name="sub_m"]');
minusButtons.forEach(function(button) {
button.addEventListener('click', function(e) {
var form = this.closest('form');
var cartId = form.querySelector('input[name="cart_id"]').value;
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && item.quantity > 1 && window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: 1
});
}
});
});
// 統合カート用 -ボタン
var minusButtonsNew = document.querySelectorAll('button[name="sub_m"]');
minusButtonsNew.forEach(function(button) {
var originalOnclick = button.getAttribute('onclick');
if (originalOnclick) {
button.addEventListener('click', function(e) {
var match = originalOnclick.match(/cartNumChange\('([^']+)'/);
if (match) {
var cartId = match[1];
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && item.quantity > 1 && window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: 1
});
}
}
});
}
});
// カート完全削除
var deleteLinks = document.querySelectorAll('.del_btn a');
deleteLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
var deleteUrl = this.getAttribute('href');
var cartId = deleteUrl.split('/').pop();
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: item.quantity
});
}
});
});
// 統合カート用 削除ボタン
var deleteButtons = document.querySelectorAll('button[name="sub_d"]');
deleteButtons.forEach(function(button) {
var originalOnclick = button.getAttribute('onclick');
if (originalOnclick) {
button.addEventListener('click', function(e) {
var match = originalOnclick.match(/cartNumChange\('([^']+)'/);
if (match) {
var cartId = match[1];
var item = cartItems.find(function(i) { return i.cart_id === cartId; });
if (item && window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackRemoveFromCart({
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: item.quantity
});
}
}
});
}
});
// チェックアウト開始トラッキング
var ga4Items = cartItems.map(function(item) {
return {
item_id: String(item.item_cord || item.item_id),
item_name: item.item_name,
price: item.price,
quantity: item.quantity
};
});
// 購入手続きボタン(通常カート)
var buyLinks = document.querySelectorAll('a[href*="/order/buy"]');
buyLinks.forEach(function(link) {
link.addEventListener('click', function(e) {
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout(ga4Items, '', {
value: cartValue,
currency: 'JPY'
});
}
});
});
// 購入手続きボタン(統合カート)
var buyForms = document.querySelectorAll('form[action*="/order/buy"]');
buyForms.forEach(function(form) {
form.addEventListener('submit', function(e) {
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout(ga4Items, '', {
value: cartValue,
currency: 'JPY'
});
}
});
});
// 定期購入手続きボタン
var regularBuyImages = document.querySelectorAll('input[name="regular_sub"]');
regularBuyImages.forEach(function(button) {
button.addEventListener('click', function(e) {
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout(ga4Items, '', {
value: cartValue,
currency: 'JPY'
});
}
});
});
// Amazonペイボタン
var amazonPayButtonsCV2 = document.querySelectorAll('.AmazonPayButton[id^="AmazonPayButton"]');
amazonPayButtonsCV2.forEach(function(button) {
button.addEventListener('click', function(e) {
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout(ga4Items, '', {
value: cartValue,
currency: 'JPY'
});
}
});
});
// 配送おまとめボタン
var combineBuyForms = document.querySelectorAll('form[action*="/order/combinedbuy"]');
combineBuyForms.forEach(function(form) {
form.addEventListener('submit', function(e) {
if (window.MOTENASU.ga4.ecommerce) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout(ga4Items, '', {
value: cartValue,
currency: 'JPY'
});
}
});
});
}
// ===== サンクスページ =====
var isThankPage = window.location.pathname.match(/^\/order\/payment\/complete\//) ||
window.location.pathname.match(/^\/product-buy-form\/[^\/]+\/complete$/);
if (isThankPage) {
var orderId = '{if isset($order_id)}{$order_id}{elseif !empty($order_data.0.order_id)}{$order_data.0.order_id}{/if}';
var items = [];
var totalPrice = 0;
var totalTax = 0;
var shippingFee = 0;
var couponCode = '';
{if !empty($order_data)}
{foreach from=$order_data item=item}
var itemPrice = parseFloat('{$item.item_price}') || 0;
var itemNum = parseInt('{$item.item_num}') || 1;
var itemTax = parseFloat('{if isset($item.tax)}{$item.tax}{else}0{/if}');
var itemPostage = parseFloat('{if isset($item.postage)}{$item.postage}{else}0{/if}');
items.push({
item_id: '{$item.item_id}',
item_name: '{$view->escape($item.item_name)}',
item_category: '{if !empty($item.item_title)}{$item.item_title}{/if}',
item_brand: '',
price: itemPrice,
quantity: itemNum
});
totalPrice += itemPrice * itemNum;
totalTax += itemTax;
if (items.length === 1) {
shippingFee = itemPostage;
}
{/foreach}
{/if}
var finalValue = totalPrice + totalTax + shippingFee;
if (orderId && items.length > 0 && window.MOTENASU.ga4.handlePurchase) {
window.MOTENASU.ga4.handlePurchase({
transaction_id: String(orderId),
value: parseFloat(finalValue),
tax: parseFloat(totalTax),
shipping: parseFloat(shippingFee),
currency: 'JPY',
coupon: couponCode,
items: items
});
}
}
});
</script>
<!-- ⬆️ ここまで追加 -->
</body>
共通レイアウトの実装完了
これで商品閲覧、カート操作、チェックアウト開始、購入完了の追跡が動作します。
▼【条件付き】フォーム一体型LP・アップセルLPへの設置
重要
フォーム一体型LPまたはアップセルLPを利用している場合のみ、以下の設定が必要です。
設置場所
- フォーム一体型LP共通HTML
- アップセルLP共通HTML
設置位置1:</head> 閉じタグの直前
<!-- ⬇️ ここから追加 -->
<script defer src="https://ga4.motenasu-cdn.com/ga4-common.js?v=20251031"></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 $user.id > 0}
window.MOTENASU.ga4.setUserIdAfterLogin("{$user.id}");
{/if}
});
</script>
<!-- ⬆️ ここまで追加 -->
</head>
設定値の変更ポイント
measurementId:共通レイアウトと同じGA4測定IDclientId:共通レイアウトと同じクライアント識別ID
設置位置2:</body> 閉じタグの直前
<!-- ⬇️ ここから追加 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
if (!window.MOTENASU || !window.MOTENASU.ga4) {
return;
}
// LP確認ページの検出
var isConfirmationPage = window.location.pathname.match(/^\/product-buy-form\/[^\/]+\/post$/);
// 確認ページの場合
if (isConfirmationPage) {
var confirmationData = {
item_id: '{if isset($item_data.item_id)}{$item_data.item_id}{elseif isset($item_data.item_cord)}{$item_data.item_cord}{/if}',
item_name: '{if isset($item_data.item_name)}{$view->escape($item_data.item_name)}{/if}',
price: parseFloat('{if isset($arr.item_price_tax)}{$arr.item_price_tax}{else}0{/if}'),
quantity: parseInt('{if isset($item_num)}{$item_num}{else}1{/if}'),
total_price: parseFloat('{if isset($arr.total_price)}{$arr.total_price}{else}0{/if}'),
postage_price: parseFloat('{if isset($arr.postage_price)}{$arr.postage_price}{else}0{/if}'),
post_fee_price: parseFloat('{if isset($arr.post_fee_price)}{$arr.post_fee_price}{else}0{/if}')
};
// データが有効な場合のみ処理
if (confirmationData.item_id && confirmationData.item_name) {
// begin_checkoutイベントを送信
if (window.MOTENASU && window.MOTENASU.ga4 && window.MOTENASU.ga4.ecommerce.trackBeginCheckout) {
window.MOTENASU.ga4.ecommerce.trackBeginCheckout([{
item_id: confirmationData.item_id,
item_name: confirmationData.item_name,
price: confirmationData.price,
quantity: confirmationData.quantity
}], '', {
value: confirmationData.total_price,
currency: 'JPY',
shipping: confirmationData.postage_price,
tax: 0
});
}
}
}
// ===== サンクスページ =====
var isThankPage = window.location.pathname.match(/^\/order\/payment\/complete\//) ||
window.location.pathname.match(/^\/product-buy-form\/[^\/]+\/complete$/);
if (isThankPage) {
var orderId = '{if isset($order_id)}{$order_id}{elseif !empty($order_data.0.order_id)}{$order_data.0.order_id}{/if}';
var items = [];
var totalPrice = 0;
var totalTax = 0;
var shippingFee = 0;
var couponCode = '';
{if !empty($order_data)}
{foreach from=$order_data item=item}
var itemPrice = parseFloat('{$item.item_price}') || 0;
var itemNum = parseInt('{$item.item_num}') || 1;
var itemTax = parseFloat('{if isset($item.tax)}{$item.tax}{else}0{/if}');
var itemPostage = parseFloat('{if isset($item.postage)}{$item.postage}{else}0{/if}');
items.push({
item_id: '{$item.item_id}',
item_name: '{$view->escape($item.item_name)}',
item_category: '{if !empty($item.item_title)}{$item.item_title}{/if}',
item_brand: '',
price: itemPrice,
quantity: itemNum
});
totalPrice += itemPrice * itemNum;
totalTax += itemTax;
if (items.length === 1) {
shippingFee = itemPostage;
}
{/foreach}
{/if}
var finalValue = totalPrice + totalTax + shippingFee;
if (orderId && items.length > 0 && window.MOTENASU.ga4.handlePurchase) {
window.MOTENASU.ga4.handlePurchase({
transaction_id: String(orderId),
value: parseFloat(finalValue),
tax: parseFloat(totalTax),
shipping: parseFloat(shippingFee),
currency: 'JPY',
coupon: couponCode,
items: items
});
}
}
});
</script>
<!-- ⬆️ ここまで追加 -->
</body>
LPの実装完了
これでLP確認ページでのチェックアウト開始、購入完了の追跡が動作します。
▼動作確認
デバッグモードでの確認
デバッグ時はdebugMode: true に変更すると、ブラウザの開発者ツール(F12)のコンソールで詳細なログが表示されます。
確認項目チェックリスト
| イベント | 確認方法 | コンソールログ例 |
|---|---|---|
| 商品閲覧 | 商品ページにアクセス | 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と表示される場合、ライブラリの読み込みに失敗しています<script defer src="...">タグが正しく記述されているか確認
原因2:測定IDまたはclientIdが間違っている
- MOTENASUから提供された正しい値に置き換えているか確認
- コンソールでエラーメッセージが出ていないか確認
原因3:Smarty変数が出力されていない
- 侍カートのバージョンによって、利用可能なSmarty変数が異なる場合があります
- コンソールで変数の値を確認してください
特定のイベントだけ送信されない
解決方法
- ページのHTM L構造がマニュアルと異なる可能性があります
- ボタンのセレクタ(
input[name="regular_sub"]等)を実際のHTMLに合わせて調整してください - 開発者ツールのElements タブでHTML構造を確認してください
▼注意事項・免責事項
動作保証について
本ガイドに記載の実装方法は、侍カートの標準的な構成を前提としています。以下の点にご注意ください。
- テンプレートカスタマイズの影響
- 大幅にカスタマイズされたテンプレートでは動作しない場合があります
- HTML構造が標準と異なる場合、コードの調整が必要になることがあります
- 侍カートバージョンの影響
- 侍カートのバージョンアップにより、Smarty変数や仕様が変更される可能性があります
- 新しいバージョンでは動作しなくなる可能性があります
- 外部スクリプトとの競合
- 他のトラッキングツールや解析ツールとの競合により、正常に動作しない場合があります
- JavaScriptエラーが発生している場合、本タグも動作しません
- ブラウザ環境の影響
- 広告ブロッカーやプライバシー保護機能により、イベント送信がブロックされる場合があります
- 古いブラウザではJavaScriptが正常に動作しない可能性があります
免責事項
- 本ガイドの実装により発生したいかなる損害についても、MOTENASUは一切の責任を負いません
- 実装前に必ずテスト環境での動作確認を行ってください
- 本番環境への適用は、お客様の責任において実施してください
- 実装後も定期的に動作確認を行い、正常にデータが送信されているか確認することを推奨します
サポートについて
- 基本的な実装サポートは提供いたしますが、個別のカスタマイズ対応には別途費用が発生する場合があります
- テンプレート固有の問題や、カスタマイズ部分については、サポート対象外となる場合があります
- 侍カートのバージョンアップに伴う修正対応には、対応に時間を要する場合があります