すでに Google Tag Manager (GTM) で E コマースの注文をトラッキングしている場合、GTM dataLayer を読み込むことで Matomo で E コマースのトラッキングを設定できるかもしれません。GTM dataLayer に既存の E コマース情報を持つユーザのために、すべての可能性とデータ構造をカバーすることはできません。このガイドでは特定の例を使用し、あなたのGTMの設定は異なるかもしれません。しかし、このガイドは、GTM の既存のデータを活用しながら、Matomo で E コマースアクションをトラッキングするための一般的な概念を提供します。

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

はじめに

まず、ウェブサイトに移動し、商品をカートに入れ、チェックアウトページに進みます。次に、商品データがGTM dataLayerのどこに存在するかを確認する必要があります。これには、ほとんどのブラウザ（Chrome、FireFox）で利用可能なデベロッパーツールを使用する必要があります。これは通常、ブラウザでF12を押すことでアクセスできます。コンソールタブでdataLayerでEnterを押す

これで配列要素のリストが作成されるはずです。各要素を展開し、カートにある商品を探します。これらは通常、’products’、’cart’、’items’、’ecommerce’ などの要素に格納されます。この例では、カート情報は’ecommerce’という要素に格納されています。個々のアイテムは、’items’ という名前のネストされた配列に格納されています。

カートの商品を取り出し、Matomoに追跡する

カートの商品がdataLayerのどこに格納されているかがわかれば、商品データの変数を作ることができる。上の例では、’ecommerce’要素がdataLayerのインデックス4にあることに注目してほしい：dataLayer[4].ecommerce.このインデックスは、dataLayerにプッシュされる他のデータによってページ間でしばしば変化する。このためfind関数を使用して、特定のEコマース要素を検索します。上記の例では、個々のカートアイテムは ecommerce.items に格納されているので、以下のスクリプトは変数 ecommerce.items のインスタンスを見つけます。

//find the ecommerce element in the dataLayer
var ecommerceData = dataLayer.find(function(item) {
    return item.ecommerce && item.ecommerce.items;
});

上のスクリプトでは、ecommerceData という変数に Ecommerce データが代入されています。この変数に含まれるカート項目をループし、Matomo に追跡することが可能になりました…

if (ecommerceData) {
    var items = ecommerceData.ecommerce.items;
    // Loop through the items and track each one to Matomo
    items.forEach(function(item, index) {
        _paq.push(['addEcommerceItem',
            item.item_id,       // Product SKU
            item.item_name,     // Product Name (Optional)
            item.item_category, // Product Category (Optional)
            item.item_price,    // Product Price (Optional)
            item.quantity       // Product Quantity (Optional)
        ]);
    });

    // Track the cart update with the total value
    _paq.push(['trackEcommerceCartUpdate', ecommerceData.ecommerce.value]);
}

ご注文

顧客が注文を行うと、この例では、該当する場合や dataLayer で利用可能な場合は税金と送料を追加しながら、次のコードを呼び出すだけです。

_paq.push(['trackEcommerceOrder',
    '12345',    // Order ID
    ecommerceData.ecommerce.value,    // Order revenue
    0,     // Order sub-total (optional)
    0,     // Order tax (optional)
    0,      // Order shipping cost (optional)
    0       // Order discount (optional)
]);

上記で説明した方法や Matomo で利用できるその他の E コマース方法の詳細については、 「上級者向け：マニュアルEコマース追跡ガイド」も参照してください。