Guides

Tags

In the tags overview, you get some sample snippets of how to use or integrate the tracking. The several snippets make use of data layer variables (DLV).

Base tag

The base tag includes the needed javaScript library to enable tracking calls depending on the page type or event and needs to be included on all pages. It must fire before any of the other tags below — they push to the _paq queue that the base tag initialises and loads piwik.js against. In Google Tag Manager set its trigger to All Pages and, if you use tag sequencing or priorities, give it the highest priority so it runs first.

<script type="text/javascript">
  var _paq = window._paq || [];
  
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://piwik.makaira.io/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {{Makaira Tracking ID}}]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

AddToCart tag

The addToCart is a custom event that needs to be triggered on cart changes.

<script type="text/javascript">
(function() {
  var _paq = window._paq = window._paq || [];
  
  var product = {{DLV - addedToCart}}
  _paq.push(["addEcommerceItem",product.sku,product.name,product.category,product.price,product.quantity])
  _paq.push(["trackEcommerceCartUpdate",{{DLV - totalCartValue}}]);
})();  
</script>

Purchase tag

The purchase tag is triggered by a custom event or with your Thank-You-URL. This one is very important for your conversion rate optimizing.

<script type="text/javascript">
(function() {  
  var _paq = window._paq = window._paq || [];
  
  var order = {{DLV - order}};
  var order_items = order.products;
  for(var i = 0; i < order_items.length; i++){
    _paq.push(["addEcommerceItem", order_items[i].sku, order_items[i].name, order_items[i].category, order_items[i].price, order_items[i].quantity]);
  }
  _paq.push(["trackEcommerceOrder", order.id, order.revenue, order.subtotal, order.tax, order.shippingtotal, order.discounttotal]);  
  _paq.push(["trackPageView"]);
})();  
</script>

Category, product detail tag

This tag is used to track the behavior of your customer and is triggered by pages with a detail URL pattern or a category URL pattern or ProductDetailView & ProductImpression.

<script type="text/javascript">
(function() {
  var _paq = window._paq = window._paq || [];
  
  var trackView = false;
  var arg1, arg2, arg3;
  switch ({{DLV - pageType}}) {
    case ('category'):
      var cat = {{DLV - category}};
      arg1 = false;
      arg2 = false;
      arg3 = cat;
      trackView = true;
      break;
    
    case ('product'):
      var prod = {{DLV - product}};
      arg1 = prod.sku;
      arg2 = prod.name;
      arg3 = prod.brand;
      trackView = true;
      break;
  }

  if (trackView) {
    _paq.push(['setEcommerceView', arg1, arg2, arg3]);
    _paq.push(['trackPageView']);
  }
})();  
</script>

Landing page / generic page view tag

The base, A/B-Testing, and goals tags do not call trackPageView. Page views are only recorded for pageType values matched by the product, category, search, and purchase tags above. Without an additional tag, page views for the homepage, CMS pages, landing pages, the cart, and any other non-commerce URLs are not tracked in Matomo — they appear neither in Visits → Pages reports nor as the base for any custom or A/B segment filtered by pageUrl.

Trigger the snippet below on every page that is not a product, category, or searchresults page (and not your thank-you URL). It records a standard page view so reports cover the full site.

<script type="text/javascript">
(function() {
  var _paq = window._paq = window._paq || [];
  
  var covered = ['product', 'category', 'searchresults'];
  if (covered.indexOf({{DLV - pageType}}) === -1) {
    _paq.push(['trackPageView']);
  }
})();  
</script>
📘

In Google Tag Manager you can also express this as a trigger condition: fire when {{DLV - pageType}} does not equal product, category, or searchresults. Pair this with the purchase tag's own trigger on the thank-you URL so you don't double-count the order page.

Site search tag

The site search tag should be triggered by pages with search page URL pattern or SearchResultView.

<script type="text/javascript">
(function() {
  var _paq = window._paq = window._paq || [];
  
  var trackView = false;
  var arg1, arg2, arg3;
  
  switch ({{DLV - pageType}}) {
    case ('searchresults'):
      arg1 = {{DLV - search.searchTerm}};
      arg2 = false;
      arg3 = {{DLV - search.resultCount}};
      trackView = true;
      break;
  }
  if (trackView) {
    _paq.push(['deleteCustomVariable', 'page']);
    _paq.push(['trackSiteSearch', arg1, arg2, arg3]);
    _paq.push(['trackPageView']);
  }
})();  
</script>

A/B-Testing tag

The A/B-Testing tag should also be triggered by all pages to record the playout of the variants and measure the conversion.

<script type="text/javascript">
(function() {  
  var _paq = window._paq = window._paq || [];
  
  var experiments = {{DLV - experiments}};
  for(var i = 0; i < experiments.length; i++){
   _paq.push(['trackEvent', 'abtesting', experiments[i].experiment, experiments[i].variation]);
  }
})();  
</script>

Goals tag

To trigger a goal conversion:

_paq.push(['trackGoal', <goalId>]);

With goalId is the id of the goal.

Example:

// logs a conversion for goal 1
_paq.push(['trackGoal', 1]);

Updated 10 days ago