このガイドでは、カスタムEコマースプラットフォームを使用しているサイトにEコマーストラッキングを手動で実装する方法の例を提供します。WooCommerceのようなカスタムビルドでないEコマースプラットフォームを使用している場合は、Eコマース統合ページのページを参照してください。あなたのプラットフォーム用の統合方法やプラグインがすでに存在するかどうかを確認してください。またShopifyとの統合ガイドも提供しています。

このガイドはJavaScriptトラッキング・クライアントで使用するために書かれていますが、このガイドに含まれるトラッキング・コールは、カスタム HTML タグを使用してMatomo Matomo タグマネージャ経由で Web ページに組み込むことができます。

はじめに

Eコマースのアクションを追跡しやすくするために、すべてのカートアイテムを次のような1つのJavaScript変数cartProductsに含めることをお勧めします。これにより、Eコマースのアクションを Matomo に報告する際に、アイテムをループすることができます。以下は、変数がどのように作成されるかの例です。各商品に正しい詳細を割り当てるには、カスタムスクリプトを使用する必要があります。

//array containing all items in the cart along with product details
var cartProducts = [
{
    productSKU: "0123456789",
    productName: "Ecommerce Analytics Book",
    productCategory: ["Books", "Best sellers"],
    price: 9.99,
    quantity: 1
},
{
    productSKU: "9876543210",
    productName: "Product 2",
    productCategory: ["Electronics", "Gadgets"],
    price: 19.99,
    quantity: 2
},
{
    productSKU: "4567891230",
    productName: "Product 3",
    productCategory: ["Clothing", "T-Shirts"],
    price: 14.99,
    quantity: 3
},
{
    productSKU: "7890123456",
    productName: "Product 4",
    productCategory: ["Toys", "Kids"],
    price: 24.99,
    quantity: 2
}
];

カートアイテムの管理

カートの在庫を管理するには、サーバーサイドでカートアイテムのリストを管理する必要があります。これはcartProducts変数に代入します。顧客がまだカートに商品を入れていない場合、空の配列を cartProductsに割り当てて空のカートを追跡することをお勧めします。これにより、既存の商品の有無にかかわらず、単純に新しい商品を配列にプッシュできるようになり、商品を追加する前に配列が存在するかどうかをチェックする必要がなくなります。

Matomoでカートアイテムを管理するには2つの方法があります：
1.数量を減らした商品、削除した商品、カートに追加した商品のみを追跡することで、個々の商品の変更を管理します。
2.Matomoのすべてのカートアイテムをクリアし、カートの更新ごとにカートアイテムの完全なリストを追跡します。

本ガイドラインと実施方法を簡単にするため、以下ではオプション2を使用する。

Eコマース・アクションのトラッキング

さて、顧客のすべてのカートアイテムを格納した変数ができたので、これらのアイテムを Matomo に追跡する方法を見てみましょう。以下のスクリプトは、各項目をループし、製品の詳細を提供しながら、メソッドaddEcommerceItemを呼びだします。そして、そのcartProducts変数の全商品の合計金額を集計し、最後にメソッドtrackEcommerceCartUpdateを呼びだしてカートのデータをMatomoに送信します。

//reset the cart items in Matomo
_paq.push(['clearEcommerceCart']);

//loop through each item to report cart data to Matomo
cartProducts.forEach(function(product) {
    _paq.push(['addEcommerceItem',
    product.productSKU,
    product.productName,
    product.productCategory,
    product.price,
    product.quantity
]);
});

//calculate the sum total of all cart items
var totalCartValue = cartProducts.reduce(function(total, product) {
    return total + (product.price * product.quantity);
}, 0);

//push the cart data to Matomo
_paq.push(['trackEcommerceCartUpdate', totalCartValue]);

注文を追跡するために、前のステップで計算したのと同じカート値を使用してtrackEcommerceOrderメソッドを使用してください。税金や送料を追加する必要がある場合は、この呼び出しの中でこれらの値を指定してください…

_paq.push(['trackEcommerceOrder',
    "000123", // (Required) orderId
    totalCartValue, // (Required) grandTotal (revenue)
    0, // (Optional) subTotal
    0, // (optional) tax
    0, // (optional) shipping
    false // (optional) discount
]);

製品ビューのトラッキング

商品ビューのトラッキングは、カート時間のトラッキングと同様の方法で行うことができます。商品ページが読み込まれたら、商品の詳細を例えばこのviewProduct変数には、閲覧した商品の詳細が格納される。例えば

var viewProduct = {
    name: "Neon Lamp",
    sku: "SKU1",
    category: ["Category1", "Subcategory1"]
};

ページビューを追跡する直前にsetEcommerceViewメソッドに、変数から詳細を渡す。

//set the commerce view
_paq.push(['setEcommerceView',
    viewProduct.name, // Product name is not applicable for a category view.
    viewProduct.sku, // Product SKU is not applicable for a category view.
    viewProduct.category, // Product category, or array of up to 5 categories
]);

//you must call trackPageView when tracking an Ecommerce view
_paq.push(['trackPageView']);

さらに詳しく

このガイドでは、カスタムEコマースプラットフォームでMatomoのEコマースアクションを追跡するために必要なフレームワークの基本的な理解を提供します。また上記で説明した方法や、Matomoで利用可能なその他のEコマース方法の詳細については、こちらをご覧ください。
上級者向け：マニュアルEコマース追跡ガイド