Best Pratice Shopify with Matomo Tag Manager

Hi,

I was just wondering if there is a best practice in how to use Matomo with tag manager like this here: https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-my-shopify-store/

Or is it possible to combine the normal tracking and the gtm tracking? I am asking because I also want to track scroll depth, clicks as well as e-com related information.

Would be great if anyone could help out because I somehow get doubled events sometimes.

Best regards
Johannes

Hi @Johannes_Boppre
I suggest you don’t mix MTM and standard JavaScript tracking for the same Matomo measurable.
For custom events, you can create a Custom Event Trigger, then push the event in the _mtm object:

window._mtm = window._mtm || [];
window._mtm.push({'event': 'purchase', 'orderTotal': 4545.45});

https://developer.matomo.org/guides/tagmanager/datalayer#triggering-an-event

Thanks, that is a very good idea, so currently I also have those two snippets available in my code:

 var _paq = window._paq = window._paq || [];
      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
       {% 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 | money_without_currency }} // (Optional) price
            ]);
        {% endif %}
      _paq.push(['trackPageView']);

and this one

var _paq = window._paq = window._paq || [];
            _paq.push(['addEcommerceItem',
               {{ item.product_id }}, // (Required) productSKU
               {{ item.title | json }}, // (Optional) productName
               {{ tag_array | json }}, // (Optional) productCategory
               {{ item.final_price | money_without_currency }}, // (Recommended) price
               {{ item.quantity }} // (Optional, defaults to 1) quantity
               ]);
            _paq.push(['trackEcommerceCartUpdate', {{ item.final_price | money_without_currency }}]);

if I understand correctly I should rather use the mtm variable that is there in parallel right?

Also for the checkout page I have the same “combination” with mtm und paq should I also use just one here?

<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="...";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '6']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();

{% if first_time_accessed %} 
{%  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 | money_without_currency | replace: ",","."}}, // (Recommended) price
    {{ line_item.quantity }} // (Optional, defaults to 1) quantity
 ]);
 {% endfor %}
 _paq.push(['trackEcommerceOrder',
    {{ checkout.order_id }}, // (Required) orderId
    {{ checkout.total_price | money_without_currency | replace: ",","."}}, // (Required) grandTotal (revenue)
    {{ checkout.subtotal_price | money_without_currency | replace: ",","."}}, // (Optional) subTotal
    {{ checkout.tax_price | money_without_currency | replace: ";","."}}, // (optional) tax
    {{ checkout.shipping_price  | money_without_currency | replace: ",","."}}, // (optional) shipping
    {{ checkout.discounts_amount | money_without_currency | replace: ",","."}} // (optional) discount
 ]);
  {% endif %}
</script>
<!-- End Matomo Code -->

Can I track the same e-Commerce events with mtm?

Sorry for the strange questions

Hi @Johannes_Boppre

Yes…And no! :wink:
In the MTM tag, you can call _paq code, but in the HTML, I advise you to use only _mtm… As today e-commerce tracking does not exist in MTM, you can integrate the e-commerce tracking in JavaScript MTM tag…
Please note that there is a feature request in a ticket for the e-commerce integration in MTM (and an example of e-commerce code):

thanks this will help, I will try to implement it and will share some feedback.

1 Like

there is also this plugin which should help: Tag Manager Extended but I am not quite sure how to implement the ecom tags correctly.

1 Like

Hi @Johannes_Boppre
Probably @RonanChardonneau or @ronan_hello can give you some hints?

That would be fantastic, a screenshot would be more than enough to get started in how to implement this

Hello,

In order to track Ecommerce in Shoopify, the only thing you have to do is to implement tracking using plugin or manual installation.

You can use GA4 dataLayer structure for Product/Category view and Purchase (not working in cart update).

The plugin Tag Manager Extended embed the tag for ecommerce tracking with GA4 dataLayer.

Make GA4 dataLayer compatible with Matomo:

Complete tutorial to setup e-commerce tracking manually with Tag Manager (French) :

Regars,
Ronan

2 Likes

Merci :raised_hands::pray: that’s what I needed