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.

<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>

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]);