Configuring Piwik Pro via GTM

👋 Find out how to install Piwik Pro via Google Tag Manager using HTML Code

Piwik Pro configuration

👉🏻 Steps
1. Retrieve the piwik pro property id
‍2. Create custom dimensions
‍3. Create goals

⚠️ Please note that if you use the code available in the Installation section, you will also initialize Piwik Pro's Tag Manager.

⚠️ Piwik Pro has no user scope, only an event scope.

Add Piwik Pro to Google Tag Manager

👉🏻 Steps
1. Create a Custom HTML page tag
‍2. Add custom dimensions as page parameters
‍3. Create event tags.

⚠️ If you are not using the event valueyou have to leave your place empty, so keep the , , in the HTML script.‍

Example of a page view HTML tag :

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['setCustomDimensionValue', 2, {{page category}}]);
  _paq.push(['setCustomDimensionValue', 3, {{environment name}}]);
  _paq.push(["setUserId", {{user id}}]);
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);
  (function() {
    var u = "https://lilycareanalyticsfr.piwik.pro/"; // Remplacer par la destination du site Piwik Pro
    _paq.push(["setTrackerUrl", u + "ppms.php"]);
    _paq.push(["setSiteId", "ID PIWIK"]);
    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 + "ppms.js"; 
    s.parentNode.insertBefore(g, s);
  })();
</script>

Example of an HTML tag for sending an event :

_paq.push([
  "trackEvent",
  "Event Category",
  "Event Action",
  "Event name",
  "Event value",
  {
    "dimension7": "{{param1}}",
    "dimension8": "{{param2}}",
    "dimension9": "{{param3}}"
  }
]);

Adding Ecommerce events

The Ecommerce events natively available on Piwik Pro are:

• Product Detail View : ecommerceProductDetailView

• Add To Cart : ecommerceAddToCart

• Cart Update: ecommerceCartUpdate

• Remove From Cart : ecommerceRemoveFromCart

• Ecommerce Order : ecommerceOrder

☝ Other events will be sent as custom events.

Product Detail View

Js Piwik Pro Product Detail View :

<!-- Piwik -->
<script type="text/javascript">
_paq.push([
  "ecommerceProductDetailView",
  [
    {
      sku: "craft-311",
      name: "Unicorn Iron on Patch",
      category: ["Crafts & Sewing", "Toys"],
      price: "49.90",
      quantity: 3,
      brand: "DMZ",
      variant: "blue",
      customDimensions: {
        1: "coupon-2020",
        2: "20%"
      }
    }
  ]
]);
</script>

Add To Cart

Js Piwik Pro add to cart :

<!-- Piwik -->
<script type="text/javascript">
_paq.push([
  "ecommerceAddToCart",
  [
    {
      sku: "craft-311",
      name: "Unicorn Iron on Patch",
      category: "Crafts & Sewing",
      price: "49.90",
      quantity: 3,
      brand: "DMZ",
      variant: "blue",
      customDimensions: {
        1: "coupon-2020",
        2: "20%"
      }
    }
  ]
]);
</script>

Purchase

Js Piwik Pro purchase :

<!-- Piwik -->
<script type="text/javascript">
_paq.push([
  "ecommerceOrder",
  [
    {
      sku: "craft-311",
      name: "Unicorn Iron on Patch",
      category: "Crafts & Sewing",
      price: "49.90",
      quantity: 3,
      brand: "DMZ",
      variant: "blue"
    }
  ],
  {
    orderId: "98876754678",
    grandTotal: "156.00",
    tax: "30.00",
    shipping: "3.54"
  }
]);
</script>