Configurer Piwik Pro via GTM

👋 Découvrez comment installer Piwik Pro via Google Tag Manager en utilisant le Code HTML

Configuration Piwik Pro

👉🏻 Étapes
1. Récupérer l’id de la propriété piwik pro
‍2. Créer les dimensions personnalisées
‍3. Créer les objectifs

⚠️ Attention si vous utilisez le code disponible dans la section Installation vous initialisez également le Tag Manager de Piwik Pro.

⚠️ Piwik Pro n’a pas de scope user, seulement un scope event.

Ajouter le tag Piwik Pro à Google Tag Manager

👉🏻 Étapes
1. Créer un tag Custom HTML de page
‍2. Ajouter les dimensions personnalisées comme paramètres de pages
‍3. Créer les tags d’événements.

⚠️ Si vous n’utilisez pas le event value, il faut laisser sa place vide donc conserver le , , dans le script HTML.‍

Exemple de tag HTML de page vue :

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

Exemple de tag HTML pour l’envoi d’un événement :

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

Ajout des événements Ecommerce

Les événements Ecommerce disponibles nativement sur Piwik Pro sont:

• Product Detail View : ecommerceProductDetailView

• Add To Cart : ecommerceAddToCart

• Cart Update : ecommerceCartUpdate

• Remove From Cart : ecommerceRemoveFromCart

• Ecommerce Order : ecommerceOrder

☝ Les autres événements seront envoyés en tant qu'événements personnalisés.

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>