How do I install the Matomo tracking code on my Shopify store?
From 13 August, 2024, Shopify is deprecating the checkout.liquid theme. Shopify Plus merchants need to upgrade to Shopify’s Checkout Extensibility and reconfigure Matomo’s tracking using the Custom Pixel feature.
It is recommended for all Shopify merchants to install the Matomo tracking code using the custom pixel in Shopify’s Customer Events.
The integration configuration below is replaced with the custom pixel integration.
Deprecated integration
Before Matomo can start tracking your store, you will have to manually add the tracking code. This needs to be added any time you start using a new theme.
You’ll need a Shopify.com account and your Matomo instance (Self-hosted or Cloud).
Tracking Shopify Ecommerce Actions in Matomo (Includes standard tracking code)
Important note: The below steps should work for a standard Online Store setup and relies on the use of collections for category tracking and product pages for product views. It also relies on the visitor loading the cart or the cart template loading on the page when a visitor adds an item to their cart for Abandoned cart tracking. If you have a setup that skips the “Add to cart” button and goes directly to checkout, then the steps below will not work to track Cart updates.
Follow the steps below to setup standard tracking as well as Ecommerce tracking of your Shopify website to Matomo.
-
In Matomo, copy your Matomo tracking code to a text editor. You will find your tracking code in Administration > Measurables/Websites > Manage > View Tracking code
-
Login to your Shopify store and navigate to Online Store, click on Themes and then on the “Customize” button in the center of the page.
-
Click on the 3 dots next to the name of the theme in the top left corner, then click “Edit code”
-
Click on the
theme.liquidfile in the file navigator on the left
-
Find the end of the
<head>tag in the code
-
Paste the tracking code from your text file above the line that contains
</head>
-
Copy the following code into your Matomo tracking code block above the _paq.push([trackPageView]); line in the
theme.liquidfile and click “Save”.
{% 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 %}
A complete example would look like the following:
8. Click on the cart-template.liquid file in the left navigation menu under the “Sections” folder to open it
9. Insert the following code block at the top of the file and click “Save”
<script>
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. Click “Exit” in the top left corner to return to the Admin page and click “Settings” in the bottom left corner
11. Click on “Checkout and Accounts”
12. Scroll all the way to the bottom of this page where it shows “Order status page” and copy your tracking code script from your text file
13. Paste the following code below the line that contains </script>
{% if first_time_accessed %}
<script>
{% 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 %}
A complete example would look like:
14. Test that the Ecommerce tracking is working as expected.
– Go to your Shopify store, view some products and add at least one product to your Cart.
– Go to your Matomo site and check the “Visits Log” report and check that the Cart Update is tracked to Matomo:
– Hover your mouse over the Pageview where you viewed the product to confirm that you’re tracking Product/Category views:
– Place an order on your website (Using for example a 100% discount coupon or while your store is placed in “Test Mode“) and check that the order is tracked in Matomo:
Congratulations! You should now be able to track Ecommerce Views, Cart Updates and Ecommerce Orders to Matomo from your Shopify store.
Important note: Shopify does not make the Collections or Product Categories available in the Cart or Order Status pages. For that reason we track the product and collections Tags as the product category in Matomo. Matomo supports a maximum of 5 product categories per product or category view, so the code blocks above will track the first 5 tags in alphabetical order.
Integrate Matomo Analytics into your Shopify Store (No Ecommerce tracking)
If you don’t want to track Ecommerce data in your Matomo instance, then you can follow the steps below to add the basic Matomo tracking code to your Shopify website.
- In Matomo, copy your Matomo tracking code. You will find your tracking code in Admin > Measurables > Manage > View Tracking code
- Login to your Shopify store. Select Online Store, then chose Themes from the dropdown menu. Select Edit Code from the Actions menu.
- Select theme.liquid from the Layout.
- Scroll down to where you can see </head> in the code. Immediately above this, paste your Matomo tracking code (Step 1).
- Click Save from the top right of the window.
- (optional step) If you have Shopify Plus (Shopify enterprise version), reach out to your Shopify Merchant Manager who will be able to install Matomo in your checkout pages.
- Open your website in the browser and perform some actions (eg: navigate to different pages)
- Login to Matomo and check if the website visit is tracked
Congratulations, you should now be successfully tracking your visitors on your Shopify store.
Happy Analytics!
Disclaimer: The use of any third-party tools (plugins, extensions, platforms, APIs, widgets, etc.) is at your own risk. Matomo does not own, control, maintain or support any third-party tools that integrate with our product. We recommend checking your privacy setup is correctly configured across your environment when using any third-party tools.