Go Back

Tracking eCommerce with Tag Manager

January 29, 2018

Piwik PRO comes integrated with a great feature allowing its users to track e-commerce actions on their websites. Adding items to carts, removing them and checking out are standard things done by most of the shops, but until now tracking them relied mostly on integrations which were only available for most popular e-commerce platforms. Less popular platforms or custom built shops required a developer to correctly setup tracking on them.
Piwik PRO Tag Manager is a game changer in this matter, it lets non-technical users to easily create e-commerce events that will be tracked by Piwik PRO. This guide will showcase the setup of such events. It requires a very basic understanding of HTML and JavaScript.

In order to track action of adding a product to the cart, Piwik PRO needs to receive the following method:

AddEcommerceItem(productSKU, productName, productCategory, price, quantity)
followed by the trackPageView method.

To do that, you need to create a new custom HTML asynchronous tag in the Tag Manager:

To add a product to the cart we need to pass following code:

<script>
_paq.push(['addEcommerceItem',SKU,NAME,CATEGORY,PRICE,QUANTITY]);
_paq.push(['trackEcommerceCartUpdate',PRICE]);
_paq.push(['trackPageView']);
</script>

Of course, we need to send correct values to every field in the methods. Here’s where we can use another of the Piwik PRO Tag Manager features: Variables.

Save your tag for now and go to Variables section.
Add one variable for each of the fields in the previous code (SKU, Name, Category, Price, Quantity)

Now the trick is to pull the data from our product website that will represent each field. Here’s how my product page looks like:

NOTE: As you can see we have name, price, SKU, and quantity present (Category field is optional, and I’m going to skip it).

What we need to do now is open the developer tools in the browser and seek out how we can pull each of the element to the Tag Manager.

SKU

Since SKU does not possess an id, it cannot be easily pulled by using predefined functions in the PPTM. Here’s where basic knowledge of Javascript comes in handy.

The class of this item (“value”) does not exist anywhere else. That’s why we can use following code to pull the SKU value:

function() {return document.getElementsByClassName("value")[0].innerHTML;}

We need to paste it to the variable and save it:

Name

Lucky for me the page title represents the product name. That’s why we can use one of the predefined Variables from category Document

Just type in “title” in the document name and you’re set!

Price

While price does have an ID it’s value is formatted and unformatted one is held inside of attribute and cannot be pulled easily from the page code, and we need to create a simple JavaScript function to get its value:

function() { return document.getElementById("product-price-2").dataset.priceAmount;}

Quantity

Quantity id equals “qty” so we can use DOM Element variable:

Now that we have all of our Variables ready we need to setup when to trigger our event. Let’s go to the triggers section of the Piwik PRO Tag Manager and create a new trigger. In my case I decided to use the Add To Cart button classes to decide when to fire the event:

Of course, you can use any of the multiple trigger options available in PPTM – this one is just one of the possibilities. Now that we have our trigger, we only need to put all of our pieces together under the tag that we created earlier:

As you can see our variables are represented by its name in double curly brackets. You can either write them yourself or pick them from the variables selector located on the right side of the editor window.

Now add your trigger at the bottom, hit “Save” button and then “Publish” (in this order!)

That’s it, you can now track your e-commerce carts! Of course creating the solution for whole shop support (updating the carts, purchasing etc.) requires creating, even more, events but the mechanics are the same as shown in here.

Please note that this is just one of the possible ways to Tag a shop and feel free to experiment with your own solutions working with your platform.