added screen to see custom variable usages

21 files changed, 493 insertions, 27 deletions

diff --git a/plugins/CustomVariables/API.php b/plugins/CustomVariables/API.php
index fa3a99dbca..57832927e5 100644
--- a/plugins/CustomVariables/API.php
+++ b/plugins/CustomVariables/API.php
@@ -8,10 +8,12 @@
  */
 namespace Piwik\Plugins\CustomVariables;
 
+use Piwik\API\Request;
 use Piwik\Archive;
 use Piwik\DataTable;
 use Piwik\Date;
 use Piwik\Metrics;
+use Piwik\Piwik;
 use Piwik\Plugins\Actions\Actions\ActionSiteSearch;
 
 /**
@@ -71,6 +73,7 @@ class API extends \Piwik\Plugin\API
             }
         }
 
+
         if ($flat) {
             $dataTable->filterSubtables('Piwik\Plugins\CustomVariables\DataTable\Filter\CustomVariablesValuesFromNameId');
         } else {
@@ -109,9 +112,62 @@ class API extends \Piwik\Plugin\API
             // Hack Ecommerce product price tracking to display correctly
             $dataTable->renameColumn('price_viewed', 'price');
         }
+
         $dataTable->filter('Piwik\Plugins\CustomVariables\DataTable\Filter\CustomVariablesValuesFromNameId');
 
         return $dataTable;
     }
+
+    /**
+     * Get a list of all available custom variable slots (scope + index) and which names have been used so far in
+     * each slot since the beginning of the website.
+     *
+     * @param int $idSite
+     * @return array
+     */
+    public function getUsagesOfSlots($idSite)
+    {
+        Piwik::checkUserHasAdminAccess($idSite);
+
+        $numVars = CustomVariables::getNumUsableCustomVariables();
+
+        $usedCustomVariables = array(
+            'visit' => array_fill(1, $numVars, array()),
+            'page'  => array_fill(1, $numVars, array()),
+        );
+
+        /** @var DataTable $customVarUsages */
+        $customVarUsages = Request::processRequest('CustomVariables.getCustomVariables',
+            array('idSite' => $idSite, 'period' => 'range', 'date' => '2008-12-12,today',
+                  'format' => 'original', 'serialize' => '0')
+        );
+
+        foreach ($customVarUsages->getRows() as $row) {
+            $slots = $row->getMetadata('slots');
+
+            if (!empty($slots)) {
+                foreach ($slots as $slot) {
+                    $usedCustomVariables[$slot['scope']][$slot['index']][] = array(
+                        'name' => $row->getColumn('label'),
+                        'nb_visits' => $row->getColumn('nb_visits'),
+                        'nb_actions' => $row->getColumn('nb_actions'),
+                    );
+                }
+            }
+        }
+
+        $grouped = array();
+        foreach ($usedCustomVariables as $scope => $scopes) {
+            foreach ($scopes as $index => $cvars) {
+                $grouped[] = array(
+                    'scope' => $scope,
+                    'index' => $index,
+                    'usages' => $cvars
+                );
+            }
+        }
+
+        return $grouped;
+    }
 }
 
diff --git a/plugins/CustomVariables/Archiver.php b/plugins/CustomVariables/Archiver.php
index bc43cbc8dd..4a53ab78df 100644
--- a/plugins/CustomVariables/Archiver.php
+++ b/plugins/CustomVariables/Archiver.php
@@ -8,7 +8,6 @@
  */
 namespace Piwik\Plugins\CustomVariables;
 
-use Piwik\Common;
 use Piwik\Config;
 use Piwik\DataAccess\LogAggregator;
 use Piwik\DataArray;
@@ -35,6 +34,9 @@ class Archiver extends \Piwik\Plugin\Archiver
     protected $maximumRowsInSubDataTable;
     protected $newEmptyRow;
 
+    private $metadata = array();
+    private $metadataFlat = array();
+
     function __construct($processor)
     {
         parent::__construct($processor);
@@ -74,6 +76,16 @@ class Archiver extends \Piwik\Plugin\Archiver
         $this->removeVisitsMetricsFromActionsAggregate();
         $this->dataArray->enrichMetricsWithConversions();
         $table = $this->dataArray->asDataTable();
+
+        foreach ($table->getRows() as $row) {
+            $label = $row->getColumn('label');
+            if (!empty($this->metadata[$label])) {
+                foreach ($this->metadata[$label] as $name => $value) {
+                    $row->addMetadata($name, $value);
+                }
+            }
+        }
+
         $blob = $table->getSerialized(
             $this->maximumRowsInDataTableLevelZero, $this->maximumRowsInSubDataTable,
             $columnToSort = Metrics::INDEX_NB_VISITS
@@ -118,6 +130,8 @@ class Archiver extends \Piwik\Plugin\Archiver
             $key = $row[$keyField];
             $value = $this->cleanCustomVarValue($row[$valueField]);
 
+            $this->addMetadata($keyField, $key, Model::SCOPE_VISIT);
+
             $this->dataArray->sumMetricsVisits($key, $row);
             $this->dataArray->sumMetricsVisitsPivot($key, $value, $row);
         }
@@ -137,6 +151,8 @@ class Archiver extends \Piwik\Plugin\Archiver
             $key = $row[$keyField];
             $value = $this->cleanCustomVarValue($row[$valueField]);
 
+            $this->addMetadata($keyField, $key, Model::SCOPE_PAGE);
+
             $alreadyAggregated = $this->aggregateEcommerceCategories($key, $value, $row);
             if (!$alreadyAggregated) {
                 $this->aggregateActionByKeyAndValue($key, $value, $row);
@@ -145,6 +161,22 @@ class Archiver extends \Piwik\Plugin\Archiver
         }
     }
 
+    private function addMetadata($keyField, $label, $scope)
+    {
+        $index = (int) str_replace('custom_var_k', '', $keyField);
+
+        if (!array_key_exists($label, $this->metadata)) {
+            $this->metadata[$label] = array('slots' => array());
+        }
+
+        $uniqueId = $label . 'scope' . $scope . 'index' . $index;
+
+        if (!isset($this->metadataFlat[$uniqueId])) {
+            $this->metadata[$label]['slots'][] = array('scope' => $scope, 'index' => $index);
+            $this->metadataFlat[$uniqueId] = true;
+        }
+    }
+
     /**
      * @param string $key
      * @param string $value
@@ -205,6 +237,7 @@ class Archiver extends \Piwik\Plugin\Archiver
         }
         while ($row = $query->fetch()) {
             $key = $row[$keyField];
+
             $value = $this->cleanCustomVarValue($row[$valueField]);
             $this->dataArray->sumMetricsGoals($key, $row);
             $this->dataArray->sumMetricsGoalsPivot($key, $value, $row);
diff --git a/plugins/CustomVariables/Controller.php b/plugins/CustomVariables/Controller.php
index 59a4a949de..e73e58b257 100644
--- a/plugins/CustomVariables/Controller.php
+++ b/plugins/CustomVariables/Controller.php
@@ -8,7 +8,20 @@
  */
 namespace Piwik\Plugins\CustomVariables;
 
+use Piwik\Common;
+use Piwik\DataTable;
+use Piwik\Piwik;
+
 class Controller extends \Piwik\Plugin\Controller
 {
+    public function manage()
+    {
+        $idSite = Common::getRequestVar('idSite');
+
+        Piwik::checkUserHasAdminAccess($idSite);
+
+        return $this->renderTemplate('manage', array());
+    }
+
 }
 
diff --git a/plugins/CustomVariables/CustomVariables.php b/plugins/CustomVariables/CustomVariables.php
index b8a57ad6a6..03238212f1 100644
--- a/plugins/CustomVariables/CustomVariables.php
+++ b/plugins/CustomVariables/CustomVariables.php
@@ -22,7 +22,10 @@ class CustomVariables extends \Piwik\Plugin
     {
         return array(
             'API.getSegmentDimensionMetadata' => 'getSegmentsMetadata',
-            'Live.getAllVisitorDetails'       => 'extendVisitorDetails'
+            'Live.getAllVisitorDetails'       => 'extendVisitorDetails',
+            'AssetManager.getJavaScriptFiles' => 'getJsFiles',
+            'Translate.getClientSideTranslationKeys' => 'getClientSideTranslationKeys',
+            'AssetManager.getStylesheetFiles'        => 'getStylesheetFiles',
         );
     }
 
@@ -144,4 +147,32 @@ class CustomVariables extends \Piwik\Plugin
         }
     }
 
+    public function getClientSideTranslationKeys(&$translationKeys)
+    {
+        $translationKeys[] = 'CustomVariables_CustomVariables';
+        $translationKeys[] = 'CustomVariables_ManageDescription';
+        $translationKeys[] = 'CustomVariables_Scope';
+        $translationKeys[] = 'CustomVariables_Index';
+        $translationKeys[] = 'CustomVariables_Usages';
+        $translationKeys[] = 'CustomVariables_Unused';
+        $translationKeys[] = 'CustomVariables_CreateNewSlot';
+        $translationKeys[] = 'CustomVariables_UsageDetails';
+        $translationKeys[] = 'CustomVariables_CurrentAvailableCustomVariables';
+        $translationKeys[] = 'CustomVariables_ToCreateCustomVarExecute';
+        $translationKeys[] = 'CustomVariables_CreatingCustomVariableTakesTime';
+        $translationKeys[] = 'General_Loading';
+    }
+
+    public function getStylesheetFiles(&$stylesheets)
+    {
+        $stylesheets[] = "plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.less";
+    }
+
+    public function getJsFiles(&$jsFiles)
+    {
+        $jsFiles[] = "plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.model.js";
+        $jsFiles[] = "plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.controller.js";
+        $jsFiles[] = "plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.js";
+    }
+
 }
diff --git a/plugins/CustomVariables/Menu.php b/plugins/CustomVariables/Menu.php
new file mode 100644
index 0000000000..80e1d78193
--- /dev/null
+++ b/plugins/CustomVariables/Menu.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+namespace Piwik\Plugins\CustomVariables;
+
+use Piwik\Common;
+use Piwik\Menu\MenuUser;
+use Piwik\Piwik;
+use Piwik\Plugins\UsersManager\UserPreferences;
+
+/**
+ * This class allows you to add, remove or rename menu items.
+ * To configure a menu (such as Admin Menu, Reporting Menu, User Menu...) simply call the corresponding methods as
+ * described in the API-Reference http://developer.piwik.org/api-reference/Piwik/Menu/MenuAbstract
+ */
+class Menu extends \Piwik\Plugin\Menu
+{
+    public function configureUserMenu(MenuUser $menu)
+    {
+        $userPreferences = new UserPreferences();
+        $default = $userPreferences->getDefaultWebsiteId();
+        $idSite = Common::getRequestVar('idSite', $default, 'int');
+
+        if (Piwik::isUserHasAdminAccess($idSite)) {
+            $menu->addManageItem('Custom Variables', $this->urlForAction('manage'), $orderId = 30);
+        }
+    }
+}
diff --git a/plugins/CustomVariables/Model.php b/plugins/CustomVariables/Model.php
index 9d98a352fa..235809e1da 100644
--- a/plugins/CustomVariables/Model.php
+++ b/plugins/CustomVariables/Model.php
@@ -15,12 +15,14 @@ use Piwik\Log;
 
 class Model
 {
-    const SCOPE_PAGE = 'log_link_visit_action';
-    const SCOPE_VISIT = 'log_visit';
-    const SCOPE_CONVERSION = 'log_conversion';
     const DEFAULT_CUSTOM_VAR_COUNT = 5;
 
+    const SCOPE_PAGE = 'page';
+    const SCOPE_VISIT = 'visit';
+    const SCOPE_CONVERSION = 'conversion';
+
     private $scope = null;
+    private $table = null;
 
     public function __construct($scope)
     {
@@ -29,21 +31,27 @@ class Model
         }
 
         $this->scope = $scope;
+        $this->table = Common::prefixTable($this->getTableNameFromScope($scope));
     }
 
-    public function getScopeName()
+    private function getTableNameFromScope($scope)
     {
         // actually we should have a class for each scope but don't want to overengineer it for now
-        switch ($this->scope) {
+        switch ($scope) {
             case self::SCOPE_PAGE:
-                return 'Page';
+                return 'log_link_visit_action';
             case self::SCOPE_VISIT:
-                return 'Visit';
+                return 'log_visit';
             case self::SCOPE_CONVERSION:
-                return 'Conversion';
+                return 'log_conversion';
         }
     }
 
+    public function getScopeName()
+    {
+        return ucfirst($this->scope);
+    }
+
     /**
      * @see getHighestCustomVarIndex()
      * @return int
@@ -96,8 +104,7 @@ class Model
 
     private function getCustomVarColumnNames()
     {
-        $dbTable = $this->getDbTableName();
-        $columns = Db::getColumnNamesFromTable($dbTable);
+        $columns = Db::getColumnNamesFromTable($this->table);
 
         $customVarColumns = array_filter($columns, function ($column) {
             return false !== strpos($column, 'custom_var_');
@@ -108,14 +115,13 @@ class Model
 
     public function removeCustomVariable()
     {
-        $dbTable = $this->getDbTableName();
-        $index   = $this->getHighestCustomVarIndex();
+        $index = $this->getHighestCustomVarIndex();
 
         if ($index < 1) {
             return null;
         }
 
-        Db::exec(sprintf('ALTER TABLE %s ', $dbTable)
+        Db::exec(sprintf('ALTER TABLE %s ', $this->table)
                . sprintf('DROP COLUMN custom_var_k%d,', $index)
                . sprintf('DROP COLUMN custom_var_v%d;', $index));
 
@@ -124,22 +130,16 @@ class Model
 
     public function addCustomVariable()
     {
-        $dbTable = $this->getDbTableName();
-        $index   = $this->getHighestCustomVarIndex() + 1;
-        $maxLen  = CustomVariables::getMaxLengthCustomVariables();
+        $index  = $this->getHighestCustomVarIndex() + 1;
+        $maxLen = CustomVariables::getMaxLengthCustomVariables();
 
-        Db::exec(sprintf('ALTER TABLE %s ', $dbTable)
+        Db::exec(sprintf('ALTER TABLE %s ', $this->table)
                . sprintf('ADD COLUMN custom_var_k%d VARCHAR(%d) DEFAULT NULL,', $index, $maxLen)
                . sprintf('ADD COLUMN custom_var_v%d VARCHAR(%d) DEFAULT NULL;', $index, $maxLen));
 
         return $index;
     }
 
-    private function getDbTableName()
-    {
-        return Common::prefixTable($this->scope);
-    }
-
     public static function getCustomVariableIndexFromFieldName($fieldName)
     {
         $onlyNumber = str_replace(array('custom_var_k', 'custom_var_v'), '', $fieldName);
diff --git a/plugins/CustomVariables/Tracker/CustomVariablesRequestProcessor.php b/plugins/CustomVariables/Tracker/CustomVariablesRequestProcessor.php
index 44e6d59350..720aca8431 100644
--- a/plugins/CustomVariables/Tracker/CustomVariablesRequestProcessor.php
+++ b/plugins/CustomVariables/Tracker/CustomVariablesRequestProcessor.php
@@ -9,6 +9,8 @@
 namespace Piwik\Plugins\CustomVariables\Tracker;
 
 use Piwik\Common;
+use Piwik\Plugins\CustomVariables\CustomVariables;
+use Piwik\Plugins\CustomVariables\Model;
 use Piwik\Tracker\Request;
 use Piwik\Tracker\RequestProcessor;
 use Piwik\Tracker\Visit\VisitProperties;
@@ -36,7 +38,7 @@ class CustomVariablesRequestProcessor extends RequestProcessor
     public function processRequestParams(VisitProperties $visitProperties, Request $request)
     {
         // TODO: re-add optimization where if custom variables exist in request, don't bother selecting them in Visitor
-        $visitorCustomVariables = $request->getCustomVariables($scope = 'visit');
+        $visitorCustomVariables = $request->getCustomVariables($scope = Model::SCOPE_VISIT);
         if (!empty($visitorCustomVariables)) {
             Common::printDebug("Visit level Custom Variables: ");
             Common::printDebug($visitorCustomVariables);
diff --git a/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.controller.js b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.controller.js
new file mode 100644
index 0000000000..4b6b1c213d
--- /dev/null
+++ b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.controller.js
@@ -0,0 +1,35 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('ManageCustomVarsController', ManageCustomVarsController);
+
+    ManageCustomVarsController.$inject = ['manageCustomVarsModel', 'piwik', '$filter'];
+
+    function ManageCustomVarsController(manageCustomVarsModel, piwik, $filter) {
+        manageCustomVarsModel.fetchUsages();
+
+        this.model = manageCustomVarsModel;
+        this.createCustomVariableSlot = function () {
+            var highestIndex = 5;
+            angular.forEach(manageCustomVarsModel.customVariables, function (customVar) {
+                if (customVar.index > highestIndex) {
+                    highestIndex = customVar.index;
+                }
+            });
+
+            var translate = $filter('translate');
+
+            var command = './console customvariables:set-max-custom-variables ' + (highestIndex + 1);
+            var text = translate('CustomVariables_CreatingCustomVariableTakesTime');
+            text += '<br /><br />' + translate('CustomVariables_CurrentAvailableCustomVariables', '<strong>' + highestIndex + '</strong>');
+            text += '<br /><br />' + translate('CustomVariables_ToCreateCustomVarExecute');
+            text += '<br /><br /><code>' + command + '</code>';
+
+            piwik.helper.modalConfirm('<div class="ui-confirm" title="' + translate('CustomVariables_CreateNewSlot') + '">' + text + '<br /><br /></div>');
+        }
+    }
+})();
\ No newline at end of file
diff --git a/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.html b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.html
new file mode 100644
index 0000000000..8cc7c60e60
--- /dev/null
+++ b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.html
@@ -0,0 +1,41 @@
+<div class="manageCustomVars">
+    <h2 piwik-enriched-headline>{{ 'CustomVariables_CustomVariables'|translate }}</h2>
+
+    {{ 'CustomVariables_ManageDescription'|translate }}
+
+    <br />
+
+    <h3>{{ customVariables.scope }}</h3>
+    <table class="dataTable entityTable" style="max-width: 900px;">
+        <thead>
+        <tr>
+            <th>{{'CustomVariables_Scope'|translate }}</th>
+            <th>{{'CustomVariables_Index'|translate }}</th>
+            <th>{{'CustomVariables_Usages'|translate }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td colspan="3" ng-show="manageCustomVars.model.isLoading">{{ 'General_Loading'|translate }}</td>
+        </tr>
+        <tr ng-repeat="customVariables in manageCustomVars.model.customVariables">
+            <td class="scope">{{ customVariables.scope|ucfirst }}</td>
+            <td class="index">{{ customVariables.index }}</td>
+            <td>
+                <span ng-show="(customVariables.usages|length) === 0"
+                      class="unused">{{'CustomVariables_Unused'|translate }}</span>
+                <span ng-show="customVariables.usages|length" ng-repeat="cvar in customVariables.usages|orderBy:'-nb_actions'">
+                    <span title="{{ 'CustomVariables_UsageDetails'|translate:cvar.nb_visits:cvar.nb_actions }}">{{ cvar.name }}</span><span ng-show="!$last">, </span>
+                </span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+
+    <br/>
+    <a class="btn addCustomVar" ng-show="!manageCustomVars.model.isLoading" value=""
+       ng-click="manageCustomVars.createCustomVariableSlot()"
+            >{{ 'CustomVariables_CreateNewSlot'|translate }} <span class="icon-info"></span></a><br/>
+
+
+</div>
\ No newline at end of file
diff --git a/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.js b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.js
new file mode 100644
index 0000000000..1623d50b27
--- /dev/null
+++ b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.js
@@ -0,0 +1,26 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Usage:
+ * <div piwik-manage-custom-vars>
+ */
+(function () {
+    angular.module('piwikApp').directive('piwikManageCustomVars', piwikManageCustomVars);
+
+    piwikManageCustomVars.$inject = ['piwik'];
+
+    function piwikManageCustomVars(piwik){
+        return {
+            restrict: 'A',
+            scope: {},
+            templateUrl: 'plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.html?cb=' + piwik.cacheBuster,
+            controller: 'ManageCustomVarsController',
+            controllerAs: 'manageCustomVars'
+        };
+    }
+})();
\ No newline at end of file
diff --git a/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.less b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.less
new file mode 100644
index 0000000000..2d3e4e4f04
--- /dev/null
+++ b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.directive.less
@@ -0,0 +1,10 @@
+.manageCustomVars {
+    .unused {
+        color: @color-silver;
+    }
+
+    .scope, .index {
+        width: 90px;
+        max-width: 90px;
+    }
+}
\ No newline at end of file
diff --git a/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.model.js b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.model.js
new file mode 100644
index 0000000000..3cc5b3d4b2
--- /dev/null
+++ b/plugins/CustomVariables/angularjs/manage-custom-vars/manage-custom-vars.model.js
@@ -0,0 +1,36 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').factory('manageCustomVarsModel', manageCustomVarsModel);
+
+    manageCustomVarsModel.$inject = ['piwikApi'];
+
+    function manageCustomVarsModel(piwikApi) {
+
+        var model = {
+            customVariables : [],
+            extractions : [],
+            isLoading: false,
+            fetchUsages: fetchUsages
+        };
+
+        return model;
+
+        function fetchUsages() {
+
+            model.isLoading = true;
+
+            piwikApi.fetch({method: 'CustomVariables.getUsagesOfSlots'})
+                .then(function (customVariables) {
+                    model.customVariables = customVariables;
+                })['finally'](function () {    // .finally() is not IE8 compatible see https://github.com/angular/angular.js/commit/f078762d48d0d5d9796dcdf2cb0241198677582c
+                model.isLoading = false;
+            });
+        }
+
+    }
+})();
\ No newline at end of file
diff --git a/plugins/CustomVariables/lang/en.json b/plugins/CustomVariables/lang/en.json
index 7d99f97bf2..61033b2757 100644
--- a/plugins/CustomVariables/lang/en.json
+++ b/plugins/CustomVariables/lang/en.json
@@ -6,6 +6,16 @@
         "CustomVariablesReportDocumentation": "This report contains information about your Custom Variables. Click on a variable name to see the distribution of the values. %s For more information about Custom Variables in general, read the %sCustom Variables documentation on piwik.org%s",
         "PluginDescription": "Custom Variables are (name, value) pairs that you can assign using the Javascript API to visitors or any of their action. Piwik will then report how many visits, pages, conversions for each of these custom names and values. View the detailed Custom Variables for each user and action in the Visitor Log.<br />Required to use <a href=\"http://piwik.org/docs/ecommerce-analytics/\">Ecommerce Analytics</a> feature!",
         "ScopePage": "scope page",
-        "ScopeVisit": "scope visit"
+        "ScopeVisit": "scope visit",
+        "ManageDescription": "This overview shows all custom variable slots and their usages. The names within each slot are ordered by how often they were used in total.",
+        "Scope": "Scope",
+        "Index": "Index",
+        "Usages": "Usages",
+        "Unused": "Unused",
+        "CreateNewSlot": "Create a new Custom Variable slot",
+        "UsageDetails": "%s visits and %s actions since creation of this website.",
+        "CreatingCustomVariableTakesTime": "Creating a new custom variable slot can take a long time depending on the size of your database. Therefore it is only possible to do this via a command which needs to be executed on the command line.",
+        "CurrentAvailableCustomVariables": "Currently you can use up to %s Custom Variables per site.",
+        "ToCreateCustomVarExecute": "To create a new custom variable slot execute the following command within your Piwik installation: "
     }
 }
\ No newline at end of file
diff --git a/plugins/CustomVariables/templates/manage.twig b/plugins/CustomVariables/templates/manage.twig
new file mode 100644
index 0000000000..fa7a085aa9
--- /dev/null
+++ b/plugins/CustomVariables/templates/manage.twig
@@ -0,0 +1,11 @@
+{% extends 'user.twig' %}
+
+{% block topcontrols %}
+    <div class="top_bar_sites_selector piwikTopControl">
+        <div piwik-siteselector class="sites_autocomplete"></div>
+    </div>
+{% endblock %}
+
+{% block content %}
+    <div piwik-manage-custom-vars>
+{% endblock %}
\ No newline at end of file
diff --git a/plugins/CustomVariables/tests/Integration/ModelTest.php b/plugins/CustomVariables/tests/Integration/ModelTest.php
index 128e5b09ef..905a5f6a1d 100644
--- a/plugins/CustomVariables/tests/Integration/ModelTest.php
+++ b/plugins/CustomVariables/tests/Integration/ModelTest.php
@@ -19,7 +19,7 @@ use Piwik\Tests\Framework\TestCase\IntegrationTestCase;
  */
 class ModelTest extends IntegrationTestCase
 {
-    private static $cvarScopes = array('log_link_visit_action', 'log_visit', 'log_conversion');
+    private static $cvarScopes = array('page', 'visit', 'conversion');
 
     public function setUp()
     {
diff --git a/plugins/CustomVariables/tests/System/expected/test_CustomVariablesSystemTest__CustomVariables.getCustomVariables_day.xml b/plugins/CustomVariables/tests/System/expected/test_CustomVariablesSystemTest__CustomVariables.getCustomVariables_day.xml
index 3a5683bdc6..054f9b1e31 100644
--- a/plugins/CustomVariables/tests/System/expected/test_CustomVariablesSystemTest__CustomVariables.getCustomVariables_day.xml
+++ b/plugins/CustomVariables/tests/System/expected/test_CustomVariablesSystemTest__CustomVariables.getCustomVariables_day.xml
@@ -3,6 +3,12 @@
 	<row>
 		<label>Name_PAGE_1</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>1</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_1</segment>
 		<subtable>
 			<row>
@@ -15,6 +21,12 @@
 	<row>
 		<label>Name_PAGE_2</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>2</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_2</segment>
 		<subtable>
 			<row>
@@ -27,6 +39,12 @@
 	<row>
 		<label>Name_PAGE_3</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>3</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_3</segment>
 		<subtable>
 			<row>
@@ -39,6 +57,12 @@
 	<row>
 		<label>Name_PAGE_4</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>4</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_4</segment>
 		<subtable>
 			<row>
@@ -51,6 +75,12 @@
 	<row>
 		<label>Name_PAGE_5</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>5</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_5</segment>
 		<subtable>
 			<row>
@@ -63,6 +93,12 @@
 	<row>
 		<label>Name_PAGE_6</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>6</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_6</segment>
 		<subtable>
 			<row>
@@ -75,6 +111,12 @@
 	<row>
 		<label>Name_PAGE_7</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>7</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_7</segment>
 		<subtable>
 			<row>
@@ -87,6 +129,12 @@
 	<row>
 		<label>Name_PAGE_8</label>
 		<nb_actions>1</nb_actions>
+		<slots>
+			<row>
+				<scope>page</scope>
+				<index>8</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_PAGE_8</segment>
 		<subtable>
 			<row>
@@ -113,6 +161,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>1</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_1</segment>
 		<subtable>
 			<row>
@@ -152,6 +206,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>2</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_2</segment>
 		<subtable>
 			<row>
@@ -191,6 +251,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>3</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_3</segment>
 		<subtable>
 			<row>
@@ -230,6 +296,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>4</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_4</segment>
 		<subtable>
 			<row>
@@ -269,6 +341,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>5</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_5</segment>
 		<subtable>
 			<row>
@@ -308,6 +386,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>6</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_6</segment>
 		<subtable>
 			<row>
@@ -347,6 +431,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>7</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_7</segment>
 		<subtable>
 			<row>
@@ -386,6 +476,12 @@
 		</goals>
 		<nb_conversions>1</nb_conversions>
 		<revenue>0</revenue>
+		<slots>
+			<row>
+				<scope>visit</scope>
+				<index>8</index>
+			</row>
+		</slots>
 		<segment>customVariableName==Name_VISIT_8</segment>
 		<subtable>
 			<row>
diff --git a/plugins/CustomVariables/tests/UI/.gitignore b/plugins/CustomVariables/tests/UI/.gitignore
new file mode 100644
index 0000000000..f39be478e7
--- /dev/null
+++ b/plugins/CustomVariables/tests/UI/.gitignore
@@ -0,0 +1,2 @@
+/processed-ui-screenshots
+/screenshot-diffs
\ No newline at end of file
diff --git a/plugins/CustomVariables/tests/UI/CustomVariables_spec.js b/plugins/CustomVariables/tests/UI/CustomVariables_spec.js
new file mode 100644
index 0000000000..a64a1cd7ce
--- /dev/null
+++ b/plugins/CustomVariables/tests/UI/CustomVariables_spec.js
@@ -0,0 +1,31 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * Screenshot integration tests.
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+describe("CustomVariables", function () {
+    this.timeout(0);
+
+    this.fixture = "Piwik\\Plugins\\CustomVariables\\tests\\Fixtures\\VisitWithManyCustomVariables";
+
+    it('should show an overview of all used custom variables', function (done) {
+        expect.screenshot('manage').to.be.captureSelector('.pageWrap', function (page) {
+            page.load("?idSite=1&period=day&date=2010-01-03&module=CustomVariables&action=manage");
+        }, done);
+    });
+
+    it('should be visible in the menu', function (done) {
+        expect.screenshot('link_in_menu').to.be.captureSelector('li:contains(Manage)', function (page) {
+        }, done);
+    });
+
+    it('should show custom variable creation command in dialog', function (done) {
+        expect.screenshot('create').to.be.captureSelector('.ui-dialog', function (page) {
+            page.click('.manageCustomVars .addCustomVar')
+        }, done);
+    });
+});
\ No newline at end of file
diff --git a/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_create.png b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_create.png
new file mode 100644
index 0000000000..ccd46cfa9b
--- /dev/null
+++ b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_create.png
diff --git a/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_link_in_menu.png b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_link_in_menu.png
new file mode 100644
index 0000000000..95e1c7783d
--- /dev/null
+++ b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_link_in_menu.png
diff --git a/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_manage.png b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_manage.png
new file mode 100644
index 0000000000..c520cde1bf
--- /dev/null
+++ b/plugins/CustomVariables/tests/UI/expected-ui-screenshots/CustomVariables_manage.png