技術情報

ShopifyストアにMatomoトラッキングコードをインストールするには？

2025年01月21日 Shopify 統合 追跡データ

 

2024年8月13日より、Shopifyはcheckout.liquidテーマを廃止します。Shopify Plusの加盟店は、Shopifyのチェックアウト拡張性にアップグレードし、カスタムピクセル機能を使用してMatomoのトラッキングを再設定する必要があります。
すべてのShopifyマーチャントには、Shopifyのカスタマーイベントのカスタムピクセルを使用してMatomoトラッキングコードをインストールすることをお勧めします。

以下の統合設定は、カスタムピクセルの統合に置き換えられます。

非推奨の統合

Matomoがストアのトラッキングを開始する前に、トラッキングコードを手動で追加する必要があります。これは、新しいテーマの使用を開始するたびに追加する必要があります。

Shopify.comアカウントとMatomoインスタンス（セルフホストまたはクラウド）が必要です。

MatomoでShopify Eコマースのアクションをトラッキングする（標準トラッキングコードを含む）

重要な注意事項以下の手順は、標準的なオンラインストアのセットアップで動作し、カテゴリ追跡のためのコレクションと製品ビューのための製品ページの使用に依存しています。また、カートの放棄トラッキングのために訪問者がカートに商品を追加したときに、訪問者がカートをロードするか、カートテンプレートがページにロードされることに依存します。カートに追加 “ボタンをスキップし、直接チェックアウトに行くセットアップを持っている場合は、カートの更新を追跡するために、以下の手順は動作しません。

以下の手順に従って、Shopifyウェブサイトの標準トラッキングとEコマーストラッキングをMatomoにセットアップしてください。

  1. Matomoのトラッキングコードをテキストエディタにコピーします。トラッキングコードは、Administration > Measurables/Websites > Manage > View Tracking codeにあります。
  2. Shopifyストアにログインし、オンラインストアに移動し、テーマをクリックし、ページ中央にある「カスタマイズ」ボタンをクリックしてください。
  3. 左上のテーマ名の横にある3つの点をクリックし、「Edit code 」をクリックします。
  4. 左側のファイルナビゲータでtheme.liquidファイルをクリックします。
  5. コードの<head>タグの終わりを見つけます。
  6. </head>を含む行の上に、テキストファイルからトラッキングコードを貼り付けます。
  7. 次のコードをtheme.liquidファイルの_paq.push([trackPageView])；の行にあるMatomoのトラッキングコードブロックにコピーし、「保存」をクリックします。
    {% if template == 'collection' %}
    {% capture tag_list %}{% for tag in collection.all_tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
    {% assign tag_array = tag_list | split: '::'%}
        _paq.push(['setEcommerceView',
        false, // Product name is not applicable for a category view.
        false, // Product SKU is not applicable for a category view.
        {{ tag_array | json }}, // Product category, or array of up to 5 categories
        ]);
    {% endif %}
    {% if template == 'product' %}
        {% capture tag_list %}{% for tag in product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
        {% assign tag_array = tag_list | split: '::'%}
        _paq.push(['setEcommerceView',
        {{ product.id }}, // (Required) productSKU
        {{ product.title | json}}, // (Optional) productName
        {{ tag_array | json }}, // (Optional) categoryName
        {{ product.price | divided_by:100 }} // (Optional) price
        ]);
    {% endif %}

完全な例は以下のようになります：

8.左ナビゲーションメニューの「Sections」フォルダの下にあるcart-template.liquidファイルをクリックして開きます。
9.ファイルの先頭に以下のコードブロックを挿入し、”保存 “をクリックします。


&ltscript>
var _paq = window._paq = window._paq || [];
{% for item in cart.items %}
{% capture tag_list %}{% for tag in item.product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
{% assign tag_array = tag_list | split: '::'%}
_paq.push(['addEcommerceItem',
   {{ item.product_id }}, // (Required) productSKU
   {{ item.title | json }}, // (Optional) productName
   {{ tag_array | json }}, // (Optional) productCategory
   {{ item.final_price | divided_by:100 }}, // (Recommended) price
   {{ item.quantity }} // (Optional, defaults to 1) quantity
   ]);
{% endfor %}
_paq.push(['trackEcommerceCartUpdate', {{ cart.total_price | divided_by:100 }}]);
</script>


10.左上の “Exit “をクリックして管理画面に戻り、左下の “Settings “をクリックします。
11.「チェックアウトとアカウント」をクリックします。

12.このページの一番下にある「注文状況ページ」までスクロールし、テキストファイルからトラッキングコードのスクリプトをコピーします。

13.</script>を含む行の下に以下のコードを貼り付けます。


{% if first_time_accessed %}
&ltscript>
{%  for line_item in checkout.line_items %}
{% capture tag_list %}{% for tag in line_item.product.tags limit:5 %}{{ tag }}{% if forloop.last == false %}::{% endif%}{% endfor %}{% endcapture %}
{% assign tag_array = tag_list | split: '::'%}
_paq.push(['addEcommerceItem',
    {{ line_item.product_id }}, // (Required) productSKU
    {{ line_item.title | json }}, // (Optional) productName
    {{ tag_array | json}}, // (Optional) productCategory
    {{ line_item.final_price | divided_by:100 }}, // (Recommended) price
    {{ line_item.quantity }} // (Optional, defaults to 1) quantity
]);
{% endfor %}
_paq.push(['trackEcommerceOrder',
    {{ checkout.order_id }}, // (Required) orderId
    {{ checkout.total_price | divided_by:100 }}, // (Required) grandTotal (revenue)
    {{ checkout.subtotal_price  | divided_by:100  }}, // (Optional) subTotal
    {{ checkout.tax_price  | divided_by:100  }}, // (optional) tax
    {{ checkout.shipping_price  | divided_by:100  }}, // (optional) shipping
    {{ checkout.discounts_amount  | divided_by:100  }} // (optional) discount
]);
</script>
{% endif %}

完全な例は次のようなものです：

14.Eコマースのトラッキングが期待通りに機能していることをテストします。
– Shopifyストアにアクセスし、いくつかの商品を表示し、少なくとも1つの商品をカートに追加します。
– Matomoのサイトにアクセスし、”訪問記録“レポートを作成し、カートの更新がMatomoに追跡されていることを確認します：

– 商品を閲覧したページビューにマウスカーソルを合わせ、商品/カテゴリの閲覧をトラッキングしていることを確認します：

– あなたのウェブサイトで注文をする（例えば100％割引クーポンを使ったり、あなたのお店が”テストモード“)をクリックし、注文がMatomoで追跡されていることを確認する：

おめでとうございます！これで、Shopify ストアから Matomo への E コマースビュー、カート更新、E コマース注文を追跡できるようになります。

重要な注意事項：Shopify は、コレクションや商品カテゴリをカートページや注文状況ページで利用できるようにしていません。そのため、Matomo では商品とコレクションのタグを商品カテゴリとして追跡します。Matomoは商品またはカテゴリビューごとに最大5つの商品カテゴリをサポートしているので、上記のコードブロックはアルファベット順に最初の5つのタグを追跡します。

ShopifyストアにMatomo Analyticsを統合する（Eコマーストラッキングなし）

MatomoインスタンスでEコマースデータをトラッキングしたくない場合は、以下の手順に従ってShopifyウェブサイトに基本的なMatomoトラッキングコードを追加することができます。

  1. Matomoのトラッキングコードをコピーします。トラッキングコードはAdmin > Measurables > Manage > View Tracking codeにあります。
  2. Shopifyストアにログインします。オンラインストアを選択し、ドロップダウンメニューからテーマを選択します。アクションメニューからコードを編集を選択します。
  3. レイアウトからtheme.liquidを選択します。
  4. コードの</head>のところまでスクロールダウンしてください。このすぐ上に、Matomoのトラッキングコードを貼り付けます（ステップ1）。
  5. ウィンドウの右上にある「保存」をクリックします。
  6. (オプションステップ) Shopify Plus (Shopifyエンタープライズバージョン)をお持ちの場合、Shopifyマーチャントマネージャーにご連絡ください。
  7. ブラウザでウェブサイトを開き、いくつかのアクションを実行します（例：異なるページに移動する）
  8. Matomoにログインし、ウェブサイトの訪問が追跡されているかどうかを確認する。

おめでとうございます！これでShopifyストアの訪問者をトラッキングできるようになりました。ハッピーアナリティクス