Go Back

Adding a new variable – dataLayer

January 29, 2018

As was mentioned previously in a documentation about variables, there are 2 main use cases for variables, to be used in tag templates or as a condition in a trigger. Normally you would add and initialize a new variable using Piwik PRO Tag Manager admin panel, but in certain cases it is advantageous to provide it on page-by-page basis. To do so, create data layer and then add a new variable using the following snippet:

<script>
window.sevenTag.variables.push({
‘name’: 'my-var33',
‘value’: 123,
type: {
collector_name: 'constant'
}
});
</script>

Multiple values can also be assigned at once:

<script>
window.sevenTag.variables.push({
‘name’: 'pageCategory',
‘value’: ‘about’,
type: {
collector_name: 'constant'
}
},
{
‘name’: 'clientIsLoggedIn',
‘value’: true,
type: {
collector_name: 'constant'
}
});
</script>

Using created variable inside the tag template

This feature is only fully supported since Piwik PRO Tag Manager version 1.12.

One of the core functionalities of custom variables is to use them in tag templates. When creating a new tag from predefined tag template (like Piwik or Google Analytics), some of the fields allow to use custom variables. In such case, it is also possible to use variables that are created dynamically. Since such variables were not created using admin panel, they are not visible in the dropdown menu. Instead, the special syntax should be used as follows:

{{ pageCategory }}

Similar syntax is also used when creating entirely new custom HTML tag. It is recommended to store the value in separate variable:

var pageCategory = {{ pageCategory }};

Piwik tag template allows to use variable as both Piwik site url and Piwik site id.

Google Analytics tag template with custom variable (called myGoogleAnalyticsTrackId) provided. This variable does not have to be created using admin panel and can be provided on page-by-page basis.

Custom tag template using myPiwikDocumentTitle variable. This variable does not have to be created using admin panel and can be provided on page-by-page basis.

Example: Using data layer to render a tag containing data layer variables

This example will display alert with values of 2 variables created using data layer. One is a pageCategory, that is set statically for this site, the other is continuously updated whenever user makes change to current order. To display the dialog click the purchase button. In order to view the example, save the following code as html file and insert Your container code in required page section.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PiwikPRO Tag Manager - data layer variable example</title>
<script>
window.dataLayer = window.dataLayer || [];
window.sevenTag.variables.push({
'name': 'pageCategory',
'value': 'purchase',
'type': {
'collector_name': 'constant'
}
});
</script>
</head>
<body>
<!-- Add Piwik PRO Tag Manager code here -->
<table id="product-table">
<tr>
<th>Product name</th>
<th>Quantity</th>
<th>Price/piece</th>
</tr>
<tr>
<td>Pencil</td>
<td><input type="number" min="0" step="1" value="1" /></td>
<td>$1</td>
</tr>
<tr>
<td>Eraser</td>
<td><input type="number" min="0" step="1" value="1" /></td>
<td>$2</td>
</tr>
</table>
<input type="button" value="Purchase" id="purchase-button">
<script>
var quantityButtons = document.getElementsByClassName('quantity-btn');
for (var i = 0; i < quantityButtons.length; i++) {
quantityButtons&#91;i&#93;.oninput = updateDataLayer;
}
function updateDataLayer () {
window.sevenTag.variables.push({
'name': 'orderValue',
'value': getOrderValue(),
'type': {
'collector_name': 'constant'
}
});
}
function getOrderValue() {
var orderValue = 0,
table = document.getElementById('product-table');
for (var rowId = 1; rowId < table.rows.length; rowId++) {
var row = table.rows&#91;rowId&#93;,
quantity = parseInt(row.cells&#91;1&#93;.firstChild.value),
pricePerPiece = parseInt(row.cells&#91;2&#93;.innerText.substr(1));
orderValue += quantity * pricePerPiece;
}
return orderValue;
}
</script>
</body>
</html>

Here is an example tag configuration that would display pageCategory and total order value when the purchase button is clicked. There is only one trigger, with configuration as displayed below.